From 3067c106e62e6ffb7bead580e4b572101f82f3b0 Mon Sep 17 00:00:00 2001
From: Simon Reinisch <simon@reinisch.io>
Date: Tue, 5 Sep 2023 14:12:37 +0200
Subject: [PATCH] feat(core): add manage user modal

---
 src/app/components/base/icon/Icon.types.ts    |  1 +
 .../pages/navigation/admin/AdminButton.vue    |  6 +-
 .../admin/manage-users/ManageUsersButton.vue  | 19 +++++
 .../admin/manage-users/ManageUsersModal.vue   | 85 +++++++++++++++++++
 src/i18n/locales/de.json                      |  1 +
 src/i18n/locales/en.json                      |  1 +
 src/icons/shield-user-line.svg                |  1 +
 src/storage/createStorage.ts                  |  1 +
 8 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 src/app/pages/navigation/admin/manage-users/ManageUsersButton.vue
 create mode 100644 src/app/pages/navigation/admin/manage-users/ManageUsersModal.vue
 create mode 100644 src/icons/shield-user-line.svg

diff --git a/src/app/components/base/icon/Icon.types.ts b/src/app/components/base/icon/Icon.types.ts
index 08b3aeb..f2ed95b 100644
--- a/src/app/components/base/icon/Icon.types.ts
+++ b/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'
diff --git a/src/app/pages/navigation/admin/AdminButton.vue b/src/app/pages/navigation/admin/AdminButton.vue
index 042fef0..1239b91 100644
--- a/src/app/pages/navigation/admin/AdminButton.vue
+++ b/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);
diff --git a/src/app/pages/navigation/admin/manage-users/ManageUsersButton.vue b/src/app/pages/navigation/admin/manage-users/ManageUsersButton.vue
new file mode 100644
index 0000000..39f22af
--- /dev/null
+++ b/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>
diff --git a/src/app/pages/navigation/admin/manage-users/ManageUsersModal.vue b/src/app/pages/navigation/admin/manage-users/ManageUsersModal.vue
new file mode 100644
index 0000000..8de840c
--- /dev/null
+++ b/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">
+        <TextCell v-model="usr.name" inline />
+        <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 TextCell from '@components/base/text-cell/TextCell.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: 125px;
+
+  .name {
+    display: inline-block;
+    margin-right: auto;
+  }
+}
+
+.actions {
+  width: 100%;
+  display: flex;
+  padding-top: 6px;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 2c1c089..19807d9 100644
--- a/src/i18n/locales/de.json
+++ b/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"
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index f4b6a4b..621f064 100644
--- a/src/i18n/locales/en.json
+++ b/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"
diff --git a/src/icons/shield-user-line.svg b/src/icons/shield-user-line.svg
new file mode 100644
index 0000000..a2fc12a
--- /dev/null
+++ b/src/icons/shield-user-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.78307 2.82598L12 1L20.2169 2.82598C20.6745 2.92766 21 3.33347 21 3.80217V13.7889C21 15.795 19.9974 17.6684 18.3282 18.7812L12 23L5.6718 18.7812C4.00261 17.6684 3 15.795 3 13.7889V3.80217C3 3.33347 3.32553 2.92766 3.78307 2.82598ZM5 4.60434V13.7889C5 15.1263 5.6684 16.3752 6.7812 17.1171L12 20.5963L17.2188 17.1171C18.3316 16.3752 19 15.1263 19 13.7889V4.60434L12 3.04879L5 4.60434ZM12 11C10.6193 11 9.5 9.88071 9.5 8.5C9.5 7.11929 10.6193 6 12 6C13.3807 6 14.5 7.11929 14.5 8.5C14.5 9.88071 13.3807 11 12 11ZM7.52746 16C7.77619 13.75 9.68372 12 12 12C14.3163 12 16.2238 13.75 16.4725 16H7.52746Z"></path></svg>
\ No newline at end of file
diff --git a/src/storage/createStorage.ts b/src/storage/createStorage.ts
index dbc3f05..63aba73 100644
--- a/src/storage/createStorage.ts
+++ b/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,