Added requirements list, updated bar, and disabling of creation with weak passwords.

3 files changed, 39 insertions, 13 deletions

diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index d4ea97b..799cbd2 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -17,8 +17,15 @@
 
 #bar {
     width: 100%;
-    height: 10px;
-    padding: 0;
-    margin: 0;
+    height: 20px;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: red;
 }
 
+#requirement2 {
+    color: red;
+}
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index 5b1b4f7..1b50d39 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,8 +1,16 @@
 <p>Signup:</p>
 <input placeholder="Username" type="text" #username>
 <input placeholder="Password" type="password" (input)="checkPasswordStrength(password.value)" #password>
-<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+<button type="button" [disabled]="passwordStrongEnough | async" (click)="signup(username.value, password.value)">Create Account</button>
+
+<div id="requirement2" *ngIf="test"> {{test | async}} </div>
+
 <progress id="bar" [value]="strength | async" max="6">  </progress>
+
+<span *ngFor="let requirement of passwordRequirements">
+    <span id="requirement" *ngIf="passwordRequirements" [style.color]="color | async"> {{requirement}} </span>
+</span>
+
 <span *ngIf="statusText">{{statusText | async}}</span>
 <span *ngIf="strength">{{strength | async}}</span>
 <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 48c6387..10fbce5 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 {Need} from '../../models/Need';
 
 @Component({
   selector: 'app-signup',
@@ -13,8 +14,11 @@ export class SignupComponent {
 
     protected statusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
-    protected passwordStrength = new BehaviorSubject("")
+    protected passwordStrongEnough = new BehaviorSubject(true)
+    passwordRequirements: String[] = [("❌ Password length"), ("❌ Lowercase letters")];
     protected strength = new BehaviorSubject(0)
+    protected color = new BehaviorSubject("red")
+    protected test = new BehaviorSubject("Password does not meet requirements")
 
     constructor(
         protected usersService: UsersService,
@@ -36,7 +40,12 @@ export class SignupComponent {
     }
 
     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")
+
         if (password.match(/[^!-~]/g)) {
             this.statusText.next("Invalid characters")
             return
@@ -45,32 +54,34 @@ export class SignupComponent {
         let strength = 0;
         if (password.length > 6) {
             strength++
-            console.log("Long")
+            this.passwordRequirements[0] = "✅ Password length"
+            this.color.next("green")
         }
         if (password.length > 12) {
             strength++
-            console.log("Longer")
         }
         if (password.match(/[a-z]/g)) {
             strength++
-            console.log("a")
         }
-        if (password.match(/[0-9]/g)) {
+        if (password.match(/[A-Z]/g)) {
             strength++
-            console.log("0")
         }
-        if (password.match(/[A-Z]/g)) {
+        if (password.match(/[0-9]/g)) {
             strength++
-            console.log("A")
         }
         if (password.match(/[!-/]/g)) {
             strength++
-            console.log("!")
+        }
+
+        if (strength >= 5) {
+            this.passwordStrongEnough.next(false)
+            this.test.next("")
         }
 
         this.strength.next(strength)
     }
 
+    protected readonly length = length;
 }
 
 let friendlyHttpStatus: {[key: number]: string} = {