diff options
Diffstat (limited to '')
3 files changed, 58 insertions, 27 deletions
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index f286cf9..429bc42 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -1,7 +1,16 @@ :host { display: flex; + align-items: center; + justify-content: center; + height: 100%; + margin-top: -66px + +} + +#box { + display: flex; flex-direction: column; - max-width: 300px; + /*max-width: 300px;*/ gap: 10px; & > div { @@ -45,3 +54,20 @@ color: red; } +#passReq { + display: flex; + flex-direction: column; +} + +#box > div { + display: flex; + flex-direction: row; + align-items: start; + gap: 20px; + + div { + display: flex; + flex-direction: column; + } +} + diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html index ebedc2a..bc3aaf0 100644 --- a/ufund-ui/src/app/components/signup/signup.component.html +++ b/ufund-ui/src/app/components/signup/signup.component.html @@ -1,26 +1,31 @@ -<p>Signup:</p> -<div> - <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username> - <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span> -</div> +<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> - <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="6"> </progress> - <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span> + <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="6"> </progress> + <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span> + </div> - <span *ngFor="let requirement of Object.values(passwordRequirements)"> - <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span> - </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 *ngIf="confirmPassStatusText">{{confirmPassStatusText | async}}</span> -</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> - <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span> - <span *ngIf="statusText | async">{{statusText | async}}</span> + <div> + <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button> + <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span> + <span *ngIf="statusText | async">{{statusText | async}}</span> + </div> + <span>Already have an account? <a routerLink="/login">Log in</a></span> </div> diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts index 3b43287..1ab863d 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -22,7 +22,7 @@ class PasswordRequirements { export class SignupComponent { protected passwordStatusText = new BehaviorSubject("") - protected confirmPassStatusText = new BehaviorSubject("") + protected passwordsMatch = new BehaviorSubject(false) protected usernameStatusText = new BehaviorSubject("") protected showSuccessMessage = new BehaviorSubject(false) protected passwordStrongEnough = new BehaviorSubject(false) @@ -51,7 +51,7 @@ export class SignupComponent { } validate(username: string, passConfirm:string, password: string) { - this.confirmPassStatusText.next("") + this.passwordsMatch.next(false) this.usernameStatusText.next("") this.checkPasswordStrength(password); @@ -59,8 +59,8 @@ export class SignupComponent { this.usernameStatusText.next("Username field can't be blank") } - if (!(password === passConfirm) && !!passConfirm) { - this.confirmPassStatusText.next("Passwords don't match") + if (passConfirm && password === passConfirm) { + this.passwordsMatch.next(true) } this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username) } @@ -106,7 +106,7 @@ export class SignupComponent { } else if (strength == 0) { this.passwordStatusText.next("") } else { - this.passwordStatusText.next("Password does not meet requirements") + this.passwordStatusText.next("5/6 checks required") } this.strength.next(strength) |