feat(forgot-password-design): resolved review comments

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.ts

@@ -1,14 +1,10 @@
 import { Component, inject, signal } from '@angular/core';
 import { InputText } from 'primeng/inputtext';
-import {
- ReactiveFormsModule,
- FormBuilder,
- FormGroup,
- Validators,
-} from '@angular/forms';
+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',
@@ -18,15 +14,11 @@ import { Message } from 'primeng/message';
  styleUrl: './forgot-password.component.scss',
 })
 export class ForgotPasswordComponent {
- forgotPasswordForm: FormGroup;
- message = signal<null | MessageInfo>(null);
- private fb = inject(FormBuilder);
-
- constructor() {
- this.forgotPasswordForm = this.fb.group({
- email: ['', [Validators.required, Validators.email]],
- });
- }
+ #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

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

@@ -4,36 +4,36 @@ <h2>Reset Password</h2>
 
  <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
  <div class="field">
- <label for="password">New Password</label>
+ <label for="newPassword">New Password</label>
  <p-password
- id="password"
- formControlName="password"
+ id="newPassword"
+ formControlName="newPassword"
  [toggleMask]="true"
  [feedback]="false"
  autocomplete="new-password"
  ></p-password>
 
  <osf-password-input-hint
  [isError]="
- resetPasswordForm.get('password')?.errors &&
- resetPasswordForm.get('password')?.touched
+ resetPasswordForm.get('newPassword')?.errors &&
+ resetPasswordForm.get('newPassword')?.touched
  "
  />
  </div>
 
  <div class="field">
- <label for="confirmPassword">Confirm New Password</label>
+ <label for="confirmNewPassword">Confirm New Password</label>
  <p-password
- id="confirmPassword"
- formControlName="confirmPassword"
+ id="confirmNewPassword"
+ formControlName="confirmNewPassword"
  [toggleMask]="true"
  [feedback]="false"
  autocomplete="new-password"
  ></p-password>
  @if (
- resetPasswordForm.get("confirmPassword")?.errors?.[
+ resetPasswordForm.get("confirmNewPassword")?.errors?.[
  "passwordMismatch"
- ] && resetPasswordForm.get("confirmPassword")?.touched
+ ] && resetPasswordForm.get("confirmNewPassword")?.touched
  ) {
  <small class="text-danger">Passwords must match</small>
  }
@@ -43,7 +43,7 @@ <h2>Reset Password</h2>
  class="btn-full-width"
  type="submit"
  label="Reset Password"
- [disabled]="!resetPasswordForm.valid"
+ [disabled]="resetPasswordForm.invalid"
  ></p-button>
  </form>
  </section>

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

@@ -45,6 +45,10 @@
  color: var.$pr-blue-1;
  font-weight: 600;
  }
+
+ .btn-full-width {
+ margin-top: 1.5rem;
+ }
  }
  }
 }

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

@@ -1,18 +1,14 @@
-import { Component, inject, OnInit, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { Button } from 'primeng/button';
-import {
- FormBuilder,
- FormGroup,
- ReactiveFormsModule,
- Validators,
-} from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Password } from 'primeng/password';
 import { RouterLink } from '@angular/router';
 import {
  PASSWORD_REGEX,
  passwordMatchValidator,
 } from '../sign-up/sign-up.helper';
 import { PasswordInputHintComponent } from '@shared/components/password-input-hint/password-input-hint.component';
+import { ResetPasswordFormGroupType } from './reset-password-form-group.type';
 
 @Component({
  selector: 'osf-reset-password',
@@ -27,31 +23,23 @@ import { PasswordInputHintComponent } from '@shared/components/password-input-hi
  templateUrl: './reset-password.component.html',
  styleUrl: './reset-password.component.scss',
 })
-export class ResetPasswordComponent implements OnInit {
- private fb = inject(FormBuilder);
- passwordRegex: RegExp = PASSWORD_REGEX;
- resetPasswordForm: FormGroup = new FormGroup({});
+export class ResetPasswordComponent {
+ #fb = inject(FormBuilder);
+ passwordRegex = PASSWORD_REGEX;
+ resetPasswordForm: ResetPasswordFormGroupType = this.#fb.group(
+ {
+ newPassword: [
+ '',
+ [Validators.required, Validators.pattern(this.passwordRegex)],
+ ],
+ confirmNewPassword: ['', Validators.required],
+ },
+ {
+ validators: passwordMatchValidator(),
+ },
+ );
  isFormSubmitted = signal(false);
 
- ngOnInit(): void {
- this.initializeForm();
- }
-
- private initializeForm(): void {
- this.resetPasswordForm = this.fb.group(
- {
- password: [
- '',
- [Validators.required, Validators.pattern(this.passwordRegex)],
- ],
- confirmPassword: ['', Validators.required],
- },
- {
- validators: passwordMatchValidator(),
- },
- );
- }
-
  onSubmit(): void {
  if (this.resetPasswordForm.valid) {
  // TODO: Implement password reset logic

src/app/shared/components/password-input-hint/password-input-hint.component.ts

@@ -1,4 +1,5 @@
 import { Component, input } from '@angular/core';
+import { BooleanOrNullOrUndefined } from '@core/helpers/types.helper';
 
 @Component({
  selector: 'osf-password-input-hint',
@@ -7,5 +8,5 @@ import { Component, input } from '@angular/core';
  styleUrl: './password-input-hint.component.scss',
 })
 export class PasswordInputHintComponent {
- isError = input<boolean | null | undefined>(false);
+ isError = input<BooleanOrNullOrUndefined>(false);
 }