feat: add forgot/reset password feature and update related components

Author: MillicentAmolo

src/app/account/edit-profile/edit-profile.component.html

@@ -2,6 +2,25 @@
   <div fxFlex.gt-sm="20"></div>
   <div fxFlex class="form-container">
     <f-edit-profile-form mode="edit"></f-edit-profile-form>
+
+    <mat-divider></mat-divider>
+
+    <section class="change-password">
+      <h2>Change Password</h2>
+      <form (ngSubmit)="changePassword()" #pwForm="ngForm" class="flex flex-col">
+        <mat-form-field appearance="outline">
+          <mat-label>Current Password</mat-label>
+          <input matInput type="password" name="current_password" required [(ngModel)]="current_password" />
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>New Password</mat-label>
+          <input matInput type="password" name="new_password" required [(ngModel)]="new_password" />
+        </mat-form-field>
+        <button mat-flat-button color="primary" [disabled]="pwForm.invalid || changing">
+          Update Password
+        </button>
+      </form>
+    </section>
   </div>
   <div fxFlex.gt-sm="20"></div>
 </div>

src/app/account/edit-profile/edit-profile.component.ts

@@ -1,9 +1,33 @@
 import { Component } from '@angular/core';
+import { AuthenticationService } from 'src/app/api/services/authentication.service';
+import { AlertService } from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'f-edit-profile',
   templateUrl: './edit-profile.component.html',
   styleUrls: ['./edit-profile.component.scss'],
 })
 export class EditProfileComponent {
+  current_password: string = '';
+  new_password: string = '';
+  changing = false;
+
+  constructor(private auth: AuthenticationService, private alerts: AlertService) {}
+
+  changePassword(): void {
+    if (!this.current_password || !this.new_password) return;
+    this.changing = true;
+    this.auth.changePassword(this.current_password, this.new_password).subscribe({
+      next: () => {
+        this.changing = false;
+        this.current_password = '';
+        this.new_password = '';
+        this.alerts.success('Password updated.', 6000);
+      },
+      error: (err) => {
+        this.changing = false;
+        this.alerts.error(err, 6000);
+      },
+    });
+  }
 }

src/app/api/services/authentication.service.ts

@@ -191,4 +191,45 @@ export class AuthenticationService {
       setTimeout(() => this.router.stateService.go('timeout'), 500);
     }
   }
+
+  // Account registration (local auth only)
+  public register(data: {
+    username: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+    password: string;
+  }): Observable<any> {
+    const url = `${this.AUTH_URL}/register`;
+    return this.httpClient.post(url, data).pipe(
+      map((response: any) => {
+        const user: User = this.userService.cache.getOrCreate(
+          response['user']['id'],
+          this.userService,
+          response['user'],
+        );
+        user.authenticationToken = response['auth_token'];
+        this.tryChangeUser(user, true);
+        setTimeout(() => this.updateAuth(), 1000 * 60 * 60);
+      }),
+    );
+  }
+
+  // Forgot password (request reset email/token)
+  public forgotPassword(email: string): Observable<any> {
+    const url = `${this.AUTH_URL}/password/forgot`;
+    return this.httpClient.post(url, {email});
+  }
+
+  // Reset password using token from email/link
+  public resetPassword(token: string, password: string): Observable<any> {
+    const url = `${this.AUTH_URL}/password/reset`;
+    return this.httpClient.post(url, {token, password});
+  }
+
+  // Change password for logged-in user
+  public changePassword(current_password: string, new_password: string): Observable<any> {
+    const url = `${this.AUTH_URL}/password`;
+    return this.httpClient.put(url, {current_password, new_password});
+  }
 }

src/app/doubtfire-angular.module.ts

@@ -179,6 +179,8 @@ 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 {ForgotPasswordComponent} from './sessions/states/forgot-password/forgot-password.component';
+import {ResetPasswordComponent} from './sessions/states/reset-password/reset-password.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 +300,8 @@ import {GradeService} from './common/services/grade.service';
     AcceptEulaComponent,
     HeroSidebarComponent,
     SignInComponent,
+    ForgotPasswordComponent,
+    ResetPasswordComponent,
     EditProfileFormComponent,
     EditProfileComponent,
     UserBadgeComponent,

src/app/doubtfire.states.ts

@@ -3,6 +3,8 @@ 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 {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';
@@ -300,6 +302,18 @@ export const doubtfireStates = [
   HomeState,
   WelcomeState,
   SignInState,
+  {
+    name: 'forgot_password',
+    url: '/forgot_password',
+    views: {main: {component: ForgotPasswordComponent}},
+    data: {pageTitle: 'Forgot Password'},
+  },
+  {
+    name: 'reset_password',
+    url: '/reset_password?token',
+    views: {main: {component: ResetPasswordComponent}},
+    data: {pageTitle: 'Reset Password'},
+  },
   EditProfileState,
   EulaState,
   usersState,

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

@@ -0,0 +1,16 @@
+<section class="container">
+  <h1>Forgot Password</h1>
+  <form (ngSubmit)="submit()" #form="ngForm" class="flex flex-col">
+    <mat-form-field appearance="outline">
+      <mat-label>Email</mat-label>
+      <input matInput name="email" required [(ngModel)]="email" />
+    </mat-form-field>
+    <button mat-flat-button color="primary" [disabled]="form.invalid || submitting">
+      Send Reset Link
+    </button>
+  </form>
+  <p *ngIf="submitted">If an account exists, a reset link was sent.</p>
+</section>
+
+
+

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

@@ -0,0 +1,7 @@
+section.container {
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+
+

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

@@ -0,0 +1,37 @@
+import {Component} from '@angular/core';
+import {AuthenticationService} from 'src/app/api/services/authentication.service';
+import {AlertService} from 'src/app/common/services/alert.service';
+
+@Component({
+  selector: 'f-forgot-password',
+  templateUrl: './forgot-password.component.html',
+  styleUrls: ['./forgot-password.component.scss'],
+})
+export class ForgotPasswordComponent {
+  email: string = '';
+  submitting = false;
+  submitted = false;
+
+  constructor(private auth: AuthenticationService, private alerts: AlertService) {}
+
+  submit(): void {
+    if (!this.email) return;
+    this.submitting = true;
+    this.auth.forgotPassword(this.email).subscribe({
+      next: () => {
+        this.submitting = false;
+        this.submitted = true;
+        this.alerts.success('If an account exists, a reset link was sent.', 6000);
+      },
+      error: () => {
+        this.submitting = false;
+        this.submitted = true;
+        // same message to avoid enumeration
+        this.alerts.success('If an account exists, a reset link was sent.', 6000);
+      },
+    });
+  }
+}
+
+
+

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

@@ -0,0 +1,15 @@
+<section class="container">
+  <h1>Reset Password</h1>
+  <form (ngSubmit)="submit()" #form="ngForm" class="flex flex-col">
+    <mat-form-field appearance="outline">
+      <mat-label>New Password</mat-label>
+      <input matInput type="password" name="password" required [(ngModel)]="password" />
+    </mat-form-field>
+    <button mat-flat-button color="primary" [disabled]="form.invalid || submitting">
+      Reset Password
+    </button>
+  </form>
+</section>
+
+
+

src/app/sessions/states/reset-password/reset-password.component.scss

@@ -0,0 +1,7 @@
+section.container {
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+
+