Feat/sign up

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",

src/app/app.routes.ts

@@ -40,21 +40,21 @@ 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 },
       },
       {
-        path: 'forgot-password',
+        path: 'forgotpassword',
         loadComponent: () =>
           import('./features/auth/pages/forgot-password/forgot-password.component').then(
             (mod) => mod.ForgotPasswordComponent
           ),
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'reset-password',
+        path: 'resetpassword/:userId/:token',
         loadComponent: () =>
           import('./features/auth/pages/reset-password/reset-password.component').then(
             (mod) => mod.ResetPasswordComponent

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(['/']);
+      },
+    },
   ];
 }

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';

src/app/features/auth/models/auth.model.ts

@@ -1,8 +1,3 @@
-export interface LoginCredentials {
-  email: string;
-  password: string;
-}
-
 export interface AuthResponse {
   accessToken: string;
 }

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';

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>;
+}

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;
+}

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

@@ -1,34 +1,35 @@
-<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"
         (onClose)="onCloseMessage()"
       />
     }
   </div>
-</section>
+</div>

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;
 }

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

@@ -1,40 +1,53 @@
+import { createDispatchMap } from '@ngxs/store';
+
 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';
+import { ForgotPassword } from '../../store';
 
 @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);
+  private readonly actions = createDispatchMap({ forgotPassword: ForgotPassword });
+
+  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) {
+    if (this.forgotPasswordForm.invalid) {
+      return;
+    }
+
+    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: 'error',
-      //   content: 'auth.forgotPassword.messages.error'
-      // });
-    }
+    });
   }
 
   onCloseMessage(): void {