120 lines
3.5 KiB
HTML
120 lines
3.5 KiB
HTML
<section>
|
|
<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
|
|
#registerForm="ngForm"
|
|
(ngSubmit)="onSubmit(registerForm)"
|
|
onsubmit="return false"
|
|
(input)="this.errorService.clearError()"
|
|
>
|
|
<input
|
|
type="mail"
|
|
id="mail"
|
|
name="mail"
|
|
#mail="ngModel"
|
|
placeholder="Email Address"
|
|
autocomplete="email"
|
|
[(ngModel)]="authData.mail"
|
|
[class.error-border]="
|
|
(!mail.valid && mail.touched) ||
|
|
(mail.touched &&
|
|
!isUserEmailValid(authData.mail.toLowerCase()) &&
|
|
authData.mail.length > 0)
|
|
"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if (!mail.valid && mail.touched) {
|
|
<p>Please enter your email</p>
|
|
} @else { @if (mail.touched && authData.mail.length > 0 &&
|
|
!isUserEmailValid(authData.mail.toLowerCase())) {
|
|
<p>This is not a valid email format</p>
|
|
}} @if ((errorService.error$ | async)) {
|
|
<p>{{ errorService.error$ | async }}</p>
|
|
}
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
#password="ngModel"
|
|
placeholder="Enter a password"
|
|
autocomplete="new-password"
|
|
[(ngModel)]="authData.password"
|
|
pattern="[^<>]*"
|
|
minlength="6"
|
|
[class.error-border]="
|
|
password.invalid && password.touched && authData.password.length < 6
|
|
"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if (!password.valid && password.touched && authData.password.length <
|
|
1) {
|
|
<p>Please enter a password</p>
|
|
} @else { @if (authData.password && authData.password.length < 6 &&
|
|
password.touched) {
|
|
<p>Password is too short, min 6 characters</p>
|
|
} }
|
|
</div>
|
|
<input
|
|
type="password"
|
|
id="passwordConfirm"
|
|
name="passwordConfirm"
|
|
#passwordConfirm="ngModel"
|
|
placeholder="Confirm password"
|
|
autocomplete="new-password"
|
|
[(ngModel)]="authData.passwordConfirm"
|
|
pattern="[^<>]*"
|
|
minlength="6"
|
|
[class.error-border]="
|
|
authData.password !== authData.passwordConfirm &&
|
|
passwordConfirm.touched
|
|
"
|
|
required
|
|
/>
|
|
<div class="error-msg">
|
|
@if (authData.password !== authData.passwordConfirm &&
|
|
passwordConfirm.touched) {
|
|
<p>The passwords do not match</p>
|
|
}
|
|
</div>
|
|
<div class="checkbox">
|
|
<label class="container"
|
|
>I agree to the
|
|
<a routerLink="/privacy-policy" target="_blank">Privacy policy</a>.
|
|
<input
|
|
type="checkbox"
|
|
id="checkbox"
|
|
name="checkbox"
|
|
#checkbox
|
|
[(ngModel)]="authData.privacyPolicy"
|
|
/>
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
<app-btn-large
|
|
[value]="'Get Started'"
|
|
[disabled]="
|
|
(!isUserEmailValid(authData.mail) &&
|
|
authData.mail &&
|
|
authData.mail.length > 0) ||
|
|
authData.password !== authData.passwordConfirm ||
|
|
!authData.password ||
|
|
!authData.passwordConfirm ||
|
|
!authData.privacyPolicy
|
|
"
|
|
></app-btn-large>
|
|
</form>
|
|
}
|
|
</div>
|
|
</section>
|