From 2932165f02e5aa9241c080b188a0df9fea297775 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Mon, 4 May 2020 10:52:36 -0700
Subject: Add confirmation modal on local user table

Adds a delete confirmation modal when user attempting batch delete
action from local user table.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I33f77cb55ceedad8a724a9d3f4b37d12c6d6687e
---
 src/locales/en-US.json                             |  3 +-
 .../LocalUserManagement/LocalUserManagement.vue    | 45 ++++++++++++++++------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 2db669b8..5824e5fa 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -146,13 +146,14 @@
   "pageLocalUserManagement": {
     "accountPolicySettings": "Account policy settings",
     "addUser": "Add user",
-    "deleteUser": "Delete user",
+    "deleteUser": "Delete user | Delete users",
     "editUser": "Edit user",
     "viewPrivilegeRoleDescriptions": "View privilege role descriptions",
     "modal": {
       "accountLocked": "Account locked",
       "accountStatus": "Account status",
       "automaticAfterTimeout": "Automatic after timeout",
+      "batchDeleteConfirmMessage": "Are you sure you want to delete %{count} user? This action cannot be undone. | Are you sure you want to delete %{count} users? This action cannot be undone.",
       "cannotStartWithANumber": "Cannot start with a number",
       "clickSaveToUnlockAccount": "Click \"Save\" to unlock account",
       "confirmUserPassword": "Confirm user password",
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 4ae9bb4a..3143c148 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -185,7 +185,7 @@ export default {
             {
               value: 'delete',
               enabled: user.UserName === 'root' ? false : true,
-              title: this.$t('pageLocalUserManagement.deleteUser')
+              title: this.$tc('pageLocalUserManagement.deleteUser')
             }
           ],
           ...user
@@ -221,8 +221,8 @@ export default {
             user: user.username
           }),
           {
-            title: this.$t('pageLocalUserManagement.deleteUser'),
-            okTitle: this.$t('pageLocalUserManagement.deleteUser')
+            title: this.$tc('pageLocalUserManagement.deleteUser'),
+            okTitle: this.$tc('pageLocalUserManagement.deleteUser')
           }
         )
         .then(deleteConfirmed => {
@@ -262,15 +262,36 @@ export default {
       this.startLoader();
       switch (action) {
         case 'delete':
-          this.$store
-            .dispatch('localUsers/deleteUsers', this.selectedRows)
-            .then(messages => {
-              messages.forEach(({ type, message }) => {
-                if (type === 'success') this.successToast(message);
-                if (type === 'error') this.errorToast(message);
-              });
-            })
-            .finally(() => this.endLoader());
+          this.$bvModal
+            .msgBoxConfirm(
+              this.$tc(
+                'pageLocalUserManagement.modal.batchDeleteConfirmMessage',
+                this.selectedRows.length
+              ),
+              {
+                title: this.$tc(
+                  'pageLocalUserManagement.deleteUser',
+                  this.selectedRows.length
+                ),
+                okTitle: this.$tc(
+                  'pageLocalUserManagement.deleteUser',
+                  this.selectedRows.length
+                )
+              }
+            )
+            .then(deleteConfirmed => {
+              if (deleteConfirmed) {
+                this.$store
+                  .dispatch('localUsers/deleteUsers', this.selectedRows)
+                  .then(messages => {
+                    messages.forEach(({ type, message }) => {
+                      if (type === 'success') this.successToast(message);
+                      if (type === 'error') this.errorToast(message);
+                    });
+                  })
+                  .finally(() => this.endLoader());
+              }
+            });
           break;
         case 'enable':
           this.$store
-- 
cgit v1.2.3