shosho996
95eff42dfe
Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #8
66 lines
2.8 KiB
HTML
66 lines
2.8 KiB
HTML
<div class="dialog-overlay" (click)="closeDialog()">
|
||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||
<div class="dialog-head">
|
||
<span class="brand-tag">NowChess // Register</span>
|
||
<button type="button" class="close-btn" (click)="closeDialog()" aria-label="Close">×</button>
|
||
</div>
|
||
|
||
<h2 class="dialog-title">Create account</h2>
|
||
<div class="dialog-subtitle">Join the board and start playing</div>
|
||
|
||
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
|
||
<div class="field">
|
||
<label for="username" class="field-label">Username</label>
|
||
<input id="username" type="text" class="dialog-input" formControlName="username"
|
||
placeholder="your_handle" autocomplete="username" />
|
||
@if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
|
||
<small class="text-danger">Username must be at least 3 characters</small>
|
||
}
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="email" class="field-label">Email</label>
|
||
<input id="email" type="email" class="dialog-input" formControlName="email"
|
||
placeholder="you@domain.com" autocomplete="email" />
|
||
@if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
|
||
<small class="text-danger">Please enter a valid email</small>
|
||
}
|
||
</div>
|
||
|
||
<div class="field-row">
|
||
<div class="field">
|
||
<label for="password" class="field-label">Password</label>
|
||
<input id="password" type="password" class="dialog-input" formControlName="password"
|
||
placeholder="••••••••" autocomplete="new-password" />
|
||
@if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
|
||
<small class="text-danger">Min 6 characters</small>
|
||
}
|
||
</div>
|
||
<div class="field">
|
||
<label for="confirmPassword" class="field-label">Confirm</label>
|
||
<input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
|
||
placeholder="••••••••" autocomplete="new-password" />
|
||
</div>
|
||
</div>
|
||
|
||
@if (errorMessage) {
|
||
<div class="error-banner">{{ errorMessage }}</div>
|
||
}
|
||
|
||
<div class="dialog-actions">
|
||
<button type="button" class="btn btn-ghost" (click)="closeDialog()">Cancel</button>
|
||
<button type="submit" class="btn btn-primary" [disabled]="isLoading || registerForm.invalid">
|
||
@if (isLoading) {
|
||
<span class="spinner" aria-hidden="true"></span>
|
||
}
|
||
{{ isLoading ? 'Creating…' : 'Create account' }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="alt-line">
|
||
Already have an account?<a (click)="openLogin()">Sign in</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|