Clean up signup component

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)