feat(ui): Implement delete user

src/components/UpdateUser.vue

@@ -6,16 +6,23 @@
         <UserSelector v-model="user" />
       </div>
     </q-card-section>
-    <MainUserSettings :user="user" @update:user="updateUser" />
+    <MainUserSettings
+      :user="user"
+      :removeable="canDelete && !isCurrentUser"
+      @update:user="updateUser"
+      @remove="remove"
+    />
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
+import { computed, defineComponent, ref, onMounted } from 'vue';
+import { hasPermission, useMainStore, useUserStore } from '@flaschengeist/api';
+import { Notify } from 'quasar';
+import { PERMISSIONS } from '../permissions';
+
 import MainUserSettings from './settings/MainUserSettings.vue';
 import UserSelector from './UserSelector.vue';
-import { useMainStore, useUserStore } from '@flaschengeist/api';
-import { Notify } from 'quasar';
 
 export default defineComponent({
   name: 'UpdateUser',
@@ -23,7 +30,10 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const userStore = useUserStore();
+
     const user = ref(mainStore.currentUser);
+    const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
+    const isCurrentUser = computed(() => user.value.userid === mainStore.currentUser.userid);
 
     onMounted(() => {
       void userStore.getUsers(true);
@@ -42,7 +52,15 @@ export default defineComponent({
       });
     }
 
+    async function remove() {
+      await userStore.deleteUser(user.value);
+      user.value = mainStore.currentUser;
+    }
+
     return {
+      canDelete,
+      isCurrentUser,
+      remove,
       user,
       updateUser,
     };

src/components/Widget.vue

@@ -5,7 +5,7 @@
         <q-avatar>
           <q-img :src="avatar" style="min-height: 100%; min-width: 100%">
             <template #error>
-              <img src="no-image.svg" style="height: 100%"/>
+              <img src="no-image.svg" style="height: 100%" />
             </template>
           </q-img>
         </q-avatar>

src/components/settings/MainUserSettings.vue

@@ -103,7 +103,10 @@
       </q-file>
     </q-card-section>
     <q-separator v-if="!newUser" />
-    <q-card-section v-if="!newUser" class="fit row justify-start content-center items-center">
+    <q-card-section
+      v-if="!newUser"
+      class="fit row justify-start content-center items-center q-gutter-y-md"
+    >
       <PasswordInput
         v-if="isCurrentUser"
         v-model="password"
@@ -122,9 +125,12 @@
         class="col-xs-12 col-sm-6 q-pa-sm"
       />
     </q-card-section>
-    <q-card-actions align="right">
+    <q-card-actions :align="removeable ? 'between' : 'right'">
-      <q-btn label="Reset" type="reset" />
+      <q-btn v-if="removeable" label="Löschen" color="negative" @click="remove" />
-      <q-btn color="primary" type="submit" label="Speichern" />
+      <div>
+        <q-btn label="Reset" type="reset" style="margin-right: 0.5em" />
+        <q-btn label="Speichern" type="submit" color="primary" />
+      </div>
     </q-card-actions>
   </q-form>
 </template>
@@ -148,6 +154,10 @@ export default defineComponent({
   name: 'MainUserSettings',
   components: { IsoDateInput, PasswordInput },
   props: {
+    removeable: {
+      type: Boolean,
+      default: false,
+    },
     user: {
       required: true,
       type: Object as PropType<FG.User>,
@@ -156,6 +166,7 @@ export default defineComponent({
   },
   emits: {
     'update:user': (payload: FG.User) => !!payload,
+    remove: () => true,
   },
   setup(props, { emit }) {
     const userStore = useUserStore();
@@ -236,7 +247,7 @@ export default defineComponent({
         hasAvatar.value = true;
       } else if (deleteAvatar.value) {
         await userStore.deleteAvatar(changed);
-        hasAvatar.value = false
+        hasAvatar.value = false;
       }
       password.value = '';
     }
@@ -282,6 +293,7 @@ export default defineComponent({
       onAvatarRejected,
       password,
       preview,
+      remove: () => emit('remove'),
       reset,
       save,
       userModel,

src/permissions.ts

@@ -1,12 +1,17 @@
 export const PERMISSIONS = {
-  // Kann andere Nutzer bearbeiten
+  /* User permissions */
+  // Can edit other users
   EDIT_OTHER: 'users_edit_other',
-  // Kann Rollen von Nutzern setzen
+  // Can assign roles to users
   SET_ROLES: 'users_set_roles',
-  // Kann Nutzer löschen
+  // Can delete users
-  DELETE: 'users_delete_other',
+  DELETE: 'users_delete',
-  // Kann neue Nutzer hinzufügen
+  // Can register new users
   REGISTER: 'users_register',
-  // Kann Rollen löschen oder bearbeiten, z.b. Rechte hinzufügen etc
+
+  /* Role permissions */
+  // Can edit roles, assign permissions to roles and change names
   ROLES_EDIT: 'roles_edit',
+  // Can delete roles
+  ROLES_DELETE: 'roles_delete',
 };