feat: implement password management web updates

src/app/common/change-password-dialog/change-password-dialog.component.html

@@ -0,0 +1,54 @@
+<h2 mat-dialog-title>Change Password</h2>
+
+<mat-dialog-content>
+  <form #form="ngForm" (ngSubmit)="changePassword()" class="change-password-form">
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Current Password</mat-label>
+      <input
+        type="password"
+        matInput
+        name="currentPassword"
+        required
+        [(ngModel)]="formData.currentPassword"
+      />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>New Password</mat-label>
+      <input
+        type="password"
+        matInput
+        name="newPassword"
+        required
+        [(ngModel)]="formData.newPassword"
+      />
+      <mat-hint>Password must be at least 8 characters long</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full">
+      <mat-label>Confirm New Password</mat-label>
+      <input
+        type="password"
+        matInput
+        name="confirmPassword"
+        required
+        [(ngModel)]="formData.confirmPassword"
+      />
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="cancel()" [disabled]="changingPassword">
+    Cancel
+  </button>
+  <button
+    mat-flat-button
+    color="primary"
+    (click)="changePassword()"
+    [disabled]="form.invalid || changingPassword"
+  >
+    {{ changingPassword ? 'Changing...' : 'Change Password' }}
+  </button>
+</mat-dialog-actions>
+

src/app/common/change-password-dialog/change-password-dialog.component.scss

@@ -0,0 +1,25 @@
+.change-password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 400px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+.mat-hint {
+  font-size: 12px;
+  color: #666;
+}
+
+mat-dialog-actions {
+  padding: 1rem 0 0 0;
+  margin: 0;
+}
+
+button {
+  min-width: 100px;
+}
+

src/app/common/change-password-dialog/change-password-dialog.component.ts

@@ -0,0 +1,76 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { HttpClient } from '@angular/common/http';
+import { AlertService } from 'src/app/common/services/alert.service';
+import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import { AuthenticationService } from 'src/app/api/services/authentication.service';
+
+@Component({
+  selector: 'f-change-password-dialog',
+  templateUrl: './change-password-dialog.component.html',
+  styleUrls: ['./change-password-dialog.component.scss'],
+})
+export class ChangePasswordDialogComponent {
+  changingPassword: boolean = false;
+  formData = {
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  };
+
+  constructor(
+    public dialogRef: MatDialogRef<ChangePasswordDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private httpClient: HttpClient,
+    private alerts: AlertService,
+    private constants: DoubtfireConstants,
+    private authService: AuthenticationService
+  ) {}
+
+  changePassword(): void {
+    if (this.formData.newPassword !== this.formData.confirmPassword) {
+      this.alerts.error('New passwords do not match', 6000);
+      return;
+    }
+
+    if (this.formData.newPassword.length < 8) {
+      this.alerts.error('New password must be at least 8 characters long', 6000);
+      return;
+    }
+
+    this.changingPassword = true;
+
+    this.httpClient.post(`${this.constants.API_URL}/password/change`, {
+      current_password: this.formData.currentPassword,
+      password: this.formData.newPassword,
+      password_confirmation: this.formData.confirmPassword
+    }).subscribe({
+      next: (response: any) => {
+        this.changingPassword = false;
+        this.alerts.success('Password changed successfully!', 6000);
+        this.dialogRef.close(true);
+      },
+      error: (error) => {
+        this.changingPassword = false;
+        this.formData.currentPassword = '';
+        this.formData.newPassword = '';
+        this.formData.confirmPassword = '';
+
+        let errorMessage = 'Password change failed';
+        if (error.error && error.error.error) {
+          errorMessage = error.error.error;
+          if (error.error.details) {
+            errorMessage += ': ' + error.error.details.join(', ');
+          }
+        }
+
+        this.alerts.error(errorMessage, 6000);
+      },
+    });
+  }
+
+  cancel(): void {
+    this.dialogRef.close(false);
+  }
+}
+

src/app/common/edit-profile-form/edit-profile-form.component.html

@@ -87,6 +87,19 @@ <h1>{{ initialFirstName }}</h1>
         <input type="email" matInput [(ngModel)]="user.email" name="email" required />
       </mat-form-field>
 
