From 816281edd9ba0139aa0ebc85c8fa8bb105ff00b5 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Mon, 4 Aug 2025 13:34:52 +0300
Subject: [PATCH 1/3] feat(sign-up): updated sign-up

---
 package.json                                  |   1 +
 src/app/app.routes.ts                         |   2 +-
 .../core/constants/ngxs-states.constant.ts    |   2 +-
 src/app/core/store/auth/auth.actions.ts       |   9 --
 src/app/core/store/auth/auth.selectors.ts     |  16 ---
 src/app/core/store/auth/auth.state.ts         |  32 ------
 src/app/features/auth/models/auth.model.ts    |   5 -
 ...ts => forgot-password-form-group.model.ts} |   0
 src/app/features/auth/models/index.ts         |   6 +-
 ....ts => reset-password-form-group.model.ts} |   0
 .../auth/models/sign-up-form.model.ts         |  10 ++
 src/app/features/auth/models/sign-up.model.ts |   8 ++
 .../auth/pages/sign-up/sign-up.component.html | 103 ++++++++---------
 .../auth/pages/sign-up/sign-up.component.scss | 105 ++++--------------
 .../auth/pages/sign-up/sign-up.component.ts   |  95 ++++++++++------
 .../features/auth/services/auth.service.ts    |  54 ++-------
 src/app/features/auth/store/auth.actions.ts   |   7 ++
 .../auth/store}/auth.model.ts                 |   0
 src/app/features/auth/store/auth.selectors.ts |   1 +
 src/app/features/auth/store/auth.state.ts     |  25 +++++
 .../auth => features/auth/store}/index.ts     |   0
 21 files changed, 193 insertions(+), 288 deletions(-)
 delete mode 100644 src/app/core/store/auth/auth.actions.ts
 delete mode 100644 src/app/core/store/auth/auth.selectors.ts
 delete mode 100644 src/app/core/store/auth/auth.state.ts
 rename src/app/features/auth/models/{forgot-password-form-group.type.ts => forgot-password-form-group.model.ts} (100%)
 rename src/app/features/auth/models/{reset-password-form-group.type.ts => reset-password-form-group.model.ts} (100%)
 create mode 100644 src/app/features/auth/models/sign-up-form.model.ts
 create mode 100644 src/app/features/auth/models/sign-up.model.ts
 create mode 100644 src/app/features/auth/store/auth.actions.ts
 rename src/app/{core/store/auth => features/auth/store}/auth.model.ts (100%)
 create mode 100644 src/app/features/auth/store/auth.selectors.ts
 create mode 100644 src/app/features/auth/store/auth.state.ts
 rename src/app/{core/store/auth => features/auth/store}/index.ts (100%)

diff --git a/package.json b/package.json
index e85611e3e..982090aba 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "diff": "^8.0.2",
     "markdown-it": "^14.1.0",
     "markdown-it-video": "^0.6.3",
+    "ngx-captcha": "^13.0.0",
     "ngx-cookie-service": "^19.1.2",
     "ngx-markdown-editor": "^5.3.4",
     "primeflex": "^4.0.0",
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index d9837053e..6b6b8d55b 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -40,7 +40,7 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'sign-up',
+        path: 'register',
         loadComponent: () =>
           import('./features/auth/pages/sign-up/sign-up.component').then((mod) => mod.SignUpComponent),
         data: { skipBreadcrumbs: true },
diff --git a/src/app/core/constants/ngxs-states.constant.ts b/src/app/core/constants/ngxs-states.constant.ts
index 1fc6a949c..dae608deb 100644
--- a/src/app/core/constants/ngxs-states.constant.ts
+++ b/src/app/core/constants/ngxs-states.constant.ts
@@ -1,5 +1,5 @@
-import { AuthState } from '@core/store/auth';
 import { UserState } from '@core/store/user';
+import { AuthState } from '@osf/features/auth/store';
 import { MeetingsState } from '@osf/features/meetings/store';
 import { ProjectMetadataState } from '@osf/features/project/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
diff --git a/src/app/core/store/auth/auth.actions.ts b/src/app/core/store/auth/auth.actions.ts
deleted file mode 100644
index 112d4d3c5..000000000
--- a/src/app/core/store/auth/auth.actions.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export class SetAuthToken {
-  static readonly type = '[Auth] Set Auth Token';
-
-  constructor(public accessToken: string) {}
-}
-
-export class ClearAuth {
-  static readonly type = '[Auth] Clear Auth';
-}
diff --git a/src/app/core/store/auth/auth.selectors.ts b/src/app/core/store/auth/auth.selectors.ts
deleted file mode 100644
index 51698a086..000000000
--- a/src/app/core/store/auth/auth.selectors.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Selector } from '@ngxs/store';
-
-import { AuthStateModel } from './auth.model';
-import { AuthState } from './auth.state';
-
-export class AuthSelectors {
-  @Selector([AuthState])
-  static isAuthenticated(state: AuthStateModel): boolean {
-    return state.isAuthenticated;
-  }
-
-  @Selector([AuthState])
-  static getAuthToken(state: AuthStateModel): string | null {
-    return state.accessToken;
-  }
-}
diff --git a/src/app/core/store/auth/auth.state.ts b/src/app/core/store/auth/auth.state.ts
deleted file mode 100644
index 3dc968c7b..000000000
--- a/src/app/core/store/auth/auth.state.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Action, State, StateContext } from '@ngxs/store';
-
-import { Injectable } from '@angular/core';
-
-import { ClearAuth, SetAuthToken } from './auth.actions';
-import { AuthStateModel } from './auth.model';
-
-@State<AuthStateModel>({
-  name: 'auth',
-  defaults: {
-    accessToken: null,
-    isAuthenticated: false,
-  },
-})
-@Injectable()
-export class AuthState {
-  @Action(SetAuthToken)
-  setAuthToken(ctx: StateContext<AuthStateModel>, action: SetAuthToken) {
-    ctx.patchState({
-      accessToken: action.accessToken,
-      isAuthenticated: true,
-    });
-  }
-
-  @Action(ClearAuth)
-  clearAuth(ctx: StateContext<AuthStateModel>) {
-    ctx.patchState({
-      accessToken: null,
-      isAuthenticated: false,
-    });
-  }
-}
diff --git a/src/app/features/auth/models/auth.model.ts b/src/app/features/auth/models/auth.model.ts
index 48cafe8b4..015668185 100644
--- a/src/app/features/auth/models/auth.model.ts
+++ b/src/app/features/auth/models/auth.model.ts
@@ -1,8 +1,3 @@
-export interface LoginCredentials {
-  email: string;
-  password: string;
-}
-
 export interface AuthResponse {
   accessToken: string;
 }
diff --git a/src/app/features/auth/models/forgot-password-form-group.type.ts b/src/app/features/auth/models/forgot-password-form-group.model.ts
similarity index 100%
rename from src/app/features/auth/models/forgot-password-form-group.type.ts
rename to src/app/features/auth/models/forgot-password-form-group.model.ts
diff --git a/src/app/features/auth/models/index.ts b/src/app/features/auth/models/index.ts
index f804db719..5d9696309 100644
--- a/src/app/features/auth/models/index.ts
+++ b/src/app/features/auth/models/index.ts
@@ -1,4 +1,6 @@
 export * from './auth.model';
