2 files changed, 20 insertions, 6 deletions
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index e078123..e282a9c 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,13 +1,21 @@
 <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>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 383d6a7..60f4098 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({
@@ -76,21 +76,27 @@ export class SignupComponent {
         }
 
         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
         }