+      @if (showPasswordManagement) {
+        <div fxLayout="row" fxFlexFill style="margin-top: 20px;">
+          <button 
+            mat-stroked-button 
+            color="primary" 
+            (click)="openChangePasswordDialog()"
+            type="button">
+            <mat-icon>lock</mat-icon>
+            Change Password
+          </button>
+        </div>
+      }
+
       @if (canSeeSystemRole) {
       <mat-form-field fxFlexFill appearance="outline">
         <mat-label>System Role</mat-label>

src/app/common/edit-profile-form/edit-profile-form.component.ts

@@ -1,11 +1,12 @@
 import { Component, Inject, Input, OnInit, Optional } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { StateService } from '@uirouter/core';
 import { User } from 'src/app/api/models/user/user';
 import { AuthenticationService } from 'src/app/api/services/authentication.service';
 import { UserService } from 'src/app/api/services/user.service';
 import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
+import { ChangePasswordDialogComponent } from '../change-password-dialog/change-password-dialog.component';
 
 @Component({
   selector: 'f-edit-profile-form',
@@ -19,7 +20,8 @@ export class EditProfileFormComponent implements OnInit {
     private state: StateService,
     private authService: AuthenticationService,
     @Optional() @Inject(MAT_DIALOG_DATA) public data: { user: User; mode: 'edit' | 'create' | 'new' },
-    private _snackBar: MatSnackBar
+    private _snackBar: MatSnackBar,
+    private dialog: MatDialog
   ) {
     this.user = data?.user || this.userService.currentUser;
   }
@@ -78,6 +80,11 @@ export class EditProfileFormComponent implements OnInit {
     return this.constants.IsTiiEnabled.value;
   }
 
+  public get showPasswordManagement(): boolean {
+    // Show password management if user is authenticated and not in create mode
+    return this.authService.isAuthenticated() && this.mode !== 'create';
+  }
+
   public submit(): void {
     this.user.pronouns = this.customPronouns ? this.user.pronouns : this.formPronouns.pronouns;
     this.user.hasRunFirstTimeSetup = true;
@@ -118,4 +125,21 @@ export class EditProfileFormComponent implements OnInit {
       });
     }
   }
+
+  public openChangePasswordDialog(): void {
+    const dialogRef = this.dialog.open(ChangePasswordDialogComponent, {
+      width: '500px',
+      data: {}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this._snackBar.open('Password changed successfully', 'dismiss', {
+          duration: 3000,
+          horizontalPosition: 'end',
+          verticalPosition: 'top',
+        });
+      }
+    });
+  }
 }

src/app/doubtfire-angular.module.ts

@@ -179,6 +179,10 @@ import {ObjectSelectComponent} from './common/obect-select/object-select.compone
 import {WelcomeComponent} from './welcome/welcome.component';
 import {HeroSidebarComponent} from './common/hero-sidebar/hero-sidebar.component';
 import {SignInComponent} from './sessions/states/sign-in/sign-in.component';
+import {RegisterComponent} from './sessions/states/register/register.component';
+import {ForgotPasswordComponent} from './sessions/states/forgot-password/forgot-password.component';
+import {ResetPasswordComponent} from './sessions/states/reset-password/reset-password.component';
+import {ChangePasswordDialogComponent} from './common/change-password-dialog/change-password-dialog.component';
 import {EditProfileFormComponent} from './common/edit-profile-form/edit-profile-form.component';
 import {TransitionHooksService} from './sessions/transition-hooks.service';
 import {EditProfileComponent} from './account/edit-profile/edit-profile.component';
@@ -298,6 +302,10 @@ import {GradeService} from './common/services/grade.service';
     AcceptEulaComponent,
     HeroSidebarComponent,
     SignInComponent,
+    RegisterComponent,
+    ForgotPasswordComponent,
+    ResetPasswordComponent,
+    ChangePasswordDialogComponent,
     EditProfileFormComponent,
     EditProfileComponent,
     UserBadgeComponent,

src/app/doubtfire.states.ts