-export * from './forgot-password-form-group.type';
+export * from './forgot-password-form-group.model';
 export * from './message-info.model';
-export * from './reset-password-form-group.type';
+export * from './reset-password-form-group.model';
+export * from './sign-up.model';
+export * from './sign-up-form.model';
diff --git a/src/app/features/auth/models/reset-password-form-group.type.ts b/src/app/features/auth/models/reset-password-form-group.model.ts
similarity index 100%
rename from src/app/features/auth/models/reset-password-form-group.type.ts
rename to src/app/features/auth/models/reset-password-form-group.model.ts
diff --git a/src/app/features/auth/models/sign-up-form.model.ts b/src/app/features/auth/models/sign-up-form.model.ts
new file mode 100644
index 000000000..77fa5957d
--- /dev/null
+++ b/src/app/features/auth/models/sign-up-form.model.ts
@@ -0,0 +1,10 @@
+import { FormControl } from '@angular/forms';
+
+export interface SignUpForm {
+  fullName: FormControl<string>;
+  email1: FormControl<string>;
+  email2: FormControl<string>;
+  password: FormControl<string>;
+  acceptedTermsOfService: FormControl<boolean>;
+  recaptcha: FormControl<string>;
+}
diff --git a/src/app/features/auth/models/sign-up.model.ts b/src/app/features/auth/models/sign-up.model.ts
new file mode 100644
index 000000000..07821db06
--- /dev/null
+++ b/src/app/features/auth/models/sign-up.model.ts
@@ -0,0 +1,8 @@
+export interface SignUpModel {
+  fullName: string;
+  email1: string;
+  email2: string;
+  password: string;
+  acceptedTermsOfService: boolean;
+  recaptcha: string;
+}
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.html b/src/app/features/auth/pages/sign-up/sign-up.component.html
index 8932e499b..6ab346197 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.html
+++ b/src/app/features/auth/pages/sign-up/sign-up.component.html
@@ -1,9 +1,9 @@
 @if (!isFormSubmitted()) {
-  <section class="sign-up-container" [class.mobile]="isMobile()">
-    <h2>{{ 'auth.signUp.title' | translate }}</h2>
+  <section class="sign-up-container p-4">
+    <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
 
-    <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
-      <div class="btn-group">
+    <form [formGroup]="signUpForm" class="mt-6" (ngSubmit)="onSubmit()">
+      <div class="flex flex-column gap-3">
         <p-button class="btn-full-width" [label]="'auth.signUp.social.orcid' | translate" variant="text" raised>
           <img ngSrc="assets/images/orcid.svg" alt="Orchid icon" height="20" width="20" />
         </p-button>
@@ -18,38 +18,43 @@ <h2>{{ 'auth.signUp.title' | translate }}</h2>
         </p-button>
       </div>
 
-      <p-divider class="my-5" align="center">
-        <span class="divider-text px-3">
+      <p-divider class="my-4" align="center">
+        <span class="px-3">
           {{ 'auth.signUp.divider' | translate }}
         </span>
       </p-divider>
 
-      <div class="form-fields">
-        <div class="field">
-          <label for="fullName">
-            {{ 'auth.signUp.form.fullName' | translate }}
-          </label>
-          <input
-            id="fullName"
-            type="text"
-            pInputText
-            formControlName="fullName"
-            [placeholder]="'auth.signUp.form.fullNamePlaceholder' | translate"
-          />
+      <div class="flex flex-column gap-2">
+        <div class="flex flex-column">
+          <osf-text-input
+            [control]="signUpForm.controls['fullName']"
+            [label]="'auth.signUp.form.fullName'"
+            [placeholder]="'auth.signUp.form.fullNamePlaceholder'"
+            [maxLength]="inputLimits.fullName.maxLength"
+          ></osf-text-input>
         </div>
 
-        <div class="field">
-          <label for="email">{{ 'auth.common.email' | translate }}</label>
-          <input
-            id="email"
+        <div class="flex flex-column">
+          <osf-text-input
+            [control]="signUpForm.controls['email1']"
+            [label]="'auth.common.email'"
+            [placeholder]="'auth.common.emailPlaceholder'"
             type="email"
-            pInputText
-            formControlName="email"
-            [placeholder]="'auth.common.emailPlaceholder' | translate"
-          />
+            [maxLength]="inputLimits.email.maxLength"
+          ></osf-text-input>
+        </div>
+
+        <div class="flex flex-column">
+          <osf-text-input
+            [control]="signUpForm.controls['email2']"
+            [label]="'auth.common.email'"
+            [placeholder]="'auth.common.emailPlaceholder'"
+            type="email"
+            [maxLength]="inputLimits.email.maxLength"
+          ></osf-text-input>
         </div>
 
-        <div class="field">
+        <div class="flex flex-column">
           <label for="password">
             {{ 'auth.common.password.new' | translate }}
           </label>
@@ -59,46 +64,32 @@ <h2>{{ 'auth.signUp.title' | translate }}</h2>
             [toggleMask]="true"
             [feedback]="false"
             autocomplete="new-password"
+            styleClass="w-full"
           ></p-password>
           <osf-password-input-hint
             [isError]="signUpForm.controls['password'].errors && signUpForm.get('password')?.touched"
           />
         </div>
 
-        <div class="field">
-          <label for="confirmPassword">
-            {{ 'auth.common.password.confirm' | translate }}
-          </label>
-          <p-password
-            id="confirmPassword"
-            formControlName="confirmPassword"
-            [toggleMask]="true"
-            [feedback]="false"
-            autocomplete="new-password"
-          ></p-password>
-          @if (
-            signUpForm.get('confirmPassword')?.errors?.['passwordMismatch'] &&
-            signUpForm.get('confirmPassword')?.touched
-          ) {
-            <small class="text-danger">
-              {{ 'auth.common.password.mismatch' | translate }}
-            </small>
-          }
-        </div>
-
-        <div class="field-checkbox">
-          <p-checkbox formControlName="agreeToTerms" [binary]="true" id="agreeToTerms"></p-checkbox>
-          <label for="agreeToTerms">
+        <div class="flex mt-1">
+          <p-checkbox formControlName="acceptedTermsOfService" [binary]="true" id="agreeTerms"></p-checkbox>
+          <label class="ml-2" for="agreeTerms">
             {{ 'auth.signUp.form.terms.agree' | translate }}
-            <a routerLink="/terms-of-use">{{ 'auth.signUp.form.terms.termsOfUse' | translate }}</a>
+            <a class="font-bold" routerLink="/terms-of-use">{{ 'auth.signUp.form.terms.termsOfUse' | translate }}</a>
             {{ 'auth.signUp.form.terms.and' | translate }}
-            <a routerLink="/privacy-policy">{{ 'auth.signUp.form.terms.privacyPolicy' | translate }}</a>
+            <a class="font-bold" routerLink="/privacy-policy">
+              {{ 'auth.signUp.form.terms.privacyPolicy' | translate }}
+            </a>
           </label>
         </div>
+
+        <div class="flex justify-content-center mt-3">
+          <ngx-recaptcha2 [siteKey]="siteKey" [useGlobalDomain]="false" formControlName="recaptcha"></ngx-recaptcha2>
+        </div>
       </div>
 
       <p-button
-        class="btn-full-width"
+        class="btn-full-width block mt-6"
         type="submit"
         [label]="'auth.signUp.form.submit' | translate"
         [disabled]="!signUpForm.valid"
@@ -106,8 +97,8 @@ <h2>{{ 'auth.signUp.title' | translate }}</h2>
     </form>
   </section>
 } @else {
-  <section class="message-container" [class.mobile]="isMobile()">
+  <section class="message-container text-center p-4">
     <h2>{{ 'auth.signUp.success.title' | translate }}</h2>
-    <p>{{ 'auth.signUp.success.message' | translate }}</p>
+    <p class="mt-4">{{ 'auth.signUp.success.message' | translate }}</p>
   </section>
 }
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.scss b/src/app/features/auth/pages/sign-up/sign-up.component.scss
index 85de9bafc..9bff85185 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.scss
+++ b/src/app/features/auth/pages/sign-up/sign-up.component.scss
@@ -1,98 +1,31 @@
 @use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
 
 :host {
   @include mix.flex-column-center;
   flex: 1;
   background: url("/assets/images/dark-blue-gradient.png") center no-repeat;
   background-size: cover;
+}
 
