Feat/51 - Design Forgot Password Page

src/app/app.routes.ts

@@ -15,6 +15,20 @@ export const routes: Routes = [
             (mod) => mod.SignUpComponent,
           ),
       },
+      {
+        path: 'forgot-password',
+        loadComponent: () =>
+          import(
+            './features/auth/forgot-password/forgot-password.component'
+          ).then((mod) => mod.ForgotPasswordComponent),
+      },
+      {
+        path: 'reset-password',
+        loadComponent: () =>
+          import(
+            './features/auth/reset-password/reset-password.component'
+          ).then((mod) => mod.ResetPasswordComponent),
+      },
       {
         path: 'home',
         loadComponent: () =>

src/app/core/components/header/header.component.html

@@ -1,3 +1 @@
 <a [routerLink]="authButtonLink()" class="p-button">{{ authButtonText() }}</a>
-
-<p-button label="Donate" severity="contrast" />

src/app/core/components/sidenav/sidenav.component.html

@@ -10,12 +10,6 @@
           [routerLinkActiveOptions]="{ exact: true }"
         >
           @if (item.icon) {
-            <!--            <img-->
-            <!--              [ngSrc]="item.icon"-->
-            <!--              [alt]="item.label + ' icon'"-->
-            <!--              width="20"-->
-            <!--              height="20"-->
-            <!--            />-->
             <i [class]="'osf-icon-' + item.icon"></i>
           }
           <span>{{ item.label }}</span>

src/app/core/components/sidenav/sidenav.component.ts

@@ -20,5 +20,10 @@ export class SidenavComponent {
       label: 'Support',
       icon: 'support',
     },
+    {
+      path: '/donate',
+      label: 'Donate',
+      icon: 'donate',
+    },
   ];
 }

src/app/core/helpers/types.helper.ts

@@ -0,0 +1,20 @@
+export type StringOrNull = string | null;
+export type StringOrNullOrUndefined = string | null | undefined;
+
+export type BooleanOrNull = boolean | null;
+export type BooleanOrNullOrUndefined = boolean | null | undefined;
+
+export type NumberOrNull = number | null;
+export type NumberOrNullOrUndefined = number | null | undefined;
+
+export type DateOrNull = Date | null;
+export type DateOrNullOrUndefined = Date | null | undefined;
+
+export type ArrayOrNull<T> = T[] | null;
+export type ArrayOrNullOrUndefined<T> = T[] | null | undefined;
+
+export type ObjectOrNull<T> = T | null;
+export type ObjectOrNullOrUndefined<T> = T | null | undefined;
+
+export type Primitive = string | number | boolean | null | undefined;
+export type NonNullablePrimitive = string | number | boolean;

src/app/features/auth/forgot-password/forgot-password-form-group.type.ts

@@ -0,0 +1,3 @@
+import { FormControl, FormGroup } from '@angular/forms';
+
+export type ForgotPasswordFormGroupType = FormGroup<{ email: FormControl }>;

src/app/features/auth/forgot-password/forgot-password.component.html

@@ -0,0 +1,35 @@
+<section class="forgot-password-container">
+  <h2>Forgot Your Password?</h2>
+  <p>Enter your email address and we'll send a link to reset your password</p>
+
+  <form [formGroup]="forgotPasswordForm" (ngSubmit)="onSubmit()">
+    <label for="email">Email</label>
+    <input
+      class="email-input"
+      id="email"
+      type="email"
+      pInputText
+      formControlName="email"
+      placeholder="email@example.com"
+      autocomplete="off"
+    />
+
+    <p-button
+      class="btn-full-width"
+      type="submit"
+      label="Reset Password"
+      [disabled]="!forgotPasswordForm.valid"
+    ></p-button>
+  </form>
+
+  <div class="message-container">
+    @if (message()) {
+      <p-message
+        [severity]="message()?.severity"
+        closable="true"
+        [text]="message()?.content"
+        (onClose)="onCloseMessage()"
+      />
+    }
+  </div>
+</section>

src/app/features/auth/forgot-password/forgot-password.component.scss

@@ -0,0 +1,37 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  @include mix.flex-center;
+  flex: 1;
+  background: url("/assets/images/auth-background.png") center no-repeat;
+  background-size: cover;
+
+  .forgot-password-container {
+    position: relative;
+    @include mix.flex-column;
+    color: var.$dark-blue-1;
+    max-width: 32rem;
+    flex: 1;
+    gap: 1.2rem;
+    padding: 2rem;
+    background: white;
+    border-radius: 0.6rem;
+    box-shadow: 0 2px 4px var.$grey-outline;
+
+    h2 {
+      text-align: center;
+    }
+
+    .email-input {
+      margin-bottom: 2.5rem;
+    }
+
+    .message-container {
+      width: 100%;
+      position: absolute;
+      bottom: -4.5rem;
+      left: 0;
+    }
+  }
+}

