Allow admins to delete user accounts (#44)

* Add permission function

* Update permission function with alerts

* Update permission function with alerts

* Format code

* Add deleteAccount function

* create separate api-func to delete users

* remove user from list if deleted

* format code

* fix

* Change admin table size

---------

Co-authored-by: neda_moshki <uzijb@student.kit.edu>
Co-authored-by: Florian Raith <florianraith00@gmail.com>

src/composables/admin.ts

@@ -37,10 +37,24 @@ export const useAdmin = defineStore('admin', () => {
     }
   }
 
+  async function deleteAccount(id: number) {
+    try {
+      await api.deleteUserAccount(id);
+
+      const index = users.value.findIndex((u) => u.id === id);
+      users.value.splice(index, 1);
+
+      alerts.success('Account erfolgreich gelöscht');
+    } catch (error) {
+      alerts.error('Löschen des Accounts fehlgeschlagen', error as Error);
+    }
+  }
+
   return {
     users,
     load,
     changeUserRole,
+    deleteAccount,
     loaded,
   };
 });

src/composables/api.ts

@@ -100,6 +100,10 @@ const api = {
     return fetch.delete('/auth/delete');
   },
 
+  async deleteUserAccount(id: number): Promise<void> {
+    return fetch.delete(`/user/${id}`);
+  },
+
   async allCategories(): Promise<Category[]> {
     return fetch.getOrFail('/category');
   },

src/views/AdminView.vue

 <template>
   <Layout title="Admin" :buttons="['back']">
     <div class="row my-5">
-      <div class="col-md-7">
+      <div class="col">
         <h2>Users</h2>
         <table class="table">
           <thead>
@@ -40,6 +40,7 @@
                   ></i>
                 </button>
                 <button
+                  @click="deleteAccount(user)"
                   class="btn btn-sm btn-secondary"
                   :disabled="user.id === auth.state.user?.id"
                 >
@@ -82,4 +83,18 @@
 
     await admin.changeUserRole(user.id);
   }
+
+  async function deleteAccount(user: User) {
+    const shouldDelete = await ask(
+      'Account löschen',
+      `Soll das Account des Benutzers <b>${user.name}</b> wirklich gelöscht werden?`,
+      'Löschen',
+    );
+
+    if (!shouldDelete) {
+      return;
+    }
+
+    await admin.deleteAccount(user.id);
+  }
 </script>