Create Profile Page

Profile page is under '/account' route. It allows users to change
account details and password.

I moved around some files and refactored getters from register.component into
forms.utils.service.

Slightly changed behavior of user service update user. Did not
understand what it was trying to do before, so I changed it to work. It
feels like it works, but not extensively tested.

Known bugs: (1) Enter does not submit edit forms. (2) Edit profile form does not
inherit theme from primeng.

Author: LimZiJia

frontend/src/_services/authentication.service.ts

@@ -68,6 +68,16 @@ export class AuthenticationService extends ApiService {
             .pipe(switchMap(() => this.login(username, password))); // auto login after registration
     }
 
+    updateAccount(username: string, email: string, password: string) {
+        return this.http
+            .patch<UServRes>(
+                `${this.apiUrl}/users/${this.userValue!.id}`,
+                { username: username, email: email, password: password },
+                { observe: 'response' },
+            )
+            .pipe(switchMap(() => this.login(username, password))); // login to update local storage and subject
+    }
+
     logout() {
         // remove user from local storage to log user out
         localStorage.removeItem('user');

frontend/src/_services/form.utils.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { PASSWORD_LOWERCASE } from '../app/account/_validators/lowercase-password';
+import { PASSWORD_UPPERCASE } from '../app/account/_validators/uppercase-password';
+import { PASSWORD_NUMERIC } from '../app/account/_validators/numeric-password';
+import { PASSWORD_SPECIAL } from '../app/account/_validators/special-password';
+import { PASSWORD_SHORT } from '../app/account/_validators/short-password';
+import { PASSWORD_WEAK } from '../app/account/_validators/weak-password.validator';
+import { PASSWORD_MISMATCH } from '../app/account/_validators/mismatch-password.validator';
+import { USERNAME_INVALID } from '../app/account/_validators/invalid-username.validator';
+import { PASSWORD_INVALID } from '../app/account/_validators/invalid-password.validator';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class FormUtilsService {
+    get isUsernameInvalid(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => {
+            const usernameControl = form.controls['username'];
+            return usernameControl.dirty && usernameControl.hasError(USERNAME_INVALID);
+        };
+    }
+
+    get isEmailInvalid(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => {
+            const emailControl = form.controls['email'];
+            return emailControl.dirty && emailControl.invalid;
+        };
+    }
+
+    get passwordControl(): (form: FormGroup) => AbstractControl {
+        return (form: FormGroup) => form.controls['password'];
+    }
+
+    get isPasswordControlDirty(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).dirty;
+    }
+
+    get passwordHasNoLowercase(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).pristine || this.passwordControl(form).hasError(PASSWORD_LOWERCASE);
+    }
+
+    get passwordHasNoUppercase(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).pristine || this.passwordControl(form).hasError(PASSWORD_UPPERCASE);
+    }
+
+    get passwordHasNoNumeric(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).pristine || this.passwordControl(form).hasError(PASSWORD_NUMERIC);
+    }
+
+    get passwordHasNoSpecial(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).pristine || this.passwordControl(form).hasError(PASSWORD_SPECIAL);
+    }
+
+    get isPasswordShort(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).pristine || this.passwordControl(form).hasError(PASSWORD_SHORT);
+    }
+
+    get isPasswordWeak(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).dirty && this.passwordControl(form).hasError(PASSWORD_WEAK);
+    }
+
+    get isPasswordStrong(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).dirty && !this.passwordControl(form).hasError(PASSWORD_WEAK);
+    }
+
+    get isPasswordInvalid(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => this.passwordControl(form).dirty && this.passwordControl(form).hasError(PASSWORD_INVALID);
+    }
+
+    get hasPasswordMismatch(): (form: FormGroup) => boolean {
+        return (form: FormGroup) => {
+            const confirmPasswordControl = form.controls['confirmPassword'];
+            return this.passwordControl(form).valid && confirmPasswordControl.dirty && form.hasError(PASSWORD_MISMATCH);
+        };
+    }
+}

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

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { LoginComponent } from './login.component';
-import { RegisterComponent } from './register.component';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 import { LayoutComponent } from './layout.component';
+import { ProfileComponent } from './profile/profile.component';
+import { HistoryComponent } from './history/history.component';
 
 const routes: Routes = [
     {
@@ -13,6 +15,8 @@ const routes: Routes = [
             { path: '', redirectTo: 'login', pathMatch: 'full' },
             { path: 'login', component: LoginComponent },
             { path: 'register', component: RegisterComponent },
+            { path: 'profile', component: ProfileComponent },
+            {path: 'history', component: HistoryComponent},
         ],
     },
 ];

frontend/src/app/account/account.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
-import { LoginComponent } from './login.component';
-import { RegisterComponent } from './register.component';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 import { LayoutComponent } from './layout.component';
 import { AccountRoutingModule } from './account.component';
+import { ProfileComponent } from './profile/profile.component';
+import { HistoryComponent } from './history/history.component';
 
 @NgModule({
     imports: [
@@ -15,6 +17,8 @@ import { AccountRoutingModule } from './account.component';
         LayoutComponent,
         LoginComponent,
         RegisterComponent,
+        ProfileComponent,
+        HistoryComponent,
     ],
 })
 export class AccountModule {}

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { MessageService } from 'primeng/api';
+import { AuthenticationService } from '../../../_services/authentication.service';
+
+@Component({
+    standalone: true,
+    imports: [],
+    providers: [MessageService],
+    templateUrl: './history.component.html',
+    styleUrl: './history.component.css',
+})
+export class HistoryComponent {
+    constructor(
+        private authenticationService: AuthenticationService,
+    ) {}
+
+}

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

@@ -7,15 +7,15 @@ import { PasswordModule } from 'primeng/password';
 import { ButtonModule } from 'primeng/button';
 import { ToastModule } from 'primeng/toast';
 import { MessageService } from 'primeng/api';
-import { AuthenticationService } from '../../_services/authentication.service';
+import { AuthenticationService } from '../../../_services/authentication.service';
 
 @Component({
     selector: 'app-login',
     standalone: true,
     imports: [RouterLink, FormsModule, InputTextModule, ButtonModule, SelectButtonModule, PasswordModule, ToastModule],
     providers: [MessageService],
     templateUrl: './login.component.html',
-    styleUrl: './account.component.css',
+    styleUrl: '../account.component.css',
 })
 export class LoginComponent {
     constructor(