@@ -3,6 +3,9 @@ import {InstitutionSettingsComponent} from './admin/institution-settings/institu
 import {HomeComponent} from './home/states/home/home.component';
 import {WelcomeComponent} from './welcome/welcome.component';
 import {SignInComponent} from './sessions/states/sign-in/sign-in.component';
+import {RegisterComponent} from './sessions/states/register/register.component';
+import {ForgotPasswordComponent} from './sessions/states/forgot-password/forgot-password.component';
+import {ResetPasswordComponent} from './sessions/states/reset-password/reset-password.component';
 import {EditProfileComponent} from './account/edit-profile/edit-profile.component';
 import {TeachingPeriodListComponent} from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
 import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
@@ -185,6 +188,54 @@ const SignInState: NgHybridStateDeclaration = {
   },
 };
 
+/**
+ * Define the Register state.
+ */
+const RegisterState: NgHybridStateDeclaration = {
+  name: 'register',
+  url: '/register',
+  views: {
+    main: {
+      component: RegisterComponent,
+    },
+  },
+  data: {
+    pageTitle: 'Create Account',
+  },
+};
+
+/**
+ * Define the Forgot Password state.
+ */
+const ForgotPasswordState: NgHybridStateDeclaration = {
+  name: 'forgot-password',
+  url: '/forgot-password',
+  views: {
+    main: {
+      component: ForgotPasswordComponent,
+    },
+  },
+  data: {
+    pageTitle: 'Forgot Password',
+  },
+};
+
+/**
+ * Define the Reset Password state.
+ */
+const ResetPasswordState: NgHybridStateDeclaration = {
+  name: 'reset-password',
+  url: '/reset-password?token',
+  views: {
+    main: {
+      component: ResetPasswordComponent,
+    },
+  },
+  data: {
+    pageTitle: 'Reset Password',
+  },
+};
+
 /**
  * Define the Edit Profile state.
  */
@@ -300,6 +351,9 @@ export const doubtfireStates = [
   HomeState,
   WelcomeState,
   SignInState,
+  RegisterState,
+  ForgotPasswordState,
+  ResetPasswordState,
   EditProfileState,
   EulaState,
   usersState,

src/app/sessions/states/forgot-password/forgot-password.component.html

@@ -0,0 +1,61 @@
+<section class="welcome flex flex-row custom-md-h-screen">
+  <f-hero-sidebar class="sidebar self-start flex-col h-full"></f-hero-sidebar>
+  <section class="content flex flex-col custom-md-h-screen">
+    <div class="container">
+      <div class="subcontainer">
+        <div class="wordmark flex-row place-content-start">
+          <img src="../../../assets/images/logo-bw.svg" width="40px" alt="Homepage Logo" />
+          <p>Reset Password</p>
+        </div>
+        <h1 class="welcome-heading flex flex-row place-content-start">
+          Forgot Your Password?
+        </h1>
+
+        @if (!emailSent) {
+          <p class="description">
+            Enter your email address and we'll send you a link to reset your password.
+          </p>
+
+          <form
+            #form="ngForm"
+            (ngSubmit)="requestPasswordReset()"
+            class="sign-in-form flex flex-col"
+          >
+            <mat-form-field appearance="outline" class="flex-1 h-full w-full">
+              <mat-label>Email</mat-label>
+              <input matInput type="email" name="email" required [(ngModel)]="formData.email" />
+            </mat-form-field>
+
+            <button
+              class="w-full"
+              mat-flat-button
+              color="primary"
+              type="submit"
+              [disabled]="form.invalid || requestingReset"
+            >
+              {{ requestingReset ? 'Sending...' : 'Send Reset Link' }}
+            </button>
+          </form>
+        } @else {
+          <div class="success-message">
+            <mat-icon color="primary" class="success-icon">email</mat-icon>
+            <h2>Check Your Email</h2>
+            <p>We've sent a password reset link to <strong>{{ formData.email }}</strong></p>
+            <p class="note">If you don't see the email, check your spam folder.</p>
+          </div>
+        }
+
+        <button
+          type="button"
+          class="w-full mt-2"
+          mat-stroked-button
+          color="primary"
+          (click)="goToLogin()"
+        >
+          Back to Sign In
+        </button>
+      </div>
+    </div>
+  </section>
+</section>
+