complete login lifeCycle

src/app/authentication/auth-sign-in/change-password/change-password.component.html

@@ -1,7 +1,13 @@
-<form class="form" fxLayout="column" fxLayoutAlign="start stretch">
+<form
+  class="form"
+  fxLayout="column"
+  fxLayoutAlign="start stretch"
+  [formGroup]="form"
+  (submit)="onSubmit()"
+>
   <main>
-    <h1>Welcome Back</h1>
-    <span>New Password</span>
+    <h1>{{ "WELCOME_BACK" | translate }}</h1>
+    <span>{{ "NEW_PASSWORD" | translate }}</span>
   </main>
 
   <label class="label mt-1 gap-5" fxLayout="row" fxLayoutAlign="start center">
@@ -10,9 +16,17 @@
       alt="password.jpg"
       title="password"
     />
-    <span>Password</span></label
+    <span>{{ "PASSWORD" | translate }}</span></label
   >
-  <input type="password" placeholder="Enter password" />
+  <input
+    type="password"
+    placeholder="Enter password"
+    formControlName="password"
+  />
+  <app-error-form
+    [name]="'PASSWORD'"
+    [control]="form.get('password')!"
+  ></app-error-form>
 
   <label class="label mt-1 gap-5" fxLayout="row" fxLayoutAlign="start center">
     <img
@@ -20,9 +34,17 @@
       alt="password.jpg"
       title="password"
     />
-    <span> Confirm password</span></label
+    <span> {{ "CONFIRM_PASSWORD" | translate }}</span></label
   >
-  <input type="password" placeholder="Enter password" />
+  <input
+    type="password"
+    placeholder="Enter password"
+    formControlName="confirm_password"
+  />
+  <app-error-form
+    [name]="'CONFIRM_PASSWORD'"
+    [control]="form.get('password')!"
+  ></app-error-form>
 
-  <button type="submit" [routerLink]="['/']">Confirm</button>
+  <button type="submit">{{ "CONFIRM" | translate }}</button>
 </form>

src/app/authentication/auth-sign-in/change-password/change-password.component.ts

@@ -1,10 +1,57 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import {
+  FormGroup,
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import { Router } from '@angular/router';
+import { BaseForm } from '@core/base/base-form';
+import { ComponentBase } from '@core/base/common-base';
+import { AuthService } from '@core/services/authentication/auth.service';
+import { ToastrService } from 'ngx-toastr';
+import { takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-change-password',
   templateUrl: './change-password.component.html',
-  styleUrls: ['./change-password.component.scss']
+  styleUrls: ['./change-password.component.scss'],
 })
-export class ChangePasswordComponent {
+export class ChangePasswordComponent
+  extends ComponentBase
+  implements BaseForm, OnInit
+{
+  form!: FormGroup;
 
+  constructor(
+    private readonly router: Router,
+    private readonly toastr: ToastrService,
+    private readonly authSer: AuthService
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.initForm();
+  }
+
+  initForm(): void {
+    this.form = new UntypedFormGroup({
+      password: new UntypedFormControl(null, [Validators.required]),
+      confirm_password: new UntypedFormControl(null, [Validators.required]),
+    });
+  }
+
+  onSubmit(): void {
+    if (super.submitValidity(this.form)) {
+      this.authSer
+        .ChnagePassword(this.form.value)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((res) => {
+          console.log('res => ', res);
+          this.toastr.success('Password Changes Successfully');
+          this.router.navigate(['/']);
+        });
+    }
+  }
 }

src/app/authentication/auth-sign-in/verify-otp/verify-otp.component.html

@@ -1,13 +1,21 @@
 <form fxLayout="column" fxLayoutAlign="start stretch" class="form">
   <main>
-    <h1>Forget Password</h1>
+    <h1>{{ "FORGET_PASSWORD" | translate }}</h1>
     <span
-      >We sent the code to<br />
+      >{{ "WE_SEND_CODE_TO" | translate }}<br />
       <b style="font-size: 15px">maighoneim22@gmail.com</b></span
     >
   </main>
-  <ngx-otp-input [config]="otpInputConfig"></ngx-otp-input>
-  <p class="dont-send">Didn't get the code? <span>Click to resend.</span></p>
+  <ngx-otp-input
+    [config]="otpInputConfig"
+    (fill)="handleFillEvent($event)"
+  ></ngx-otp-input>
+  <p class="dont-send">
+    {{ "DIDNT_GET" | translate }}
+    <span>{{ "CLICK_TO_RESEND" | translate }}</span>
+  </p>
 
-  <button type="submit" [routerLink]="['../change-password']">Verify</button>
+  <!-- <button type="submit" (click)="onSubmit()">
+    {{ "VERIFY" | translate }}
+  </button> -->
 </form>

src/app/authentication/auth-sign-in/verify-otp/verify-otp.component.ts

@@ -1,13 +1,53 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { BaseForm } from '@core/base/base-form';
+import { ComponentBase } from '@core/base/common-base';
+import { AuthService } from '@core/services/authentication/auth.service';
 import { NgxOtpInputConfig } from 'ngx-otp-input';
+import { takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-verify-otp',
   templateUrl: './verify-otp.component.html',
   styleUrls: ['./verify-otp.component.scss'],
 })
