feat: warn use when deleting self (#1848)

* add the alert component on User Management

* refactored the warning text into the language file

frontend/lang/messages/en-US.json

@@ -151,6 +151,7 @@
     "a-name-is-required": "A Name is Required",
     "delete-with-name": "Delete {name}",
     "confirm-delete-generic-with-name": "Are you sure you want to delete this {name}?",
+    "confirm-delete-own-admin-account": "Please note that you are trying to delete your own admin account! This action cannot be undone and will permanently delete your account?",
     "organizer": "Organizer",
     "transfer": "Transfer",
     "copy": "Copy",

frontend/pages/admin/manage/users/index.vue

@@ -2,7 +2,19 @@
   <v-container fluid>
     <BaseDialog v-model="deleteDialog" :title="$t('general.confirm')" color="error" @confirm="deleteUser(deleteTarget)">
       <template #activator> </template>
-      <v-card-text>
+
+      <v-card-text
+        v-if="isUserOwnAccount === true">
+        <v-alert
+        text
+        outlined
+        color="deep-orange"
+        >⚠️ {{ $t("general.confirm-delete-own-admin-account") }}
+        <br/>
+        </v-alert>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+      <v-card-text v-else>
           {{ $t("general.confirm-delete-generic") }}
       </v-card-text>
     </BaseDialog>
@@ -51,6 +63,7 @@
             @click.stop="
               deleteDialog = true;
               deleteTarget = item.id;
+              isUserOwnAccount = item.id === user.id ? true : false;
               "
           >
             <v-icon>
@@ -65,7 +78,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, reactive, ref, toRefs, useContext, useRouter, computed } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useUser, useAllUsers } from "~/composables/use-user";
@@ -76,6 +89,9 @@ export default defineComponent({
   setup() {
     const api = useAdminApi();
     const refUserDialog = ref();
+    const { $auth } = useContext();
+
+    const user = computed(() => $auth.user);
 
     const { i18n } = useContext();
 
@@ -84,6 +100,7 @@ export default defineComponent({
     const state = reactive({
       deleteDialog: false,
       deleteTarget: 0,
+      isUserOwnAccount: false,
       search: "",
     });
 
@@ -130,6 +147,7 @@ export default defineComponent({
       loading,
       refUserDialog,
       users,
+      user,
       handleRowClick,
     };
   },