remove toggle and add confirm modal to user (un)deletion in admin interface

admin/src/components/DeletedUserFormular.vue

@@ -4,19 +4,36 @@
       {{ $t('removeNotSelf') }}
     </div>
     <div v-else class="mt-5">
-      <b-form-checkbox switch size="lg" v-model="checked">
-        <div>{{ item.deletedAt ? $t('undelete_user') : $t('delete_user') }}</div>
-      </b-form-checkbox>
-
       <div class="mt-3 mb-5">
-        <b-button v-if="checked && item.deletedAt === null" variant="danger" @click="deleteUser">
+        <b-button
+          v-if="item.deletedAt === null"
+          variant="danger"
+          v-b-modal.delete-user-modal
+          @click="showModal('deleteUser')"
+        >
           {{ $t('delete_user') }}
         </b-button>
-        <b-button v-if="checked && item.deletedAt !== null" variant="success" @click="unDeleteUser">
+        <b-button
+          v-if="item.deletedAt !== null"
+          variant="success"
+          v-b-modal.delete-user-modal
+          @click="showModal('undeleteUser')"
+        >
           {{ $t('undelete_user') }}
         </b-button>
       </div>
     </div>
+    <b-modal
+      id="delete-user-modal"
+      hide-header-close
+      :title="modalTitle"
+      :cancel-title="$t('overlay.cancel')"
+      :ok-title="modalOkTitle"
+      :ok-variant="variant"
+      @ok="modalEvent"
+    >
+      <p class="my-4">{{ modalQuestion }}</p>
+    </b-modal>
   </div>
 </template>
 <script>
@@ -34,9 +51,34 @@ export default {
   data() {
     return {
       checked: false,
+      modalTitle: '',
+      modalQuestion: '',
+      modalOkTitle: '',
+      modalEvent: null,
+      username: '',
+      variant: 'danger',
     }
   },
   methods: {
+    showModal(type) {
+      this.username = `${this.item.firstName} ${this.item.lastName}`
+
+      if (type === 'deleteUser') {
+        this.variant = 'danger'
+        this.modalTitle = this.$t('overlay.deleteUser.title')
+        this.modalQuestion = this.$t('overlay.deleteUser.question', { username: this.username })
+        this.modalOkTitle = this.$t('overlay.deleteUser.yes')
+        this.modalEvent = this.deleteUser
+      }
+
+      if (type === 'undeleteUser') {
+        this.variant = 'success'
+        this.modalTitle = this.$t('overlay.undeleteUser.title')
+        this.modalQuestion = this.$t('overlay.undeleteUser.question', { username: this.username })
+        this.modalOkTitle = this.$t('overlay.undeleteUser.yes')
+        this.modalEvent = this.unDeleteUser
+      }
+    },
     deleteUser() {
       this.$apollo
         .mutate({

admin/src/locales/de.json

@@ -126,11 +126,21 @@
       "title": "Gemeinwohl-Beitrag löschen!",
       "yes": "Ja, Beitrag löschen!"
     },
+    "deleteUser": {
+      "question": "Willst du {username} wirklich löschen?",
+      "title": "Nutzer löschen",
+      "yes": "Ja, Nutzer löschen"
+    },
     "deny": {
       "question": "Willst du diesen Gemeinwohl-Beitrag  wirklich ablehnen?",
       "text": "Nach dem Speichern ist der Datensatz nicht mehr änderbar und kann auch nicht mehr gelöscht werden. Bitte überprüfe genau, dass alles stimmt.",
       "title": "Gemeinwohl-Beitrag ablehnen!",
       "yes": "Ja, Beitrag ablehnen und speichern!"
+    },
+    "undeleteUser": {
+      "question": "Willst du wirklich {username} wiederherstellen?",
+      "title": "Nutzer wiederherstellen",
+      "yes": "Ja, Nutzer wiederherstellen"
     }
   },
   "redeemed": "eingelöst",

admin/src/locales/en.json

@@ -126,11 +126,21 @@
       "title": "Delete creation!",
       "yes": "Yes, delete and save creation!"
     },
+    "deleteUser": {
+      "question": "Do you really want to delete {username}?",
+      "title": "Delete user",
+      "yes": "Yes, delete user"
+    },
     "deny": {
       "question": "Do you really want to carry out and finally save this pre-stored creation?",
       "text": "After saving, the record can no longer be changed or deleted. Please check carefully that everything is correct.",
       "title": "Reject creation!",
       "yes": "Yes, reject and save creation!"
+    },
+    "undeleteUser": {
+      "question": "Do you really want to undelete {username}",
+      "title": "Undelete user",
+      "yes": "Yes,undelete user"
     }
   },
   "redeemed": "redeemed",