Sineedge/sparq-lender
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forgot Password flow Changes : ps

Browse Source
This commit is contained in:
VE10-Sanjeev 2022-08-12 21:43:33 +05:30
parent 66d97ceb0d
commit 597e07b0f6
6 changed files with 256 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ng6-seed/src/app/app.module.ts
View File

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

12
ng6-seed/src/app/session/login/login-component.html
View File

@ -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 style="width: 100%" class="mb-1">
<input matInput placeholder="Password" minlength= "8" type="password" name="password" required [(ngModel)]="password">
<mat-form-field>
<input matInput placeholder="Password" minlength= "8" [type]="hide ? 'password' : 'text'" name="password" [(ngModel)]="password" required>
<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>

4
ng6-seed/src/app/session/login/login-component.scss
View File

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

94
ng6-seed/src/app/session/login/login.component.ts
View File

@ -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 confirmPassword = new FormControl('', CustomValidators.equalTo(newpassword));
// 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>
// @Component({
// selector: 'app-jazz-dialog',
// template: `
// <h5 class="mt-0">New Password Change.</h5>
<mat-form-field>
<input matInput placeholder="New Password" #newpassword type="password" style="width: 100%;">
// <mat-form-field>
// <input matInput placeholder="New Password" #newpassword type="password" style="width: 100%;">
</mat-form-field>
// </mat-form-field>
<br/>
<mat-form-field>
<input matInput placeholder="ConfirmPassword" #confirmPassword type="password" style="width: 100%;">
</mat-form-field>
// <br/>
// <mat-form-field>
// <input matInput placeholder="ConfirmPassword" #confirmPassword type="password" style="width: 100%;">
// </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;
confirmPassword: any = confirmPassword;
jazzMessage = 'Jazzy jazz jazz';
// newpassword: any = newpassword;
// confirmPassword: any = confirmPassword;
// jazzMessage = 'Jazzy jazz jazz';
constructor(public dialogRef: MatDialogRef<NewPasswordDialog>) {
// constructor(public dialogRef: MatDialogRef<NewPasswordDialog>) {
}
// }
}
// }
@Component({
selector: 'app-jazz-dialog',
template: `
<h5 class="mt-0">Forgot Password</h5>
// @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>
// <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;
confirmPassword: any = confirmPassword;
jazzMessage = 'Jazzy jazz jazz';
// newpassword: any = newpassword;
// confirmPassword: any = confirmPassword;
// jazzMessage = 'Jazzy jazz jazz';
constructor(public dialogRef: MatDialogRef<ForgotPass>) {
// constructor(public dialogRef: MatDialogRef<ForgotPass>) {
}
// }
}
// }

10
ng6-seed/src/app/session/otp/otp.component.html
View File

@ -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>

209
ng6-seed/src/app/session/otp/otp.component.ts
View File

@ -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 =================== */