From b0369f8b5e50eaec22c9178748f57dde6912d383 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Tue, 25 Mar 2025 18:07:45 -0400
Subject: Created signup component and implemented some functionality. Did not
 finish implementing color bar and error messages.

---
 ufund-ui/src/app/components/signup/signup.component.html | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 ufund-ui/src/app/components/signup/signup.component.html

(limited to 'ufund-ui/src/app/components/signup/signup.component.html')

diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
new file mode 100644
index 0000000..742b8cf
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -0,0 +1,7 @@
+<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>
+<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>
-- 
cgit v1.2.3


From 959b5bbaaa370542b75d804cedbbbecea881df0f Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Wed, 26 Mar 2025 19:12:46 -0400
Subject: Added a progress bar to signup

---
 ufund-ui/src/app/components/signup/signup.component.html | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ufund-ui/src/app/components/signup/signup.component.html')

diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index 742b8cf..5b1b4f7 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -2,6 +2,7 @@
 <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>
+<progress id="bar" [value]="strength | async" max="6">  </progress>
 <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>
-- 
cgit v1.2.3


From 7ccbfb414de47941c8acb2e6f9c2cc7a01cd819c Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Thu, 27 Mar 2025 18:47:07 -0400
Subject: Added requirements list, updated bar, and disabling of creation with
 weak passwords.

---
 ufund-ui/src/app/components/signup/signup.component.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'ufund-ui/src/app/components/signup/signup.component.html')

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>
-- 
cgit v1.2.3


From 785d0df231d0cfdbf63f5ed60b56fb882f694725 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Sat, 29 Mar 2025 15:28:59 -0400
Subject: Finished implementing signup page and checked for the majority of
 edge cases.

---
 .../app/components/signup/signup.component.html    | 23 ++++++++++------------
 1 file changed, 10 insertions(+), 13 deletions(-)

(limited to 'ufund-ui/src/app/components/signup/signup.component.html')

diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index 1b50d39..e078123 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,16 +1,13 @@
 <p>Signup:</p>
-<input placeholder="Username" type="text" #username>
-<input placeholder="Password" type="password" (input)="checkPasswordStrength(password.value)" #password>
-<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>
+<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>
-
-<span *ngIf="statusText">{{statusText | async}}</span>
-<span *ngIf="strength">{{strength | async}}</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>
-- 
cgit v1.2.3


From 41c92354536d5545dee97e368b3a4b3c25c1a77f Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Sat, 29 Mar 2025 15:47:46 -0400
Subject: Added emojis before requirements

---
 ufund-ui/src/app/components/signup/signup.component.html | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'ufund-ui/src/app/components/signup/signup.component.html')

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>
-- 
cgit v1.2.3


From 3c9a9004780c0b91772fd7f868c642bdadb60348 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 14:10:09 -0400
Subject: Clean up signup component

---
 .../app/components/signup/signup.component.html    | 45 ++++++++++++----------
 1 file changed, 25 insertions(+), 20 deletions(-)

(limited to 'ufund-ui/src/app/components/signup/signup.component.html')

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>
-- 
cgit v1.2.3


From 6bfbf7fa3b5b14b04f99f2dd6c33d336f6f081f6 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 20:31:32 -0400
Subject: Experimental sign up page design

---
 .../app/components/signup/signup.component.html    | 47 ++++++++++++----------
 1 file changed, 26 insertions(+), 21 deletions(-)

(limited to 'ufund-ui/src/app/components/signup/signup.component.html')

diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index ebedc2a..bc3aaf0 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,26 +1,31 @@
-<p>Signup:</p>
-<div>
-    <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
-    <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
-</div>
+<div id="box">
+    <h1>Create an account</h1>
+    <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>
+    <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>
+        </div>
 
-    <span *ngFor="let requirement of Object.values(passwordRequirements)">
-        <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
-    </span>
-</div>
+        <div id="passReq">
+            <span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span>
+        </div>
+    </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>
+        <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
+        <span [style.color]="(passwordsMatch|async) ? 'green' : 'red'" *ngIf="passwordsMatch"><span class="icon">{{(passwordsMatch|async)?"check":"close"}}</span> Passwords match</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>
+        <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>
+    <span>Already have an account? <a routerLink="/login">Log in</a></span>
 </div>
-- 
cgit v1.2.3