diff options
Diffstat (limited to 'ufund-ui/src')
4 files changed, 49 insertions, 44 deletions
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html index 2cdb6d0..a6441f4 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -3,5 +3,5 @@ <input placeholder="Username" type="text" #username> <input placeholder="Password" type="password" #password> <button type="button" (click)="login(username.value, password.value)">Login</button> -<button type="button" (click)="signup(username.value, password.value)">Create Account</button> +<button type="button" routerLink="/signup">Create Account...</button> <span *ngIf="statusText">{{statusText | async}}</span> diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 2fa5051..f286cf9 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -1,8 +1,13 @@ -:host, .border { +:host { display: flex; flex-direction: column; max-width: 300px; - gap: 5px + gap: 10px; + + & > div { + display: flex; + flex-direction: column; + } } .border { @@ -20,7 +25,7 @@ width: 100%; appearance: none; overflow: hidden; - margin-top: -5px; + /*margin-top: -5px;*/ } #bar::-webkit-progress-bar { diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html index e282a9c..ebedc2a 100644 --- a/ufund-ui/src/app/components/signup/signup.component.html +++ b/ufund-ui/src/app/components/signup/signup.component.html @@ -1,21 +1,26 @@ <p>Signup:</p> -<input placeholder="Username" type="text" (input)="comparePassword(username.value, confirmPass.value, password.value)" #username> -<span id="usernameStatusText" *ngIf="usernameStatusText">{{usernameStatusText | async}}</span> - -<input placeholder="Password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #password> - -<progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6"> </progress> - -<span id="statusText" *ngIf="statusText">{{statusText | async}}</span> - -<span *ngFor="let requirement of Object.values(passwordRequirements)"> - <span id="requirement" *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span> -</span> - -<input placeholder="Confirm password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #confirmPass> - -<span id="passwordStatusText" *ngIf="passwordStatusText">{{passwordStatusText | async}}</span> - -<button type="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> +<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> + + <span *ngFor="let requirement of Object.values(passwordRequirements)"> + <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span> + </span> +</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> + <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> diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts index 60f4098..3b43287 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -4,12 +4,12 @@ import {Router} from '@angular/router'; import {BehaviorSubject} from 'rxjs'; class PasswordRequirements { - sixLong: {title: string, value: boolean} = {title: '❌ Is 6 characters or longer', value: false} - twelveLong: {title: string, value: boolean} = {title: '❌ Is 12 characters or longer', value: false} - lowercase: {title: string, value: boolean} = {title: '❌ Includes lowercase letter', value: false} - uppercase: {title: string, value: boolean} = {title: '❌ Includes uppercase letter', value: false} - number: {title: string, value: boolean} = {title: '❌ Includes number' , value: false} - symbol: {title: string, value: boolean} = {title: '❌ Includes symbol' , value: false} + sixLong: {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false} + twelveLong: {title: string, value: boolean} = {title: 'Is 12 characters or longer', value: false} + lowercase: {title: string, value: boolean} = {title: 'Includes lowercase letter' , value: false} + uppercase: {title: string, value: boolean} = {title: 'Includes uppercase letter' , value: false} + number: {title: string, value: boolean} = {title: 'Includes number' , value: false} + symbol: {title: string, value: boolean} = {title: 'Includes symbol' , value: false} } @Component({ @@ -21,14 +21,15 @@ class PasswordRequirements { export class SignupComponent { - protected statusText = new BehaviorSubject("") protected passwordStatusText = new BehaviorSubject("") + protected confirmPassStatusText = new BehaviorSubject("") protected usernameStatusText = new BehaviorSubject("") protected showSuccessMessage = new BehaviorSubject(false) protected passwordStrongEnough = new BehaviorSubject(false) protected ableToCreateAccount = new BehaviorSubject(false) protected passwordRequirements: PasswordRequirements = new PasswordRequirements() protected strength = new BehaviorSubject(0) + protected statusText = new BehaviorSubject(""); constructor( protected usersService: UsersService, @@ -49,8 +50,8 @@ export class SignupComponent { }) } - comparePassword(username: string, passConfirm:string, password: string) { - this.passwordStatusText.next("") + validate(username: string, passConfirm:string, password: string) { + this.confirmPassStatusText.next("") this.usernameStatusText.next("") this.checkPasswordStrength(password); @@ -59,7 +60,7 @@ export class SignupComponent { } if (!(password === passConfirm) && !!passConfirm) { - this.passwordStatusText.next("Passwords don't match") + this.confirmPassStatusText.next("Passwords don't match") } this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username) } @@ -70,33 +71,27 @@ export class SignupComponent { this.passwordStrongEnough.next(false) if (password.match(/[^!-~]/g)) { - this.statusText.next("Invalid characters") + this.passwordStatusText.next("Invalid characters") return } if (password.length > 6) { - this.passwordRequirements.sixLong.title = '✅ Is 6 characters or longer' this.passwordRequirements.sixLong.value = true } if (password.length > 12) { - this.passwordRequirements.twelveLong.title = '✅ Is 12 characters or longer' this.passwordRequirements.twelveLong.value = true } if (password.match(/[a-z]/g)) { - this.passwordRequirements.lowercase.title = '✅ Includes lowercase letter' this.passwordRequirements.lowercase.value = true } if (password.match(/[A-Z]/g)) { - this.passwordRequirements.uppercase.title = '✅ Includes uppercase letter' this.passwordRequirements.uppercase.value = true } if (password.match(/[0-9]/g)) { - this.passwordRequirements.number.title = '✅ Includes number' this.passwordRequirements.number.value = true } if (password.match(/[^A-Za-z0-9]/g)) { - this.passwordRequirements.symbol.title = '✅ Includes symbol' this.passwordRequirements.symbol.value = true } @@ -107,11 +102,11 @@ export class SignupComponent { if (strength >= 5) { this.passwordStrongEnough.next(true) - this.statusText.next("") + this.passwordStatusText.next("") } else if (strength == 0) { - this.statusText.next("") + this.passwordStatusText.next("") } else { - this.statusText.next("Password does not meet requirements") + this.passwordStatusText.next("Password does not meet requirements") } this.strength.next(strength) |