Forgot Password flow Changes : ps

ng6-seed/src/app/app.module.ts

@@ -40,7 +40,8 @@ import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
 import { SharedModule } from './shared/shared.module';
 import { AwsService } from './AwsService/aws.service';
 import { TokenInterceptor } from './_guard/token.interceptor';
-import { NewPasswordDialog, ForgotPass } from './session/login/login.component';
+// import { NewPasswordDialog, ForgotPass } from './session/login/login.component';
+import { NewPasswordDialog,ForgotPass } from './session/otp/otp.component';
 import { AuthGuard } from './_guard/auth.guard';
 import { RoleMenuItemsPipe } from './layouts/role-menu-items.pipe';
 import { ResizableModule } from 'angular-resizable-element';

ng6-seed/src/app/session/login/login-component.html

@@ -17,10 +17,16 @@
                                 <mat-form-field style="width: 100%">
                                     <input matInput placeholder="E-Mail" type="text" name="email" required [(ngModel)]="email">
                                 </mat-form-field>
-                                
+                                <mat-form-field>
-                                <mat-form-field style="width: 100%" class="mb-1">
+                                    <input matInput placeholder="Password" minlength= "8" [type]="hide ? 'password' : 'text'" name="password" [(ngModel)]="password" required>
-                                    <input matInput placeholder="Password" minlength= "8" type="password" name="password" required [(ngModel)]="password">
+                                    <mat-icon class="passwordIcon" matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+                                    <!-- <mat-hint *ngIf="!passwordInput.value">Enter your password</mat-hint> -->
                                 </mat-form-field>
+                                <!-- <mat-form-field style="width: 100%" class="mb-1">
+                                    <input matInput placeholder="Password" minlength= "8" [type]="hide ? 'password' : 'text'" name="password" required [(ngModel)]="password">
+                                    <mat-icon class="passwordIcon" matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+                                </mat-form-field> -->
+                                
                                 <button class="mat-green" mat-raised-button>SIGN IN</button><br/>
                                 <div>
                                 <a  *ngIf="email" class="mat-text-warn mb-0" (click)="forgotpassword();">Forgot password?</a></div>

ng6-seed/src/app/session/login/login-component.scss

@@ -38,4 +38,8 @@
 .bottom-sec,.mat-green{
         color:white !important;
         font-weight: 700;
+}
+.passwordIcon{
+        font-size: larger !important;
+        color: #f34325 !important;
 }

ng6-seed/src/app/session/login/login.component.ts

@@ -44,12 +44,14 @@ export class LoginComponent implements OnInit{
   };
   commonDetails: any;
   dialogRef: MatDialogRef<OtpComponent, any>;
+  hide: boolean;
   constructor(
     private router: Router, public aws: AwsService, public dialog: MatDialog,
   public shared:CognitoService,private dashBoardService:DashboardService , private loaderService:LoaderService) {
     
   }
   ngOnInit(){
+    this.hide = true;
     this.loggedInCheck();
   }
   
@@ -72,6 +74,7 @@ export class LoginComponent implements OnInit{
     //alert('login - function')
   
     const mailid = this.email.split(/\s/).join('');
+    const password = this.password.split(/\s/).join('');
     let auth = { 'Username': mailid, 'Password': this.password };
     // alert(auth)
     this.loaderService.showMatSpinnerDialog('');
@@ -99,7 +102,7 @@ export class LoginComponent implements OnInit{
       this.loaderService.closeMatSpinnerDialog();
     }, err => {
       if (err.message == "New password is required.") {
-        this.newpassopen();
+        // this.newpassopen();
       } else { 
 
       }
@@ -122,11 +125,10 @@ export class LoginComponent implements OnInit{
         }
         else
         {
-         
+          // alert(data.msg);//comment this.
         }
        
   });
-   
   }
   /**
    * New password set
@@ -179,79 +181,79 @@ export class LoginComponent implements OnInit{
  * New password Dialog
  */
 
-const newpassword = new FormControl('', Validators.required);
+// const newpassword = new FormControl('', Validators.required);
-const confirmPassword = new FormControl('', CustomValidators.equalTo(newpassword));
+// const confirmPassword = new FormControl('', CustomValidators.equalTo(newpassword));
 
