From ff373a23bbf2af84e80838051b49277370390675 Mon Sep 17 00:00:00 2001
From: Ronan <ronan.le_meillat@highcanfly.club>
Date: Fri, 31 May 2024 15:36:01 +0200
Subject: [PATCH] refactor modal

---
 .../src/components/AccessibleAddressBooks.vue |   4 +-
 webconsole/src/components/AddUser.vue         | 144 ++++++-----------
 webconsole/src/components/AddressBook.vue     |   3 +-
 webconsole/src/components/EditUser.vue        | 148 +++++++-----------
 webconsole/src/components/Modal.vue           |  68 ++++++++
 webconsole/src/components/UsersCard.vue       |   2 +
 6 files changed, 179 insertions(+), 190 deletions(-)
 create mode 100644 webconsole/src/components/Modal.vue

diff --git a/webconsole/src/components/AccessibleAddressBooks.vue b/webconsole/src/components/AccessibleAddressBooks.vue
index 172a12c..29e3676 100644
--- a/webconsole/src/components/AccessibleAddressBooks.vue
+++ b/webconsole/src/components/AccessibleAddressBooks.vue
@@ -7,8 +7,8 @@ This website use:
 - And many others
 -->
 <template>
-    <AddressBook class="mb-4" name="Personal address book" :peers="ab_personal_peers" />
-    <AddressBook class="mb-4" v-for="sharedAddressBook in ab_shared_address_books" :key="sharedAddressBook.name" :name="sharedAddressBook.name" :peers="sharedAddressBook.peers" />
+    <AddressBook class="mb-4" name="Personal address book" :peers="ab_personal_peers" :isPersonal="true"/>
+    <AddressBook class="mb-4" v-for="sharedAddressBook in ab_shared_address_books" :key="sharedAddressBook.name" :name="sharedAddressBook.name" :peers="sharedAddressBook.peers" :isPersonal="false"/>
     <div class="h-24"></div>
 </template>
 <script setup lang="ts">
diff --git a/webconsole/src/components/AddUser.vue b/webconsole/src/components/AddUser.vue
index 58b106f..cc4a6f2 100644
--- a/webconsole/src/components/AddUser.vue
+++ b/webconsole/src/components/AddUser.vue
@@ -7,101 +7,57 @@ This website use:
 - And many others
 -->
 <template>
-    <TransitionRoot appear :show="true" as="template">
-        <Dialog as="div" @close="closeModal" class="relative z-10">
-            <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
-                leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="fixed inset-0 bg-black/25" />
-            </TransitionChild>
-
-            <div class="fixed inset-0 overflow-y-auto">
-                <div class="flex min-h-full items-center justify-center p-4 text-center">
-                    <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
-                        enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
-                        leave-to="opacity-0 scale-95">
-                        <DialogPanel
-                            class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                            <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
-                                Add User
-                            </DialogTitle>
-                            <div class="mt-2">
-                                <div>
-                                    <label for="name"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Username</label>
-                                    <div class="mt-2">
-                                        <input v-model="name" id="name" name="name" type="text" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="password"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Password</label>
-                                    <div class="mt-2">
-                                        <input v-model="password" id="passwors" name="password" type="password" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="confirm-password"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Confirm</label>
-                                    <div class="mt-2">
-                                        <input v-model="confirm_password" id="confirm_password" name="confirm_password"
-                                            type="password" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="email"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Email</label>
-                                    <div class="mt-2">
-                                        <input v-model="email" id="email" name="email" type="text" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="is_admin"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Administrator</label>
-                                    <div class="mt-2">
-                                        <input v-model="is_admin" id="is_admin" name="is_admon" type="checkbox" required
-                                            class="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="grp"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Group</label>
-                                    <div class="mt-2">
-                                        <select v-model="grp" id="grp" name="grp" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
-                                            <option v-for="group in groups" :key="group.guid" :value="group.name">
-                                                {{ group.name }}
-                                            </option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="mt-4">
-                                <button type="button"
-                                    class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                                    @click="addUser">
-                                    Add User
-                                </button>
-                            </div>
-                        </DialogPanel>
-                    </TransitionChild>
-                </div>
+    <Modal @modalOk="addUser()" @modalCancel="closeModal()">
+        <div>
+            <label for="name" class="block text-sm font-medium leading-6 text-gray-900">Username</label>
+            <div class="mt-2">
+                <input v-model="name" id="name" name="name" type="text" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
+            <div class="mt-2">
+                <input v-model="password" id="passwors" name="password" type="password" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="confirm-password" class="block text-sm font-medium leading-6 text-gray-900">Confirm</label>
+            <div class="mt-2">
+                <input v-model="confirm_password" id="confirm_password" name="confirm_password" type="password" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email</label>
+            <div class="mt-2">
+                <input v-model="email" id="email" name="email" type="text" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="is_admin" class="block text-sm font-medium leading-6 text-gray-900">Administrator</label>
+            <div class="mt-2">
+                <input v-model="is_admin" id="is_admin" name="is_admon" type="checkbox" required
+                    class="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="grp" class="block text-sm font-medium leading-6 text-gray-900">Group</label>
+            <div class="mt-2">
+                <select v-model="grp" id="grp" name="grp" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                    <option v-for="group in groups" :key="group.guid" :value="group.name">
+                        {{ group.name }}
+                    </option>
+                </select>
             </div>
