satellite/admin-ui: add delete user functionality

This change adds functionality to delete a user account.

Issue: #7619

Change-Id: I298f2d0602c7f6690d0225f729483e31d36f73f1

Author: wilfred-asomanii

satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue

@@ -62,10 +62,22 @@
                 </v-list-item-title>
             </v-list-item>
 
-            <v-list-item v-if="featureFlags.account.delete" density="comfortable" link rounded="lg" base-color="error">
-                <v-list-item-title class="text-body-2 font-weight-medium">
+            <v-list-item
+                v-if="featureFlags.account.delete"
+                density="comfortable"
+                rounded="lg" link
+                base-color="error"
+                @click="user.hasUnpaidInvoices || hasActiveProjects ? ()=>{} : emit('delete', user)"
+            >
+                <v-list-item-title
+                    v-if="cantDeleteText"
+                    v-tooltip="cantDeleteText"
+                    class="text-body-2 font-weight-medium text-disabled"
+                >
+                    Delete
+                </v-list-item-title>
+                <v-list-item-title v-else class="text-body-2 font-weight-medium">
                     Delete
-                    <AccountDeleteDialog />
                 </v-list-item-title>
             </v-list-item>
         </v-list>
@@ -82,7 +94,6 @@ import { useAppStore } from '@/store/app';
 import { ROUTES } from '@/router';
 
 import AccountResetMFADialog from '@/components/AccountResetMFADialog.vue';
-import AccountDeleteDialog from '@/components/AccountDeleteDialog.vue';
 import AccountNewProjectDialog from '@/components/AccountNewProjectDialog.vue';
 import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
 
@@ -107,10 +118,26 @@ const isCurrentRouteViewAccount = computed(() => {
     return router.currentRoute.value.name === ROUTES.Account.name;
 });
 
