65 lines
2.6 KiB
HTML
65 lines
2.6 KiB
HTML
<div class="container">
|
|
<mat-card class="register-card">
|
|
<mat-card-header>
|
|
<mat-card-title>Register</mat-card-title>
|
|
</mat-card-header>
|
|
|
|
<mat-card-content>
|
|
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
|
|
<mat-form-field class="full-width">
|
|
<mat-label>Email</mat-label>
|
|
<input matInput type="email" formControlName="email" required>
|
|
<mat-error *ngIf="registerForm.get('email')?.hasError('required')">
|
|
Email is required
|
|
</mat-error>
|
|
<mat-error *ngIf="registerForm.get('email')?.hasError('email')">
|
|
Please enter a valid email address
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="full-width">
|
|
<mat-label>Password</mat-label>
|
|
<input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" required>
|
|
<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword">
|
|
<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
|
|
</button>
|
|
<mat-error *ngIf="registerForm.get('password')?.hasError('required')">
|
|
Password is required
|
|
</mat-error>
|
|
<mat-error *ngIf="registerForm.get('password')?.hasError('minlength')">
|
|
Password must be at least 6 characters long
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="full-width">
|
|
<mat-label>Confirm Password</mat-label>
|
|
<input matInput [type]="hideConfirmPassword ? 'password' : 'text'" formControlName="confirmPassword" required>
|
|
<button mat-icon-button matSuffix (click)="hideConfirmPassword = !hideConfirmPassword">
|
|
<mat-icon>{{hideConfirmPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
|
|
</button>
|
|
<mat-error *ngIf="registerForm.get('confirmPassword')?.hasError('required')">
|
|
Please confirm your password
|
|
</mat-error>
|
|
<mat-error *ngIf="registerForm.hasError('passwordMismatch')">
|
|
Passwords do not match
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<div class="form-actions">
|
|
<button mat-raised-button color="primary" type="submit" [disabled]="registerForm.invalid || isLoading">
|
|
<mat-spinner diameter="20" *ngIf="isLoading"></mat-spinner>
|
|
<span *ngIf="!isLoading">Register</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
|
|
<mat-card-actions>
|
|
<div class="text-center">
|
|
<span>Already have an account? </span>
|
|
<a mat-button color="accent" routerLink="/login">Login</a>
|
|
</div>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
</div>
|