-        </Dialog>
-    </TransitionRoot>
+        </div>
+    </Modal>
 </template>
 <script setup lang="ts">
-import {
-    TransitionRoot,
-    TransitionChild,
-    Dialog,
-    DialogPanel,
-    DialogTitle,
-} from '@headlessui/vue'
+import Modal from '@/components/Modal.vue';
 import { onMounted } from 'vue';
 import { ref } from 'vue';
 import { AddUserRequest, UserApi, GroupApi, Group } from '@/api';
@@ -120,7 +76,7 @@ const groupApi = new GroupApi(userStore.api_configuration);
 const emit = defineEmits(['add_user_close', 'user_added'])
 
 onMounted(() => {
-    groupApi.groups(1,4294967295).then((response) => {
+    groupApi.groups(1, 4294967295).then((response) => {
         groups.value = response.data.data;
         grp.value = groups.value[0].name;
     });
@@ -135,7 +91,7 @@ function addUser() {
         return;
     }
     // Add user
-    const user_request:AddUserRequest = {
+    const user_request: AddUserRequest = {
         "name": name.value,
         "password": password.value,
         "confirm-password": confirm_password.value,
diff --git a/webconsole/src/components/AddressBook.vue b/webconsole/src/components/AddressBook.vue
index dbbc037..d1f78b4 100644
--- a/webconsole/src/components/AddressBook.vue
+++ b/webconsole/src/components/AddressBook.vue
@@ -119,6 +119,7 @@ import { AbPeer } from '@/api';
 
 const props = defineProps<{
     name: string,
-    peers: AbPeer[]
+    peers: AbPeer[],
+    isPersonal?: boolean,
 }>()
 </script>
\ No newline at end of file
diff --git a/webconsole/src/components/EditUser.vue b/webconsole/src/components/EditUser.vue
index 580ce80..3ad4458 100644
--- a/webconsole/src/components/EditUser.vue
+++ b/webconsole/src/components/EditUser.vue
@@ -1,98 +1,59 @@
 <template>
-    <TransitionRoot appear :show="true" as="template">
-        <Dialog as="div" @close="closeModal" class="relative z-10">
-            <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
-                leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="fixed inset-0 bg-black/25" />
-            </TransitionChild>
-
-            <div class="fixed inset-0 overflow-y-auto">
-                <div class="flex min-h-full items-center justify-center p-4 text-center">
-                    <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
-                        enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
-                        leave-to="opacity-0 scale-95">
-                        <DialogPanel
-                            class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                            <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
-                                Edit User
-                            </DialogTitle>
-                            <div class="mt-2">
-                                <div>
-                                    <label for="name"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Username</label>
-                                    <div class="mt-2">
-                                        <input v-model="name" id="name" name="name" type="text" required readonly
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="password"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Password</label>
-                                    <div class="mt-2">
-                                        <input v-model="password" id="passwors" name="password" type="password" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="confirm-password"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Confirm</label>
-                                    <div class="mt-2">
-                                        <input v-model="confirm_password" id="confirm_password" name="confirm_password"
-                                            type="password" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="email"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Email</label>
-                                    <div class="mt-2">
-                                        <input v-model="email" id="email" name="email" type="text" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="note"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Note</label>
-                                    <div class="mt-2">
-                                        <input v-model="note" id="note" name="note" type="text"
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="is_admin"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Administrator</label>
-                                    <div class="mt-2">
-                                        <input v-model="is_admin" id="is_admin" name="is_admon" type="checkbox" required
-                                            class="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
-                                    </div>
-                                </div>
-                                <div>
-                                    <label for="grp"
-                                        class="block text-sm font-medium leading-6 text-gray-900">Group</label>
-                                    <div class="mt-2">
-                                        <select v-model="grp" id="grp" name="grp" required
-                                            class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
-                                            <option v-for="group in groups" :key="group.guid" :value="group.name">
-                                                {{ group.name }}
-                                            </option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="mt-4">
-                                <button type="button"
-                                    class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                                    @click="updateUser">
-                                    Update User
-                                </button>
-                            </div>
-                        </DialogPanel>
-                    </TransitionChild>
-                </div>
+    <Modal @modalOk="updateUser()" @modalCancel="closeModal()">
+        <div>
+            <label for="name" class="block text-sm font-medium leading-6 text-gray-900">Username</label>
+            <div class="mt-2">
+                <input v-model="name" id="name" name="name" type="text" required readonly
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
+            <div class="mt-2">
+                <input v-model="password" id="passwors" name="password" type="password" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="confirm-password" class="block text-sm font-medium leading-6 text-gray-900">Confirm</label>
+            <div class="mt-2">
+                <input v-model="confirm_password" id="confirm_password" name="confirm_password" type="password" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email</label>
+            <div class="mt-2">
+                <input v-model="email" id="email" name="email" type="text" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="note" class="block text-sm font-medium leading-6 text-gray-900">Note</label>
+            <div class="mt-2">
+                <input v-model="note" id="note" name="note" type="text"
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="is_admin" class="block text-sm font-medium leading-6 text-gray-900">Administrator</label>
+            <div class="mt-2">
+                <input v-model="is_admin" id="is_admin" name="is_admon" type="checkbox" required
+                    class="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
+            </div>
+        </div>
+        <div>
+            <label for="grp" class="block text-sm font-medium leading-6 text-gray-900">Group</label>
+            <div class="mt-2">
+                <select v-model="grp" id="grp" name="grp" required
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                    <option v-for="group in groups" :key="group.guid" :value="group.name">
+                        {{ group.name }}
+                    </option>
+                </select>
             </div>
-        </Dialog>
-    </TransitionRoot>
+        </div>
+    </Modal>
 </template>
 <script setup lang="ts">
 import {
@@ -105,6 +66,7 @@ import {
 import { onMounted } from 'vue';
 import { ref } from 'vue';
 import { UpdateUserRequest, UserApi, GroupApi, Group, UserListResponse } from '@/api';
+import Modal from '@/components/Modal.vue';
 import { useUserStore } from '@/stores/sctgDeskStore';
 
 const userStore = useUserStore();
diff --git a/webconsole/src/components/Modal.vue b/webconsole/src/components/Modal.vue
new file mode 100644
index 0000000..811f785
--- /dev/null
+++ b/webconsole/src/components/Modal.vue
@@ -0,0 +1,68 @@
+<template>
+    <TransitionRoot appear :show="true" as="template">
+        <Dialog as="div" @close="modalCancel" class="relative z-10">
+            <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
+                leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
+                <div class="fixed inset-0 bg-black/25" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 overflow-y-auto">
+                <div class="flex min-h-full items-center justify-center p-4 text-center">
+                    <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
+                        enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
+                        leave-to="opacity-0 scale-95">
+                        <DialogPanel
+                            class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                            <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
+                                Edit User
+                            </DialogTitle>
+                            <div class="mt-2">
+                                <slot></slot>
+                            </div>
+
+                            <div class="mt-4">
+                                <button type="button"
+                                    class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 m-1 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                    @click="modalOk">
+                                    {{ props.ok_label }}
+                                </button>
+                                <button type="button"
+                                    class="inline-flex justify-center rounded-md border border-transparent bg-gray-100 m-1 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                                    @click="modalCancel">
+                                    {{ props.cancel_label }}
+                                </button>
+                            </div>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+<script setup lang="ts">
+import {
+    TransitionRoot,
+    TransitionChild,
+    Dialog,
+    DialogPanel,
+    DialogTitle,
+} from '@headlessui/vue'
+
+const emit = defineEmits(['modalOk', 'modalCancel'])
+const props = withDefaults(defineProps<{
+    ok_label: string;
+    cancel_label: string;
+}>(),
+    {
+        ok_label: 'Ok',
+        cancel_label: 'Cancel'
+    })
+
+
+function modalOk() {
+    emit('modalOk')
+}
+function modalCancel() {
+    emit('modalCancel')
+}
+</script>
\ No newline at end of file
diff --git a/webconsole/src/components/UsersCard.vue b/webconsole/src/components/UsersCard.vue
index 2edd981..8e7b5b0 100644
--- a/webconsole/src/components/UsersCard.vue
+++ b/webconsole/src/components/UsersCard.vue
@@ -151,6 +151,7 @@ onMounted(() => {
  */
 function toggle_add_user(): void {
     bModalAddUser.value = !bModalAddUser.value;
+    refresh_users();
 }
 
 /**
@@ -163,6 +164,7 @@ function toggle_edit_user(username?: string, uuid?: string): void {
     editUserUuid.value = uuid || "";
     console.log(`Edit user: ${editUserName.value} (${editUserUuid.value})`)
     bModalEditUser.value = !bModalEditUser.value;
+    refresh_users();
 }
 /**
  * Retrieves the list of users from the API.