From 117773e6c7ef25daf8b7928b46ab857335131619 Mon Sep 17 00:00:00 2001
From: tetuaoro <65575727+tetuaoro@users.noreply.github.com>
Date: Mon, 16 Sep 2024 14:24:17 +0200
Subject: [PATCH] update: me page

---
 src/app/components/panel/head/Title.vue |   8 +-
 src/app/pages/me.vue                    | 200 +++++++++++-------------
 src/locales/en.json                     |   4 +
 3 files changed, 103 insertions(+), 109 deletions(-)

diff --git a/src/app/components/panel/head/Title.vue b/src/app/components/panel/head/Title.vue
index 296410f1..7f881387 100644
--- a/src/app/components/panel/head/Title.vue
+++ b/src/app/components/panel/head/Title.vue
@@ -1,5 +1,11 @@
+<script setup lang="ts">
+const _props = defineProps<{
+  text: string;
+}>();
+</script>
+
 <template>
   <h3 class="flex-1 text-2xl font-medium dark:text-neutral-200">
-    <slot />
+    {{ text }}
   </h3>
 </template>
diff --git a/src/app/pages/me.vue b/src/app/pages/me.vue
index 596bad6c..6c12e66a 100644
--- a/src/app/pages/me.vue
+++ b/src/app/pages/me.vue
@@ -2,115 +2,99 @@
   <main>
     <Panel>
       <PanelHead>
-        <PanelHeadTitle>
-          {{ $t('pages.me') }}
-        </PanelHeadTitle>
+        <PanelHeadTitle :text="$t('pages.me')" />
       </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 class="dark:text-neutral-200">
+        <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <h4 class="text-2xl col-span-full py-6">
+            {{ $t('me.sectionGeneral') }}
+          </h4>
+          <Label
+            for="username"
+            class="font-semibold md:align-middle md:leading-10"
+          >
+            {{ $t('username') }}
+          </Label>
+          <input
+            id="username"
+            v-model.trim="username"
+            type="text"
+            class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
+          />
+          <Label for="name" class="font-semibold md:align-middle md:leading-10">
+            {{ $t('name') }}
+          </Label>
+          <input
+            id="name"
+            v-model.trim="name"
+            type="text"
+            class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
+          />
+          <Label
+            for="email"
+            class="font-semibold md:align-middle md:leading-10"
+          >
+            {{ $t('email') }}
+          </Label>
+          <input
+            id="email"
+            v-model.trim="email"
+            type="email"
+            class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
+          />
+          <div class="col-span-full">
+            <BaseButton @click="submit">{{ $t('save') }}</BaseButton>
+          </div>
+        </section>
+        <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <h4 class="text-2xl col-span-full py-6">
+            {{ $t('me.sectionPassword') }}
+          </h4>
+          <Label
+            for="current-password"
+            class="font-semibold md:align-middle md:leading-10"
+          >
+            {{ $t('currentPassword') }}
+          </Label>
+          <input
+            id="current-password"
+            v-model.trim="currentPassword"
+            type="password"
+            autocomplete="current-password"
+            class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
+          />
+          <Label
+            for="new-password"
+            class="font-semibold md:align-middle md:leading-10"
+          >
+            {{ $t('setup.newPassword') }}
+          </Label>
+          <input
+            id="new-password"
+            v-model.trim="newPassword"
+            type="password"
+            autocomplete="new-password"
+            class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
+          />
+          <Label
+            for="confirm-password"
+            class="font-semibold md:align-middle md:leading-10"
+          >
+            {{ $t('confirmPassword') }}
+          </Label>
+          <input
+            id="confirm-password"
+            v-model.trim="confirmPassword"
+            type="password"
+            autocomplete="new-password"
+            class="dark:bg-neutral-700 text-gray-500 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-800 rounded-lg focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
+          />
+          <div class="col-span-full">
+            <BaseButton @click="updatePassword">{{
+              $t('updatePassword')
+            }}</BaseButton>
+          </div>
+        </section>
       </PanelBody>
     </Panel>
   </main>
diff --git a/src/locales/en.json b/src/locales/en.json
index 8705ff24..5302d225 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3,6 +3,10 @@
     "me": "Account",
     "clients": "Clients"
   },
+  "me": {
+    "sectionGeneral": "General",
+    "sectionPassword": "Password"
+  },
   "email": "E-Mail",
   "save": "Save",
   "updatePassword": "Update Password",