feat(core): add manage user modal

src/app/components/base/button/Button.vue

@@ -30,7 +30,7 @@ const props = withDefaults(
     icon?: AppIcon;
     text?: string;
     tooltip?: string;
-    type?: string;
+    type?: 'button' | 'reset' | 'submit';
     tooltipPosition?: Placement;
     color?: Color;
     textual?: boolean;

src/app/components/base/form/Form.vue

@@ -16,7 +16,7 @@ defineProps<{
   submitLabel: string;
 }>();
 
-const submit = (e: SubmitEvent) => {
+const submit = (e: Event) => {
   emit('submit');
   e.preventDefault();
 };

src/app/components/base/icon/Icon.types.ts

@@ -34,6 +34,7 @@ export type AppIcon =
   | 'save'
   | 'settings-4-line'
   | 'shield-flash-line'
+  | 'shield-user-line'
   | 'shopping-basket-2'
   | 'skip-down-line'
   | 'skip-up-line'

src/app/pages/navigation/admin/AdminButton.vue

@@ -5,10 +5,11 @@
     tooltip-position="right"
     :class="classes"
   >
-    <Button icon="shield-flash-line" textual color="dimmed"></Button>
+    <Button icon="shield-flash-line" textual color="dimmed" />
 
     <template #options>
       <CreateUserButton />
+      <ManageUsersButton v-if="user?.admin" />
     </template>
   </ContextMenu>
 </template>
@@ -19,14 +20,17 @@ import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
 import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
 import { useMediaQuery } from '@composables';
+import { useStorage } from '@storage/index';
 import { ClassNames } from '@utils';
 import CreateUserButton from './create-user/CreateUserButton.vue';
+import ManageUsersButton from './manage-users/ManageUsersButton.vue';
 
 const props = defineProps<{
   class: ClassNames;
 }>();
 
 const { t } = useI18n();
+const { user } = useStorage();
 const media = useMediaQuery();
 
 const classes = computed(() => props.class);

src/app/pages/navigation/admin/manage-users/ManageUsersButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <ContextMenuButton
+    :text="t('navigation.admin.manageUsers')"
+    icon="user-settings-line"
+    @click="showManageUserModal = !showManageUserModal"
+  />
+  <ManageUsersModal :open="showManageUserModal" @close="showManageUserModal = false" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ContextMenuButton from '@components/base/context-menu/ContextMenuButton.vue';
+import ManageUsersModal from './ManageUsersModal.vue';
+
+const { t } = useI18n();
+
+const showManageUserModal = ref(false);
+</script>

src/app/pages/navigation/admin/manage-users/ManageUsersModal.vue

@@ -0,0 +1,85 @@
+<template>
+  <Dialog :title="t('navigation.admin.manageUsers')" :open="open" @close="emit('close')">
+    <ul :class="$style.list">
+      <li v-for="usr of users" :key="usr.name" :class="$style.item">
+        <span :class="$style.name">{{ usr.name }}</span>
+        <Button
+          :color="usr.admin ? 'success' : 'dimmed'"
+          textual
+          icon="shield-user-line"
+          @click="toggleAdmin(usr, !usr.admin)"
+        />
+        <Button color="danger" textual icon="close-circle" @click="removeUser(usr)" />
+      </li>
+    </ul>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@components/base/button/Button.vue';
+import Dialog from '@components/base/dialog/Dialog.vue';
+import { GenesisUser } from '@storage/createGenesisStore';
+import { useStorage } from '@storage/index';
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+defineProps<{
+  open: boolean;
+}>();
+
+const { t } = useI18n();
+const { user, getAllUsers, updateUser, deleteUser } = useStorage();
+
+const users = ref<GenesisUser[]>([]);
+
+const toggleAdmin = async (user: GenesisUser, admin: boolean) => {
+  await updateUser(user.name, {
+    ...user,
+    admin
+  });
+};
+
+const removeUser = async (user: GenesisUser) => {
+  await deleteUser(user.name);
+  await fetchUsers();
+};
+
+const fetchUsers = async () => (users.value = await getAllUsers());
+
+watch(user, (user) => user?.admin && void fetchUsers(), { immediate: true });
+</script>
+
+<style lang="scss" module>
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  list-style: none outside none;
+  gap: 2px;
+  margin: 0;
+}
+
+.item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  min-width: 175px;
+
+  .name {
+    display: inline-block;
+    margin-right: auto;
+    cursor: default;
+  }
+}
+
+.actions {
+  width: 100%;
+  display: flex;
+  padding-top: 6px;
+  justify-content: space-between;
+}
+</style>

src/i18n/locales/de.json

@@ -59,6 +59,7 @@
         "conflict": "Ein Nutzer mit diesem Namen existiert bereits.",
         "generic": "Irgendwas ist schiefgelaufen, versuche es später erneut."
       },
+      "manageUsers": "Nutzer verwalten",
       "password": "Passwort",
       "settings": "Admin-Einstellungen",
       "username": "Benutzername"

src/i18n/locales/en.json

@@ -59,6 +59,7 @@
         "conflict": "A user with this name already exists.",
         "generic": "Something went wrong, please try again later."
       },
+      "manageUsers": "Manage users",
       "password": "Password",
       "settings": "Admin settings",
       "username": "Username"

src/storage/createStorage.ts

@@ -102,6 +102,7 @@ export const createStorage = () => {
     getAllUsers: store.getAllUsers,
     deleteUser: store.deleteUser,
     createUser: store.createUser,
+    updateUser: store.updateUser,
     updatePassword: store.updatePassword,
     login,
     logout,