From b0369f8b5e50eaec22c9178748f57dde6912d383 Mon Sep 17 00:00:00 2001 From: Gunther6070 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/app-routing.module.ts | 4 +- ufund-ui/src/app/app.module.ts | 2 + .../src/app/components/signup/signup.component.css | 16 +++ .../app/components/signup/signup.component.html | 7 ++ .../src/app/components/signup/signup.component.ts | 118 +++++++++++++++++++++ 5 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 ufund-ui/src/app/components/signup/signup.component.css create mode 100644 ufund-ui/src/app/components/signup/signup.component.html create mode 100644 ufund-ui/src/app/components/signup/signup.component.ts (limited to 'ufund-ui/src') diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts index 4b76654..a6ea806 100644 --- a/ufund-ui/src/app/app-routing.module.ts +++ b/ufund-ui/src/app/app-routing.module.ts @@ -6,6 +6,7 @@ import {LoginComponent} from './components/login/login.component'; import {HomePageComponent} from './components/home-page/home-page.component'; import {FundingBasketComponent} from './components/funding-basket/funding-basket.component'; import {NeedPageComponent} from './components/need-page/need-page.component'; +import {SignupComponent} from './components/signup/signup.component'; const routes: Routes = [ {path: '', component: HomePageComponent}, @@ -13,7 +14,8 @@ const routes: Routes = [ {path: 'cupboard', component: CupboardComponent}, {path: 'dashboard', component: DashboardComponent}, {path: 'basket', component: FundingBasketComponent}, - {path: 'need/:id', component: NeedPageComponent} + {path: 'need/:id', component: NeedPageComponent}, + {path: 'signup', component: SignupComponent}, ]; @NgModule({ diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts index 9f525fe..156ef5f 100644 --- a/ufund-ui/src/app/app.module.ts +++ b/ufund-ui/src/app/app.module.ts @@ -14,6 +14,7 @@ import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; import {DashboardComponent} from './components/dashboard/dashboard.component'; import {CommonModule} from '@angular/common'; import {LoginComponent} from './components/login/login.component'; +import { SignupComponent } from './components/signup/signup.component'; @NgModule({ declarations: [ @@ -25,6 +26,7 @@ import {LoginComponent} from './components/login/login.component'; NeedListComponent, DashboardComponent, LoginComponent, + SignupComponent, ], imports: [ BrowserModule, diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css new file mode 100644 index 0000000..2a10016 --- /dev/null +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -0,0 +1,16 @@ +:host, .border { + display: flex; + flex-direction: column; + max-width: 300px; + gap: 5px +} + +.border { + border-style: solid; + border-width: 1px; + padding: 10px; + margin: 10px; + position: absolute; + background-color: white; + box-shadow: 0 0 10px 10px black; +} 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 @@ +

Signup:

+ + + +{{statusText | async}} +{{strength | async}} +Account created Proceed to login diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts new file mode 100644 index 0000000..48c6387 --- /dev/null +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -0,0 +1,118 @@ +import { Component } from '@angular/core'; +import {UsersService} from '../../services/users.service'; +import {Router} from '@angular/router'; +import {BehaviorSubject} from 'rxjs'; + +@Component({ + selector: 'app-signup', + standalone: false, + templateUrl: './signup.component.html', + styleUrl: './signup.component.css' +}) +export class SignupComponent { + + protected statusText = new BehaviorSubject("") + protected showSuccessMessage = new BehaviorSubject(false) + protected passwordStrength = new BehaviorSubject("") + protected strength = new BehaviorSubject(0) + + constructor( + protected usersService: UsersService, + protected router: Router, + ) {} + + signup(username: string | null, password: string | null) { + console.log(`attempting to sign up with ${username} ${password}`) + if (!username || !password) { + return; + } + + this.usersService.createUser(username, password).then(() => { + this.showSuccessMessage.next(true); + }).catch(ex => { + this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status]) + console.log(ex) + }) + } + + checkPasswordStrength(password: string) { + this.statusText.next("") + if (password.match(/[^!-~]/g)) { + this.statusText.next("Invalid characters") + return + } + + let strength = 0; + if (password.length > 6) { + strength++ + console.log("Long") + } + if (password.length > 12) { + strength++ + console.log("Longer") + } + if (password.match(/[a-z]/g)) { + strength++ + console.log("a") + } + if (password.match(/[0-9]/g)) { + strength++ + console.log("0") + } + if (password.match(/[A-Z]/g)) { + strength++ + console.log("A") + } + if (password.match(/[!-/]/g)) { + strength++ + console.log("!") + } + + this.strength.next(strength) + } + +} + +let friendlyHttpStatus: {[key: number]: string} = { + 200: 'OK', + 201: 'Created', + 202: 'Accepted', + 203: 'Non-Authoritative Information', + 204: 'No Content', + 205: 'Reset Content', + 206: 'Partial Content', + 300: 'Multiple Choices', + 301: 'Moved Permanently', + 302: 'Found', + 303: 'See Other', + 304: 'Not Modified', + 305: 'Use Proxy', + 306: 'Unused', + 307: 'Temporary Redirect', + 400: 'Bad Request', + 401: 'Unauthorized', + 402: 'Payment Required', + 403: 'Forbidden', + 404: 'Not Found', + 405: 'Method Not Allowed', + 406: 'Not Acceptable', + 407: 'Proxy Authentication Required', + 408: 'Request Timeout', + 409: 'Conflict', + 410: 'Gone', + 411: 'Length Required', + 412: 'Precondition Required', + 413: 'Request Entry Too Large', + 414: 'Request-URI Too Long', + 415: 'Unsupported Media Type', + 416: 'Requested Range Not Satisfiable', + 417: 'Expectation Failed', + 418: 'I\'m a teapot', + 429: 'Too Many Requests', + 500: 'Internal Server Error', + 501: 'Not Implemented', + 502: 'Bad Gateway', + 503: 'Service Unavailable', + 504: 'Gateway Timeout', + 505: 'HTTP Version Not Supported', +}; -- cgit v1.2.3 From 959b5bbaaa370542b75d804cedbbbecea881df0f Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Wed, 26 Mar 2025 19:12:46 -0400 Subject: Added a progress bar to signup --- ufund-ui/src/app/components/signup/signup.component.css | 8 ++++++++ ufund-ui/src/app/components/signup/signup.component.html | 1 + 2 files changed, 9 insertions(+) (limited to 'ufund-ui/src') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 2a10016..d4ea97b 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -14,3 +14,11 @@ background-color: white; box-shadow: 0 0 10px 10px black; } + +#bar { + width: 100%; + height: 10px; + padding: 0; + margin: 0; +} + 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 @@ + {{statusText | async}} {{strength | async}} Account created Proceed to login -- cgit v1.2.3 From 7ccbfb414de47941c8acb2e6f9c2cc7a01cd819c Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Thu, 27 Mar 2025 18:47:07 -0400 Subject: Added requirements list, updated bar, and disabling of creation with weak passwords. --- .../src/app/components/signup/signup.component.css | 13 +++++++--- .../app/components/signup/signup.component.html | 10 +++++++- .../src/app/components/signup/signup.component.ts | 29 +++++++++++++++------- 3 files changed, 39 insertions(+), 13 deletions(-) (limited to 'ufund-ui/src') 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 @@

Signup:

- + + +
{{test | async}}
+ + + + {{requirement}} + + {{statusText | async}} {{strength | async}} Account created Proceed to login 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} = { -- cgit v1.2.3 From 451a9abd5a4c461ccbb0b7b7d51b78dbfe12ec54 Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Thu, 27 Mar 2025 18:47:26 -0400 Subject: Added requirements list, updated bar, and disabling of creation with weak passwords. --- ufund-ui/src/app/components/signup/signup.component.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'ufund-ui/src') diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts index 10fbce5..9532e42 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -2,7 +2,6 @@ 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', -- cgit v1.2.3 From 785d0df231d0cfdbf63f5ed60b56fb882f694725 Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Sat, 29 Mar 2025 15:28:59 -0400 Subject: Finished implementing signup page and checked for the majority of edge cases. --- .../src/app/components/signup/signup.component.css | 23 +++++-- .../app/components/signup/signup.component.html | 23 +++---- .../src/app/components/signup/signup.component.ts | 80 ++++++++++++++++------ 3 files changed, 85 insertions(+), 41 deletions(-) (limited to 'ufund-ui/src') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 799cbd2..2fa5051 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -16,16 +16,27 @@ } #bar { + height: 5px; width: 100%; - height: 20px; - -webkit-appearance: none; appearance: none; - border: none; - border-radius: 10px; overflow: hidden; - background-color: red; + margin-top: -5px; } -#requirement2 { +#bar::-webkit-progress-bar { + background-color: lightgray; + transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; +} + +.color0::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color1::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color2::-webkit-progress-value { background: rgba(255, 165, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color3::-webkit-progress-value { background: rgba(255, 255, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color4::-webkit-progress-value { background: rgba(173, 255, 47, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color5::-webkit-progress-value { background: rgba(50, 205, 50, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color6::-webkit-progress-value { background: rgba(0, 128, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } + +#requirement2, #statusText, #passwordStatusText, #usernameStatusText { 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 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 @@

Signup:

- - - - -
{{test | async}}
- - - - - {{requirement}} + +{{usernameStatusText | async}} + + +{{statusText | async}} + + {{requirement.title}} - -{{statusText | async}} -{{strength | async}} + +{{passwordStatusText | async}} + Account created Proceed to login 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} = { -- cgit v1.2.3 From b539c504782072fe933668b893c708bf577443dd Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Sat, 29 Mar 2025 15:29:16 -0400 Subject: Finished implementing signup page and checked for the majority of edge cases. --- ufund-ui/src/app/components/signup/signup.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src') diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts index b3432e6..383d6a7 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; +import {Component} from '@angular/core'; import {UsersService} from '../../services/users.service'; import {Router} from '@angular/router'; import {BehaviorSubject} from 'rxjs'; -- cgit v1.2.3 From 41c92354536d5545dee97e368b3a4b3c25c1a77f Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Sat, 29 Mar 2025 15:47:46 -0400 Subject: Added emojis before requirements --- .../src/app/components/signup/signup.component.html | 8 ++++++++ ufund-ui/src/app/components/signup/signup.component.ts | 18 ++++++++++++------ 2 files changed, 20 insertions(+), 6 deletions(-) (limited to 'ufund-ui/src') 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 @@

Signup:

{{usernameStatusText | async}} + + + {{statusText | async}} + {{requirement.title}} + + {{passwordStatusText | async}} + + Account created Proceed to login diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts index 383d6a7..60f4098 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -4,12 +4,12 @@ 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} + 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({ @@ -76,21 +76,27 @@ export class SignupComponent { } if (password.length > 6) { + this.passwordRequirements.sixLong.title = '✅ Is 6 characters or longer' this.passwordRequirements.sixLong.value = true } if (password.length > 12) { + this.passwordRequirements.twelveLong.title = '✅ Is 12 characters or longer' this.passwordRequirements.twelveLong.value = true } if (password.match(/[a-z]/g)) { + this.passwordRequirements.lowercase.title = '✅ Includes lowercase letter' this.passwordRequirements.lowercase.value = true } if (password.match(/[A-Z]/g)) { + this.passwordRequirements.uppercase.title = '✅ Includes uppercase letter' this.passwordRequirements.uppercase.value = true } if (password.match(/[0-9]/g)) { + this.passwordRequirements.number.title = '✅ Includes number' this.passwordRequirements.number.value = true } if (password.match(/[^A-Za-z0-9]/g)) { + this.passwordRequirements.symbol.title = '✅ Includes symbol' this.passwordRequirements.symbol.value = true } -- cgit v1.2.3 From 3c9a9004780c0b91772fd7f868c642bdadb60348 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 30 Mar 2025 14:10:09 -0400 Subject: Clean up signup component --- .../src/app/components/login/login.component.html | 2 +- .../src/app/components/signup/signup.component.css | 11 ++++-- .../app/components/signup/signup.component.html | 45 ++++++++++++---------- .../src/app/components/signup/signup.component.ts | 35 ++++++++--------- 4 files changed, 49 insertions(+), 44 deletions(-) (limited to 'ufund-ui/src') diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html index 2cdb6d0..a6441f4 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -3,5 +3,5 @@ - + {{statusText | async}} diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 2fa5051..f286cf9 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -1,8 +1,13 @@ -:host, .border { +:host { display: flex; flex-direction: column; max-width: 300px; - gap: 5px + gap: 10px; + + & > div { + display: flex; + flex-direction: column; + } } .border { @@ -20,7 +25,7 @@ width: 100%; appearance: none; overflow: hidden; - margin-top: -5px; + /*margin-top: -5px;*/ } #bar::-webkit-progress-bar { 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 @@

Signup:

- -{{usernameStatusText | async}} - - - - - -{{statusText | async}} - - - {{requirement.title}} - - - - -{{passwordStatusText | async}} - - - -Account created Proceed to login +
+ + {{usernameStatusText | async}} +
+ +
+ + + {{passwordStatusText | async}} + + + {{requirement.title}} + +
+ +
+ + {{confirmPassStatusText | async}} +
+ +
+ + Account created Proceed to login + {{statusText | async}} +
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts index 60f4098..3b43287 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -4,12 +4,12 @@ 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} + 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({ @@ -21,14 +21,15 @@ class PasswordRequirements { export class SignupComponent { - protected statusText = new BehaviorSubject("") protected passwordStatusText = new BehaviorSubject("") + protected confirmPassStatusText = new BehaviorSubject("") protected usernameStatusText = new BehaviorSubject("") protected showSuccessMessage = new BehaviorSubject(false) protected passwordStrongEnough = new BehaviorSubject(false) protected ableToCreateAccount = new BehaviorSubject(false) protected passwordRequirements: PasswordRequirements = new PasswordRequirements() protected strength = new BehaviorSubject(0) + protected statusText = new BehaviorSubject(""); constructor( protected usersService: UsersService, @@ -49,8 +50,8 @@ export class SignupComponent { }) } - comparePassword(username: string, passConfirm:string, password: string) { - this.passwordStatusText.next("") + validate(username: string, passConfirm:string, password: string) { + this.confirmPassStatusText.next("") this.usernameStatusText.next("") this.checkPasswordStrength(password); @@ -59,7 +60,7 @@ export class SignupComponent { } if (!(password === passConfirm) && !!passConfirm) { - this.passwordStatusText.next("Passwords don't match") + this.confirmPassStatusText.next("Passwords don't match") } this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username) } @@ -70,33 +71,27 @@ export class SignupComponent { this.passwordStrongEnough.next(false) if (password.match(/[^!-~]/g)) { - this.statusText.next("Invalid characters") + this.passwordStatusText.next("Invalid characters") return } if (password.length > 6) { - this.passwordRequirements.sixLong.title = '✅ Is 6 characters or longer' this.passwordRequirements.sixLong.value = true } if (password.length > 12) { - this.passwordRequirements.twelveLong.title = '✅ Is 12 characters or longer' this.passwordRequirements.twelveLong.value = true } if (password.match(/[a-z]/g)) { - this.passwordRequirements.lowercase.title = '✅ Includes lowercase letter' this.passwordRequirements.lowercase.value = true } if (password.match(/[A-Z]/g)) { - this.passwordRequirements.uppercase.title = '✅ Includes uppercase letter' this.passwordRequirements.uppercase.value = true } if (password.match(/[0-9]/g)) { - this.passwordRequirements.number.title = '✅ Includes number' this.passwordRequirements.number.value = true } if (password.match(/[^A-Za-z0-9]/g)) { - this.passwordRequirements.symbol.title = '✅ Includes symbol' this.passwordRequirements.symbol.value = true } @@ -107,11 +102,11 @@ export class SignupComponent { if (strength >= 5) { this.passwordStrongEnough.next(true) - this.statusText.next("") + this.passwordStatusText.next("") } else if (strength == 0) { - this.statusText.next("") + this.passwordStatusText.next("") } else { - this.statusText.next("Password does not meet requirements") + this.passwordStatusText.next("Password does not meet requirements") } this.strength.next(strength) -- cgit v1.2.3