-export class VerifyOtpComponent {
+export class VerifyOtpComponent
+  extends ComponentBase
+  implements BaseForm, OnInit
+{
   otpInputConfig: NgxOtpInputConfig = {
     otpLength: 4,
   };
+
+  code!: string;
+
+  form!: FormGroup;
+
+  constructor(
+    private readonly router: Router,
+    private readonly authService: AuthService
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {}
+
+  initForm(): void {}
+
+  handleFillEvent(event: string): void {
+    this.code = event;
+    this.onSubmit();
+  }
+
+  onSubmit(): void {
+    console.log(this.code);
+    this.authService
+      .SendCode({ email: sessionStorage.getItem('email')!, code: this.code })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        console.log(res);
+        this.router.navigate(['../change-password']);
+      });
+  }
 }

src/app/core/models/authenticcation.model.ts

@@ -17,3 +17,17 @@ export interface FORGET_PASSWORD {
 export interface FORGET_PASSWORD_RESPONSE {
   email?: string;
 }
+
+export interface OTP {
+  code?: string;
+  email?: string;
+}
+
+export interface OTP_RESPONSE {}
+
+export interface CHANGE_PASSWORD {
+  password: string;
+  confirm_password: string;
+}
+
+export interface CHANGE_PASSWORD_RESPONSE {}

src/app/core/services/authentication/auth.service.ts

@@ -2,10 +2,14 @@ import { Injectable } from '@angular/core';
 import { ApiService } from '../api.service';
 import { Observable } from 'rxjs';
 import {
+  CHANGE_PASSWORD,
+  CHANGE_PASSWORD_RESPONSE,
   FORGET_PASSWORD,
   FORGET_PASSWORD_RESPONSE,
   LOGIN,
   LOGIN_RESPONSE,
+  OTP,
+  OTP_RESPONSE,
 } from '@core/models/authenticcation.model';
 
 @Injectable({
@@ -19,6 +23,20 @@ export class AuthService {
   }
 
   ForgetPassword(data: FORGET_PASSWORD): Observable<FORGET_PASSWORD_RESPONSE> {
-    return this.apiService.post('', data);
+    return this.apiService.post<FORGET_PASSWORD, FORGET_PASSWORD_RESPONSE>(
+      '',
+      data
+    );
+  }
+
+  SendCode(data: OTP): Observable<OTP_RESPONSE> {
+    return this.apiService.post<OTP, OTP_RESPONSE>('', data);
+  }
+
+  ChnagePassword(data: CHANGE_PASSWORD): Observable<CHANGE_PASSWORD_RESPONSE> {
+    return this.apiService.post<CHANGE_PASSWORD, CHANGE_PASSWORD_RESPONSE>(
+      '',
+      data
+    );
   }
 }

src/app/shared/components/error-form/error-form.component.html

@@ -1,6 +1,6 @@
 <span *ngIf="control && control.touched">
   <mat-error
-    class="error-message"
+    class="error-message top-02"
     *ngIf="control.errors?.['required']"
     [ngClass]="{'show': control.errors?.['required']}"
     >{{ name | translate }} {{ "REQUIRED" | translate }} !</mat-error

src/assets/i18n/ar.json

@@ -1,6 +1,6 @@
 {
   "LOGIN": "تسجيل الدخول",
-  "ENTER_YOUR_PASSWORD": "ادخل رقمك السري",
+  "ENTER_YOUR_PASSWORD": "رقم المرور",
   "EMAIL": "الإيميل",
   "FORGET_PASSWORD": "نسيت كلمة المرور",
   "SIGN_IN": "تسجيل الدخول",
@@ -10,5 +10,13 @@
   "SIGN_IN_TO_COUNTINUE": "قم بتسجل الدخول للأستمرار",
   "VERFICATION_TITLE_1": "سيتم إرسال البريد الإلكتروني للتحقق إلى",
   "EMAIL_TITLE": "صندوق البريد. رجاءا تأكد.",
-  "SEND_VERFICATION_EMAIL": "ارسل ايميل التفعيل"
+  "SEND_VERFICATION_EMAIL": "ارسل ايميل التفعيل",
+  "WE_SEND_CODE_TO": "أرسلنا الرمز إلى",
+  "DIDNT_GET": "لم تحصل على الرمز؟",
+  "CLICK_TO_RESEND": "انقر لإعادة الإرسال",
+  "VERIFY": "تحقق",
+  "CONFIRM": "تأكيد",
+  "NEW_PASSWORD": "كلمة مرور جديدة",
+  "CONFIRM_PASSWORD": "تأكيد كلمة المرور",
+  "PASSWORD": "كلمة المرور"
 }

src/assets/i18n/en.json

@@ -10,5 +10,13 @@
   "SIGN_IN_TO_COUNTINUE": "Sign In To continue",
   "VERFICATION_TITLE_1": "The verification E-mail will be sent to",
   "EMAIL_TITLE": "the mailbox. please check it.",
-  "SEND_VERFICATION_EMAIL": "Send verification E-mail"
+  "SEND_VERFICATION_EMAIL": "Send verification E-mail",
+  "WE_SEND_CODE_TO": "We sent the code to",
+  "DIDNT_GET": "Didn't get the code?",
+  "CLICK_TO_RESEND": "Click to resend",
+  "VERIFY": "Verify",
+  "CONFIRM": "Confirm",
+  "NEW_PASSWORD": "New Password",
+  "CONFIRM_PASSWORD": "Confirm password",
+  "PASSWORD": "Password"
 }

src/styles.scss

@@ -210,3 +210,7 @@ input.mat-input-element {
 .text-center {
   text-align: center;
 }
+
+.top-02 {
+  margin-top: 0.2rem !important;
+}