add email to user, basic account page

src/app/pages/me.vue

@@ -1,8 +1,54 @@
 <template>
   <main>
-    <p>Change Username:</p>
+    <div class="container mx-auto max-w-3xl px-3 md:px-0">
-    <p>Change Name:</p>
+      <div
-    <p>Change E-Mail:</p>
+        class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
-    <p>Change Password:</p>
+      >
+        <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>
   </main>
 </template>
+
+<script setup lang="ts">
+const authStore = useAuthStore();
+authStore.update();
+
+const username = ref(authStore.userData?.username);
+const name = ref(authStore.userData?.name);
+const email = ref(authStore.userData?.email);
+
+function submit() {}
+
+function openPasswordModal() {}
+</script>

src/app/stores/auth.ts

@@ -3,6 +3,7 @@ export const useAuthStore = defineStore('Auth', () => {
     name: string;
     username: string;
     role: string;
+    email: string | null;
   }>();
 
   /**

src/server/api/session.get.ts

@@ -19,5 +19,6 @@ export default defineEventHandler(async (event) => {
     role: user.role,
     username: user.username,
     name: user.name,
+    email: user.email,
   };
 });

src/services/database/lowdb.ts

@@ -92,6 +92,7 @@ export class LowDBUser extends UserRepository {
       id: crypto.randomUUID(),
       password: hash,
       username,
+      email: null,
       name: 'Administrator',
       role: isUserEmpty ? 'ADMIN' : 'CLIENT',
       enabled: true,

src/services/database/repositories/user.ts

@@ -17,6 +17,7 @@ export type User = {
   username: string;
   password: string;
   name: string;
+  email: string | null;
   /** ISO String */
   createdAt: string;
   /** ISO String */