109 lines
3.3 KiB
HTML
109 lines
3.3 KiB
HTML
<div class="h-full grid place-items-center overflow-y-auto bg-background p-4">
|
|
<div class="w-full max-w-[380px] bg-card border border-border rounded-xl p-6 shadow-sm">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<ng-icon
|
|
name="lucideUserPlus"
|
|
class="w-5 h-5 text-primary"
|
|
/>
|
|
<h1 class="text-lg font-semibold text-foreground">
|
|
@if (isAuthorizeMode()) {
|
|
{{ 'auth.authorize.registerTitle' | translate: { serverName: authorizeServerName() } }}
|
|
} @else {
|
|
{{ 'auth.register.title' | translate }}
|
|
}
|
|
</h1>
|
|
</div>
|
|
|
|
@if (isAuthorizeMode()) {
|
|
<p class="text-xs text-muted-foreground mb-4">{{ 'auth.authorize.description' | translate }}</p>
|
|
}
|
|
|
|
<form
|
|
class="space-y-3"
|
|
(ngSubmit)="submit()"
|
|
>
|
|
<div>
|
|
<label
|
|
for="register-username"
|
|
class="block text-xs text-muted-foreground mb-1"
|
|
>{{ 'auth.register.username' | translate }}</label
|
|
>
|
|
<input
|
|
[(ngModel)]="username"
|
|
type="text"
|
|
id="register-username"
|
|
name="username"
|
|
appAutoFocus
|
|
appSelectOnFocus
|
|
class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="register-display-name"
|
|
class="block text-xs text-muted-foreground mb-1"
|
|
>{{ 'auth.register.displayName' | translate }}</label
|
|
>
|
|
<input
|
|
[(ngModel)]="displayName"
|
|
type="text"
|
|
id="register-display-name"
|
|
name="displayName"
|
|
appSelectOnFocus
|
|
class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="register-password"
|
|
class="block text-xs text-muted-foreground mb-1"
|
|
>{{ 'auth.register.password' | translate }}</label
|
|
>
|
|
<input
|
|
[(ngModel)]="password"
|
|
type="password"
|
|
id="register-password"
|
|
name="password"
|
|
class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="register-server"
|
|
class="block text-xs text-muted-foreground mb-1"
|
|
>{{ 'auth.register.serverApp' | translate }}</label
|
|
>
|
|
<select
|
|
[(ngModel)]="serverId"
|
|
id="register-server"
|
|
name="serverId"
|
|
class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
|
|
>
|
|
@for (s of servers(); track s.id) {
|
|
<option [value]="s.id">{{ s.name }}</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
@if (error()) {
|
|
<p class="text-xs text-destructive">{{ error() }}</p>
|
|
}
|
|
<button
|
|
type="submit"
|
|
class="w-full px-3 py-2 rounded bg-primary text-primary-foreground hover:bg-primary/90"
|
|
>
|
|
{{ 'auth.register.submit' | translate }}
|
|
</button>
|
|
</form>
|
|
<div class="text-xs text-muted-foreground text-center mt-2">
|
|
{{ 'auth.register.haveAccount' | translate }}
|
|
<button
|
|
type="button"
|
|
(click)="goLogin()"
|
|
class="text-primary hover:underline"
|
|
>
|
|
{{ 'auth.register.loginLink' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|