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

---
 .../src/app/components/signup/signup.component.css | 28 ++++++++++++-
 .../app/components/signup/signup.component.html    | 47 ++++++++++++----------
 .../src/app/components/signup/signup.component.ts  | 10 ++---
 3 files changed, 58 insertions(+), 27 deletions(-)

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

diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index f286cf9..429bc42 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -1,7 +1,16 @@
 :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin-top: -66px
+
+}
+
+#box {
     display: flex;
     flex-direction: column;
-    max-width: 300px;
+    /*max-width: 300px;*/
     gap: 10px;
 
     & > div {
@@ -45,3 +54,20 @@
     color: red;
 }
 
+#passReq {
+    display: flex;
+    flex-direction: column;
+}
+
+#box > div {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    gap: 20px;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
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>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 3b43287..1ab863d 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -22,7 +22,7 @@ class PasswordRequirements {
 export class SignupComponent {
 
     protected passwordStatusText = new BehaviorSubject("")
-    protected confirmPassStatusText = new BehaviorSubject("")
+    protected passwordsMatch = new BehaviorSubject(false)
     protected usernameStatusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
     protected passwordStrongEnough = new BehaviorSubject(false)
@@ -51,7 +51,7 @@ export class SignupComponent {
     }
 
     validate(username: string, passConfirm:string, password: string) {
-        this.confirmPassStatusText.next("")
+        this.passwordsMatch.next(false)
         this.usernameStatusText.next("")
         this.checkPasswordStrength(password);
 
@@ -59,8 +59,8 @@ export class SignupComponent {
             this.usernameStatusText.next("Username field can't be blank")
         }
 
-        if (!(password === passConfirm) && !!passConfirm) {
-            this.confirmPassStatusText.next("Passwords don't match")
+        if (passConfirm && password === passConfirm) {
+            this.passwordsMatch.next(true)
         }
         this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
     }
@@ -106,7 +106,7 @@ export class SignupComponent {
         } else if (strength == 0) {
             this.passwordStatusText.next("")
         } else {
-            this.passwordStatusText.next("Password does not meet requirements")
+            this.passwordStatusText.next("5/6 checks required")
         }
 
         this.strength.next(strength)
-- 
cgit v1.2.3


From e1ef22279baccb4b2a5a1ecbb5222e4008d4d523 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 20:28:35 -0400
Subject: Added toasts for error handling

---
 ufund-ui/src/app/components/signup/signup.component.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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

diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 1ab863d..5ec84ae 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 {ToastsService, ToastType} from '../../services/toasts.service';
 
 class PasswordRequirements {
     sixLong:    {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false}
@@ -34,6 +35,7 @@ export class SignupComponent {
     constructor(
         protected usersService: UsersService,
         protected router: Router,
+        protected toastService: ToastsService
     ) {}
 
     signup(username: string | null, password: string | null) {
@@ -45,7 +47,7 @@ export class SignupComponent {
         this.usersService.createUser(username, password).then(() => {
             this.showSuccessMessage.next(true);
         }).catch(ex => {
-            this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.INFO, "Unable to create account: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
-- 
cgit v1.2.3


From 9c9708cc846dafe33234c38c37425468b9877514 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 21:32:55 -0400
Subject: Updated toast's types

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

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

diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 5ec84ae..a20d828 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -47,7 +47,7 @@ export class SignupComponent {
         this.usersService.createUser(username, password).then(() => {
             this.showSuccessMessage.next(true);
         }).catch(ex => {
-            this.toastService.sendToast(ToastType.INFO, "Unable to create account: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
-- 
cgit v1.2.3