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. --- .../src/app/components/signup/signup.component.css | 16 +++ .../app/components/signup/signup.component.html | 7 ++ .../src/app/components/signup/signup.component.ts | 118 +++++++++++++++++++++ 3 files changed, 141 insertions(+) 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/app/components') 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 ea13cf6ab3b71ff5e83fca876ec71fec1f7b00ae Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 26 Mar 2025 15:38:46 -0400 Subject: Make frontend work with the new backend checkout system --- .../app/components/cupboard/cupboard.component.ts | 58 +----- .../components/dashboard/dashboard.component.ts | 20 +- .../funding-basket/funding-basket.component.ts | 122 ++++++------ .../src/app/components/login/login.component.ts | 14 +- .../components/need-list/need-list.component.ts | 212 +++++++++++---------- 5 files changed, 195 insertions(+), 231 deletions(-) (limited to 'ufund-ui/src/app/components') diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index 24b3e2d..a812baf 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -1,10 +1,10 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { CupboardService } from '../../services/cupboard.service'; -import { UsersService } from '../../services/users.service'; import { Need, GoalType } from '../../models/Need'; import { userType } from '../../models/User'; import { BehaviorSubject, catchError, of } from 'rxjs'; import { NeedListComponent } from '../need-list/need-list.component'; +import {AuthService} from '../../services/auth.service'; @Component({ selector: 'app-cupboard', @@ -20,7 +20,10 @@ export class CupboardComponent implements OnInit { needs: any; @ViewChild("needList") needList?: NeedListComponent - constructor(private cupboardService: CupboardService, private usersService: UsersService) { } + constructor( + private cupboardService: CupboardService, + private authService: AuthService + ) {} ngOnInit(): void { this.cupboardService.getNeeds().subscribe(n => this.needs = n); @@ -88,7 +91,7 @@ export class CupboardComponent implements OnInit { } isManager() { - const type = this.usersService.getCurrentUser()?.type; + const type = this.authService.getCurrentUser()?.type; return type === ("MANAGER" as unknown as userType); } @@ -105,7 +108,7 @@ export class CupboardComponent implements OnInit { console.log("need:", need); console.log(need.id, need, "need updated"); this.cupboardService.updateNeed(need.id, need) - .pipe(catchError((ex, r) => { + .pipe(catchError((ex, _) => { if (ex.status == 500) { this.statusText.next("Fields cannot be blank"); } else if (ex.status == 400) { @@ -140,7 +143,7 @@ export class CupboardComponent implements OnInit { console.log("need:", need); console.log("form submitted. creating need: ", need); this.cupboardService.createNeed(need) - .pipe(catchError((ex, r) => { + .pipe(catchError((ex, _) => { if (ex.status == 500) { this.statusText.next("Fields cannot be blank"); } else if (ex.status == 400) { @@ -167,48 +170,3 @@ export class CupboardComponent implements OnInit { } } - -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', - 422: 'Unprocessable Entity', - 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', -}; diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index b9faefa..a0ad566 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,21 +1,21 @@ -import { Component } from '@angular/core'; -import { UsersService } from '../../services/users.service'; -import { userType } from '../../models/User'; +import {Component} from '@angular/core'; +import {userType} from '../../models/User'; +import {AuthService} from '../../services/auth.service'; @Component({ - selector: 'app-dashboard', - standalone: false, - templateUrl: './dashboard.component.html', - styleUrl: './dashboard.component.css' + selector: 'app-dashboard', + standalone: false, + templateUrl: './dashboard.component.html', + styleUrl: './dashboard.component.css' }) export class DashboardComponent { constructor( - protected usersService: UsersService, + protected authService: AuthService, ) {} isManager() { - const type = this.usersService.getCurrentUser()?.type; + const type = this.authService.getCurrentUser()?.type; return type === ("MANAGER" as unknown as userType); - } + } } diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts index e654711..faa7e0b 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts @@ -1,11 +1,9 @@ import {Component, Input, OnInit, ViewChild} from '@angular/core'; -import {User} from '../../models/User'; -import { UsersService } from '../../services/users.service'; -import { Need } from '../../models/Need'; -import { NeedListComponent } from '../need-list/need-list.component'; -import { Router } from '@angular/router'; -import { CupboardService } from '../../services/cupboard.service'; -import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs'; +import {UsersService} from '../../services/users.service'; +import {Router} from '@angular/router'; +import {CupboardService} from '../../services/cupboard.service'; +import {catchError, firstValueFrom, Observable} from 'rxjs'; +import {AuthService} from '../../services/auth.service'; @Component({ selector: 'app-funding-basket', @@ -14,67 +12,67 @@ import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs'; styleUrl: './funding-basket.component.css' }) export class FundingBasketComponent implements OnInit { - statusText: any; + statusText: any; - constructor( - private router: Router, - protected cupboardService: CupboardService, - protected usersService: UsersService - ) {} + constructor( + private router: Router, + protected cupboardService: CupboardService, + protected usersService: UsersService, + private authService: AuthService + ) {} - @ViewChild("contribution") contribution?: Input; - @Input() isValid: boolean = true; + @ViewChild("contribution") contribution?: Input; + @Input() isValid: boolean = true; - // this is for login rerouting - ngOnInit(): void { - if (!this.usersService.getCurrentUser()) { - this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); - return; - } - - this.usersService.refreshBasket(); - // this.usersService.removeNeed(); <- call this to remove - } + // this is for login rerouting + ngOnInit(): void { + if (!this.authService.getCurrentUser()) { + this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); + return; + } - async checkout() { - this.isValid = true; - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { - let contribution = c as HTMLInputElement; - contribution.setAttribute("style",""); - if ( contribution.value == '' || contribution.valueAsNumber <= 0) { - this.isValid = false; - contribution.setAttribute("style","color: #ff0000"); - } + this.usersService.refreshBasket(); + // this.usersService.removeNeed(); <- call this to remove } - if (this.isValid) { - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { - let contribution = c as HTMLInputElement; - let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); - need.current +=+ contribution.value; - this.usersService.removeNeed(+need.id); - this.cupboardService.updateNeed(need.id, need) - .pipe(catchError((ex, r) => { - if (ex.status == 500) { - this.statusText.next('Fields cannot be blank'); - } else if (ex.status == 400) { - this.statusText.next('Goal must be greater than 0'); - } else { - this.statusText.next('Error on creating need'); - } - return new Observable(); - })) - .subscribe((result) => { - if (result) { - console.log('need updated successfully'); - //this.needList?.refresh() - } else { - console.log('need update failed'); - } - }); - } - } - } + async checkout() { + this.isValid = true; + for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + contribution.setAttribute("style", ""); + if (contribution.value == '' || contribution.valueAsNumber <= 0) { + this.isValid = false; + contribution.setAttribute("style", "color: #ff0000"); + } + } + if (this.isValid) { + for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); + need.current += +contribution.value; + this.usersService.removeNeed(+need.id); + this.cupboardService.checkoutNeed(need.id, +contribution.value) + .pipe(catchError((ex, _) => { + if (ex.status == 500) { + this.statusText.next('Fields cannot be blank'); + } else if (ex.status == 400) { + this.statusText.next('Goal must be greater than 0'); + } else { + this.statusText.next('Error on creating need'); + } + return new Observable(); + })) + .subscribe((result) => { + if (result) { + console.log('need updated successfully'); + //this.needList?.refresh() + } else { + console.log('need update failed'); + } + }); + } + } + } } diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts index 9d806f5..f6a2996 100644 --- a/ufund-ui/src/app/components/login/login.component.ts +++ b/ufund-ui/src/app/components/login/login.component.ts @@ -2,12 +2,13 @@ import {Component, OnInit} from '@angular/core' import {UsersService} from '../../services/users.service'; import {ActivatedRoute, Router} from '@angular/router'; import {BehaviorSubject} from 'rxjs'; +import {AuthService} from '../../services/auth.service'; @Component({ - selector: 'app-login', - standalone: false, - templateUrl: './login.component.html', - styleUrl: './login.component.css' + selector: 'app-login', + standalone: false, + templateUrl: './login.component.html', + styleUrl: './login.component.css' }) export class LoginComponent implements OnInit { @@ -17,7 +18,8 @@ export class LoginComponent implements OnInit { constructor( protected usersService: UsersService, protected router: Router, - private route: ActivatedRoute + private route: ActivatedRoute, + private authService: AuthService ) {} ngOnInit() { @@ -31,7 +33,7 @@ export class LoginComponent implements OnInit { return; } - this.usersService.login(username, password).then(() => { + this.authService.login(username, password).then(() => { this.router.navigate([next]); }).catch(ex => { this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status]) diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts index 25f05d6..3a89a20 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.ts +++ b/ufund-ui/src/app/components/need-list/need-list.component.ts @@ -1,132 +1,138 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; -import { UsersService } from '../../services/users.service'; -import { userType } from '../../models/User'; +import {UsersService} from '../../services/users.service'; +import {userType} from '../../models/User'; +import {catchError, of} from 'rxjs'; +import {AuthService} from '../../services/auth.service'; + @Component({ - selector: 'app-need-list', - standalone: false, - templateUrl: './need-list.component.html', - styleUrl: './need-list.component.css' + selector: 'app-need-list', + standalone: false, + templateUrl: './need-list.component.html', + styleUrl: './need-list.component.css' }) export class NeedListComponent { - needs: Need[] = []; - searchResults: Need[] = []; + needs: Need[] = []; + searchResults: Need[] = []; - constructor( - private cupboardService: CupboardService, - private usersService: UsersService - ) {} + constructor( + private cupboardService: CupboardService, + private usersService: UsersService, + private authService: AuthService + ) {} refresh() { this.cupboardService.getNeeds().subscribe(n => this.needs = n) } - ngOnInit(): void { - this.refresh() - - this.close(); - } + ngOnInit(): void { + this.refresh() - private showElement(element: any) { - if (element){ - element.style.visibility = 'visible'; - element.style.position = 'relative'; + this.close(); } - } - private hideElement(element: any) { - if (element){ - element.style.visibility = 'hidden'; - element.style.position = 'absolute'; + private showElement(element: any) { + if (element) { + element.style.visibility = 'visible'; + element.style.position = 'relative'; + } } - } - private updateSearchStatus(text: string) { - let element = document.getElementById('search-status'); - if (element) { - element.innerHTML = text; + private hideElement(element: any) { + if (element) { + element.style.visibility = 'hidden'; + element.style.position = 'absolute'; + } } - } - open() { - this.hideElement(document.getElementById('search-button')); - this.showElement(document.getElementById('search-form')); - } + private updateSearchStatus(text: string) { + let element = document.getElementById('search-status'); + if (element) { + element.innerHTML = text; + } + } - close() { - this.hideElement(document.getElementById('search-form')); - this.showElement(document.getElementById('search-button')); - this.hideElement(document.getElementById('search-status')); - } + open() { + this.hideElement(document.getElementById('search-button')); + this.showElement(document.getElementById('search-form')); + } - private searchDelay: any; + close() { + this.hideElement(document.getElementById('search-form')); + this.showElement(document.getElementById('search-button')); + this.hideElement(document.getElementById('search-status')); + } - async search(form: any) { - //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls + private searchDelay: any; - //remove previous search if it exists - if (this.searchDelay) { - clearTimeout(this.searchDelay); - } + async search(form: any) { + //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls - this.searchDelay = setTimeout(() => { - const currentSearchValue = form.search; //latest value of the search - this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - this.searchResults = n; - console.log(currentSearchValue, this.searchResults); - this.showElement(document.getElementById('search-results')); - this.showElement(document.getElementById('search-status')); - if (this.searchResults.length === this.needs.length) { - this.updateSearchStatus("Please refine your search"); - this.searchResults = []; - } else if (this.searchResults.length === 0) { - this.updateSearchStatus("No results found"); - } else { - this.updateSearchStatus("Search results:"); + //remove previous search if it exists + if (this.searchDelay) { + clearTimeout(this.searchDelay); } - }); - }, 250); - } - - delete(id : number) { - this.cupboardService.deleteNeed(id).subscribe(() => { - this.needs = this.needs.filter(n => n.id !== id) - }) - } - - isManager() { - const type = this.usersService.getCurrentUser()?.type; - return type === ("MANAGER" as unknown as userType); - } - - isHelper() { - const type = this.usersService.getCurrentUser()?.type; - return type === ("HELPER" as unknown as userType); - } - - add(need: Need) { - const currentUser = this.usersService.getCurrentUser(); - //console.log("get current user in angular:", currentUser) - if (currentUser) { - if (!currentUser.basket.includes(need.id)) { - currentUser.basket.push(need.id); - this.usersService.updateUser(currentUser).subscribe(() => { - this.usersService.refreshBasket(); - error: (err: any) => { - console.error(err); - } - }); - } else { - window.alert("This need is already in your basket!") - } - + this.searchDelay = setTimeout(() => { + const currentSearchValue = form.search; //latest value of the search + this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { + this.searchResults = n; + console.log(currentSearchValue, this.searchResults); + this.showElement(document.getElementById('search-results')); + this.showElement(document.getElementById('search-status')); + if (this.searchResults.length === this.needs.length) { + this.updateSearchStatus("Please refine your search"); + this.searchResults = []; + } else if (this.searchResults.length === 0) { + this.updateSearchStatus("No results found"); + } else { + this.updateSearchStatus("Search results:"); + } + }); + }, 250); + } + + delete(id: number) { + this.cupboardService.deleteNeed(id).subscribe(() => { + this.needs = this.needs.filter(n => n.id !== id) + }) } - } + isManager() { + const type = this.authService.getCurrentUser()?.type; + return type === ("MANAGER" as unknown as userType); + } + + isHelper() { + const type = this.authService.getCurrentUser()?.type; + return type === ("HELPER" as unknown as userType); + } + + add(need: Need) { + const currentUser = this.authService.getCurrentUser(); + //console.log("get current user in angular:", currentUser) + if (currentUser) { + if (!currentUser.basket.includes(need.id)) { + currentUser.basket.push(need.id); + this.usersService.updateUser(currentUser) + .pipe(catchError((err: any, _) => { + console.error(err); + return of(); + })) + .subscribe(() => { + this.usersService.refreshBasket(); + }); + } else { + window.alert("This need is already in your basket!") + } + - back() { - this.searchResults = []; - } + } + + } + + back() { + this.searchResults = []; + } } -- cgit v1.2.3 From ab35efb06b926e8a3aee5cfc8d1fa908aa4a4707 Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 26 Mar 2025 18:14:47 -0400 Subject: Fix cupboard access checking and logging --- .../components/home-page/home-page.component.ts | 10 +++--- .../components/need-page/need-page.component.ts | 38 +++++++++++----------- 2 files changed, 24 insertions(+), 24 deletions(-) (limited to 'ufund-ui/src/app/components') diff --git a/ufund-ui/src/app/components/home-page/home-page.component.ts b/ufund-ui/src/app/components/home-page/home-page.component.ts index 5b2277c..95e8962 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.ts +++ b/ufund-ui/src/app/components/home-page/home-page.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ - selector: 'app-home-page', - standalone: false, - templateUrl: './home-page.component.html', - styleUrl: './home-page.component.css' + selector: 'app-home-page', + standalone: false, + templateUrl: './home-page.component.html', + styleUrl: './home-page.component.css' }) export class HomePageComponent { diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts index 597d0e0..e38554c 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.ts +++ b/ufund-ui/src/app/components/need-page/need-page.component.ts @@ -2,30 +2,30 @@ import {Component, Input} from '@angular/core'; import {GoalType, Need} from '../../models/Need'; import {ActivatedRoute} from "@angular/router"; import {CupboardService} from "../../services/cupboard.service"; -import { NgFor } from '@angular/common'; +import {NgFor} from '@angular/common'; @Component({ - selector: 'app-need-page', - standalone: false, - templateUrl: './need-page.component.html', - styleUrl: './need-page.component.css' + selector: 'app-need-page', + standalone: false, + templateUrl: './need-page.component.html', + styleUrl: './need-page.component.css' }) export class NeedPageComponent { - constructor( - private route: ActivatedRoute, - private cupboardService: CupboardService, - ) {} + constructor( + private route: ActivatedRoute, + private cupboardService: CupboardService, + ) {} - public GoalType = GoalType; + public GoalType = GoalType; - @Input() need?: Need; + @Input() need?: Need; - ngOnInit(): void { - const id = Number(this.route.snapshot.paramMap.get('id')); - this.cupboardService.getNeed(id).subscribe(n => this.need = n); - } + ngOnInit(): void { + const id = Number(this.route.snapshot.paramMap.get('id')); + this.cupboardService.getNeed(id).subscribe(n => this.need = n); + } - back() { - window.history.back(); - } -} \ No newline at end of file + back() { + window.history.back(); + } +} -- 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/app/components') 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/app/components') 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/app/components') 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/app/components') 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/app/components') 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/app/components') 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/app/components') 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