From 4891cb3f1b7acef229db5de1228472278b194a71 Mon Sep 17 00:00:00 2001
From: tetuaoro <65575727+tetuaoro@users.noreply.github.com>
Date: Sat, 14 Sep 2024 17:12:25 +0200
Subject: [PATCH] update: admin ui

- add: common panel components to get same UI
- i18n: french
---
 src/app/components/panel/Body.vue       |   5 +
 src/app/components/panel/Panel.vue      |   9 ++
 src/app/components/panel/head/Boat.vue  |   5 +
 src/app/components/panel/head/Head.vue  |   9 ++
 src/app/components/panel/head/Title.vue |   5 +
 src/app/pages/index.vue                 |  58 ++++-----
 src/app/pages/me.vue                    | 156 ++++++++++++++++++------
 src/app/pages/setup.vue                 |   6 +-
 src/locales/en.json                     |  10 +-
 src/locales/fr.json                     |   9 ++
 10 files changed, 196 insertions(+), 76 deletions(-)
 create mode 100644 src/app/components/panel/Body.vue
 create mode 100644 src/app/components/panel/Panel.vue
 create mode 100644 src/app/components/panel/head/Boat.vue
 create mode 100644 src/app/components/panel/head/Head.vue
 create mode 100644 src/app/components/panel/head/Title.vue

diff --git a/src/app/components/panel/Body.vue b/src/app/components/panel/Body.vue
new file mode 100644
index 00000000..5ce874d9
--- /dev/null
+++ b/src/app/components/panel/Body.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="m-4">
+    <slot />
+  </div>
+</template>
diff --git a/src/app/components/panel/Panel.vue b/src/app/components/panel/Panel.vue
new file mode 100644
index 00000000..f9b7d433
--- /dev/null
+++ b/src/app/components/panel/Panel.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="container mx-auto max-w-3xl px-3 md:px-0">
+    <div
+      class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/app/components/panel/head/Boat.vue b/src/app/components/panel/head/Boat.vue
new file mode 100644
index 00000000..ed64109f
--- /dev/null
+++ b/src/app/components/panel/head/Boat.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="flex md:block md:flex-shrink-0 space-x-1">
+    <slot />
+  </div>
+</template>
diff --git a/src/app/components/panel/head/Head.vue b/src/app/components/panel/head/Head.vue
new file mode 100644
index 00000000..4e13568a
--- /dev/null
+++ b/src/app/components/panel/head/Head.vue
@@ -0,0 +1,9 @@
+<template>
+  <div
+    class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
+  >
+    <div class="flex flex-grow">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/src/app/components/panel/head/Title.vue b/src/app/components/panel/head/Title.vue
new file mode 100644
index 00000000..296410f1
--- /dev/null
+++ b/src/app/components/panel/head/Title.vue
@@ -0,0 +1,5 @@
+<template>
+  <h3 class="flex-1 text-2xl font-medium dark:text-neutral-200">
+    <slot />
+  </h3>
+</template>
diff --git a/src/app/pages/index.vue b/src/app/pages/index.vue
index 1510109b..fb501771 100644
--- a/src/app/pages/index.vue
+++ b/src/app/pages/index.vue
@@ -1,41 +1,33 @@
 <template>
   <main>
-    <div class="container mx-auto max-w-3xl px-3 md:px-0">
-      <div
-        class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
-      >
-        <div
-          class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
-        >
-          <div class="flex-grow">
-            <p class="text-2xl font-medium dark:text-neutral-200">
-              {{ $t('clients') }}
-            </p>
-          </div>
-          <div class="flex md:block md:flex-shrink-0 space-x-1">
-            <ClientsRestoreConfig />
-            <ClientsBackupConfig />
-            <ClientsSort />
-            <ClientsNew />
-          </div>
-        </div>
+    <Panel>
+      <PanelHead>
+        <PanelHeadTitle>
+          {{ $t('pages.clients') }}
+        </PanelHeadTitle>
+        <PanelHeadBoat>
+          <ClientsRestoreConfig />
+          <ClientsBackupConfig />
+          <ClientsSort />
+          <ClientsNew />
+        </PanelHeadBoat>
+      </PanelHead>
 
