Lala, Shahd
43 lines
1.9 KiB
HTML
43 lines
1.9 KiB
HTML
<div class="dialog-overlay" (click)="closeDialog()">
|
|
<div class="dialog-card" (click)="$event.stopPropagation()">
|
|
<div class="dialog-title">CREATE ACCOUNT</div>
|
|
|
|
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
|
|
<input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
|
|
[disabled]="isLoading" />
|
|
@if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
|
|
<small class="text-danger">Username must be at least 3 characters</small>
|
|
}
|
|
|
|
<input id="email" type="email" class="dialog-input" formControlName="email" placeholder="Email"
|
|
[disabled]="isLoading" />
|
|
@if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
|
|
<small class="text-danger">Please enter a valid email</small>
|
|
}
|
|
|
|
<input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
|
|
[disabled]="isLoading" />
|
|
@if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
|
|
<small class="text-danger">Password must be at least 6 characters</small>
|
|
}
|
|
|
|
<input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
|
|
placeholder="Confirm Password" [disabled]="isLoading" />
|
|
|
|
@if (errorMessage) {
|
|
<div class="error-banner">{{ errorMessage }}</div>
|
|
}
|
|
|
|
<div class="dialog-actions">
|
|
<button type="button" class="app-btn" (click)="openLogin()">Already have an account?</button>
|
|
<button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
|
|
<button type="submit" class="app-btn" [disabled]="isLoading || registerForm.invalid">
|
|
@if (isLoading) {
|
|
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
|
}
|
|
Register
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> |