src/app/features/auth/forgot-password/forgot-password.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+describe('ForgotPasswordComponent', () => {
+  let component: ForgotPasswordComponent;
+  let fixture: ComponentFixture<ForgotPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ForgotPasswordComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ForgotPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/auth/forgot-password/forgot-password.component.ts

@@ -0,0 +1,41 @@
+import { Component, inject, signal } from '@angular/core';
+import { InputText } from 'primeng/inputtext';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { Button } from 'primeng/button';
+import { MessageInfo } from './message-info.model';
+import { Message } from 'primeng/message';
+import { ForgotPasswordFormGroupType } from '@osf/features/auth/forgot-password/forgot-password-form-group.type';
+
+@Component({
+  selector: 'osf-forgot-password',
+  standalone: true,
+  imports: [InputText, ReactiveFormsModule, Button, Message],
+  templateUrl: './forgot-password.component.html',
+  styleUrl: './forgot-password.component.scss',
+})
+export class ForgotPasswordComponent {
+  #fb = inject(FormBuilder);
+  forgotPasswordForm: ForgotPasswordFormGroupType = this.#fb.group({
+    email: ['', [Validators.required, Validators.email]],
+  });
+  message = signal<MessageInfo | null>(null);
+
+  onSubmit(): void {
+    // TODO: Implement password reset logic
+    if (this.forgotPasswordForm.valid) {
+      this.message.set({
+        severity: 'success',
+        content: 'Thanks. Check your email to reset your password.',
+      });
+
+      // this.message.set({
+      //   severity: 'error',
+      //   content: 'Email not found.',
+      // });
+    }
+  }
+
+  onCloseMessage(): void {
+    this.message.set(null);
+  }
+}

src/app/features/auth/forgot-password/message-info.model.ts

@@ -0,0 +1,4 @@
+export interface MessageInfo {
+  severity: 'error' | 'warn' | 'success';
+  content: string;
+}

src/app/features/auth/reset-password/reset-password-form-group.type.ts

@@ -0,0 +1,6 @@
+import { FormControl, FormGroup } from '@angular/forms';
+
+export type ResetPasswordFormGroupType = FormGroup<{
+  newPassword: FormControl;
+  confirmNewPassword: FormControl;
+}>;

src/app/features/auth/reset-password/reset-password.component.html

@@ -0,0 +1,60 @@
+@if (!isFormSubmitted()) {
+  <section class="reset-password-container">
+    <h2>Reset Password</h2>
+
+    <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
+      <div class="field">
+        <label for="newPassword">New Password</label>
+        <p-password
+          id="newPassword"
+          formControlName="newPassword"
+          [toggleMask]="true"
+          [feedback]="false"
+          autocomplete="new-password"
+        ></p-password>
+
+        <osf-password-input-hint
+          [isError]="
+            resetPasswordForm.get('newPassword')?.errors &&
+            resetPasswordForm.get('newPassword')?.touched
+          "
+        />
+      </div>
+
+      <div class="field">
+        <label for="confirmNewPassword">Confirm New Password</label>
+        <p-password
+          id="confirmNewPassword"
+          formControlName="confirmNewPassword"
+          [toggleMask]="true"
+          [feedback]="false"
+          autocomplete="new-password"
+        ></p-password>
+        @if (
+          resetPasswordForm.get("confirmNewPassword")?.errors?.[
+            "passwordMismatch"
+          ] && resetPasswordForm.get("confirmNewPassword")?.touched
+        ) {
+          <small class="text-danger">Passwords must match</small>
+        }
+      </div>
+
+      <p-button
+        class="btn-full-width"
+        type="submit"
+        label="Reset Password"
+        [disabled]="resetPasswordForm.invalid"
+      ></p-button>
+    </form>
+  </section>
+} @else {
+  <section class="message-container">
+    <h2>Thank You!</h2>
+    <p class="message-text">You have successfully reset your password</p>
+    <p-button
+      class="btn-full-width"
+      label="Back to Sign In"
+      [routerLink]="['/sign-up']"
+    />
+  </section>
+}

src/app/features/auth/reset-password/reset-password.component.scss

@@ -0,0 +1,54 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  @include mix.flex-center;
+  flex: 1;
+  background: url("/assets/images/auth-background.png") center no-repeat;
+  background-size: cover;
+
+  .reset-password-container,
+  .message-container {
+    @include mix.flex-column;
+    color: var.$dark-blue-1;
+    max-width: 32rem;
+    flex: 1;
+    gap: 1.2rem;
+    padding: 2rem;
+    background: white;
+    border-radius: 0.6rem;
+    box-shadow: 0 2px 4px var.$grey-outline;
+
+    h2,
+    .message-text {
+      text-align: center;
+    }
+
+    .message-text {
+      margin-bottom: 1.5rem;
+    }
+
+    form {
+      @include mix.flex-column;
+      flex: 1;
+
+      .field {
+        margin-bottom: 1rem;
+
+        .text-danger {
+          color: var.$red-1;
+          font-weight: 600;
+        }
+      }
+
+      small {
+        color: var.$pr-blue-1;
+        font-weight: 600;
+      }
+
+      .btn-full-width {
+        margin-top: 1.5rem;
+      }
+    }
+  }
+}

src/app/features/auth/reset-password/reset-password.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetPasswordComponent } from './reset-password.component';
+
+describe('ResetPasswordComponent', () => {
+  let component: ResetPasswordComponent;
+  let fixture: ComponentFixture<ResetPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResetPasswordComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ResetPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});