-        <div>
-          <Clients
-            v-if="clientsStore.clients && clientsStore.clients.length > 0"
-          />
-        </div>
-        <ClientsEmpty
-          v-if="clientsStore.clients && clientsStore.clients.length === 0"
+      <div>
+        <Clients
+          v-if="clientsStore.clients && clientsStore.clients.length > 0"
         />
-        <div
-          v-if="clientsStore.clients === null"
-          class="text-gray-200 dark:text-red-300 p-5"
-        >
-          <IconsLoading class="w-5 animate-spin mx-auto" />
-        </div>
       </div>
-    </div>
+      <ClientsEmpty
+        v-if="clientsStore.clients && clientsStore.clients.length === 0"
+      />
+      <div
+        v-if="clientsStore.clients === null"
+        class="text-gray-200 dark:text-red-300 p-5"
+      >
+        <IconsLoading class="w-5 animate-spin mx-auto" />
+      </div>
+    </Panel>
 
     <ClientsQRCodeDialog />
     <ClientsCreateDialog />
diff --git a/src/app/pages/me.vue b/src/app/pages/me.vue
index dc49f7d4..596bad6c 100644
--- a/src/app/pages/me.vue
+++ b/src/app/pages/me.vue
@@ -1,42 +1,118 @@
 <template>
   <main>
-    <div class="container mx-auto max-w-3xl px-3 md:px-0">
-      <div
-        class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
-      >
-        <div
-          class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
-        >
-          <div class="flex-grow">
-            <p class="text-2xl font-medium dark:text-neutral-200">Account</p>
-          </div>
-        </div>
-        <div class="space-y-2">
-          <div class="flex flex-wrap items-center gap-[15px] px-5">
-            <Label class="font-semibold dark:text-neutral-200" for="username">
-              Username
-            </Label>
-            <input id="username" v-model.trim="username" type="text" />
-          </div>
-          <div class="flex flex-wrap items-center gap-[15px] px-5">
-            <Label class="font-semibold dark:text-neutral-200" for="name">
-              Name
-            </Label>
-            <input id="name" v-model.trim="name" type="text" />
-          </div>
-          <div class="flex flex-wrap items-center gap-[15px] px-5">
-            <Label class="font-semibold dark:text-neutral-200" for="name">
-              E-Mail
-            </Label>
-            <input id="name" v-model.trim="email" type="text" />
-          </div>
-          <BaseButton class="self-end" @click="openPasswordModal">
-            Change Password
-          </BaseButton>
-          <BaseButton class="self-end" @click="submit">Save</BaseButton>
-        </div>
-      </div>
-    </div>
+    <Panel>
+      <PanelHead>
+        <PanelHeadTitle>
+          {{ $t('pages.me') }}
+        </PanelHeadTitle>
+      </PanelHead>
+      <PanelBody>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <Label
+                  class="font-semibold dark:text-neutral-200"
+                  for="username"
+                >
+                  {{ $t('username') }}
+                </Label>
+              </td>
+              <td>
+                <input id="username" v-model.trim="username" type="text" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Label class="font-semibold dark:text-neutral-200" for="name">
+                  {{ $t('name') }}
+                </Label>
+              </td>
+              <td>
+                <input id="name" v-model.trim="name" type="text" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Label class="font-semibold dark:text-neutral-200" for="name">
+                  {{ $t('email') }}
+                </Label>
+              </td>
+              <td>
+                <input id="name" v-model.trim="email" type="text" />
+              </td>
+            </tr>
+            <tr colspan="2">
+              <td>
+                <BaseButton @click="submit">{{ $t('save') }}</BaseButton>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Label
+                  class="font-semibold dark:text-neutral-200"
+                  for="current-password"
+                >
+                  {{ $t('currentPassword') }}
+                </Label>
+              </td>
+              <td>
+                <input
+                  id="current-password"
+                  v-model.trim="currentPassword"
+                  type="password"
+                  autocomplete="current-password"
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Label
+                  class="font-semibold dark:text-neutral-200"
+                  for="new-password"
+                >
+                  {{ $t('setup.newPassword') }}
+                </Label>
+              </td>
+              <td>
+                <input
+                  id="new-password"
+                  v-model.trim="newPassword"
+                  type="password"
+                  autocomplete="new-password"
+                />
+              </td>
+            </tr>
+
+            <tr>
+              <td>
+                <Label
+                  class="font-semibold dark:text-neutral-200"
+                  for="confirm-password"
+                >
+                  {{ $t('confirmPassword') }}
+                </Label>
+              </td>
+              <td>
+                <input
+                  id="confirm-password"
+                  v-model.trim="confirmPassword"
+                  type="password"
+                  autocomplete="new-password"
+                />
+              </td>
+            </tr>
+            <tr colspan="2">
+              <td>
+                <BaseButton @click="updatePassword">{{
+                  $t('updatePassword')
+                }}</BaseButton>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelBody>
+    </Panel>
   </main>
 </template>
 
