Merge pull request #540 from sunbird-cb/cbrelease-4.8.14

Cbrelease 4.8.14
sunbird-cb · Jun 21, 2024 · 1013f47 · 1013f47
2 parents 95aeabd + 1d77d5f
commit 1013f47
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 30 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
@@ -596,16 +596,19 @@
                       <mat-icon class="nonverified-icon margin-left-s"
                         *ngIf="field.action === 'REJECT'">cancel</mat-icon>
                     </span>
-                    <mat-radio-group aria-label="Select an option" name="approveGroup" formControlName="approveGroup"
-                      class="mat-caption margin-top-s">
-                      <mat-radio-button value="approvegroup" class="margin-right-s"
-                        (click)="onClickHandleWorkflow(field,'APPROVE')">Approve</mat-radio-button>
-                      <mat-radio-button value="rejectgroup"
-                        (click)="onClickHandleWorkflow(field,'REJECT')">Reject</mat-radio-button>
-                      <mat-icon class="margin-left-m editreasonicon cursor-pointer"
-                        *ngIf="field.action === 'REJECT' && comment !== ''"
-                        (click)="updateRejection(field)">chat_bubble</mat-icon>
-                    </mat-radio-group>
+                    <div class="flex flex-1">
+                      <mat-radio-group aria-label="Select an option" name="approveGroup" formControlName="approveGroup"
+                        class="mat-caption">
+                        <mat-radio-button value="approvegroup" class="margin-right-s"
+                          (click)="onClickHandleWorkflow(field,'APPROVE')">Approve</mat-radio-button>
+                        <mat-radio-button value="rejectgroup"
+                          (click)="onClickHandleWorkflow(field,'REJECT')">Reject</mat-radio-button>
+                        <mat-icon class="margin-left-m editreasonicon cursor-pointer"
+                          *ngIf="field.action === 'REJECT' && comment !== ''"
+                          (click)="updateRejection(field)">chat_bubble</mat-icon>
+                      </mat-radio-group>
+                    </div>
+
                   </div>
                 </div>
                 <div class="md:w-1/3 margin-bottom-s" *ngIf="field.label === 'Designation'">
@@ -619,16 +622,18 @@
                       <mat-icon class="nonverified-icon margin-left-s"
                         *ngIf="field.action === 'REJECT'">cancel</mat-icon>
                     </span>
-                    <mat-radio-group aria-label="Select an option" name="approveDesignation"
-                      formControlName="approveDesignation" class="mat-caption margin-top-s">
-                      <mat-radio-button value="approvedesg" class="margin-right-s"
-                        (click)="onClickHandleWorkflow(field,'APPROVE')">Approve</mat-radio-button>
-                      <mat-radio-button value="rejectdesg"
-                        (click)="onClickHandleWorkflow(field,'REJECT')">Reject</mat-radio-button>
-                      <mat-icon class="margin-left-m editreasonicon cursor-pointer"
-                        *ngIf="field.action === 'REJECT' && comment !== ''"
-                        (click)="updateRejection(field)">chat_bubble</mat-icon>
-                    </mat-radio-group>
+                    <div class="flex flex-1">
+                      <mat-radio-group aria-label="Select an option" name="approveDesignation"
+                        formControlName="approveDesignation" class="mat-caption">
+                        <mat-radio-button value="approvedesg" class="margin-right-s"
+                          (click)="onClickHandleWorkflow(field,'APPROVE')">Approve</mat-radio-button>
+                        <mat-radio-button value="rejectdesg"
+                          (click)="onClickHandleWorkflow(field,'REJECT')">Reject</mat-radio-button>
+                        <mat-icon class="margin-left-m editreasonicon cursor-pointer"
+                          *ngIf="field.action === 'REJECT' && comment !== ''"
+                          (click)="updateRejection(field)">chat_bubble</mat-icon>
+                      </mat-radio-group>
+                    </div>
                   </div>
                 </div>
               </ng-container>

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

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
@@ -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
@@ -1,7 +1,19 @@
 <div class="verify-otp-dialog">
-  <div class="flex flex-col gap-4">
+  <form [formGroup]="otpSelectionForm" class="mobile-wrapper" *ngIf="!otpTypeSelected">
+    <label class="mat-title-1 font-bold" aria-label="Send OTP to">Send OTP to </label>
+    <div class="margin-bottom-l margin-top-m">
+      <!-- <mat-radio-group aria-label="Select an option" formControlName='otpType' #otpType (change)="radioChange($event)"> -->
+      <mat-radio-group aria-label="Select an option" formControlName='otpType' #otpType>
+        <mat-radio-button [value]="'email'" color="accent" class="radio-btn margin-right-xl">Email</mat-radio-button>
+        <mat-radio-button [value]="'phone'" color="accent" class="radio-btn">Mobile</mat-radio-button>
+      </mat-radio-group>
+    </div>
+    <button class="action-button margin-top-l" (click)="sendOtp()" [disabled]="otpSelectionForm.invalid">Send
+      OTP</button>
+  </form>
+  <div class="flex flex-col gap-4" *ngIf="otpTypeSelected">
     <div class="text-base font-semibold text-center mb-4">
-      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' }}
     </div>
     <div class="flex flex-col gap-1">
       <div class="text-sm font-bold">Enter OTP</div>
@@ -18,7 +30,7 @@
 
     <div class="flex flex-row justify-between">
       <button class="outline-button" (click)="handleCloseModal()">Cancel</button>
-      <button class="action-button" (click)="handleVerifyOTP()">Submit</button>
+      <button class="action-button" (click)="handleVerifyOTP()" [disabled]="otpEntered === ''">Submit</button>
     </div>
   </div>
 </div>
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
@@ -19,4 +19,9 @@
     cursor: pointer;
     margin-bottom: 16px;
   }
+}
+.action-button:disabled,
+.action-button[disabled] {
+  opacity: 0.6;
+  cursor: auto;
 }
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
@@ -1,14 +1,16 @@
 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'
 /* tslint:disable */
 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<VerifyOtpComponent>,
     @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()
@@ -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()
@@ -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
@@ -37,7 +37,7 @@ export class OtpService {
   verifyOTP(otp: number, mob: number) {
     const reqObj = {
       request: {
-        otp,
+        otp: otp.toString(),
         type: 'phone',
         key: `${mob}`,
       },