-@Component({
+// @Component({
-  selector: 'app-jazz-dialog',
+//   selector: 'app-jazz-dialog',
-  template: `
+//   template: `
-  <h5 class="mt-0">New Password Change.</h5>
+//   <h5 class="mt-0">New Password Change.</h5>
   
-  <mat-form-field>
+//   <mat-form-field>
-    <input matInput placeholder="New Password" #newpassword type="password" style="width: 100%;">
+//     <input matInput placeholder="New Password" #newpassword type="password" style="width: 100%;">
     
-  </mat-form-field>
+//   </mat-form-field>
   
 
-  <br/>
+//   <br/>
-  <mat-form-field> 
+//   <mat-form-field> 
-  <input matInput placeholder="ConfirmPassword"  #confirmPassword type="password" style="width: 100%;">
+//   <input matInput placeholder="ConfirmPassword"  #confirmPassword type="password" style="width: 100%;">
-  </mat-form-field>
+//   </mat-form-field>
   
-  <small *ngIf="confirmPassword.value !='' && newpassword.value != confirmPassword.value" class="mat-text-warn">Passwords do not match.</small>
+//   <small *ngIf="confirmPassword.value !='' && newpassword.value != confirmPassword.value" class="mat-text-warn">Passwords do not match.</small>
 
-  <br>
+//   <br>
         
-            <button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
+//             <button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
         
     
-      `
+//       `
-})
+// })
-export class NewPasswordDialog {
+// export class NewPasswordDialog {
 
-  newpassword: any = newpassword;
+//   newpassword: any = newpassword;
-  confirmPassword: any = confirmPassword;
+//   confirmPassword: any = confirmPassword;
-  jazzMessage = 'Jazzy jazz jazz';
+//   jazzMessage = 'Jazzy jazz jazz';
 
-  constructor(public dialogRef: MatDialogRef<NewPasswordDialog>) {
+//   constructor(public dialogRef: MatDialogRef<NewPasswordDialog>) {
 
-  }
+//   }
 
 
-}
+// }
 
 
 
-@Component({
+// @Component({
-  selector: 'app-jazz-dialog',
+//   selector: 'app-jazz-dialog',
-  template: `
+//   template: `
-  <h5 class="mt-0">Forgot Password</h5>
+//   <h5 class="mt-0">Forgot Password</h5>
   
-  <mat-form-field>
+//   <mat-form-field>
-    <input matInput placeholder="Email Id" #newpassword type="Email" style="width: 100%;">
+//     <input matInput placeholder="Email Id" #newpassword type="Email" style="width: 100%;">
     
-  </mat-form-field>
+//   </mat-form-field>
   
 
   
-  <br>
+//   <br>
         
-            <button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
+//             <button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
         
     
-      `
+//       `
-})
+// })
-export class ForgotPass {
+// export class ForgotPass {
 
-  newpassword: any = newpassword;
+//   newpassword: any = newpassword;
-  confirmPassword: any = confirmPassword;
+//   confirmPassword: any = confirmPassword;
-  jazzMessage = 'Jazzy jazz jazz';
+//   jazzMessage = 'Jazzy jazz jazz';
 
-  constructor(public dialogRef: MatDialogRef<ForgotPass>) {
+//   constructor(public dialogRef: MatDialogRef<ForgotPass>) {
 
-  }
+//   }
 
-}
+// }
 
 
 

ng6-seed/src/app/session/otp/otp.component.html

@@ -12,17 +12,23 @@
   </div>
 </h2>
 <mat-dialog-content>
-<mat-form-field style="width: 80%">
+<mat-form-field style="width: 75%">
   <input matInput placeholder="Enter OTP" #otp
           type="text" maxlength="6">
   
 </mat-form-field>
