From a53f8c69b17af08670862aa486e81b8e62c12109 Mon Sep 17 00:00:00 2001 From: nitinraj-tarento Date: Tue, 18 Jun 2024 11:28:26 +0530 Subject: [PATCH 1/3] approval page ui fix for different screen resolution --- .../user-cards/user-card.component.html | 45 ++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/project/ws/app/src/lib/routes/home/components/user-cards/user-card.component.html b/project/ws/app/src/lib/routes/home/components/user-cards/user-card.component.html index 97457c813..e35869373 100644 --- a/project/ws/app/src/lib/routes/home/components/user-cards/user-card.component.html +++ b/project/ws/app/src/lib/routes/home/components/user-cards/user-card.component.html @@ -593,16 +593,19 @@ cancel - - Approve - Reject - chat_bubble - +
+ + Approve + Reject + chat_bubble + +
+
@@ -616,16 +619,18 @@ cancel - - Approve - Reject - chat_bubble - +
+ + Approve + Reject + chat_bubble + +
From 89f2d618e170eeed15d7714354e6dcdf92ab231e Mon Sep 17 00:00:00 2001 From: Nandini Achutha Date: Thu, 20 Jun 2024 18:37:20 +0530 Subject: [PATCH 2/3] Bulk upload otp support for mobile added --- .../bulk-upload/bulk-upload.component.ts | 9 ++-- .../bulk-upload/bulk-upload.component.ts | 3 +- .../verify-otp/verify-otp.component.html | 18 +++++-- .../verify-otp/verify-otp.component.scss | 5 ++ .../verify-otp/verify-otp.component.ts | 53 ++++++++++++++++--- .../lib/routes/users/services/otp.service.ts | 2 +- 6 files changed, 74 insertions(+), 16 deletions(-) diff --git a/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts b/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts index de58a0793..8f780dca8 100644 --- a/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts +++ b/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts @@ -75,7 +75,7 @@ export class BulkUploadApprovalComponent implements OnInit, AfterViewInit, OnDes .subscribe((res: any) => { this.lastUploadList = res.result.content.sort((a: any, b: any) => new Date(b.datecreatedon).getTime() - new Date(a.datecreatedon).getTime()) - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackBar.open('Unable to get Bulk status list') } @@ -117,7 +117,7 @@ export class BulkUploadApprovalComponent implements OnInit, AfterViewInit, OnDes if (!resendFlag) { this.verifyOTP(contactType) } - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackBar.open(_.get(error, 'error.params.errmsg') || `Unable to send OTP to your ${contactType}, please try again later!`) } @@ -132,7 +132,8 @@ export class BulkUploadApprovalComponent implements OnInit, AfterViewInit, OnDes this.fileName = file.name this.fileSelected = file if (this.fileService.validateFile(this.fileName)) { - this.sendOTP() + // this.sendOTP() + this.verifyOTP(this.userProfile.email ? 'email' : 'phone') } else { this.showFileError = true } @@ -169,7 +170,7 @@ export class BulkUploadApprovalComponent implements OnInit, AfterViewInit, OnDes this.fileName = '' this.fileSelected = '' this.getBulkStatusList() - }, (_err: HttpErrorResponse) => { + }, (_err: HttpErrorResponse) => { if (!_err.ok) { this.matSnackBar.open('Uploading CSV file failed due to some error, please try again later!') } diff --git a/project/ws/app/src/lib/routes/home/routes/users-view/bulk-upload/bulk-upload.component.ts b/project/ws/app/src/lib/routes/home/routes/users-view/bulk-upload/bulk-upload.component.ts index d36083116..4832abf02 100644 --- a/project/ws/app/src/lib/routes/home/routes/users-view/bulk-upload/bulk-upload.component.ts +++ b/project/ws/app/src/lib/routes/home/routes/users-view/bulk-upload/bulk-upload.component.ts @@ -134,7 +134,8 @@ export class BulkUploadComponent implements OnInit, AfterViewInit, OnDestroy { this.fileName = file.name this.fileSelected = file if (this.fileService.validateFile(this.fileName)) { - this.sendOTP() + // this.sendOTP() + this.verifyOTP(this.userProfile.email ? 'email' : 'phone') } else { this.showFileError = true } diff --git a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.html b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.html index c76792cad..f353f4c0c 100644 --- a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.html +++ b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.html @@ -1,7 +1,19 @@
-
+
+ +
+ + + Email + Mobile + +
+ +
+
- Enter the OTP sent to your {{ data.type === 'phone' ? 'mobile number' : 'email address' }} + Enter the OTP sent to your {{ otpTypeSelectedValue === 'phone' ? 'mobile number' : 'email address' }}
Enter OTP
@@ -18,7 +30,7 @@
- +
\ No newline at end of file diff --git a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.scss b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.scss index ab347e306..01216014e 100644 --- a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.scss +++ b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.scss @@ -19,4 +19,9 @@ cursor: pointer; margin-bottom: 16px; } +} +.action-button:disabled, +.action-button[disabled] { + opacity: 0.6; + cursor: auto; } \ No newline at end of file diff --git a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts index 4aeae6fb8..eb01f41be 100644 --- a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts +++ b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Inject, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core' import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog' import { HttpErrorResponse } from '@angular/common/http' -import { MatSnackBar } from '@angular/material' +import { MatRadioChange, MatSnackBar } from '@angular/material' import { Subject } from 'rxjs' import { takeUntil } from 'rxjs/operators' @@ -9,6 +9,8 @@ import { takeUntil } from 'rxjs/operators' import * as _ from 'lodash' /* tslint:enable */ import { OtpService } from '../../../../users/services/otp.service' +import { FormControl, FormGroup, Validators } from '@angular/forms' +import { UsersService } from '../../../../users/services/users.service' @Component({ selector: 'ws-verify-otp', @@ -25,13 +27,21 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { interval: any showResendOTP = false otpEntered = '' + otpSelectionForm!: FormGroup + otpTypeSelected = false + otpTypeSelectedValue: any constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any, private matSnackbar: MatSnackBar, - private otpService: OtpService - ) { } + private otpService: OtpService, + private usersService: UsersService + ) { + this.otpSelectionForm = new FormGroup({ + otpType: new FormControl('', [Validators.required]), + }) + } ngOnInit() { this.startTimer() @@ -46,7 +56,7 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { clearInterval(this.interval) this.showResendOTP = true } - }, 1000) + }, 1000) } handleCloseModal(): void { @@ -61,7 +71,7 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { } handleVerifyOTP(): void { - if (this.data.type === 'email') { + if (this.otpTypeSelectedValue === 'email') { this.verifyEmailOTP() } else { this.verifyMobileOTP() @@ -74,7 +84,7 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { .subscribe((_res: any) => { this.handleCloseModal() this.otpVerified.emit(true) - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackbar.open('Unable to verify OTP, please try again later!') } @@ -87,7 +97,7 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { .subscribe((_res: any) => { this.handleCloseModal() this.otpVerified.emit(true) - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackbar.open('Unable to verify OTP, please try again later!') } @@ -98,4 +108,33 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { clearInterval(this.interval) this.destroySubject$.unsubscribe() } + + radioChange(_event: MatRadioChange) { + // this.resetOTPFields() + } + + sendOtp() { + this.generateAndVerifyOTP(this.otpSelectionForm.value.otpType) + this.otpTypeSelected = true + this.otpTypeSelectedValue = this.otpSelectionForm.value.otpType + } + + generateAndVerifyOTP(contactType: string): void { + const type = contactType === 'email' ? 'email' : 'phone' + const postValue = contactType === 'email' ? this.data.email : this.data.mobile + this.usersService.sendOtp(postValue, type) + .pipe(takeUntil(this.destroySubject$)) + .subscribe((_res: any) => { + this.matSnackbar.open(`An OTP has been sent to your ${type === 'phone' ? 'Mobile number' + : 'Email address'}, (Valid for 15 min's)`) + // if (!resendFlag) { + // this.verifyOTP(contactType) + // } + // tslint:disable-next-line + }, (error: HttpErrorResponse) => { + if (!error.ok) { + this.matSnackbar.open(_.get(error, 'error.params.errmsg') || `Unable to send OTP to your ${contactType}, please try again later!`) + } + }) + } } diff --git a/project/ws/app/src/lib/routes/users/services/otp.service.ts b/project/ws/app/src/lib/routes/users/services/otp.service.ts index ba0c4723b..438b1717e 100644 --- a/project/ws/app/src/lib/routes/users/services/otp.service.ts +++ b/project/ws/app/src/lib/routes/users/services/otp.service.ts @@ -37,7 +37,7 @@ export class OtpService { verifyOTP(otp: number, mob: number) { const reqObj = { request: { - otp, + otp: otp.toString(), type: 'phone', key: `${mob}`, }, From 282221622f3d94744fe5d91b623c1f222a0cd5bb Mon Sep 17 00:00:00 2001 From: Nandini Achutha Date: Thu, 20 Jun 2024 18:47:17 +0530 Subject: [PATCH 3/3] lint fix --- .../routes/approvals/bulk-upload/bulk-upload.component.ts | 6 +++--- .../routes/users-view/verify-otp/verify-otp.component.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts b/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts index 8f780dca8..05d9cabfe 100644 --- a/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts +++ b/project/ws/app/src/lib/routes/home/routes/approvals/bulk-upload/bulk-upload.component.ts @@ -75,7 +75,7 @@ export class BulkUploadApprovalComponent implements OnInit, AfterViewInit, OnDes .subscribe((res: any) => { this.lastUploadList = res.result.content.sort((a: any, b: any) => new Date(b.datecreatedon).getTime() - new Date(a.datecreatedon).getTime()) - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackBar.open('Unable to get Bulk status list') } @@ -117,7 +117,7 @@ export class BulkUploadApprovalComponent implements OnInit, AfterViewInit, OnDes if (!resendFlag) { this.verifyOTP(contactType) } - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackBar.open(_.get(error, 'error.params.errmsg') || `Unable to send OTP to your ${contactType}, please try again later!`) } @@ -170,7 +170,7 @@ export class BulkUploadApprovalComponent implements OnInit, AfterViewInit, OnDes this.fileName = '' this.fileSelected = '' this.getBulkStatusList() - }, (_err: HttpErrorResponse) => { + }, (_err: HttpErrorResponse) => { if (!_err.ok) { this.matSnackBar.open('Uploading CSV file failed due to some error, please try again later!') } diff --git a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts index eb01f41be..8cfbff809 100644 --- a/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts +++ b/project/ws/app/src/lib/routes/home/routes/users-view/verify-otp/verify-otp.component.ts @@ -56,7 +56,7 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { clearInterval(this.interval) this.showResendOTP = true } - }, 1000) + }, 1000) } handleCloseModal(): void { @@ -84,7 +84,7 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { .subscribe((_res: any) => { this.handleCloseModal() this.otpVerified.emit(true) - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackbar.open('Unable to verify OTP, please try again later!') } @@ -97,7 +97,7 @@ export class VerifyOtpComponent implements OnInit, OnDestroy { .subscribe((_res: any) => { this.handleCloseModal() this.otpVerified.emit(true) - }, (error: HttpErrorResponse) => { + }, (error: HttpErrorResponse) => { if (!error.ok) { this.matSnackbar.open('Unable to verify OTP, please try again later!') }