auth login module

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
     "@ngrx/store": "^17.0.1",
+    "ngx-otp-input": "^0.11.4",
     "node-sass": "^9.0.0",
     "rxjs": "~7.8.0",
     "sass-loader": "^13.3.3",

src/app/authentication/auth-sign-in/auth-sign-in-theme.scss

@@ -7,7 +7,7 @@
       background-color: $off-white;
     }
 
-    form {
+    .form {
       width: 30%;
       background: $white-color 0% 0% no-repeat padding-box;
       border-radius: 12px;

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

@@ -1 +1,28 @@
-<p>change-password works!</p>
+<form class="form" fxLayout="column" fxLayoutAlign="start stretch">
+  <main>
+    <h1>Welcome Back</h1>
+    <span>New Password</span>
+  </main>
+
+  <label class="label mt-1 gap-5" fxLayout="row" fxLayoutAlign="start center">
+    <img
+      src="../../../../assets/images/password.jpg"
+      alt="password.jpg"
+      title="password"
+    />
+    <span>Password</span></label
+  >
+  <input type="password" placeholder="Enter password" />
+
+  <label class="label mt-1 gap-5" fxLayout="row" fxLayoutAlign="start center">
+    <img
+      src="../../../../assets/images/password.jpg"
+      alt="password.jpg"
+      title="password"
+    />
+    <span> Confirm password</span></label
+  >
+  <input type="password" placeholder="Enter password" />
+
+  <button type="submit" [routerLink]="['/']">Confirm</button>
+</form>

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

@@ -1,4 +1,4 @@
-<form fxLayout="column" fxLayoutAlign="start stretch">
+<form class="form" fxLayout="column" fxLayoutAlign="start stretch">
   <main>
     <h1>Forget Password</h1>
     <span
@@ -10,5 +10,7 @@
   <label class="label">Email</label>
   <input type="email" placeholder="Enter your email address" />
 
-  <button type="submit">Send verification E-mail</button>
+  <button type="submit" [routerLink]="['../verify']">
+    Send verification E-mail
+  </button>
 </form>

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

@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-forget-password',
   templateUrl: './forget-password.component.html',
-  styleUrls: ['./forget-password.component.scss']
+  styleUrls: ['./forget-password.component.scss'],
 })
-export class ForgetPasswordComponent {
-
-}
+export class ForgetPasswordComponent {}

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

@@ -1,16 +1,31 @@
-<form fxLayout="column" fxLayoutAlign="start stretch">
+<form class="form" fxLayout="column" fxLayoutAlign="start stretch">
   <main>
     <h1>Welcome Back!</h1>
     <span>Sign in to continue</span>
   </main>
 
-  <label class="label">Email</label>
+  <label class="label gap-5" fxLayout="row" fxLayoutAlign="start center">
+    <img
+      src="../../../../assets/images/email.jpg"
+      alt="email.jpg"
+      title="email"
+      style="width: 15px"
+    />
+    <span>Email</span></label
+  >
   <input type="email" placeholder="Enter your email address" />
   <!-- <mat-form-field appearance="outline" class="custom-input">
     <input type="email" placeholder="Enter your email address" />
   </mat-form-field> -->
 
-  <label class="label mt-1">Enter your password</label>
+  <label class="label mt-1 gap-5" fxLayout="row" fxLayoutAlign="start center">
+    <img
+      src="../../../../assets/images/password.jpg"
+      alt="password.jpg"
+      title="password"
+    />
+    <span> Enter your password</span></label
+  >
   <input type="password" placeholder="Enter password" />
 
   <p fxLayout="row" fxLayoutAlign="end center">

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

@@ -1 +1,13 @@
-<p>verify-otp works!</p>
+<form fxLayout="column" fxLayoutAlign="start stretch" class="form">
+  <main>
+    <h1>Forget Password</h1>
+    <span
+      >We sent the code to<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>
+
+  <button type="submit" [routerLink]="['../change-password']">Verify</button>
+</form>

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

@@ -0,0 +1,9 @@
+.dont-send {
+  font-size: 13px;
+  color: #2e368f;
+  text-align: center;
+  span {
+    color: #2e368f;
+    font-weight: bold;
+  }
+}

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

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { NgxOtpInputConfig } from 'ngx-otp-input';
 
 @Component({
   selector: 'app-verify-otp',
   templateUrl: './verify-otp.component.html',
-  styleUrls: ['./verify-otp.component.scss']
+  styleUrls: ['./verify-otp.component.scss'],
 })
 export class VerifyOtpComponent {
-
+  otpInputConfig: NgxOtpInputConfig = {
+    otpLength: 4,
+  };
 }

src/app/shared/shared.module.ts

@@ -7,12 +7,15 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 // import { ErrorStateMatcher } from '@angular/material/core';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { NgxOtpInputModule } from 'ngx-otp-input';
+
 const MATERIAL_MODULES = [
   FlexLayoutModule,
   MatButtonModule,
   MatFormFieldModule,
   MatIconModule,
   MatInputModule,
+  NgxOtpInputModule,
   // ErrorStateMatcher,
 ];
 @NgModule({

src/styles.scss

@@ -46,6 +46,10 @@ body {
   gap: 10px;
 }
 
+.gap-5 {
+  gap: 5px;
+}
+
 .plr-20 {
   padding-left: 20px;
   padding-right: 20px;
@@ -72,3 +76,12 @@ input.mat-input-element {
 ::placeholder {
   color: #c5c5c5;
 }
+
+.ngx-otp-input-container {
+  justify-content: center !important;
+}
+
+.ngx-otp-input {
+  width: 15px !important;
+  height: 15px !important;
+}

yarn.lock

@@ -5860,6 +5860,13 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+ngx-otp-input@^0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/ngx-otp-input/-/ngx-otp-input-0.11.4.tgz#248f7148f741183394b78b7eadbe48ebdec32121"
+  integrity sha512-D6Pq+SYOARNrWB8BDikWwS6f4PMhP6La3/KlunXKRyZdZnP4NwjPzsYIyXfKGhzcFr1ktwkBYbw4t0hhnAZTUw==
+  dependencies:
+    tslib "^2.0.0"
+
 nice-napi@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nice-napi/-/nice-napi-1.0.2.tgz#dc0ab5a1eac20ce548802fc5686eaa6bc654927b"