+<span style="width: 25%">
+        <button mat-button color="primary" (click)="resendOTP()" >{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
+</span>
 </mat-dialog-content>
 <mat-dialog-actions>
  
 <div fxFlex="100" align="right">
       <!--<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" mat-dialog-close matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>-->
-      <button mat-raised-button mat-icon-button (click)="updatepassword(otp.value)" class="mr-1 mb-1 hover-icon" type="button" matTooltip="Update Password" matTooltipPosition="below"><mat-icon>save</mat-icon></button>
+      <!-- <button mat-raised-button mat-icon-button (click)="updatePassword(otp.value)" class="mr-1 mb-1 hover-icon" type="button" matTooltip="Update Password" matTooltipPosition="below"><mat-icon>save</mat-icon></button> -->
+           <button mat-raised-button (click)="updatePassword(otp.value)" matTooltip="VERIFY" matTooltipPosition="below"  color="primary"  [disabled]="(otp.value.length < 6)"><span>{{'VERIFY'}}</span></button>     
+      <!-- <p>{{timeLeft}} Seconds Left....</p>  -->
+      
 </div>               
   
 </mat-dialog-actions>

ng6-seed/src/app/session/otp/otp.component.ts

@@ -1,41 +1,202 @@
 import { Component, OnInit,Inject } from '@angular/core';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition , MatDialogConfig} from '@angular/material';
 import { DashboardService } from 'app/dashboard/dashboard.service';
 import { NotifierService } from 'angular-notifier';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { CustomValidators } from 'ng2-validation';
