update: me page

7 months ago · 117773e6c7
3 changed files with 103 additions and 109 deletions
--- 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>
--- 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>
--- 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",