+const hasActiveProjects = computed(() =>  props.user.projects?.some(p => p.active) ?? false);
+
+const cantDeleteText = computed(() => {
+    if (props.user.hasUnpaidInvoices && hasActiveProjects.value) {
+        return 'User has unpaid invoices and active projects so cannot be deleted';
+    }
+    if (props.user.hasUnpaidInvoices) {
+        return 'User has unpaid invoices so cannot be deleted';
+    }
+    if (hasActiveProjects.value) {
+        return 'User has active projects so cannot be deleted';
+    }
+    return '';
+});
+
 const emit = defineEmits<{
     (e: 'toggleFreeze', user: UserAccount): void;
     (e: 'update', user: UserAccount): void;
     (e: 'updateLimits', user: UserAccount): void;
+    (e: 'delete', user: UserAccount): void;
 }>();
 
 function viewAccount() {

satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue

@@ -2,116 +2,97 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
+    <v-dialog v-model="model" width="auto" transition="fade-transition">
         <v-card rounded="xlg">
-            <v-sheet>
-                <v-card-item class="pl-7 py-4">
-                    <template #prepend>
-                        <v-card-title class="font-weight-bold">
-                            Delete Account
-                        </v-card-title>
-                    </template>
-
-                    <template #append>
-                        <v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
-                    </template>
-                </v-card-item>
-            </v-sheet>
-
-            <v-divider />
-
-            <v-form class="pa-7">
-                <v-row>
-                    <v-col cols="12">
-                        <p>Please enter the reason for deleting this account.</p>
-                    </v-col>
-                </v-row>
-
-                <v-row>
-                    <v-col cols="12">
-                        <v-select
-                            label="Deleting reason" placeholder="Select one or more reasons"
-                            :items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
-                            hide-details="auto"
-                        />
-                    </v-col>
-                </v-row>
+            <template #title>
+                Delete Account
+            </template>
+            <template #append>
+                <v-btn
+                    :icon="X" :disabled="isLoading"
+                    variant="text" size="small" color="default" @click="model = false"
+                />
+            </template>
 
+            <div class="pa-6">
                 <v-row>
                     <v-col cols="12">
                         <v-text-field
-                            model-value="41" label="Account ID" variant="solo-filled" flat readonly
+                            :model-value="account.id" label="Account ID" variant="solo-filled" flat readonly
                             hide-details="auto"
                         />
                     </v-col>
                     <v-col cols="12">
                         <v-text-field
-                            model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
+                            :model-value="account.email" label="Account Email" variant="solo-filled" flat readonly
                             hide-details="auto"
                         />
                     </v-col>
                 </v-row>
 
-                <v-row>
-                    <v-col>
-                        <v-alert variant="tonal" color="error" rounded="lg">
-                            This will delete the account, data, and account
-                            information.
-                        </v-alert>
-                    </v-col>
-                </v-row>
-            </v-form>
-
-            <v-divider />
+                <v-alert class="mt-6" title="Warning" variant="tonal" color="error" rounded="lg">
+                    This will delete the account, data, and account
+                    information.
+                </v-alert>
+            </div>
 
-            <v-card-actions class="pa-7">
+            <v-card-actions class="pa-6">
                 <v-row>
                     <v-col>
-                        <v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
+                        <v-btn variant="outlined" color="default" block @click="model = false">Cancel</v-btn>
                     </v-col>
                     <v-col>
-                        <v-btn color="error" variant="flat" block @click="onButtonClick">Delete Account</v-btn>
+                        <v-btn color="error" variant="flat" block :loading="isLoading" @click="deleteAccount">Delete Account</v-btn>
                     </v-col>
                 </v-row>
             </v-card-actions>
         </v-card>
     </v-dialog>
-
-    <v-snackbar v-model="snackbar" :timeout="7000" color="success">
-        The account was deleted successfully.
-        <template #actions>
-            <v-btn color="default" variant="text" @click="snackbar = false">
-                Close
-            </v-btn>
-        </template>
-    </v-snackbar>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import {
     VDialog,
     VCard,
-    VSheet,
-    VCardItem,
-    VCardTitle,
     VBtn,
-    VDivider,
-    VForm,
     VRow,
     VCol,
     VTextField,
     VCardActions,
-    VSnackbar,
-    VSelect,
     VAlert,
 } from 'vuetify/components';
+import { X } from 'lucide-vue-next';
+import { useRouter } from 'vue-router';
+
+import { useLoading } from '@/composables/useLoading';
+import { UserAccount } from '@/api/client.gen';
+import { useUsersStore } from '@/store/users';
+import { useNotify } from '@/composables/useNotify';
+import { ROUTES } from '@/router';
+
+const notify = useNotify();
+const usersStore = useUsersStore();
+const router = useRouter();
+const { isLoading, withLoading } = useLoading();
+
+const model = defineModel<boolean>({ required: true });
+
+const props = defineProps<{
+    account: UserAccount;
+}>();
 
-const snackbar = ref<boolean>(false);
-const dialog = ref<boolean>(false);
+function deleteAccount() {
+    withLoading(async () => {
+        try {
+            await usersStore.deleteUser(props.account.id);
+            notify.success('Account deleted successfully');
 
-function onButtonClick() {
-    snackbar.value = true;
-    dialog.value = false;
+            model.value = false;
+            await new Promise((resolve) => setTimeout(resolve, 200)); // wait for dialog to close
+            router.push({ name: ROUTES.AccountSearch.name });
+        } catch (e) {
+            notify.error(`Failed to delete account. ${e.message}`);
+        }
+    });
 }
-</script>
+</script>

satellite/admin/back-office/ui/src/layouts/default/AppBar.vue

@@ -139,17 +139,17 @@
 
                             <v-list-item link rounded="lg">
                                 <!-- <template v-slot:prepend>
-                        <img src="@/assets/icon-check-color.svg" alt="Selected Project">
-                        </template> -->
+        <img src="@/assets/icon-check-color.svg" alt="Selected Project">
+        </template> -->
                                 <v-list-item-title class="text-body-2 ml-7">
                                     Europe (EU1)
                                 </v-list-item-title>
                             </v-list-item>
 
                             <v-list-item link rounded="lg">
                                 <!-- <template v-slot:prepend>
-                        <img src="@/assets/icon-check-color.svg" alt="Selected Project">
-                        </template> -->
+        <img src="@/assets/icon-check-color.svg" alt="Selected Project">
+        </template> -->
                                 <v-list-item-title class="text-body-2 ml-7">
                                     Asia-Pacific (AP1)
                                 </v-list-item-title>

satellite/admin/back-office/ui/src/store/users.ts

@@ -35,13 +35,16 @@ export const useUsersStore = defineStore('users', () => {
     }
 
     // Update the current user stored in the state.
-    async function updateCurrentUser(user: string | UserAccount): Promise<UserAccount> {
+    async function updateCurrentUser(user: string | UserAccount): Promise<void> {
         if (typeof user === 'string') {
             state.currentAccount = await getUser(user);
-            return state.currentAccount;
+            return;
         }
         state.currentAccount = user;
-        return state.currentAccount;
+    }
+
+    function clearCurrentUser(): void {
+        state.currentAccount = null;
     }
 
     async function getAccountFreezeTypes(): Promise<void> {
@@ -77,15 +80,21 @@ export const useUsersStore = defineStore('users', () => {
         return await userApi.updateUser(request, userID);
     }
 
+    async function deleteUser(userID: string): Promise<void> {
+        await userApi.deleteUser(userID);
+    }
+
     return {
         state,
         getUserByEmail,
         updateCurrentUser,
+        clearCurrentUser,
         getAccountFreezeTypes,
         freezeUser,
         unfreezeUser,
         getUserKinds,
         getUserStatuses,
         updateUser,
+        deleteUser,
     };
 });

satellite/admin/back-office/ui/src/views/AccountDetails.vue

@@ -37,6 +37,7 @@
                         :user="userAccount"
                         @update="updateAccountDialogEnabled = true"
                         @update-limits="updateLimitsDialogEnabled = true"
+                        @delete="deleteAccountDialogEnabled = true"
                         @toggle-freeze="toggleFreeze"
                     />
                 </v-btn>
@@ -75,6 +76,7 @@
                                 :user="userAccount"
                                 @update="updateAccountDialogEnabled = true"
                                 @update-limits="updateLimitsDialogEnabled = true"
+                                @delete="deleteAccountDialogEnabled = true"
                                 @toggle-freeze="toggleFreeze"
                             />
                         </v-btn>
@@ -217,6 +219,7 @@
     <AccountFreezeDialog v-if="userAccount" v-model="freezeDialogEnabled" :account="userAccount" />
     <AccountUpdateDialog v-if="userAccount" v-model="updateAccountDialogEnabled" :account="userAccount" />
     <AccountUpdateLimitsDialog v-if="userAccount" v-model="updateLimitsDialogEnabled" :account="userAccount" />
+    <AccountDeleteDialog v-if="userAccount" v-model="deleteAccountDialogEnabled" :account="userAccount" />
 </template>
 
 <script setup lang="ts">
@@ -257,6 +260,7 @@ import CardStatsComponent from '@/components/CardStatsComponent.vue';
 import AccountFreezeDialog from '@/components/AccountFreezeDialog.vue';
 import AccountUpdateDialog from '@/components/AccountUpdateDialog.vue';
 import AccountUpdateLimitsDialog from '@/components/AccountUpdateLimitsDialog.vue';
+import AccountDeleteDialog from '@/components/AccountDeleteDialog.vue';
 
 const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
@@ -272,6 +276,7 @@ const unfreezing = ref<boolean>(false);
 const freezeDialogEnabled = ref<boolean>(false);
 const updateAccountDialogEnabled = ref<boolean>(false);
 const updateLimitsDialogEnabled = ref<boolean>(false);
+const deleteAccountDialogEnabled = ref<boolean>(false);
 
 const statusColor = computed(() => {
     if (!userAccount.value) {

satellite/admin/back-office/ui/src/views/AccountSearch.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { VContainer, VRow, VCol, VBtn, VCard, VCardText, VForm, VTextField } from 'vuetify/components';
 
@@ -119,4 +119,8 @@ async function goToUser(): Promise<void> {
 }
 
 watch(email, () => notFoundError.value = false);
+
+onMounted(() => {
+    usersStore.clearCurrentUser();
+});
 </script>