+import { Router } from "@angular/router";
+import { AwsService } from '../../AwsService/aws.service';
+import { LoaderService } from 'app/shared/loaderService/loader.service';
+
 @Component({
   selector: 'app-otp',
   templateUrl: './otp.component.html',
   styleUrls: ['./otp.component.scss']
 })
 export class OtpComponent implements OnInit {
+  timeLeft: number = 0;
+  loggedEmailID:any="";
+  interval;
+  config: MatDialogConfig = {
+    disableClose: false,
+    width: '',
+    height: '',
+    position: {
+      top: '',
+      bottom: '',
+      left: '',
+      right: ''
+    }
+  };
  //public notifier : NotifierService;
 
-  constructor( private dialogRef: MatDialogRef<OtpComponent>,private dialog: MatDialog, @Inject(MAT_DIALOG_DATA) public data: any,private dashBoardService:DashboardService) 
+  constructor( private dialogRef: MatDialogRef<OtpComponent>,private dialog: MatDialog, @Inject(MAT_DIALOG_DATA) public data: any,private dashBoardService:DashboardService
+  ,private loaderService:LoaderService,private router: Router, 
+   public aws: AwsService) 
   {
-    
+      this.loggedEmailID = this.data;  
+      this.timeLeft = 60;
+      this.interval = setInterval(() => {
+        if(this.timeLeft > 0) {
+          this.timeLeft--;
+        } else {
+          clearInterval(this.interval);
+        }
+      },1000)
    }
 
-  ngOnInit() {
+  ngOnInit() {}
+
+  resendOTP() {
+      this.timeLeft = 60;
+      this.dashBoardService.generateotp(this.loggedEmailID.split(/\s/).join('')).subscribe(
+        response => {
+          // if(response.status == 200)  
+            this.interval = setInterval(() => {
+              if(this.timeLeft > 0) {
+                this.timeLeft--;
+              } else {
+                clearInterval(this.interval);
+                // alert(response.msg);//comment this.    
+              }
+            },1000)
+     });
+  }
+    
+  updatePassword(otp)
+  { 
+    this.dashBoardService.resetpassword(this.loggedEmailID,otp).subscribe(
+      data => {
+        console.log('resetpassword api res data',data);
+        if (data.status == 200) {
+              this.dialogRef.close();
+              this.loggedEmailID = this.data;  
+              // alert('Password Reset Successfully');
+              this.newPasswordDialog(this.loggedEmailID);
+        }
+        else{ alert('OTP is invalid. Plesae enter correct OTP.!'); }
+      });
+  }
+
+  newPasswordDialog(email) {
+    
+    let dialogRef = this.dialog.open(NewPasswordDialog, this.config);
+  
+    dialogRef.afterClosed().subscribe(result => {
+      if (result !== undefined) {  
+        console.log(result);
+        let auth = { 'Username': email, 'Password': 'temp1234', 'newpassword': result };
+        this.aws.dologin(auth).subscribe(res => {
+        this.getCommonSettings();
+          // this.router.navigate(['/']);
+          this.router.navigate(['personal_discussion/pdlist']);
+          localStorage.setItem('user_role',res.idToken.payload["custom:role_id"]);
+          //this.router.navigate(['/']);
+          //alert(localStorage.getItem('user_role'))
+          this.loaderService.closeMatSpinnerDialog();
+          if(res.idToken.payload["custom:role_id"]=='11')
+          {
+            this.router.navigate(['sales-pd-list/list-pd']);
+          }
+          else
+          {
+            this.router.navigate(['personal_discussion/pdlist']);
+          }
+          
+        }, err => {
+          this.loaderService.closeMatSpinnerDialog();
+          // alert(err.message);
+        })
+      }
+    });
+  }
+
+
+  commonDetails: any;
+  getCommonSettings(){
+    this.dashBoardService.getCommonSettingsConfig().subscribe(res=>{
+      this.commonDetails = res;
+      if(this.commonDetails.dataStatus == true){
+          localStorage.setItem("commonSettings",JSON.stringify(this.commonDetails.records));
+      }
+    })
   }
-  updatepassword(otp)
-  {
- console.log('data');
- console.log(this.data);
- this.dashBoardService.resetpassword(this.data,otp).subscribe(
-  data => {
-    console.log('data');
-    console.log(data)
-    if (data.status == 200) {
-      alert('Password Reset Successfully');
-      this.dialogRef.close();
-    }
-    else
-    {
-      alert('OTP is invalid. Plesae enter correct OTP.!');
-     
-    }
- 
-  })
-}
 
 }
+/**  ======================= OtpComponent Ends Here ============================== */
+
+/**  ==================== New password Dialog Starts Here ======================== */
+
+ const newpassword = new FormControl('', Validators.required);
+ const confirmPassword = new FormControl('', CustomValidators.equalTo(newpassword));
+ 
+ @Component({
+   selector: 'app-jazz-dialog',
+   template: `
+      <h5 class="mt-0">New Password Change.</h5>
+      
+      <mat-form-field>
+        <input matInput placeholder="New Password" #newpassword [type]="hide1 ? 'password' : 'text'" style="width: 100%;">
+        <mat-icon class="passwordIcon" matSuffix (click)="hide1 = !hide1">{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
+      </mat-form-field>
+        
+      <br/>
+      <mat-form-field> 
+      <input matInput placeholder="ConfirmPassword"  #confirmPassword [type]="hide2 ? 'password' : 'text'" style="width: 100%;">
+      <mat-icon class="passwordIcon" matSuffix (click)="hide2 = !hide2">{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
+      </mat-form-field>
+      
+      <small *ngIf="confirmPassword.value !='' && newpassword.value != confirmPassword.value" class="mat-text-warn">Passwords do not match.</small>
+    
+      <br>
+            
+      <button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
+         
+    `
+ })
+ export class NewPasswordDialog {
+ 
+   newpassword: any = newpassword;
+   confirmPassword: any = confirmPassword;
+   hide1: boolean = true;
+   hide2: boolean = true;
+   jazzMessage = 'Jazzy jazz jazz';
+ 
+   constructor(public dialogRef: MatDialogRef<NewPasswordDialog>) {
+ 
+   }
+ 
+ 
+ }
+/**  ==================== New password Dialog Ends Here ======================== */
+/**  ==================== Forgot Password Dialog Starts Here =================== */
+
+ @Component({
+  selector: 'app-jazz-dialog',
+  template: `
+  <h5 class="mt-0">Forgot Password</h5>
+  
+  <mat-form-field>
+    <input matInput placeholder="Email Id" #newpassword type="Email" style="width: 100%;">
+    
+  </mat-form-field>
+
+  <br>
+        
+  <button mat-raised-button class="mat-green" type="submit" (click)="dialogRef.close(newpassword.value)">Submit</button>
+        
+    
+      `
+})
+export class ForgotPass {
+
+  newpassword: any = newpassword;
+  confirmPassword: any = confirmPassword;
+  jazzMessage = 'Jazzy jazz jazz';
+
+  constructor(public dialogRef: MatDialogRef<ForgotPass>) {
+
+  }
+
+}
+/**  ==================== Forgot Password Dialog Ends Here =================== */