Finished implementing signup page and checked for the majority of edge cases.

1 files changed, 58 insertions, 22 deletions

diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 9532e42..b3432e6 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -1,23 +1,34 @@
-import { Component } from '@angular/core';
+import {Component, ElementRef, ViewChild} from '@angular/core';
 import {UsersService} from '../../services/users.service';
 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}
+}
+
 @Component({
   selector: 'app-signup',
   standalone: false,
   templateUrl: './signup.component.html',
   styleUrl: './signup.component.css'
 })
+
 export class SignupComponent {
 
     protected statusText = new BehaviorSubject("")
+    protected passwordStatusText = new BehaviorSubject("")
+    protected usernameStatusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
-    protected passwordStrongEnough = new BehaviorSubject(true)
-    passwordRequirements: String[] = [("❌ Password length"), ("❌ Lowercase letters")];
+    protected passwordStrongEnough = new BehaviorSubject(false)
+    protected ableToCreateAccount = new BehaviorSubject(false)
+    protected passwordRequirements: PasswordRequirements = new PasswordRequirements()
     protected strength = new BehaviorSubject(0)
-    protected color = new BehaviorSubject("red")
-    protected test = new BehaviorSubject("Password does not meet requirements")
 
     constructor(
         protected usersService: UsersService,
@@ -38,49 +49,74 @@ export class SignupComponent {
         })
     }
 
+    comparePassword(username: string, passConfirm:string, password: string) {
+        this.passwordStatusText.next("")
+        this.usernameStatusText.next("")
+        this.checkPasswordStrength(password);
+
+        if (username === "") {
+            this.usernameStatusText.next("Username field can't be blank")
+        }
+
+        if (!(password === passConfirm) && !!passConfirm) {
+            this.passwordStatusText.next("Passwords don't match")
+        }
+        this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
+    }
+
     checkPasswordStrength(password: string) {
-        this.passwordRequirements = [("❌ Password length"), ("❌ Lowercase letters")];
-        this.test.next("Password does not meet requirements")
-        this.statusText.next("")
-        this.passwordStrongEnough.next(true)
-        this.color.next("red")
+        this.strength.next(0)
+        this.passwordRequirements = new PasswordRequirements()
+        this.passwordStrongEnough.next(false)
 
         if (password.match(/[^!-~]/g)) {
             this.statusText.next("Invalid characters")
+
             return
         }
 
-        let strength = 0;
         if (password.length > 6) {
-            strength++
-            this.passwordRequirements[0] = "✅ Password length"
-            this.color.next("green")
+            this.passwordRequirements.sixLong.value = true
         }
         if (password.length > 12) {
-            strength++
+            this.passwordRequirements.twelveLong.value = true
         }
         if (password.match(/[a-z]/g)) {
-            strength++
+            this.passwordRequirements.lowercase.value = true
         }
         if (password.match(/[A-Z]/g)) {
-            strength++
+            this.passwordRequirements.uppercase.value = true
         }
         if (password.match(/[0-9]/g)) {
-            strength++
+            this.passwordRequirements.number.value = true
         }
-        if (password.match(/[!-/]/g)) {
-            strength++
+        if (password.match(/[^A-Za-z0-9]/g)) {
+            this.passwordRequirements.symbol.value = true
         }
 
+        let strength = 0
+        Object.values(this.passwordRequirements).forEach(k => {
+            k.value && strength++
+        })
+
         if (strength >= 5) {
-            this.passwordStrongEnough.next(false)
-            this.test.next("")
+            this.passwordStrongEnough.next(true)
+            this.statusText.next("")
+        } else if (strength == 0) {
+            this.statusText.next("")
+        } else {
+            this.statusText.next("Password does not meet requirements")
         }
 
         this.strength.next(strength)
     }
 
+    getColor() {
+        return `rgba(${(this.strength.getValue()/7) * 255}, ${255 - (this.strength.getValue()/7) * 255}, 0)`
+    }
+
     protected readonly length = length;
+    protected readonly Object = Object;
 }
 
 let friendlyHttpStatus: {[key: number]: string} = {