136 lines
4.2 KiB
HTML
136 lines
4.2 KiB
HTML
<section class="register-background">
|
|
<div class="content">
|
|
<div class="headline">Sign Up</div>
|
|
@if (registrationSuccess) {
|
|
<div class="note">
|
|
<p>
|
|
Please check your email to confirm your email address and complete the
|
|
registration process.
|
|
</p>
|
|
<a routerLink="/login">To the login</a>
|
|
</div>
|
|
} @else {
|
|
|
|
<form
|
|
[formGroup]="form"
|
|
(ngSubmit)="onSubmit()"
|
|
(input)="this.errorService.clearError()"
|
|
>
|
|
<div class="email-field">
|
|
<input
|
|
formControlName="email"
|
|
type="email"
|
|
id="email"
|
|
placeholder="Email Address"
|
|
autocomplete="email"
|
|
[class.error-border]="
|
|
form.controls['email'].invalid && form.controls['email'].touched
|
|
"
|
|
/>
|
|
<img class="email-icon" src="./assets/img/email.svg" />
|
|
</div>
|
|
|
|
<div class="error-container">
|
|
@if (form.controls['email'].touched && form.controls['email'].invalid) {
|
|
<div class="error-msg">
|
|
@if (form.controls['email'].errors?.['required']) {
|
|
<p role="alert">Please enter your email</p>
|
|
} @if (form.controls['email'].errors?.['invalidEmailFormat']) {
|
|
<p role="alert">This is not a valid email format</p>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="password-field">
|
|
<input
|
|
[type]="authService.passwordFieldType"
|
|
id="password"
|
|
formControlName="password"
|
|
placeholder="Enter a password"
|
|
autocomplete="new-password"
|
|
minlength="8"
|
|
[class.error-border]="
|
|
form.controls['password'].invalid &&
|
|
form.controls['password'].touched
|
|
"
|
|
/>
|
|
<img class="password-icon" src="./assets/img/password.svg" />
|
|
<img
|
|
class="password-eye"
|
|
(click)="authService.togglePasswordVisibility()"
|
|
[src]="authService.passwordIcon"
|
|
/>
|
|
</div>
|
|
|
|
<div class="error-container">
|
|
@if (form.controls['password'].touched &&
|
|
form.controls['password'].invalid) {
|
|
<div class="error-msg">
|
|
@if (form.controls['password'].errors?.['required']) {
|
|
<p role="alert">Please enter a password</p>
|
|
} @if (form.controls['password'].errors?.['minlength']) {
|
|
<p role="alert">Password is too short, min 8 characters</p>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="password-field">
|
|
<input
|
|
[type]="authService.passwordFieldType"
|
|
id="passwordConfirm"
|
|
formControlName="passwordConfirm"
|
|
placeholder="Confirm password"
|
|
autocomplete="new-password"
|
|
minlength="8"
|
|
[class.error-border]="
|
|
form.controls['passwordConfirm'].invalid &&
|
|
form.controls['passwordConfirm'].touched
|
|
"
|
|
/>
|
|
<img class="password-icon" src="./assets/img/password.svg" />
|
|
<img
|
|
class="password-eye"
|
|
(click)="authService.togglePasswordVisibility()"
|
|
[src]="authService.passwordIcon"
|
|
/>
|
|
</div>
|
|
|
|
<div class="error-container">
|
|
@if ( form.controls['passwordConfirm'].touched &&
|
|
form.controls['passwordConfirm'].invalid ) {
|
|
<div class="error-msg">
|
|
@if (form.controls['passwordConfirm'].errors?.['required']) {
|
|
<p role="alert">Please confirm your password</p>
|
|
} @if ( form.controls['password'].value !==
|
|
form.controls['passwordConfirm'].value &&
|
|
form.controls['passwordConfirm'].touched ) {
|
|
<p role="alert">The passwords do not match</p>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label class="container">
|
|
I agree to the
|
|
<a routerLink="/privacy-policy">Privacy policy</a>.
|
|
<input
|
|
id="checkbox"
|
|
name="checkbox"
|
|
type="checkbox"
|
|
formControlName="privacyPolicy"
|
|
/>
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<app-btn-large
|
|
[value]="'Get Started'"
|
|
[disabled]="form.invalid"
|
|
></app-btn-large>
|
|
</form>
|
|
}
|
|
</div>
|
|
</section>
|