blob: 84f15e49dcdb3f4aa1620a05ce7ce77f468d55e2 (
plain) (
blame)
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
|
<div id="box">
<h1>Create an account</h1>
<div>
<input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
<span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
</div>
<div>
<div>
<input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
<progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="5"> </progress>
<span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
</div>
<div id="passReq">
<span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span>
</div>
</div>
<div>
<input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
<span [style.color]="(passwordsMatch|async) ? 'green' : 'red'" *ngIf="passwordsMatch"><span class="icon">{{(passwordsMatch|async)?"check":"close"}}</span> Passwords match</span>
</div>
<div>
<button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
</div>
<span>Already have an account? <a routerLink="/login">Log in</a></span>
</div>
|