@@ -48,7 +124,11 @@ const username = ref(authStore.userData?.username);
 const name = ref(authStore.userData?.name);
 const email = ref(authStore.userData?.email);
 
+const currentPassword = ref(authStore.userData?.email);
+const newPassword = ref(authStore.userData?.email);
+const confirmPassword = ref(authStore.userData?.email);
+
 function submit() {}
 
-function openPasswordModal() {}
+function updatePassword() {}
 </script>
diff --git a/src/app/pages/setup.vue b/src/app/pages/setup.vue
index 03162e0a..18808664 100644
--- a/src/app/pages/setup.vue
+++ b/src/app/pages/setup.vue
@@ -15,7 +15,7 @@
         {{ $t('setup.welcome') }}
       </h2>
       <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
-      <form class="mb-8" @submit="newAccount">
+      <form class="mb-8" @submit.prevent="newAccount">
         <div>
           <label for="username" class="inline-block py-2">{{
             $t('username')
@@ -85,9 +85,7 @@ const authStore = useAuthStore();
 const errorCU = ref(false);
 const errorPWD = ref(false);
 
-async function newAccount(e: Event) {
-  e.preventDefault();
-
+async function newAccount() {
   if (!username.value || !password.value) return;
 
   try {
diff --git a/src/locales/en.json b/src/locales/en.json
index ff9f3612..0f3469ee 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,4 +1,13 @@
 {
+  "pages": {
+    "me": "Account",
+    "clients": "Clients"
+  },
+  "email": "E-Mail",
+  "save": "Save",
+  "updatePassword": "Update Password",
+  "currentPassword": "Current Password",
+  "confirmPassword": "Confirm Password",
   "setup": {
     "welcome": "Welcome to your first setup of wg-easy !",
     "msg": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.",
@@ -17,7 +26,6 @@
   "logout": "Logout",
   "updateAvailable": "There is an update available!",
   "update": "Update",
-  "clients": "Clients",
   "new": "New",
   "deleteClient": "Delete Client",
   "deleteDialog1": "Are you sure you want to delete",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 444595c3..8f388506 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,4 +1,13 @@
 {
+  "pages": {
+    "me": "Compte",
+    "clients": "Clients"
+  },
+  "email": "E-Mail",
+  "save": "Enregistrer",
+  "updatePassword": "Changer le mot de passe",
+  "currentPassword": "Mot de passe actuel",
+  "confirmPassword": "Confirmer le mot de passse",
   "setup": {
     "welcome": "Bienvenue à la page de configuration de votre wg-easy !",
     "msg": "Veuillez renseigner votre nom d'utilisateur et votre mot de passe. Ces informations seront utilisées pour vous connecter à votre page d'administration.",