-  .sign-up-container,
-  .message-container {
-    @include mix.flex-column;
-    color: var.$dark-blue-1;
-    width: 32rem;
-    margin: 4.5rem 0 1.5rem 0;
-    padding: 2rem;
-    background: var.$white;
-    border-radius: 0.6rem;
-    box-shadow: 0 2px 4px var.$grey-outline;
-
-    p {
-      text-align: center;
-      margin-top: 1rem;
-    }
-
-    h2 {
-      text-align: center;
-    }
-
-    form {
-      @include mix.flex-column;
-      flex: 1;
-
-      .divider-text {
-        background: var.$white;
-      }
-
-      .btn-group {
-        @include mix.flex-column;
-        gap: 1rem;
-        margin-top: 2rem;
-        color: var.$dark-blue-1;
-      }
-
-      .form-fields {
-        flex: 1;
-
-        .field {
-          margin-bottom: 1rem;
-
-          .text-danger {
-            color: var.$red-1;
-            font-weight: 600;
-          }
-        }
-
-        .field-checkbox {
-          @include mix.flex-align-center;
-          margin: 1.5rem 0;
-
-          label {
-            margin-bottom: 0;
-            margin-left: 0.5rem;
-
-            a {
-              font-weight: 700;
-              color: var.$pr-blue-1;
-
-              &:hover {
-                text-decoration: underline;
-              }
-            }
-          }
-        }
-      }
-
-      .btn-full-width {
-        justify-self: baseline;
-
-        i {
-          font-size: 1.45rem;
-        }
-      }
-    }
-  }
-
-  .sign-up-container {
-    flex: 1;
+.sign-up-container,
+.message-container {
+  @include mix.flex-column;
+  background: var(--white);
+  border-radius: 0.6rem;
+  box-shadow: 0 2px 4px var(--grey-outline);
+  margin: 4.5rem 0 1.5rem 0;
+  width: 32rem;
+
+  .text-danger {
+    color: var(--red-1);
+    font-weight: 600;
   }
+}
 
-  .message-container {
-    margin: auto;
-  }
+.sign-up-container {
+  flex: 1;
+}
 
-  .mobile {
-    max-width: 24.5rem;
-  }
+.message-container {
+  margin: auto;
 }
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.ts b/src/app/features/auth/pages/sign-up/sign-up.component.ts
index df171d923..f9b574626 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.ts
+++ b/src/app/features/auth/pages/sign-up/sign-up.component.ts
@@ -1,72 +1,95 @@
+import { createDispatchMap } from '@ngxs/store';
+
+import { NgxCaptchaModule } from 'ngx-captcha';
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { DividerModule } from 'primeng/divider';
-import { InputTextModule } from 'primeng/inputtext';
-import { PasswordModule } from 'primeng/password';
+import { Button } from 'primeng/button';
+import { Checkbox } from 'primeng/checkbox';
+import { Divider } from 'primeng/divider';
+import { Password } from 'primeng/password';
 
 import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { Component, inject, OnInit, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
+import { Component, OnInit, signal } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { RouterLink } from '@angular/router';
 
-import { PasswordInputHintComponent } from '@osf/shared/components';
-import { IS_XSMALL } from '@osf/shared/utils';
+import { RegisterUser } from '@osf/features/auth/store';
+import { PasswordInputHintComponent, TextInputComponent } from '@osf/shared/components';
+import { InputLimits } from '@osf/shared/constants';
+import { CustomValidators } from '@osf/shared/utils';
 
-import { PASSWORD_REGEX, passwordMatchValidator } from '../../helpers';
+import { PASSWORD_REGEX } from '../../helpers';
+import { SignUpForm, SignUpModel } from '../../models';
 
 @Component({
   selector: 'osf-sign-up',
   imports: [
     CommonModule,
     ReactiveFormsModule,
-    ButtonModule,
-    InputTextModule,
-    PasswordModule,
-    CheckboxModule,
-    DividerModule,
+    Button,
+    Password,
+    Checkbox,
+    Divider,
     NgOptimizedImage,
     RouterLink,
     PasswordInputHintComponent,
     TranslatePipe,
+    NgxCaptchaModule,
+    TextInputComponent,
   ],
   templateUrl: './sign-up.component.html',
   styleUrl: './sign-up.component.scss',
 })
 export class SignUpComponent implements OnInit {
-  signUpForm: FormGroup = new FormGroup({});
+  signUpForm = new FormGroup<SignUpForm>({} as SignUpForm);
   passwordRegex: RegExp = PASSWORD_REGEX;
-  #isMobile$ = inject(IS_XSMALL);
-  isMobile = toSignal(this.#isMobile$);
+  inputLimits = InputLimits;
+
   isFormSubmitted = signal(false);
 
-  fb: FormBuilder = inject(FormBuilder);
-  router: Router = inject(Router);
+  actions = createDispatchMap({ registerUser: RegisterUser });
+
+  readonly siteKey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI';
 
   ngOnInit(): void {
     this.initializeForm();
   }
 
   initializeForm(): void {
-    this.signUpForm = this.fb.group(
-      {
-        fullName: ['', Validators.required],
-        email: ['', [Validators.required, Validators.email]],
-        password: ['', [Validators.required, Validators.pattern(this.passwordRegex)]],
-        confirmPassword: ['', Validators.required],
-        agreeToTerms: [false, Validators.requiredTrue],
-      },
-      {
-        validators: passwordMatchValidator(),
-      }
-    );
+    this.signUpForm = new FormGroup<SignUpForm>({
+      fullName: new FormControl('', { nonNullable: true, validators: CustomValidators.requiredTrimmed() }),
+      email1: new FormControl('', {
+        nonNullable: true,
+        validators: [CustomValidators.requiredTrimmed(), Validators.email],
+      }),
+      email2: new FormControl('', {
+        nonNullable: true,
+        validators: [CustomValidators.requiredTrimmed(), Validators.email],
+      }),
+      password: new FormControl('', {
+        nonNullable: true,
+        validators: [CustomValidators.requiredTrimmed(), Validators.pattern(this.passwordRegex)],
+      }),
+      acceptedTermsOfService: new FormControl(false, {
+        nonNullable: true,
+        validators: Validators.requiredTrue,
+      }),
+      recaptcha: new FormControl('', {
+        nonNullable: true,
+        validators: Validators.required,
+      }),
+    });
   }
 
   onSubmit(): void {
-    if (this.signUpForm.valid) {
-      this.isFormSubmitted.set(true);
+    if (this.signUpForm.invalid) {
+      return;
     }
+
+    const data = this.signUpForm.getRawValue() as SignUpModel;
+
+    this.actions.registerUser(data).subscribe(() => {
+      this.isFormSubmitted.set(true);
+    });
   }
 }
diff --git a/src/app/features/auth/services/auth.service.ts b/src/app/features/auth/services/auth.service.ts
index 7ccd2e554..be676a7ca 100644
--- a/src/app/features/auth/services/auth.service.ts
+++ b/src/app/features/auth/services/auth.service.ts
@@ -1,58 +1,24 @@
-import { Store } from '@ngxs/store';
-
-import { firstValueFrom } from 'rxjs';
-
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
-import { ClearAuth, SetAuthToken } from '@core/store/auth';
+import { JsonApiService } from '@osf/core/services';
+
+import { SignUpModel } from '../models';
 
-import { AuthResponse, LoginCredentials } from '../models';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
-  readonly #API_URL = 'VALID_API_URL';
-  readonly #AUTH_TOKEN_KEY = '';
+  private readonly jsonApiService = inject(JsonApiService);
 
-  readonly #http: HttpClient = inject(HttpClient);
-  readonly #store: Store = inject(Store);
+  readonly http: HttpClient = inject(HttpClient);
 
-  //TODO: rewrite/refactor methods according to the API
-  async login(credentials: LoginCredentials): Promise<void> {
-    try {
-      const response = await firstValueFrom(this.#http.post<AuthResponse>(`${this.#API_URL}/auth/login`, credentials));
+  register(payload: SignUpModel) {
+    const baseUrl = `${environment.apiUrlV1}/register/`;
+    const body = { ...payload, 'g-recaptcha-response': payload.recaptcha, campaign: null };
 
-      if (response.accessToken) {
-        this.#setAuthToken(response.accessToken);
-        this.#store.dispatch(new SetAuthToken(response.accessToken));
-      }
-    } catch (error) {
-      console.error('Login failed:', error);
-      throw error;
-    }
+    return this.jsonApiService.post(baseUrl, body);
   }
-
-  logout(): void {
-    localStorage.removeItem(this.#AUTH_TOKEN_KEY);
-    this.#store.dispatch(new ClearAuth());
-  }
-
-  getAuthToken(): string | null {
-    return localStorage.getItem(this.#AUTH_TOKEN_KEY);
-  }
-
-  #setAuthToken(token: string): void {
-    localStorage.setItem(this.#AUTH_TOKEN_KEY, token);
-  }
-
-  // not sure if it's gonna be used, comment out for now
-
-  // #checkInitialAuthState(): void {
-  //   const token: string | null = this.getAuthToken();
-  //   if (token) {
-  //     this.#store.dispatch(new SetAuthToken(token));
-  //   }
-  // }
 }
diff --git a/src/app/features/auth/store/auth.actions.ts b/src/app/features/auth/store/auth.actions.ts
new file mode 100644
index 000000000..1dececc50
--- /dev/null
+++ b/src/app/features/auth/store/auth.actions.ts
@@ -0,0 +1,7 @@
+import { SignUpModel } from '@osf/features/auth/models';
+
+export class RegisterUser {
+  static readonly type = '[Auth] Register User';
+
+  constructor(public payload: SignUpModel) {}
+}
diff --git a/src/app/core/store/auth/auth.model.ts b/src/app/features/auth/store/auth.model.ts
similarity index 100%
rename from src/app/core/store/auth/auth.model.ts
rename to src/app/features/auth/store/auth.model.ts
diff --git a/src/app/features/auth/store/auth.selectors.ts b/src/app/features/auth/store/auth.selectors.ts
new file mode 100644
index 000000000..65812f52c
--- /dev/null
+++ b/src/app/features/auth/store/auth.selectors.ts
@@ -0,0 +1 @@
+export class AuthSelectors {}
diff --git a/src/app/features/auth/store/auth.state.ts b/src/app/features/auth/store/auth.state.ts
new file mode 100644
index 000000000..9b25981c0
--- /dev/null
+++ b/src/app/features/auth/store/auth.state.ts
@@ -0,0 +1,25 @@
+import { Action, State, StateContext } from '@ngxs/store';
+
+import { inject, Injectable } from '@angular/core';
+
+import { AuthService } from '@osf/features/auth/services';
+
+import { RegisterUser } from './auth.actions';
+import { AuthStateModel } from './auth.model';
+
+@State<AuthStateModel>({
+  name: 'auth',
+  defaults: {
+    accessToken: null,
+    isAuthenticated: false,
+  },
+})
+@Injectable()
+export class AuthState {
+  private readonly authService = inject(AuthService);
+
+  @Action(RegisterUser)
+  signUp(ctx: StateContext<AuthStateModel>, action: RegisterUser) {
+    return this.authService.register(action.payload).subscribe();
+  }
+}
diff --git a/src/app/core/store/auth/index.ts b/src/app/features/auth/store/index.ts
similarity index 100%
rename from src/app/core/store/auth/index.ts
rename to src/app/features/auth/store/index.ts

From 72f863ea3ca4f5f52e9c8ffac900c4cdd0373eae Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Mon, 4 Aug 2025 14:59:11 +0300
Subject: [PATCH 2/3] feat(sign-up): updated reset and forgot password

---
 src/app/app.routes.ts                         |  4 +-
 src/app/features/auth/helpers/index.ts        |  1 -
 .../features/auth/helpers/sign-up.helper.ts   | 32 -------------
 .../forgot-password.component.html            | 45 +++++++++---------
 .../forgot-password.component.scss            | 20 ++------
 .../forgot-password.component.ts              | 37 ++++++++-------
 .../reset-password.component.html             | 35 +++++++-------
 .../reset-password.component.scss             | 47 ++-----------------
 .../reset-password.component.ts               | 42 +++++++++++------
 .../auth/pages/sign-up/sign-up.component.html |  6 +--
 .../auth/pages/sign-up/sign-up.component.ts   |  7 ++-
 .../utils/custom-form-validators.helper.ts    | 24 ++++++++++
 src/app/shared/utils/index.ts                 |  1 +
 src/app/shared/utils/password.helper.ts       |  1 +
 src/assets/i18n/en.json                       |  3 +-
 15 files changed, 134 insertions(+), 171 deletions(-)
 delete mode 100644 src/app/features/auth/helpers/index.ts
 delete mode 100644 src/app/features/auth/helpers/sign-up.helper.ts
 create mode 100644 src/app/shared/utils/password.helper.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 6b6b8d55b..d931e2466 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -46,7 +46,7 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'forgot-password',
+        path: 'forgotpassword',
         loadComponent: () =>
           import('./features/auth/pages/forgot-password/forgot-password.component').then(
             (mod) => mod.ForgotPasswordComponent
@@ -54,7 +54,7 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'reset-password',
+        path: 'resetpassword',
         loadComponent: () =>
           import('./features/auth/pages/reset-password/reset-password.component').then(
             (mod) => mod.ResetPasswordComponent
diff --git a/src/app/features/auth/helpers/index.ts b/src/app/features/auth/helpers/index.ts
deleted file mode 100644
index c1d0c55a8..000000000
--- a/src/app/features/auth/helpers/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './sign-up.helper';
diff --git a/src/app/features/auth/helpers/sign-up.helper.ts b/src/app/features/auth/helpers/sign-up.helper.ts
deleted file mode 100644
index e89b2ab08..000000000
--- a/src/app/features/auth/helpers/sign-up.helper.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
-
-export const PASSWORD_REGEX = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^\w\s]).{8,}$/;
-
-export function passwordMatchValidator(
-  passwordField = 'password',
-  confirmPasswordField = 'confirmPassword'
-): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const password = control.get(passwordField);
-    const confirmPassword = control.get(confirmPasswordField);
-
-    if (!password || !confirmPassword) {
-      return null;
-    }
-
-    if (confirmPassword.errors && !confirmPassword.errors['passwordMismatch']) {
-      return null;
-    }
-
-    if (password.value !== confirmPassword.value) {
-      const error = { passwordMismatch: true };
-      confirmPassword.setErrors(error);
-      return error;
-    } else {
-      const errors = { ...confirmPassword.errors };
-      delete errors['passwordMismatch'];
-      confirmPassword.setErrors(Object.keys(errors).length ? errors : null);
-      return null;
-    }
-  };
-}
diff --git a/src/app/features/auth/pages/forgot-password/forgot-password.component.html b/src/app/features/auth/pages/forgot-password/forgot-password.component.html
index e3d0a3001..1aff6b60e 100644
--- a/src/app/features/auth/pages/forgot-password/forgot-password.component.html
+++ b/src/app/features/auth/pages/forgot-password/forgot-password.component.html
@@ -1,29 +1,30 @@
-<section class="forgot-password-container my-7 mx-3 p-3 md:p-4">
-  <h2 class="text-center">{{ 'auth.forgotPassword.title' | translate }}</h2>
-  <p>{{ 'auth.forgotPassword.description' | translate }}</p>
+<div class="flex flex-column my-7">
+  <section class="forgot-password-container p-3 md:p-4">
+    <h2 class="text-center">{{ 'auth.forgotPassword.title' | translate }}</h2>
+    <p>{{ 'auth.forgotPassword.description' | translate }}</p>
 
-  <form [formGroup]="forgotPasswordForm" (ngSubmit)="onSubmit()">
-    <label for="email">{{ 'auth.common.email' | translate }}</label>
-    <input
-      class="mb-6"
-      id="email"
-      type="email"
-      pInputText
-      formControlName="email"
-      [placeholder]="'auth.common.emailPlaceholder' | translate"
-    />
+    <form [formGroup]="forgotPasswordForm" (ngSubmit)="onSubmit()">
+      <osf-text-input
+        [control]="forgotPasswordForm.controls['email']"
+        [label]="'auth.common.email'"
+        [placeholder]="'auth.common.emailPlaceholder'"
+        type="email"
+        [maxLength]="emailLimit"
+      ></osf-text-input>
 
-    <p-button
-      class="btn-full-width"
-      type="submit"
-      [label]="'auth.forgotPassword.submit' | translate"
-      [disabled]="!forgotPasswordForm.valid"
-    ></p-button>
-  </form>
+      <p-button
+        class="btn-full-width block mt-6"
+        type="submit"
+        [label]="'auth.forgotPassword.submit' | translate"
+        [disabled]="!forgotPasswordForm.valid"
+      ></p-button>
+    </form>
+  </section>
 
-  <div class="message-container">
+  <div class="my-4">
     @if (message()) {
       <p-message
+        styleClass="w-full"
         [severity]="message()?.severity"
         closable="true"
         [text]="message()!.content | translate"
@@ -31,4 +32,4 @@ <h2 class="text-center">{{ 'auth.forgotPassword.title' | translate }}</h2>
       />
     }
   </div>
-</section>
+</div>
diff --git a/src/app/features/auth/pages/forgot-password/forgot-password.component.scss b/src/app/features/auth/pages/forgot-password/forgot-password.component.scss
index 211f2bff1..d4d4dac88 100644
--- a/src/app/features/auth/pages/forgot-password/forgot-password.component.scss
+++ b/src/app/features/auth/pages/forgot-password/forgot-password.component.scss
@@ -1,5 +1,4 @@
 @use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
 
 :host {
   @include mix.flex-center;
@@ -8,20 +7,11 @@
 }
 
 .forgot-password-container {
-  position: relative;
-  background: var.$white;
-  border-radius: mix.rem(12px);
-  box-shadow: 0 2px 4px var.$grey-outline;
   @include mix.flex-column;
-  color: var.$dark-blue-1;
-  flex: 1;
-  gap: mix.rem(24px);
+  background: var(--white);
+  border-radius: mix.rem(12px);
+  box-shadow: 0 2px 4px var(--grey-outline);
   max-width: mix.rem(448px);
-
-  .message-container {
-    width: 100%;
-    position: absolute;
-    bottom: -4.5rem;
-    left: 0;
-  }
+  gap: mix.rem(24px);
+  flex: 1;
 }
diff --git a/src/app/features/auth/pages/forgot-password/forgot-password.component.ts b/src/app/features/auth/pages/forgot-password/forgot-password.component.ts
index ca7f78be7..56b959a6f 100644
--- a/src/app/features/auth/pages/forgot-password/forgot-password.component.ts
+++ b/src/app/features/auth/pages/forgot-password/forgot-password.component.ts
@@ -1,40 +1,45 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { InputText } from 'primeng/inputtext';
 import { Message } from 'primeng/message';
 
 import { Component, inject, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
+import { TextInputComponent } from '@osf/shared/components';
+import { InputLimits } from '@osf/shared/constants';
+import { CustomValidators } from '@osf/shared/utils';
+
 import { ForgotPasswordFormGroupType, MessageInfo } from '../../models';
 
 @Component({
   selector: 'osf-forgot-password',
-  imports: [InputText, ReactiveFormsModule, Button, Message, TranslatePipe],
+  imports: [ReactiveFormsModule, Button, Message, TextInputComponent, TranslatePipe],
   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]],
+  private readonly fb = inject(FormBuilder);
+
+  readonly emailLimit = InputLimits.email.maxLength;
+
+  forgotPasswordForm: ForgotPasswordFormGroupType = this.fb.group({
+    email: ['', [CustomValidators.requiredTrimmed(), Validators.email]],
   });
+
   message = signal<MessageInfo | null>(null);
 
   onSubmit(): void {
-    // [NS] TODO: Implement password reset logic
-    if (this.forgotPasswordForm.valid) {
-      this.message.set({
-        severity: 'success',
-        content: 'auth.forgotPassword.messages.success',
-      });
-
-      // this.message.set({
-      //   severity: 'error',
-      //   content: 'auth.forgotPassword.messages.error'
-      // });
+    if (this.forgotPasswordForm.invalid) {
+      return;
     }
+
+    this.forgotPasswordForm.reset();
+
+    this.message.set({
+      severity: 'success',
+      content: 'auth.forgotPassword.messages.success',
+    });
   }
 
   onCloseMessage(): void {
diff --git a/src/app/features/auth/pages/reset-password/reset-password.component.html b/src/app/features/auth/pages/reset-password/reset-password.component.html
index 7e6738f9b..691fae8f7 100644
--- a/src/app/features/auth/pages/reset-password/reset-password.component.html
+++ b/src/app/features/auth/pages/reset-password/reset-password.component.html
@@ -1,42 +1,41 @@
 @if (!isFormSubmitted()) {
-  <section class="reset-password-container" [class.mobile]="isMobile()">
-    <h2>{{ 'auth.resetPassword.title' | translate }}</h2>
+  <section class="reset-password-container">
+    <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
 
-    <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
-      <div class="field">
+    <form class="flex flex-column gap-3 mt-4" [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
+      <div class="flex flex-column">
         <label for="newPassword">{{ 'auth.common.password.new' | translate }}</label>
         <p-password
           id="newPassword"
           formControlName="newPassword"
+          styleClass="w-full"
           [toggleMask]="true"
           [feedback]="false"
           autocomplete="new-password"
         ></p-password>
 
-        <osf-password-input-hint
-          [isError]="resetPasswordForm.get('newPassword')?.errors && resetPasswordForm.get('newPassword')?.touched"
-        />
+        <osf-password-input-hint [isError]="isNewPasswordError" />
       </div>
 
-      <div class="field">
+      <div class="flex flex-column">
         <label for="confirmNewPassword">{{ 'auth.common.password.confirm' | translate }}</label>
         <p-password
           id="confirmNewPassword"
           formControlName="confirmNewPassword"
+          styleClass="w-full"
           [toggleMask]="true"
           [feedback]="false"
           autocomplete="new-password"
         ></p-password>
-        @if (
-          resetPasswordForm.get('confirmNewPassword')?.errors?.['passwordMismatch'] &&
-          resetPasswordForm.get('confirmNewPassword')?.touched
-        ) {
-          <small class="text-danger">{{ 'auth.common.password.mismatch' | translate }}</small>
+        @if (isMismatchError) {
+          <p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
+            {{ 'auth.common.password.mismatch' | translate }}
+          </p-message>
         }
       </div>
 
       <p-button
-        class="btn-full-width"
+        class="btn-full-width block mt-6"
         type="submit"
         [label]="'auth.resetPassword.submit' | translate"
         [disabled]="resetPasswordForm.invalid"
@@ -44,15 +43,15 @@ <h2>{{ 'auth.resetPassword.title' | translate }}</h2>
     </form>
   </section>
 } @else {
-  <section class="message-container">
+  <section class="message-container text-center">
     <h2>{{ 'auth.resetPassword.success.title' | translate }}</h2>
-    <p class="message-text">
+    <p class="mt-4">
       {{ 'auth.resetPassword.success.message' | translate }}
     </p>
     <p-button
-      class="btn-full-width"
+      class="btn-full-width block mt-6"
       [label]="'auth.resetPassword.success.backToSignin' | translate"
-      [routerLink]="['/sign-up']"
+      [routerLink]="['/sign-in']"
     />
   </section>
 }
diff --git a/src/app/features/auth/pages/reset-password/reset-password.component.scss b/src/app/features/auth/pages/reset-password/reset-password.component.scss
index 0914a6af2..b231ba8b2 100644
--- a/src/app/features/auth/pages/reset-password/reset-password.component.scss
+++ b/src/app/features/auth/pages/reset-password/reset-password.component.scss
@@ -1,5 +1,4 @@
 @use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
 
 :host {
   @include mix.flex-center;
@@ -11,48 +10,10 @@
 .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: var.$white;
+  background: var(--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;
-    }
-  }
-}
-
-.mobile {
-  max-width: 24.5rem;
+  box-shadow: 0 2px 4px var(--grey-outline);
+  max-width: 32rem;
+  flex: 1;
 }
diff --git a/src/app/features/auth/pages/reset-password/reset-password.component.ts b/src/app/features/auth/pages/reset-password/reset-password.component.ts
index 813078c5f..3347d4ee4 100644
--- a/src/app/features/auth/pages/reset-password/reset-password.component.ts
+++ b/src/app/features/auth/pages/reset-password/reset-password.component.ts
@@ -1,45 +1,57 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
+import { Message } from 'primeng/message';
 import { Password } from 'primeng/password';
 
 import { Component, inject, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
+import { CustomValidators, PASSWORD_REGEX } from '@osf/shared/utils';
 import { PasswordInputHintComponent } from '@shared/components';
-import { IS_XSMALL } from '@shared/utils';
 
-import { PASSWORD_REGEX, passwordMatchValidator } from '../../helpers';
 import { ResetPasswordFormGroupType } from '../../models';
 
 @Component({
   selector: 'osf-reset-password',
-  imports: [Button, Password, ReactiveFormsModule, RouterLink, PasswordInputHintComponent, TranslatePipe],
+  imports: [Button, Password, ReactiveFormsModule, RouterLink, PasswordInputHintComponent, Message, TranslatePipe],
   templateUrl: './reset-password.component.html',
   styleUrl: './reset-password.component.scss',
 })
 export class ResetPasswordComponent {
-  #fb = inject(FormBuilder);
-  #isMobile$ = inject(IS_XSMALL);
+  private readonly fb = inject(FormBuilder);
+
+  isFormSubmitted = signal(false);
   passwordRegex = PASSWORD_REGEX;
-  resetPasswordForm: ResetPasswordFormGroupType = this.#fb.group(
+
+  resetPasswordForm: ResetPasswordFormGroupType = this.fb.group(
     {
-      newPassword: ['', [Validators.required, Validators.pattern(this.passwordRegex)]],
-      confirmNewPassword: ['', Validators.required],
+      newPassword: ['', [CustomValidators.requiredTrimmed(), Validators.pattern(this.passwordRegex)]],
+      confirmNewPassword: ['', CustomValidators.requiredTrimmed()],
     },
     {
-      validators: passwordMatchValidator(),
+      validators: CustomValidators.passwordMatchValidator('newPassword', 'confirmNewPassword'),
     }
   );
-  isFormSubmitted = signal(false);
-  isMobile = toSignal(this.#isMobile$);
+
+  get isNewPasswordError() {
+    return this.resetPasswordForm.get('newPassword')?.errors && this.resetPasswordForm.get('newPassword')?.touched;
+  }
+
+  get isMismatchError(): boolean {
+    return (
+      this.resetPasswordForm.get('confirmNewPassword')?.dirty &&
+      this.resetPasswordForm.get('newPassword')?.dirty &&
+      this.resetPasswordForm.errors?.['passwordMismatch']
+    );
+  }
 
   onSubmit(): void {
-    if (this.resetPasswordForm.valid) {
-      // TODO: Implement password reset logic
-      this.isFormSubmitted.set(true);
+    if (this.resetPasswordForm.invalid) {
+      return;
     }
+
+    this.isFormSubmitted.set(true);
   }
 }
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.html b/src/app/features/auth/pages/sign-up/sign-up.component.html
index 6ab346197..b11064281 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.html
+++ b/src/app/features/auth/pages/sign-up/sign-up.component.html
@@ -47,7 +47,7 @@ <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
         <div class="flex flex-column">
           <osf-text-input
             [control]="signUpForm.controls['email2']"
-            [label]="'auth.common.email'"
+            [label]="'auth.common.confirmEmail'"
             [placeholder]="'auth.common.emailPlaceholder'"
             type="email"
             [maxLength]="inputLimits.email.maxLength"
@@ -66,9 +66,7 @@ <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
             autocomplete="new-password"
             styleClass="w-full"
           ></p-password>
-          <osf-password-input-hint
-            [isError]="signUpForm.controls['password'].errors && signUpForm.get('password')?.touched"
-          />
+          <osf-password-input-hint [isError]="isPasswordError" />
         </div>
 
         <div class="flex mt-1">
diff --git a/src/app/features/auth/pages/sign-up/sign-up.component.ts b/src/app/features/auth/pages/sign-up/sign-up.component.ts
index f9b574626..f01c946a3 100644
--- a/src/app/features/auth/pages/sign-up/sign-up.component.ts
+++ b/src/app/features/auth/pages/sign-up/sign-up.component.ts
@@ -16,9 +16,8 @@ import { RouterLink } from '@angular/router';
 import { RegisterUser } from '@osf/features/auth/store';
 import { PasswordInputHintComponent, TextInputComponent } from '@osf/shared/components';
 import { InputLimits } from '@osf/shared/constants';
-import { CustomValidators } from '@osf/shared/utils';
+import { CustomValidators, PASSWORD_REGEX } from '@osf/shared/utils';
 
-import { PASSWORD_REGEX } from '../../helpers';
 import { SignUpForm, SignUpModel } from '../../models';
 
 @Component({
@@ -51,6 +50,10 @@ export class SignUpComponent implements OnInit {
 
   readonly siteKey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI';
 
+  get isPasswordError() {
+    return this.signUpForm.controls['password'].errors && this.signUpForm.get('password')?.touched;
+  }
+
   ngOnInit(): void {
     this.initializeForm();
   }
diff --git a/src/app/shared/utils/custom-form-validators.helper.ts b/src/app/shared/utils/custom-form-validators.helper.ts
index e3881aa2f..4fd1fc432 100644
--- a/src/app/shared/utils/custom-form-validators.helper.ts
+++ b/src/app/shared/utils/custom-form-validators.helper.ts
@@ -71,4 +71,28 @@ export class CustomValidators {
     const isValid = DOIRegex.test(value);
     return isValid ? null : { invalidDoi: true };
   };
+
+  static passwordMatchValidator(passwordField = 'password', confirmPasswordField = 'confirmPassword'): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const password = control.get(passwordField);
+      const confirmPassword = control.get(confirmPasswordField);
+
+      if (!password || !confirmPassword) {
+        return null;
+      }
+
+      const passwordValue = password.value;
+      const confirmPasswordValue = confirmPassword.value;
+
+      if (!passwordValue || !confirmPasswordValue) {
+        return null;
+      }
+
+      if (passwordValue !== confirmPasswordValue) {
+        return { passwordMismatch: true };
+      }
+
+      return null;
+    };
+  }
 }
diff --git a/src/app/shared/utils/index.ts b/src/app/shared/utils/index.ts
index e3597af49..907dfe655 100644
--- a/src/app/shared/utils/index.ts
+++ b/src/app/shared/utils/index.ts
@@ -10,5 +10,6 @@ export * from './find-changed-fields';
 export * from './find-changed-items.helper';
 export * from './form-validation.helper';
 export * from './get-resource-types.helper';
+export * from './password.helper';
 export * from './pie-chart-palette';
 export * from './search-pref-to-json-api-query-params.helper';
diff --git a/src/app/shared/utils/password.helper.ts b/src/app/shared/utils/password.helper.ts
new file mode 100644
index 000000000..56db827a5
--- /dev/null
+++ b/src/app/shared/utils/password.helper.ts
@@ -0,0 +1 @@
+export const PASSWORD_REGEX = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^\w\s]).{8,}$/;
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 717560653..4d3151fca 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -186,11 +186,12 @@
   "auth": {
     "common": {
       "email": "Email",
+      "confirmEmail": "Confirm email",
       "emailPlaceholder": "email@example.com",
       "password": {
         "new": "New Password",
         "confirm": "Confirm New Password",
-        "mismatch": "Passwords must match",
+        "mismatch": "Passwords must match.",
         "requirements": "Your password needs to be at least 8 characters long, include both lower- and upper-case characters, and have at least one number or special character"
       }
     },

From c0f0f4fb4a83df6aeac1234a4dbfea35dd6049c5 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Mon, 4 Aug 2025 20:15:45 +0300
Subject: [PATCH 3/3] feat(sign-up): added api for reset and forgot password

---
 src/app/app.routes.ts                         |  2 +-
 .../components/header/header.component.ts     |  8 ++++++-
 .../forgot-password.component.ts              | 16 ++++++++++----
 .../reset-password.component.ts               | 15 +++++++++++--
 .../features/auth/services/auth.service.ts    | 22 +++++++++++++++++++
 src/app/features/auth/store/auth.actions.ts   | 16 ++++++++++++++
 src/app/features/auth/store/auth.state.ts     | 12 +++++++++-
 7 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index d931e2466..6cf60eb28 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -54,7 +54,7 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'resetpassword',
+        path: 'resetpassword/:userId/:token',
         loadComponent: () =>
           import('./features/auth/pages/reset-password/reset-password.component').then(
             (mod) => mod.ResetPasswordComponent
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index 79c173170..030ab1dc4 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -29,6 +29,12 @@ export class HeaderComponent {
       command: () => this.router.navigate(['my-profile']),
     },
     { label: 'navigation.settings', command: () => this.router.navigate(['settings']) },
-    { label: 'navigation.logOut', command: () => console.log('Log out') },
+    {
+      label: 'navigation.logOut',
+      command: () => {
+        document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+        this.router.navigate(['/']);
+      },
+    },
   ];
 }
diff --git a/src/app/features/auth/pages/forgot-password/forgot-password.component.ts b/src/app/features/auth/pages/forgot-password/forgot-password.component.ts
index 56b959a6f..8f56d3161 100644
--- a/src/app/features/auth/pages/forgot-password/forgot-password.component.ts
+++ b/src/app/features/auth/pages/forgot-password/forgot-password.component.ts
@@ -1,3 +1,5 @@
+import { createDispatchMap } from '@ngxs/store';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
@@ -11,6 +13,7 @@ import { InputLimits } from '@osf/shared/constants';
 import { CustomValidators } from '@osf/shared/utils';
 
 import { ForgotPasswordFormGroupType, MessageInfo } from '../../models';
+import { ForgotPassword } from '../../store';
 
 @Component({
   selector: 'osf-forgot-password',
@@ -20,6 +23,7 @@ import { ForgotPasswordFormGroupType, MessageInfo } from '../../models';
 })
 export class ForgotPasswordComponent {
   private readonly fb = inject(FormBuilder);
+  private readonly actions = createDispatchMap({ forgotPassword: ForgotPassword });
 
   readonly emailLimit = InputLimits.email.maxLength;
 
@@ -34,11 +38,15 @@ export class ForgotPasswordComponent {
       return;
     }
 
-    this.forgotPasswordForm.reset();
+    const emailForm = this.forgotPasswordForm.getRawValue();
+
+    this.actions.forgotPassword(emailForm.email).subscribe(() => {
+      this.forgotPasswordForm.reset();
 
-    this.message.set({
-      severity: 'success',
-      content: 'auth.forgotPassword.messages.success',
+      this.message.set({
+        severity: 'success',
+        content: 'auth.forgotPassword.messages.success',
+      });
     });
   }
 
diff --git a/src/app/features/auth/pages/reset-password/reset-password.component.ts b/src/app/features/auth/pages/reset-password/reset-password.component.ts
index 3347d4ee4..12f1bf9d6 100644
--- a/src/app/features/auth/pages/reset-password/reset-password.component.ts
+++ b/src/app/features/auth/pages/reset-password/reset-password.component.ts
@@ -1,3 +1,5 @@
+import { createDispatchMap } from '@ngxs/store';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
@@ -6,12 +8,13 @@ import { Password } from 'primeng/password';
 
 import { Component, inject, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 
 import { CustomValidators, PASSWORD_REGEX } from '@osf/shared/utils';
 import { PasswordInputHintComponent } from '@shared/components';
 
 import { ResetPasswordFormGroupType } from '../../models';
+import { ResetPassword } from '../../store';
 
 @Component({
   selector: 'osf-reset-password',
@@ -21,6 +24,8 @@ import { ResetPasswordFormGroupType } from '../../models';
 })
 export class ResetPasswordComponent {
   private readonly fb = inject(FormBuilder);
+  private readonly route = inject(ActivatedRoute);
+  private readonly actions = createDispatchMap({ resetPassword: ResetPassword });
 
   isFormSubmitted = signal(false);
   passwordRegex = PASSWORD_REGEX;
@@ -52,6 +57,12 @@ export class ResetPasswordComponent {
       return;
     }
 
-    this.isFormSubmitted.set(true);
+    const userId = this.route.snapshot.params['userId'];
+    const token = this.route.snapshot.params['token'];
+    const newPassword = this.resetPasswordForm.getRawValue().newPassword;
+
+    this.actions.resetPassword(userId, token, newPassword).subscribe(() => {
+      this.isFormSubmitted.set(true);
+    });
   }
 }
diff --git a/src/app/features/auth/services/auth.service.ts b/src/app/features/auth/services/auth.service.ts
index be676a7ca..57797e6a3 100644
--- a/src/app/features/auth/services/auth.service.ts
+++ b/src/app/features/auth/services/auth.service.ts
@@ -21,4 +21,26 @@ export class AuthService {
 
     return this.jsonApiService.post(baseUrl, body);
   }
+
+  forgotPassword(email: string) {
+    const baseUrl = `${environment.apiUrl}/users/reset_password/`;
+    const params: Record<string, string> = { email };
+
+    return this.jsonApiService.get(baseUrl, params);
+  }
+
+  resetPassword(userId: string, token: string, newPassword: string) {
+    const baseUrl = `${environment.apiUrl}/users/reset_password/`;
+    const body = {
+      data: {
+        attributes: {
+          uid: userId,
+          token,
+          new_password: newPassword,
+        },
+      },
+    };
+
+    return this.jsonApiService.post(baseUrl, body);
+  }
 }
diff --git a/src/app/features/auth/store/auth.actions.ts b/src/app/features/auth/store/auth.actions.ts
index 1dececc50..d13776ad2 100644
--- a/src/app/features/auth/store/auth.actions.ts
+++ b/src/app/features/auth/store/auth.actions.ts
@@ -5,3 +5,19 @@ export class RegisterUser {
 
   constructor(public payload: SignUpModel) {}
 }
+
+export class ForgotPassword {
+  static readonly type = '[Auth] Forgot password';
+
+  constructor(public email: string) {}
+}
+
+export class ResetPassword {
+  static readonly type = '[Auth] Reset Password';
+
+  constructor(
+    public userId: string,
+    public token: string,
+    public newPassword: string
+  ) {}
+}
diff --git a/src/app/features/auth/store/auth.state.ts b/src/app/features/auth/store/auth.state.ts
index 9b25981c0..271483a8e 100644
--- a/src/app/features/auth/store/auth.state.ts
+++ b/src/app/features/auth/store/auth.state.ts
@@ -4,7 +4,7 @@ import { inject, Injectable } from '@angular/core';
 
 import { AuthService } from '@osf/features/auth/services';
 
-import { RegisterUser } from './auth.actions';
+import { ForgotPassword, RegisterUser, ResetPassword } from './auth.actions';
 import { AuthStateModel } from './auth.model';
 
 @State<AuthStateModel>({
@@ -22,4 +22,14 @@ export class AuthState {
   signUp(ctx: StateContext<AuthStateModel>, action: RegisterUser) {
     return this.authService.register(action.payload).subscribe();
   }
+
+  @Action(ForgotPassword)
+  forgotPassword(ctx: StateContext<AuthStateModel>, action: ForgotPassword) {
+    return this.authService.forgotPassword(action.email).subscribe();
+  }
+
+  @Action(ResetPassword)
+  resetPassword(ctx: StateContext<AuthStateModel>, { userId, token, newPassword }: ResetPassword) {
+    return this.authService.resetPassword(userId, token, newPassword).subscribe();
+  }
 }