Updated styling on signup page

1 files changed, 4 insertions, 5 deletions

diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 9c37211..2762d03 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} 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';
@@ -29,6 +29,7 @@ export class SignupComponent {
     protected ableToCreateAccount = new BehaviorSubject(false)
     protected passwordRequirements: PasswordRequirements = new PasswordRequirements()
     protected strength = new BehaviorSubject(0)
+    @ViewChild("username") usernameInput!: ElementRef<HTMLInputElement>
 
     constructor(
         protected usersService: UsersService,
@@ -56,11 +57,11 @@ export class SignupComponent {
 
     validate(username: string, passConfirm:string, password: string) {
         this.passwordsMatch.next(false)
-        this.usernameStatusText.next("")
+        this.usernameInput.nativeElement.setAttribute("style", "")
         this.checkPasswordStrength(password);
 
         if (username === "") {
-            this.usernameStatusText.next("Username field can't be blank")
+            this.usernameInput.nativeElement.setAttribute("style", "border-color: #ff0000")
         }
 
         if (passConfirm && password === passConfirm) {
@@ -105,8 +106,6 @@ export class SignupComponent {
             this.passwordStatusText.next("")
         } else if (strength == 0) {
             this.passwordStatusText.next("")
-        } else {
-            this.passwordStatusText.next("Password must meet requirements")
         }
 
         this.strength.next(strength)