diff options
Diffstat (limited to 'ufund-ui/src/app/components/signup')
3 files changed, 61 insertions, 28 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..a20d828 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -2,6 +2,7 @@ import {Component} from '@angular/core'; import {UsersService} from '../../services/users.service'; import {Router} from '@angular/router'; import {BehaviorSubject} from 'rxjs'; +import {ToastsService, ToastType} from '../../services/toasts.service'; class PasswordRequirements { sixLong: {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false} @@ -22,7 +23,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) @@ -34,6 +35,7 @@ export class SignupComponent { constructor( protected usersService: UsersService, protected router: Router, + protected toastService: ToastsService ) {} signup(username: string | null, password: string | null) { @@ -45,13 +47,13 @@ export class SignupComponent { this.usersService.createUser(username, password).then(() => { this.showSuccessMessage.next(true); }).catch(ex => { - this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status]) + this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status]) console.log(ex) }) } validate(username: string, passConfirm:string, password: string) { - this.confirmPassStatusText.next("") + this.passwordsMatch.next(false) this.usernameStatusText.next("") this.checkPasswordStrength(password); @@ -59,8 +61,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 +108,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) |