Enhance Login & Registration Pages (#57)

* Add UI enhancement to login and registration pages

Add icons to the input field labels
Remove primeNG password feedback and replace with password requirements list

* Fix linting

* Adjust styling for login and registration pages

* Improve password requirements list

* Remove weak password message
* Conditionally render password list when user starts modifying the password field
* Hide requirements and display a success message when user satisfies all requirements
* Refactor code to render each requirement and improve naming for password validators

* Fix linting

* Fix nav bar

Previously, the submenu's position was not relative to the body,
this causes the submenu to be out of position

* Update submenu to hide on scroll

* Keep variables on top

* Remove direct DOM manipulation

* Add spinner when redirecting user to workspace

---------

Co-authored-by: limcaaarl <[email protected]>
Co-authored-by: Samuel Lim <[email protected]>

Author: 3 people

frontend/src/app/account/_validators/invalid-password.validator.ts

@@ -6,7 +6,8 @@ export const PASSWORD_INVALID = 'passwordInvalid';
 
 export function invalidPasswordValidator(): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
-        const weak = !PASSWORD_REGEX.test(control.value);
+        const password = control.value;
+        const weak = password && !PASSWORD_REGEX.test(password);
         return weak ? { [PASSWORD_INVALID]: true } : null;
     };
 }

frontend/src/app/account/_validators/lowercase-password.ts

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const LOWERCASE_PASSWORD_REGEX = /^(?=.*[a-z])/;
+
+export const PASSWORD_LOWERCASE = 'passwordLowercase';
+
+export function lowercasePasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingLowercase = !LOWERCASE_PASSWORD_REGEX.test(control.value);
+        return missingLowercase ? { [PASSWORD_LOWERCASE]: true } : null;
+    };
+}

frontend/src/app/account/_validators/numeric-password.ts

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const NUMERIC_PASSWORD_REGEX = /^(?=.*[0-9])/;
+
+export const PASSWORD_NUMERIC = 'passwordNumeric';
+
+export function numericPasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingNumeric = !NUMERIC_PASSWORD_REGEX.test(control.value);
+        return missingNumeric ? { [PASSWORD_NUMERIC]: true } : null;
+    };
+}

frontend/src/app/account/_validators/short-password.ts

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const SHORT_PASSWORD_REGEX = /^(?=.{8,})/;
+
+export const PASSWORD_SHORT = 'passwordShort';
+
+export function shortPasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const short = !SHORT_PASSWORD_REGEX.test(control.value);
+        return short ? { [PASSWORD_SHORT]: true } : null;
+    };
+}

frontend/src/app/account/_validators/special-password.ts

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const SPECIAL_PASSWORD_REGEX = /^(?=.*[!"#$%&'()*+,-.:;<=>?@\\/\\[\]^_`{|}~])/;
+
+export const PASSWORD_SPECIAL = 'passwordSpecial';
+
+export function specialPasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingSpecial = !SPECIAL_PASSWORD_REGEX.test(control.value);
+        return missingSpecial ? { [PASSWORD_SPECIAL]: true } : null;
+    };
+}

frontend/src/app/account/_validators/uppercase-password.ts

@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const UPPERCASE_PASSWORD_REGEX = /^(?=.*[A-Z])/;
+
+export const PASSWORD_UPPERCASE = 'passwordUppercase';
+
+export function uppercasePasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingUppercase = !UPPERCASE_PASSWORD_REGEX.test(control.value);
+        return missingUppercase ? { [PASSWORD_UPPERCASE]: true } : null;
+    };
+}

frontend/src/app/account/_validators/weak-password.validator.ts

@@ -1,13 +1,21 @@
 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
-
-export const STRONG_PASSWORD_REGEX =
-    /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})(?=.*[!"#$%&'()*+,-.:;<=>?@\\/\\[\]^_`{|}~])/;
+import { LOWERCASE_PASSWORD_REGEX } from './lowercase-password';
+import { UPPERCASE_PASSWORD_REGEX } from './uppercase-password';
+import { NUMERIC_PASSWORD_REGEX } from './numeric-password';
+import { SPECIAL_PASSWORD_REGEX } from './special-password';
+import { SHORT_PASSWORD_REGEX } from './short-password';
 
 export const PASSWORD_WEAK = 'passwordWeak';
 
 export function weakPasswordValidator(): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
-        const weak = !STRONG_PASSWORD_REGEX.test(control.value);
+        const weak = !(
+            LOWERCASE_PASSWORD_REGEX.test(control.value) &&
+            UPPERCASE_PASSWORD_REGEX.test(control.value) &&
+            NUMERIC_PASSWORD_REGEX.test(control.value) &&
+            SPECIAL_PASSWORD_REGEX.test(control.value) &&
+            SHORT_PASSWORD_REGEX.test(control.value)
+        );
         return weak ? { [PASSWORD_WEAK]: true } : null;
     };
 }

frontend/src/app/account/account.component.css

@@ -1,3 +1,13 @@
+.layout-container {
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 80px); 
+    width: 100%;
+    justify-content: center; 
+    align-items: center; 
+    padding: 1rem;
+}
+
 .container {
     padding: 2rem;
     background-color: var(--surface-section);

frontend/src/app/account/layout.component.html

@@ -1,4 +1,3 @@
-<div class="flex flex-column h-full w-full justify-content-center align-items-center p-2" style="margin-top: -80px">
-    <h2 class="mb-2">Welcome to PeerPrep</h2>
+<div class="layout-container">
     <router-outlet></router-outlet>
 </div>

frontend/src/app/account/layout.component.ts

@@ -5,6 +5,7 @@ import { Router, RouterModule } from '@angular/router';
     standalone: true,
     imports: [RouterModule],
     templateUrl: './layout.component.html',
+    styleUrl: './account.component.css',
 })
 export class LayoutComponent {
     constructor(private router: Router) {}