Skip to content

Commit 125ece7

Browse files
h7mlh7ml
committed
feat: 实现默认关闭注册功能
- 添加 NG_APP_ENABLE_REGISTRATION 环境变量配置 - register.page.ts 实现条件渲染逻辑 - 完整的注册关闭 UI（Angular 模板语法） - 新增 spin-slow 动画（20秒旋转） - 更新 environment.ts 和类型定义 - 响应式设计 + 暗色模式
1 parent 48f9c66 commit 125ece7

4 files changed

Lines changed: 105 additions & 7 deletions

File tree

‎src/app/features/auth/register/register.page.ts‎

Lines changed: 100 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
CardFooterComponent,
1616
SeparatorComponent,
1717
} from '../../../shared/components/ui';
18+
import { environment } from '../../../../environments/environment';
1819

1920
@Component({
2021
selector: 'app-register-page',
@@ -100,6 +101,75 @@ import {
100101
</ui-card-header>
101102
102103
<ui-card-content class="space-y-3 sm:space-y-4 px-4 sm:px-6">
104+
@if (!registrationEnabled) {
105+
<!-- 注册关闭 UI -->
106+
<div class="space-y-6 py-6">
107+
<!-- 主要图标和标题 -->
108+
<div class="flex flex-col items-center justify-center space-y-4">
109+
<div class="relative">
110+
<div class="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-orange-100 dark:from-amber-900/30 dark:to-orange-900/30">
111+
<svg class="h-10 w-10 text-amber-600 dark:text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
112+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
113+
</svg>
114+
</div>
115+
<div class="absolute -inset-2 rounded-full border-2 border-dashed border-amber-300/50 dark:border-amber-700/50 animate-spin-slow"></div>
116+
</div>
117+
118+
<div class="space-y-2 text-center">
119+
<h3 class="text-xl font-semibold text-foreground sm:text-2xl">
120+
注册已关闭
121+
</h3>
122+
<p class="max-w-sm text-sm text-muted-foreground">
123+
系统管理员已暂时关闭新用户注册功能
124+
</p>
125+
</div>
126+
</div>
127+
128+
<!-- 信息卡片 -->
129+
<div class="space-y-3">
130+
<div class="flex items-start gap-3 rounded-lg border border-border/50 bg-muted/50 p-4 backdrop-blur-sm transition-colors hover:border-primary/20 hover:bg-muted/80">
131+
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
132+
<svg class="h-4 w-4 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
133+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
134+
</svg>
135+
</div>
136+
<div class="flex-1 space-y-1">
137+
<p class="text-sm font-medium text-foreground">联系管理员</p>
138+
<p class="text-xs text-muted-foreground">
139+
如需创建账号，请通过邮件联系系统管理员
140+
</p>
141+
</div>
142+
</div>
143+
144+
<div class="flex items-start gap-3 rounded-lg border border-border/50 bg-muted/50 p-4 backdrop-blur-sm transition-colors hover:border-primary/20 hover:bg-muted/80">
145+
<div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/30">
146+
<svg class="h-4 w-4 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
147+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
148+
</svg>
149+
</div>
150+
<div class="flex-1 space-y-1">
151+
<p class="text-sm font-medium text-foreground">已有账号？</p>
152+
<p class="text-xs text-muted-foreground">
153+
如果您已有账号，请直接登录使用系统功能
154+
</p>
155+
</div>
156+
</div>
157+
</div>
158+
159+
<!-- 装饰性分隔线 -->
160+
<div class="relative">
161+
<div class="absolute inset-0 flex items-center">
162+
<div class="w-full border-t border-border/50"></div>
163+
</div>
164+
<div class="relative flex justify-center">
165+
<span class="bg-card px-4 text-xs text-muted-foreground">
166+
感谢您的理解
167+
</span>
168+
</div>
169+
</div>
170+
</div>
171+
} @else {
172+
<!-- 正常注册表单 -->
103173
<!-- 社交登录按钮 -->
104174
<div class="grid grid-cols-3 gap-2 sm:gap-3">
105175
@for (provider of socialProviders; track provider.name) {
@@ -269,16 +339,31 @@ import {
269339
}
270340
</ui-button>
271341
</form>
342+
}
272343
</ui-card-content>
273344
274345
<ui-card-footer class="flex-col space-y-3 sm:space-y-4 px-4 sm:px-6 pb-5 sm:pb-8 pt-2">
275-
<ui-separator />
276-
<p class="text-xs sm:text-sm text-muted-foreground text-center">
277-
已有账户？
278-
<a routerLink="/auth/login" class="text-primary hover:text-primary/80 font-semibold transition-colors">
279-
立即登录
280-
</a>
281-
</p>
346+
@if (registrationEnabled) {
347+
<ui-separator />
348+
<p class="text-xs sm:text-sm text-muted-foreground text-center">
349+
已有账户？
350+
<a routerLink="/auth/login" class="text-primary hover:text-primary/80 font-semibold transition-colors">
351+
立即登录
352+
</a>
353+
</p>
354+
} @else {
355+
<div class="w-full space-y-3">
356+
<a routerLink="/auth/login" class="block w-full">
357+
<ui-button
358+
variant="default"
359+
class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 font-medium shadow-lg shadow-blue-500/30 transition-all hover:shadow-xl hover:shadow-blue-500/40"
360+
>
361+
<span>← 返回登录</span>
362+
</ui-button>
363+
</a>
364+
<p class="text-center text-xs text-muted-foreground">使用现有账号登录系统</p>
365+
</div>
366+
}
282367
</ui-card-footer>
283368
</ui-card>
284369
</div>
@@ -299,16 +384,24 @@ import {
299384
25% { transform: translateX(-5px); }
300385
75% { transform: translateX(5px); }
301386
}
387+
@keyframes spin-slow {
388+
from { transform: rotate(0deg); }
389+
to { transform: rotate(360deg); }
390+
}
302391
:host ::ng-deep .animate-fade-in-up { animation: fade-in-up 0.8s ease-out; }
303392
:host ::ng-deep .animate-wave { animation: wave 2s ease-in-out infinite; }
304393
:host ::ng-deep .animate-shake { animation: shake 0.3s ease-in-out; }
394+
:host ::ng-deep .animate-spin-slow { animation: spin-slow 20s linear infinite; }
305395
`],
306396
})
307397
export class RegisterPage {
308398
private readonly auth = inject(AuthService);
309399
private readonly router = inject(Router);
310400
private readonly sanitizer = inject(DomSanitizer);
311401

402+
// 读取注册开关配置（默认关闭）
403+
readonly registrationEnabled = environment.enableRegistration;
404+
312405
// 表单状态
313406
name = signal('');
314407
email = signal('');

‎src/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ interface ImportMetaEnv {
66
readonly NG_APP_SHOW_DEMO_HINT: string;
77
readonly NG_APP_TITLE: string;
88
readonly NG_APP_BRAND_NAME: string;
9+
readonly NG_APP_ENABLE_REGISTRATION: string;
910
readonly NODE_ENV: string;
1011
}
1112

‎src/environments/environment.prod.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,6 @@ export const environment = {
99
// 应用配置
1010
appTitle: import.meta.env.NG_APP_TITLE || 'Admin Pro',
1111
brandName: import.meta.env.NG_APP_BRAND_NAME || 'Halolight',
12+
// 注册开关（默认关闭）
13+
enableRegistration: import.meta.env.NG_APP_ENABLE_REGISTRATION === 'true',
1214
};

‎src/environments/environment.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,6 @@ export const environment = {
99
// 应用配置
1010
appTitle: import.meta.env.NG_APP_TITLE || 'Admin Pro',
1111
brandName: import.meta.env.NG_APP_BRAND_NAME || 'Halolight',
12+
// 注册开关（默认关闭）
13+
enableRegistration: import.meta.env.NG_APP_ENABLE_REGISTRATION === 'true',
1214
};

0 commit comments

Comments
 (0)