Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 288x 1x 1x 288x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 288x 1x 68x 1x 1x 1x 1x 68x 1x 1x 1x 1x 68x 1x 1x 1x 1x 68x 1x 1x 1x 1x 68x 1x 1x 1x 1x 1x 288x 1x | <section class="hero is-fullheight background">
<div class="hero-body blur">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<div class="box">
<div class="has-text-centered">
<img class="login-logo" src='{{ companyLogo }}' alt="company logo">
<h1 class="title is-4">Create an account</h1>
<p class="description"></p>
<form [formGroup]="registerForm">
<div class="field">
<label class="label" htmlFor="email">Email</label>
<div class="control has-icons-right">
<input class="input" formControlName="email" type="email" id="email">
<span class="icon is-small is-right">
<i class="fa fa-user"></i>
</span>
</div>
</div>
<div class="field">
<label class="label" htmlFor="firstname">Firstname</label>
<div class="control has-icons-right">
<input class="input" formControlName="firstname" type="text" id="firstname">
<span class="icon is-small is-right">
<i class="fa fa-user"></i>
</span>
</div>
</div>
<div class="field">
<label class="label" htmlFor="lastname">Lastname</label>
<div class="control has-icons-right">
<input class="input" formControlName="lastname" type="text" id="lastname">
<span class="icon is-small is-right">
<i class="fa fa-user"></i>
</span>
</div>
</div>
<div class="field">
<label class="label" htmlFor="password">Password</label>
<div class="control has-icons-right">
<input class="input" type="password" id="password" formControlName="password">
@if (passwordFromField?.dirty) {
<div>
<span class="blocks"
[ngClass]="passwordFromField?.value?.match('^(?=.*[A-Z])') ? 'text-green' : 'text-red'">
At least one uppercase letter.
</span>
<br>
<span class="block"
[ngClass]="passwordFromField?.value?.match('(?=.*[a-z])') ? 'text-green' : 'text-red'">
At least one lowercase letter.
</span>
<br>
<span class="block"
[ngClass]="passwordFromField?.value?.match('(.*[0-9].*)') ? 'text-green' : 'text-red'">
At least one digit.
</span>
<br>
<span class="block"
[ngClass]="passwordFromField?.value?.match('(?=.*[!@#$%^&-_~*])') ? 'text-green' : 'text-red'">
At least one special character.
</span>
<br>
<span class="block"
[ngClass]="passwordFromField?.value?.match('.{10,}') ? 'text-green' : 'text-red'">
At least 10 characters long.
</span>
</div>
}
<span class="icon is-small is-right">
<i class="fa fa-key"></i>
</span>
</div>
</div>
<button (click)="register()" class="button is-rounded has-text-centered" [disabled]="registerForm.invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
|