Update auth.service.ts

frontend/src/app/component/auth/login/login.component.html

@@ -4,7 +4,7 @@
       <div class="col"></div>
       <div class="col-md-4">
 
-        <form [formGroup]="userLoginData" (ngSubmit)="userLogin()" class="bg-white p-3">
+        <form [formGroup]="userLoginData" (ngSubmit)="userLogin()" class="bg-white p-3" *ngIf="!isLogingSuccess">
           <h4 class="text-dark text-center">Login</h4>
           <hr>
           <div class="my-3">
@@ -43,7 +43,25 @@ <h4 class="text-dark text-center">Login</h4>
 
           <div class="signup_link" >Not a member? <a href="/register">Sign Up</a></div>
         </form>
+
+        <form class="bg-white p-3" [formGroup]="userOTP" (ngSubmit)="verifyOtp()" *ngIf="isLogingSuccess">
+          <h4 class="text-dark text-center">Login</h4>
+          <hr>
+          <div class="my-3">
+            <label for="exampleInputEmail1" class="form-label">OTP</label>
+            <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="otpHelp" formControlName="otp">
+            <div *ngIf="userOTP.get('otp')?.invalid && (userOTP.get('otp')?.dirty || userOTP.get('otp')?.touched)" class="text-danger">
+              This is required field
+            </div>
+          </div>
+
+          <div class="mb-3">
+            <button type="submit" class="form-control btn btn-dark ms-auto mt-2" [disabled]="userOTP.invalid">Verify</button>
+          </div>
+          <label for="exampleInputEmail1" class="form-label">Remaining attempts : {{count}}</label>
+        </form>
 
+
       </div>
       <div class="col"></div>
     </div>
@@ -60,7 +78,7 @@ <h4 class="text-dark text-center">Login</h4>
           <div class="alert alert-danger" role="alert">
             {{response}}
           </div>
-          <button type="button" class="btn btn-primary ms-0 me-0" data-bs-dismiss="modal">Ok</button>
+          <button type="button" class="btn btn-primary ms-0 me-0" data-bs-dismiss="modal" (click)="closeModel()">Ok</button>
         </div>
       </div>
     </div>

frontend/src/app/component/auth/login/login.component.ts

@@ -15,18 +15,24 @@ export class LoginComponent implements OnInit {
 
   @ViewChild('modal')
   modal: ElementRef | undefined;
-
+  isLogingSuccess : boolean = false;
   userObject : User = {
     _id: '',
     email: '',
     name: '',
     password: ''
   };
+  count : number = 3;
   response : String ='';
   userLoginData = new UntypedFormGroup({
     email : new UntypedFormControl(),
     password : new UntypedFormControl()
   })
+
+  userOTP = new UntypedFormGroup({
+    otp : new UntypedFormControl(),
+    userId : new UntypedFormControl()
+  })
   showPassword : boolean = false;
 
   constructor(private fb : UntypedFormBuilder, private auth : AuthService, private route : Router) { }
@@ -36,6 +42,9 @@ export class LoginComponent implements OnInit {
       email : ['',[Validators.required, Validators.email]],
       password : ['',[Validators.required]]
     });
+    this.userOTP = this.fb.group({
+      otp : ['',[Validators.required]]
+    });
     this.response = "";
   }
 
@@ -46,13 +55,39 @@ export class LoginComponent implements OnInit {
     this.auth.login(this.userObject).subscribe(res => {
       console.log(res);
       localStorage.setItem("user_id", res._id);
+      this.isLogingSuccess = true;
+      //this.route.navigate(['/dashboard']);
+    }, err => {
+      this.response = err.error.msg;
+      this.modal?.nativeElement.click();
+    })
+  }
+
+  verifyOtp() {
+    if(this.count < 1) {
+      this.response = "You have reached maximum attempts for verifying OTP";
+      this.modal?.nativeElement.click();
+      return;
+    }
+
+    this.userObject.otp = this.userOTP.value.otp;
+    this.userObject.userId = localStorage.getItem("user_id");
+    this.count = this.count - 1;
+    this.auth.verifyOTP(this.userObject).subscribe(res => {
       this.route.navigate(['/dashboard']);
     }, err => {
       this.response = err.error.msg;
       this.modal?.nativeElement.click();
     })
   }
-
+
+  closeModel() {
+    if(this.count < 1) {
+      this.route.navigate(['/']);
+      return;
+    }
+  }
+
   changePasswordProperty() {
     this.showPassword = !this.showPassword;
   }

frontend/src/app/service/auth.service.ts

@@ -18,6 +18,10 @@ export class AuthService {
   register(user : User) : Observable<any> {
     return this.http.post(this.apiUrl+'register', user);
   }
+
+  verifyOTP(user : User) : Observable<any> {
+    return this.http.post(this.apiUrl+'verifyOtp', user);
+  }
 
   isUserLoggedIn() : Boolean{
     if(localStorage.getItem("user_id")) {