From 15c977dab41984436499d29ceed7c875fb41140e Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Fri, 11 Sep 2020 13:52:07 +0200
Subject: [PATCH] fix: otp delete comfirmation (#729)

---
 .../auth-user-mfa/auth-user-mfa.component.ts  | 37 +++++++++++++------
 .../users/user-detail/user-detail.module.ts   |  2 +
 console/src/assets/i18n/de.json               |  4 ++
 console/src/assets/i18n/en.json               |  4 ++
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
index 0a88a0696f..ea9baa7253 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatSort } from '@angular/material/sort';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { MfaOtpResponse, MFAState, MfaType, MultiFactor } from 'src/app/proto/generated/auth_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -73,18 +74,32 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
     }
 
     public deleteMFA(type: MfaType): void {
-        if (type === MfaType.MFATYPE_OTP) {
-            this.service.RemoveMfaOTP().then(() => {
-                this.toast.showInfo('USER.TOAST.OTPREMOVED', true);
+        const dialogRef = this.dialog.open(WarnDialogComponent, {
+            data: {
+                confirmKey: 'ACTIONS.DELETE',
+                cancelKey: 'ACTIONS.CANCEL',
+                titleKey: 'USER.MFA.DIALOG.OTP_DELETE_TITLE',
+                descriptionKey: 'USER.MFA.DIALOG.OTP_DELETE_DESCRIPTION',
+            },
+            width: '400px',
+        });
 
-                const index = this.dataSource.data.findIndex(mfa => mfa.type === type);
-                if (index > -1) {
-                    this.dataSource.data.splice(index, 1);
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                if (type === MfaType.MFATYPE_OTP) {
+                    this.service.RemoveMfaOTP().then(() => {
+                        this.toast.showInfo('USER.TOAST.OTPREMOVED', true);
+
+                        const index = this.dataSource.data.findIndex(mfa => mfa.type === type);
+                        if (index > -1) {
+                            this.dataSource.data.splice(index, 1);
+                        }
+                        this.getOTP();
+                    }).catch(error => {
+                        this.toast.showError(error);
+                    });
                 }
-
-            }).catch(error => {
-                this.toast.showError(error);
-            });
-        }
+            }
+        });
     }
 }
diff --git a/console/src/app/pages/users/user-detail/user-detail.module.ts b/console/src/app/pages/users/user-detail/user-detail.module.ts
index 2e5b893839..f0a553bc0d 100644
--- a/console/src/app/pages/users/user-detail/user-detail.module.ts
+++ b/console/src/app/pages/users/user-detail/user-detail.module.ts
@@ -25,6 +25,7 @@ import { PasswordComplexityViewModule } from 'src/app/modules/password-complexit
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
+import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';
@@ -66,6 +67,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
         ReactiveFormsModule,
         DetailFormModule,
         DetailFormMachineModule,
+        WarnDialogModule,
         MatDialogModule,
         QRCodeModule,
         MetaLayoutModule,
diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json
index f9c2bef6dd..cb0931bfca 100644
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -108,6 +108,10 @@
                 "1": "Nicht bereit",
                 "2": "Bereit",
                 "3": "Gelöscht"
+            },
+            "DIALOG": {
+                "OTP_DELETE_TITLE":"OTP Faktor entfernen",
+                "OTP_DELETE_DESCRIPTION":"Sie sind im Begriff OTP als Zweitfaktormethode zu entfernen. Sind sie sicher?"
             }
         },
         "CREATE": {
diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json
index e32e50aceb..45425af8ba 100644
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -108,6 +108,10 @@
                 "1": "Not Ready",
                 "2": "Ready",
                 "3": "Deleted"
+            },
+            "DIALOG": {
+                "OTP_DELETE_TITLE":"Remove OTP Factor",
+                "OTP_DELETE_DESCRIPTION":"You are about to delete OTP as second factor. Are you sure?"
             }
         },
         "CREATE": {