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