From bab4435345a2573fcfc098441c15f159a8147cb6 Mon Sep 17 00:00:00 2001
From: suhjae <jwsuh25@kis.ac>
Date: Mon, 3 Feb 2025 19:36:35 +0900
Subject: [PATCH 1/3] feat: basic auth system

---
 app.config.ts       |   6 +--
 app.vue             |   5 --
 layouts/default.vue |  71 +++++++++++++++++++++++++++
 nuxt.config.ts      |  13 +++++
 package.json        |   4 +-
 pages/auth.vue      |  35 ++++++++++++++
 pages/confirm.vue   |  18 +++++++
 pages/dashboard.vue |  60 +++++++++++++++++++++++
 pnpm-lock.yaml      | 114 ++++++++++++++++++++++++++++++++++++++++++++
 9 files changed, 317 insertions(+), 9 deletions(-)
 create mode 100644 pages/auth.vue
 create mode 100644 pages/confirm.vue
 create mode 100644 pages/dashboard.vue

diff --git a/app.config.ts b/app.config.ts
index 6d15549..51588ec 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -53,10 +53,10 @@ export default defineAppConfig({
           primary:
             "text-primary-500 hover:bg-primary-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
           white:
-            "text-gray-900 hover:bg-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
-          gray: "text-gray-700 hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500",
+            "text-gray-900 hover:bg-white focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 hover:bg-gray-50",
+          gray: "text-gray-700 hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500, hover:bg-gray-50",
           black:
-            "text-gray-900 hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500",
+            "text-gray-900 hover:bg-gray-900 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 hover:bg-gray-800",
         },
         link: {
           primary:
diff --git a/app.vue b/app.vue
index a7b449e..9e3c110 100644
--- a/app.vue
+++ b/app.vue
@@ -33,11 +33,6 @@ const isDark = computed({
   },
 });
 
-const route = useRoute();
-const router = useRouter();
-const { locale, availableLocales } = useI18n();
-const lang = ref(route.query.lang as string);
-
 const head = useLocaleHead({
   addDirAttribute: true,
   identifierAttribute: "id",
diff --git a/layouts/default.vue b/layouts/default.vue
index 45f7278..03e0dfc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,6 +4,15 @@ import LangSwitcher from "~/components/LangSwitcher.vue";
 const { toggleContentSearch } = useUIState();
 const { t } = useI18n();
 const localePath = useLocalePath();
+const supabase = useSupabaseClient();
+const user = useSupabaseUser();
+
+const signOut = async () => {
+  const { error } = await supabase.auth.signOut();
+  if (error) console.log(error);
+  console.log("Signed out");
+  navigateTo(localePath("/auth"));
+};
 
 const { data: navigation } = await useAsyncData("navigation", () =>
   fetchContentNavigation()
@@ -32,8 +41,34 @@ const links = computed(() => [
   },
 ]);
 
+const items = [
+  [
+    {
+      slot: "account",
+      label: user?.value?.user_metadata.full_name,
+      disabled: true,
+    },
+  ],
+  [
+    {
+      label: "Dashboard",
+      icon: "i-ph-speedometer",
+      to: localePath("/dashboard"),
+    },
+  ],
+  [
+    {
+      label: "Sign out",
+      icon: "i-ph-arrow-line-up-right",
+      click: signOut,
+      color: "red",
+    },
+  ],
+];
+
 provide("navigation", navigation);
 provide("files", files);
+provide("signOut", signOut);
 </script>
 
 <template>
@@ -60,6 +95,42 @@ provide("files", files);
         size="sm"
         :label="t('search.placeholder')"
       />
+
+      <client-only>
+        <UButton
+          label="Sign in"
+          color="black"
+          variant="ghost"
+          trailing-icon="i-ph-arrow-right"
+          class="hidden lg:flex"
+          :to="localePath('/auth')"
+          v-if="!user"
+        />
+        <UDropdown
+          :items="items"
+          :popper="{ placement: 'bottom-start' }"
+          v-else
+        >
+          <UAvatar :src="user?.user_metadata.avatar_url" alt="Avatar" />
+          <template #account="{ item }">
+            <div class="text-left">
+              <p>Signed in as</p>
+              <p class="truncate font-medium text-gray-900 dark:text-white">
+                {{ item.label }}
+              </p>
+            </div>
+          </template>
+
+          <template #item="{ item }">
+            <span class="truncate">{{ item.label }}</span>
+
+            <UIcon
+              :name="item.icon"
+              class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"
+            />
+          </template>
+        </UDropdown>
+      </client-only>
     </template>
 
     <template #panel>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4038c72..95e0a2a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -12,8 +12,21 @@ export default defineNuxtConfig({
     "@nuxtjs/seo",
     "nuxt-og-image",
     "@nuxt/fonts",
+    "@nuxtjs/supabase",
   ],
 
+  supabase: {
+    url: "https://oyzivnolzjqehavvntqz.supabase.co",
+    key: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im95eml2bm9sempxZWhhdnZudHF6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mzg1NjI0NzMsImV4cCI6MjA1NDEzODQ3M30.5h75afajh_8mdCQdGTFf_zaObOVgTkipqDaiC78COtI",
+    redirectOptions: {
+      login: "/auth",
+      callback: "/confirm",
+      include: ["/dashboard(/*)?"],
+      exclude: [],
+      cookieRedirect: false,
+    },
+  },
+
   nitro: {
     prerender: {
       routes: ["/sitemap.xml"],
diff --git a/package.json b/package.json
index 4d1d95b..25eb0d9 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
     "@nuxt/fonts": "^0.10.3",
     "@nuxt/image": "^1.9.0",
     "@nuxtjs/seo": "2.0.2",
+    "@nuxtjs/supabase": "1.4.6",
     "nuxt": "^3.15.4"
-  }
+  },
+  "packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"
 }
diff --git a/pages/auth.vue b/pages/auth.vue
new file mode 100644
index 0000000..d6a4243
--- /dev/null
+++ b/pages/auth.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="w-full min-h-screen flex justify-center">
+    <UAuthForm
+      class="h-fit my-16"
+      title="Login"
+      description="Enter your credentials to access your account."
+      :providers="[
+        {
+          label: 'Google',
+          icon: 'i-simple-icons-google',
+          color: 'gray',
+          click: () => {
+            signInWithGoogle();
+          },
+        },
+      ]"
+      :loading="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const localePath = useLocalePath();
+const supabase = useSupabaseClient();
+
+const signInWithGoogle = async () => {
+  const { error } = await supabase.auth.signInWithOAuth({
+    provider: "google",
+    options: {
+      redirectTo: localePath("/confirm"),
+    },
+  });
+  if (error) console.log(error);
+};
+</script>
diff --git a/pages/confirm.vue b/pages/confirm.vue
new file mode 100644
index 0000000..3b86bc8
--- /dev/null
+++ b/pages/confirm.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const user = useSupabaseUser();
+const localePath = useLocalePath();
+
+watch(
+  user,
+  () => {
+    if (user.value) {
+      // Redirect to path
+      return navigateTo(localePath("/dashboard"));
+    }
+  },
+  { immediate: true }
+);
+</script>
+<template>
+  <div>Waiting for login...</div>
+</template>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
new file mode 100644
index 0000000..c285dea
--- /dev/null
+++ b/pages/dashboard.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const supabase = useSupabaseClient();
+const user = useSupabaseUser();
+const modelOpen = ref(false);
+
+const signOut = inject<() => void>("signOut");
+</script>
+
+<template>
+  <UModal v-model="modelOpen" :ui="{ width: 'w-full sm:max-w-sm' }">
+    <UCard
+      :ui="{
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold">Sign Out</h2>
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-ph-x"
+            class="-my-1"
+            @click="modelOpen = false"
+          />
+        </div>
+        <div class="space-y-4">Are you sure you want to sign out?</div>
+      </template>
+
+      <template #footer>
+        <div class="flex justify-end space-x-4">
+          <UButton
+            color="red"
+            label="Sign Out
+          "
+            @click="signOut"
+          />
+          <UButton color="white" label="Cancel" @click="modelOpen = false" />
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+
+  <ClientOnly>
+    <div class="flex flex-col items-center justify-center h-screen">
+      <UCard class="max-w-sm w-full">
+        <h1 class="text-2xl font-bold">Dashboard</h1>
+
+        <p>Welcome, {{ user?.user_metadata.full_name }}</p>
+
+        <div class="flex justify-end">
+          <UButton type="button" color="red" @click="modelOpen = true"
+            >Sign Out</UButton
+          >
+        </div>
+      </UCard>
+    </div>
+  </ClientOnly>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c18d438..8deebe7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,6 +54,9 @@ importers:
       '@nuxtjs/seo':
         specifier: 2.0.2
         version: 2.0.2(@unhead/vue@1.11.18(vue@3.5.13(typescript@5.7.2)))(h3@1.14.0)(magicast@0.3.5)(rollup@4.34.0)(typescript@5.7.2)(unhead@1.11.18)(vite@6.0.11(@types/node@22.13.0)(jiti@2.4.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.2))
+      '@nuxtjs/supabase':
+        specifier: 1.4.6
+        version: 1.4.6
       nuxt:
         specifier: ^3.15.4
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.0)(db0@0.2.3)(ioredis@5.4.2)(magicast@0.3.5)(rollup@4.34.0)(terser@5.37.0)(typescript@5.7.2)(vite@6.0.11(@types/node@22.13.0)(jiti@2.4.2)(terser@5.37.0)(yaml@2.7.0))(yaml@2.7.0)
@@ -654,6 +657,9 @@ packages:
     resolution: {integrity: sha512-u4BLPuKHsy6jSj2D27W3QHih4PwaWY2LrGi+6PTUu/b0/itS+U2aovxHfWLUWHKNZG3LazJNziLG/RBBwdqLxg==}
     engines: {node: '>=18.0.0'}
 
+  '@nuxtjs/supabase@1.4.6':
+    resolution: {integrity: sha512-PeCTg38gO4HP2JEaBLbz3IOaZnbVEDc9iJf0loe29MSyuL/doT2GnlPbpRJY9H5S51mhuRaRi7LyllmE6Cvo4w==}
+
   '@nuxtjs/tailwindcss@6.13.1':
     resolution: {integrity: sha512-atL2SaPsxLfMTlXUQvr1UpDYdz6ocNOhH35H+t7M++g4r79QiQScJ7XuyyMR9AyBN19lkPA3nw7NXxazXmYxlA==}
 
@@ -1068,6 +1074,33 @@ packages:
   '@socket.io/component-emitter@3.1.2':
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
 
+  '@supabase/auth-js@2.67.3':
+    resolution: {integrity: sha512-NJDaW8yXs49xMvWVOkSIr8j46jf+tYHV0wHhrwOaLLMZSFO4g6kKAf+MfzQ2RaD06OCUkUHIzctLAxjTgEVpzw==}
+
+  '@supabase/functions-js@2.4.4':
+    resolution: {integrity: sha512-WL2p6r4AXNGwop7iwvul2BvOtuJ1YQy8EbOd0dhG1oN1q8el/BIRSFCFnWAMM/vJJlHWLi4ad22sKbKr9mvjoA==}
+
+  '@supabase/node-fetch@2.6.15':
+    resolution: {integrity: sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==}
+    engines: {node: 4.x || >=6.0.0}
+
+  '@supabase/postgrest-js@1.18.1':
+    resolution: {integrity: sha512-dWDnoC0MoDHKhaEOrsEKTadWQcBNknZVQcSgNE/Q2wXh05mhCL1ut/jthRUrSbYcqIw/CEjhaeIPp7dLarT0bg==}
+
+  '@supabase/realtime-js@2.11.2':
+    resolution: {integrity: sha512-u/XeuL2Y0QEhXSoIPZZwR6wMXgB+RQbJzG9VErA3VghVt7uRfSVsjeqd7m5GhX3JR6dM/WRmLbVR8URpDWG4+w==}
+
+  '@supabase/ssr@0.5.2':
+    resolution: {integrity: sha512-n3plRhr2Bs8Xun1o4S3k1CDv17iH5QY9YcoEvXX3bxV1/5XSasA0mNXYycFmADIdtdE6BG9MRjP5CGIs8qxC8A==}
+    peerDependencies:
+      '@supabase/supabase-js': ^2.43.4
+
+  '@supabase/storage-js@2.7.1':
+    resolution: {integrity: sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==}
+
+  '@supabase/supabase-js@2.48.1':
+    resolution: {integrity: sha512-VMD+CYk/KxfwGbI4fqwSUVA7CLr1izXpqfFerhnYPSi6LEKD8GoR4kuO5Cc8a+N43LnfSQwLJu4kVm2e4etEmA==}
+
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
@@ -1103,6 +1136,9 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@types/cookie@0.6.0':
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -1130,6 +1166,9 @@ packages:
   '@types/parse-path@7.0.3':
     resolution: {integrity: sha512-LriObC2+KYZD3FzCrgWGv/qufdUy4eXrxcLgQMfYXgPbLIecKIsVBaQgUPmxSSLcjmYbDTQbMgr6qr6l/eb7Bg==}
 
+  '@types/phoenix@1.6.6':
+    resolution: {integrity: sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -1145,6 +1184,9 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@types/ws@8.5.14':
+    resolution: {integrity: sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==}
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -1758,6 +1800,10 @@ packages:
   cookie-es@1.2.2:
     resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
 
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   cookies@0.9.1:
     resolution: {integrity: sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==}
     engines: {node: '>= 0.8'}
@@ -5943,6 +5989,16 @@ snapshots:
       - vite
       - vue
 
+  '@nuxtjs/supabase@1.4.6':
+    dependencies:
+      '@supabase/ssr': 0.5.2(@supabase/supabase-js@2.48.1)
+      '@supabase/supabase-js': 2.48.1
+      defu: 6.1.4
+      pathe: 2.0.2
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@nuxtjs/tailwindcss@6.13.1(magicast@0.3.5)(rollup@4.34.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)(rollup@4.34.0)
@@ -6296,6 +6352,54 @@ snapshots:
 
   '@socket.io/component-emitter@3.1.2': {}
 
+  '@supabase/auth-js@2.67.3':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/functions-js@2.4.4':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/node-fetch@2.6.15':
+    dependencies:
+      whatwg-url: 5.0.0
+
+  '@supabase/postgrest-js@1.18.1':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/realtime-js@2.11.2':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+      '@types/phoenix': 1.6.6
+      '@types/ws': 8.5.14
+      ws: 8.18.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@supabase/ssr@0.5.2(@supabase/supabase-js@2.48.1)':
+    dependencies:
+      '@supabase/supabase-js': 2.48.1
+      '@types/cookie': 0.6.0
+      cookie: 0.7.2
+
+  '@supabase/storage-js@2.7.1':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/supabase-js@2.48.1':
+    dependencies:
+      '@supabase/auth-js': 2.67.3
+      '@supabase/functions-js': 2.4.4
+      '@supabase/node-fetch': 2.6.15
+      '@supabase/postgrest-js': 1.18.1
+      '@supabase/realtime-js': 2.11.2
+      '@supabase/storage-js': 2.7.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
@@ -6330,6 +6434,8 @@ snapshots:
 
   '@trysound/sax@0.2.0': {}
 
+  '@types/cookie@0.6.0': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -6358,6 +6464,8 @@ snapshots:
 
   '@types/parse-path@7.0.3': {}
 
+  '@types/phoenix@1.6.6': {}
+
   '@types/resolve@1.20.2': {}
 
   '@types/sax@1.2.7':
@@ -6370,6 +6478,10 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@types/ws@8.5.14':
+    dependencies:
+      '@types/node': 22.13.0
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@unhead/addons@1.11.18(rollup@4.34.0)':
@@ -7103,6 +7215,8 @@ snapshots:
 
   cookie-es@1.2.2: {}
 
+  cookie@0.7.2: {}
+
   cookies@0.9.1:
     dependencies:
       depd: 2.0.0

From 3d80f176b45c542d55f4ce953718f33daa9aec8c Mon Sep 17 00:00:00 2001
From: SuhJae <jwsuh25@kis.ac>
Date: Mon, 3 Feb 2025 20:23:21 +0900
Subject: [PATCH 2/3] feat: dashboard layout

---
 app.vue                                      |  44 ++++++
 components/AppHeader.vue                     | 115 ++++++++++++++
 layouts/dashboard.vue                        |  51 +++++++
 layouts/default.vue                          | 150 +------------------
 pages/{dashboard.vue => dashboard/index.vue} |  51 +++++--
 pages/dashboard/result.vue                   |   1 +
 6 files changed, 250 insertions(+), 162 deletions(-)
 create mode 100644 components/AppHeader.vue
 create mode 100644 layouts/dashboard.vue
 rename pages/{dashboard.vue => dashboard/index.vue} (70%)
 create mode 100644 pages/dashboard/result.vue

diff --git a/app.vue b/app.vue
index 9e3c110..089d531 100644
--- a/app.vue
+++ b/app.vue
@@ -23,7 +23,12 @@
 </template>
 
 <script setup lang="ts">
+import { ParsedContent } from "@nuxt/content";
+
+const { t } = useI18n();
 const colorMode = useColorMode();
+const supabase = useSupabaseClient();
+const localePath = useLocalePath();
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
@@ -38,4 +43,43 @@ const head = useLocaleHead({
   identifierAttribute: "id",
   addSeoAttributes: true,
 });
+
+const signOut = async () => {
+  const { error } = await supabase.auth.signOut();
+  if (error) console.log(error);
+  console.log("Signed out");
+  navigateTo(localePath("/auth"));
+};
+
+const { data: navigation } = await useAsyncData("navigation", () =>
+  fetchContentNavigation()
+);
+const { data: files } = useLazyFetch<ParsedContent[]>("/api/search.json", {
+  default: () => [],
+  server: true,
+});
+
+const links = computed(() => [
+  {
+    label: t("nav.docs"),
+    to: localePath("/docs"),
+    icon: "i-ph-book",
+  },
+  {
+    label: t("nav.train"),
+    to: localePath("/train"),
+    icon: "i-ph-yin-yang",
+  },
+
+  {
+    label: t("nav.result"),
+    to: localePath("/result"),
+    icon: "i-ph-chart-bar",
+  },
+]);
+
+provide("signOut", signOut);
+provide("navigation", navigation);
+provide("files", files);
+provide("links", links);
 </script>
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
new file mode 100644
index 0000000..c93e093
--- /dev/null
+++ b/components/AppHeader.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import LangSwitcher from "~/components/LangSwitcher.vue";
+const { toggleContentSearch } = useUIState();
+const { t } = useI18n();
+const localePath = useLocalePath();
+const user = useSupabaseUser();
+
+const signOut = inject<() => void>("signOut");
+const links = inject<{ label: string; icon: string; to?: string }[]>("links");
+
+const items = [
+  [
+    {
+      slot: "account",
+      label: user?.value?.user_metadata.full_name,
+      disabled: true,
+    },
+  ],
+  [
+    {
+      label: "Dashboard",
+      icon: "i-ph-speedometer",
+      to: localePath("/dashboard"),
+    },
+  ],
+  [
+    {
+      label: "Sign out",
+      icon: "i-ph-arrow-line-up-right",
+      click: signOut,
+      color: "red",
+    },
+  ],
+];
+</script>
+
+<template>
+  <UHeader>
+    <template #left>
+      <NuxtLink :to="localePath('/')">
+        <Logo class="h-6 hover:opacity-90" />
+      </NuxtLink>
+      <UHeaderLinks :links="links" class="hidden sm:flex" />
+    </template>
+
+    <template #right>
+      <UButton
+        class="block md:hidden"
+        variant="ghost"
+        color="gray"
+        square
+        icon="i-ph-magnifying-glass"
+        aria-label="Search documentation"
+        @click="toggleContentSearch"
+      ></UButton>
+      <UContentSearchButton
+        class="hidden w-full md:flex md:max-w-48 lg:max-w-56 text-zinc-600 dark:text-zinc-300"
+        size="sm"
+        :label="t('search.placeholder')"
+      />
+
+      <client-only>
+        <UButton
+          label="Sign in"
+          color="black"
+          variant="ghost"
+          trailing-icon="i-ph-arrow-right"
+          class="hidden lg:flex"
+          :to="localePath('/auth')"
+          v-if="!user"
+        />
+        <UDropdown
+          :items="items"
+          :popper="{ placement: 'bottom-start' }"
+          v-else
+        >
+          <UAvatar :src="user?.user_metadata.avatar_url" alt="Avatar" />
+          <template #account="{ item }">
+            <div class="text-left">
+              <p>Signed in as</p>
+              <p class="truncate font-medium text-gray-900 dark:text-white">
+                {{ item.label }}
+              </p>
+            </div>
+          </template>
+
+          <template #item="{ item }">
+            <span class="truncate">{{ item.label }}</span>
+
+            <UIcon
+              :name="item.icon"
+              class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"
+            />
+          </template>
+        </UDropdown>
+      </client-only>
+    </template>
+
+    <template #panel>
+      <span class="sm:hidden">
+        <ClientOnly>
+          <UButtonGroup orientation="horizontal" class="w-full">
+            <UColorModeSelect class="w-full" />
+            <LangSwitcher class="w-full" />
+          </UButtonGroup>
+        </ClientOnly>
+        <UDivider class="my-3" />
+
+        <UNavigationLinks :links="links" />
+        <UDivider class="my-3" />
+      </span>
+      <DocsNav />
+    </template>
+  </UHeader>
+</template>
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
new file mode 100644
index 0000000..b037ea8
--- /dev/null
+++ b/layouts/dashboard.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const localePath = useLocalePath();
+
+const links = [
+  {
+    label: "Home",
+    icon: "i-heroicons-home",
+  },
+  {
+    label: "Inbox",
+    icon: "i-heroicons-inbox",
+    badge: "4",
+  },
+  {
+    label: "Users",
+    icon: "i-heroicons-user-group",
+  },
+  {
+    label: "Settings",
+    icon: "i-heroicons-cog-8-tooth",
+    children: [
+      {
+        label: "General",
+      },
+      {
+        label: "Members",
+      },
+      {
+        label: "Notifications",
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <AppHeader />
+  <UDashboardPage>
+    <UDashboardPanel :width="300" collapsible class="h-[100svh]">
+      <UDashboardSidebar>
+        <UDashboardSidebarLinks :links="links" />
+      </UDashboardSidebar>
+    </UDashboardPanel>
+
+    <UMain>
+      <slot />
+    </UMain>
+  </UDashboardPage>
+
+  <AppFooter />
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 03e0dfc..9a80d92 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,155 +1,13 @@
 <script setup lang="ts">
 import type { ParsedContent } from "@nuxt/content";
-import LangSwitcher from "~/components/LangSwitcher.vue";
-const { toggleContentSearch } = useUIState();
-const { t } = useI18n();
-const localePath = useLocalePath();
-const supabase = useSupabaseClient();
-const user = useSupabaseUser();
 
-const signOut = async () => {
-  const { error } = await supabase.auth.signOut();
-  if (error) console.log(error);
-  console.log("Signed out");
-  navigateTo(localePath("/auth"));
-};
-
-const { data: navigation } = await useAsyncData("navigation", () =>
-  fetchContentNavigation()
-);
-const { data: files } = useLazyFetch<ParsedContent[]>("/api/search.json", {
-  default: () => [],
-  server: true,
-});
-
-const links = computed(() => [
-  {
-    label: t("nav.docs"),
-    to: localePath("/docs"),
-    icon: "i-ph-book",
-  },
-  {
-    label: t("nav.train"),
-    to: localePath("/train"),
-    icon: "i-ph-yin-yang",
-  },
-
-  {
-    label: t("nav.result"),
-    to: localePath("/result"),
-    icon: "i-ph-chart-bar",
-  },
-]);
-
-const items = [
-  [
-    {
-      slot: "account",
-      label: user?.value?.user_metadata.full_name,
-      disabled: true,
-    },
-  ],
-  [
-    {
-      label: "Dashboard",
-      icon: "i-ph-speedometer",
-      to: localePath("/dashboard"),
-    },
-  ],
-  [
-    {
-      label: "Sign out",
-      icon: "i-ph-arrow-line-up-right",
-      click: signOut,
-      color: "red",
-    },
-  ],
-];
-
-provide("navigation", navigation);
-provide("files", files);
-provide("signOut", signOut);
+const files = inject<ParsedContent[]>("files");
+const links = inject<{ label: string; icon: string; to?: string }[]>("links");
+const navigation =
+  inject<{ label: string; icon: string; to?: string }[]>("navigation");
 </script>
 
 <template>
-  <UHeader>
-    <template #left>
-      <NuxtLink :to="localePath('/')">
-        <Logo class="h-6 hover:opacity-90" />
-      </NuxtLink>
-      <UHeaderLinks :links="links" class="hidden sm:flex" />
-    </template>
-
-    <template #right>
-      <UButton
-        class="block md:hidden"
-        variant="ghost"
-        color="gray"
-        square
-        icon="i-ph-magnifying-glass"
-        aria-label="Search documentation"
-        @click="toggleContentSearch"
-      ></UButton>
-      <UContentSearchButton
-        class="hidden w-full md:flex md:max-w-48 lg:max-w-56 text-zinc-600 dark:text-zinc-300"
-        size="sm"
-        :label="t('search.placeholder')"
-      />
-
-      <client-only>
-        <UButton
-          label="Sign in"
-          color="black"
-          variant="ghost"
-          trailing-icon="i-ph-arrow-right"
-          class="hidden lg:flex"
-          :to="localePath('/auth')"
-          v-if="!user"
-        />
-        <UDropdown
-          :items="items"
-          :popper="{ placement: 'bottom-start' }"
-          v-else
-        >
-          <UAvatar :src="user?.user_metadata.avatar_url" alt="Avatar" />
-          <template #account="{ item }">
-            <div class="text-left">
-              <p>Signed in as</p>
-              <p class="truncate font-medium text-gray-900 dark:text-white">
-                {{ item.label }}
-              </p>
-            </div>
-          </template>
-
-          <template #item="{ item }">
-            <span class="truncate">{{ item.label }}</span>
-
-            <UIcon
-              :name="item.icon"
-              class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"
-            />
-          </template>
-        </UDropdown>
-      </client-only>
-    </template>
-
-    <template #panel>
-      <span class="sm:hidden">
-        <ClientOnly>
-          <UButtonGroup orientation="horizontal" class="w-full">
-            <UColorModeSelect class="w-full" />
-            <LangSwitcher class="w-full" />
-          </UButtonGroup>
-        </ClientOnly>
-        <UDivider class="my-3" />
-
-        <UNavigationLinks :links="links" />
-        <UDivider class="my-3" />
-      </span>
-      <DocsNav />
-    </template>
-  </UHeader>
-
   <UMain>
     <slot />
   </UMain>
diff --git a/pages/dashboard.vue b/pages/dashboard/index.vue
similarity index 70%
rename from pages/dashboard.vue
rename to pages/dashboard/index.vue
index c285dea..a475b6f 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard/index.vue
@@ -3,6 +3,41 @@ const supabase = useSupabaseClient();
 const user = useSupabaseUser();
 const modelOpen = ref(false);
 
+definePageMeta({
+  layout: "dashboard",
+});
+
+const links = [
+  {
+    label: "Home",
+    icon: "i-heroicons-home",
+  },
+  {
+    label: "Inbox",
+    icon: "i-heroicons-inbox",
+    badge: "4",
+  },
+  {
+    label: "Users",
+    icon: "i-heroicons-user-group",
+  },
+  {
+    label: "Settings",
+    icon: "i-heroicons-cog-8-tooth",
+    children: [
+      {
+        label: "General",
+      },
+      {
+        label: "Members",
+      },
+      {
+        label: "Notifications",
+      },
+    ],
+  },
+];
+
 const signOut = inject<() => void>("signOut");
 </script>
 
@@ -41,20 +76,4 @@ const signOut = inject<() => void>("signOut");
       </template>
     </UCard>
   </UModal>
-
-  <ClientOnly>
-    <div class="flex flex-col items-center justify-center h-screen">
-      <UCard class="max-w-sm w-full">
-        <h1 class="text-2xl font-bold">Dashboard</h1>
-
-        <p>Welcome, {{ user?.user_metadata.full_name }}</p>
-
-        <div class="flex justify-end">
-          <UButton type="button" color="red" @click="modelOpen = true"
-            >Sign Out</UButton
-          >
-        </div>
-      </UCard>
-    </div>
-  </ClientOnly>
 </template>
diff --git a/pages/dashboard/result.vue b/pages/dashboard/result.vue
new file mode 100644
index 0000000..ef417cf
--- /dev/null
+++ b/pages/dashboard/result.vue
@@ -0,0 +1 @@
+<template>Dash</template>

From 0f2221301af39bfd00683821292a0f3edcb9a364 Mon Sep 17 00:00:00 2001
From: suhjae <jwsuh25@kis.ac>
Date: Tue, 4 Feb 2025 13:06:00 +0900
Subject: [PATCH 3/3] feat: basic account system

---
 app.vue                            |   1 -
 components/AppHeader.vue           |  48 +++++----
 layouts/dashboard.vue              |  50 +++-------
 layouts/default.vue                |   6 +-
 locales/en/main.json               |  56 ++++++++++-
 package.json                       |   1 +
 pages/auth.vue                     |  10 +-
 pages/dashboard/index.vue          |  78 ++-------------
 pages/dashboard/result.vue         |   8 +-
 pages/dashboard/settings/index.vue | 150 +++++++++++++++++++++++++++++
 pnpm-lock.yaml                     |  10 ++
 11 files changed, 283 insertions(+), 135 deletions(-)
 create mode 100644 pages/dashboard/settings/index.vue

diff --git a/app.vue b/app.vue
index 089d531..90024f3 100644
--- a/app.vue
+++ b/app.vue
@@ -47,7 +47,6 @@ const head = useLocaleHead({
 const signOut = async () => {
   const { error } = await supabase.auth.signOut();
   if (error) console.log(error);
-  console.log("Signed out");
   navigateTo(localePath("/auth"));
 };
 
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index c93e093..6a48489 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -18,14 +18,14 @@ const items = [
   ],
   [
     {
-      label: "Dashboard",
+      label: t("nav.account.dashboard"),
       icon: "i-ph-speedometer",
       to: localePath("/dashboard"),
     },
   ],
   [
     {
-      label: "Sign out",
+      label: t("nav.account.signOut"),
       icon: "i-ph-arrow-line-up-right",
       click: signOut,
       color: "red",
@@ -44,40 +44,40 @@ const items = [
     </template>
 
     <template #right>
-      <UButton
-        class="block md:hidden"
-        variant="ghost"
-        color="gray"
-        square
-        icon="i-ph-magnifying-glass"
-        aria-label="Search documentation"
-        @click="toggleContentSearch"
-      ></UButton>
       <UContentSearchButton
-        class="hidden w-full md:flex md:max-w-48 lg:max-w-56 text-zinc-600 dark:text-zinc-300"
+        class="hidden w-full lg:flex max-w-56 text-zinc-600 dark:text-zinc-300"
         size="sm"
         :label="t('search.placeholder')"
       />
-
-      <client-only>
+      <ClientOnly>
         <UButton
-          label="Sign in"
+          :label="t('nav.account.signIn')"
           color="black"
           variant="ghost"
           trailing-icon="i-ph-arrow-right"
-          class="hidden lg:flex"
+          class=""
           :to="localePath('/auth')"
           v-if="!user"
         />
         <UDropdown
           :items="items"
-          :popper="{ placement: 'bottom-start' }"
+          :popper="{ placement: 'bottom' }"
           v-else
+          class="ml-2"
         >
-          <UAvatar :src="user?.user_metadata.avatar_url" alt="Avatar" />
+          <UButton color="black" variant="ghost" class="flex items-center p-0">
+            <span class="hidden lg:block max-w-[10rem] truncate">
+              {{ user?.user_metadata.full_name }}
+            </span>
+            <UAvatar
+              :src="user?.user_metadata.avatar_url"
+              size="sm"
+              alt="User Avatar"
+            />
+          </UButton>
           <template #account="{ item }">
             <div class="text-left">
-              <p>Signed in as</p>
+              <p>{{ t("nav.account.signedInAs") }}</p>
               <p class="truncate font-medium text-gray-900 dark:text-white">
                 {{ item.label }}
               </p>
@@ -93,7 +93,15 @@ const items = [
             />
           </template>
         </UDropdown>
-      </client-only>
+      </ClientOnly>
+      <UButton
+        class="lg:hidden"
+        variant="ghost"
+        color="white"
+        icon="i-ph-magnifying-glass"
+        aria-label="Search documentation"
+        @click="toggleContentSearch"
+      ></UButton>
     </template>
 
     <template #panel>
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
index b037ea8..bdbafc4 100644
--- a/layouts/dashboard.vue
+++ b/layouts/dashboard.vue
@@ -1,51 +1,29 @@
 <script setup lang="ts">
 const localePath = useLocalePath();
+const { t } = useI18n();
 
 const links = [
   {
-    label: "Home",
-    icon: "i-heroicons-home",
+    label: t("dashboard.nav.home"),
+    icon: "i-ph-house-line",
+    to: localePath("/dashboard"),
   },
   {
-    label: "Inbox",
-    icon: "i-heroicons-inbox",
-    badge: "4",
-  },
-  {
-    label: "Users",
-    icon: "i-heroicons-user-group",
-  },
-  {
-    label: "Settings",
-    icon: "i-heroicons-cog-8-tooth",
-    children: [
-      {
-        label: "General",
-      },
-      {
-        label: "Members",
-      },
-      {
-        label: "Notifications",
-      },
-    ],
+    label: t("dashboard.nav.settings"),
+    icon: "i-ph-gear",
+    to: localePath("/dashboard/settings"),
   },
 ];
 </script>
 
 <template>
   <AppHeader />
-  <UDashboardPage>
-    <UDashboardPanel :width="300" collapsible class="h-[100svh]">
-      <UDashboardSidebar>
-        <UDashboardSidebarLinks :links="links" />
-      </UDashboardSidebar>
-    </UDashboardPanel>
-
-    <UMain>
+  <div class="w-full flex justify-center">
+    <div class="max-w-7xl w-full">
+      <UDashboardToolbar class="py-0 px-4 overflow-x-auto">
+        <UHorizontalNavigation :links="links" />
+      </UDashboardToolbar>
       <slot />
-    </UMain>
-  </UDashboardPage>
-
-  <AppFooter />
+    </div>
+  </div>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 9a80d92..c2302b8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { ParsedContent } from "@nuxt/content";
+import type { NavItem } from "@nuxt/content";
+import AppHeader from "~/components/AppHeader.vue";
 
 const files = inject<ParsedContent[]>("files");
 const links = inject<{ label: string; icon: string; to?: string }[]>("links");
-const navigation =
-  inject<{ label: string; icon: string; to?: string }[]>("navigation");
+const navigation = inject<NavItem[]>("navigation");
 </script>
 
 <template>
+  <AppHeader />
   <UMain>
     <slot />
   </UMain>
diff --git a/locales/en/main.json b/locales/en/main.json
index 0469a23..140cc64 100644
--- a/locales/en/main.json
+++ b/locales/en/main.json
@@ -45,7 +45,14 @@
     "home": "Home",
     "train": "Training",
     "result": "Result",
-    "docs": "Docs"
+    "docs": "Docs",
+    "dashboard": "Dashboard",
+    "account": {
+      "signIn": "Sign In",
+      "signedInAs": "Signed in as",
+      "dashboard": "Dashboard",
+      "signOut": "Sign Out"
+    }
   },
   "docs": {
     "toc": "TOC"
@@ -189,5 +196,52 @@
     "correctCount": "Correct Count",
     "correctCountDesc": "Number of correct responses",
     "upload": "Load Result"
+  },
+  "auth": {
+    "title": "Sign In",
+    "description": "Sign in to save your training results and settings.",
+    "OAuth": {
+      "google": "Continue with Google"
+    }
+  },
+  "dashboard": {
+    "nav": {
+      "home": "Home",
+      "settings": "Settings"
+    },
+    "home": {
+      "welcome": "Hello from BlueScript!",
+      "description": "BlueScript Account is under development. It will allow you to save your training results and settings. Stay tuned for updates!"
+    },
+    "settings": {
+      "updateSuccess": "Settings updated successfully.",
+      "updateError": "There was an error updating your settings. Please try again.",
+      "validate": {
+        "name": "Please enter your name.",
+        "email": "Email is invalid."
+      },
+      "theme": {
+        "title": "Theme",
+        "description": "Choose a theme that suits your preference."
+      },
+      "account": {
+        "title": "Account",
+        "description": "Update your account details.",
+        "save": "Save Changes"
+      },
+      "name": {
+        "title": "Name",
+        "description": "Update your username It will appear in profile, training results, and throughout the app."
+      },
+      "email": {
+        "title": "Email",
+        "description": "Email is managed by OAuth providers, and cannot be changed. It will be used for notifications."
+      },
+      "signOut": {
+        "title": "Sign Out",
+        "description": "Sign out of your account.",
+        "button": "Sign Out"
+      }
+    }
   }
 }
diff --git a/package.json b/package.json
index 25eb0d9..df4224a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.2",
+    "@iconify-json/logos": "^1.2.4",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/simple-icons": "^1.2.23",
     "@nuxt/content": "^2.13.4",
diff --git a/pages/auth.vue b/pages/auth.vue
index d6a4243..0e1720e 100644
--- a/pages/auth.vue
+++ b/pages/auth.vue
@@ -2,12 +2,12 @@
   <div class="w-full min-h-screen flex justify-center">
     <UAuthForm
       class="h-fit my-16"
-      title="Login"
-      description="Enter your credentials to access your account."
+      :title="t('auth.title')"
+      :description="t('auth.description')"
       :providers="[
         {
-          label: 'Google',
-          icon: 'i-simple-icons-google',
+          label: t('auth.OAuth.google'),
+          icon: 'i-logos-google-icon',
           color: 'gray',
           click: () => {
             signInWithGoogle();
@@ -23,6 +23,8 @@
 const localePath = useLocalePath();
 const supabase = useSupabaseClient();
 
+const { t } = useI18n();
+
 const signInWithGoogle = async () => {
   const { error } = await supabase.auth.signInWithOAuth({
     provider: "google",
diff --git a/pages/dashboard/index.vue b/pages/dashboard/index.vue
index a475b6f..aec99ea 100644
--- a/pages/dashboard/index.vue
+++ b/pages/dashboard/index.vue
@@ -1,79 +1,17 @@
 <script setup lang="ts">
-const supabase = useSupabaseClient();
-const user = useSupabaseUser();
-const modelOpen = ref(false);
+const { t } = useI18n();
 
 definePageMeta({
   layout: "dashboard",
 });
-
-const links = [
-  {
-    label: "Home",
-    icon: "i-heroicons-home",
-  },
-  {
-    label: "Inbox",
-    icon: "i-heroicons-inbox",
-    badge: "4",
-  },
-  {
-    label: "Users",
-    icon: "i-heroicons-user-group",
-  },
-  {
-    label: "Settings",
-    icon: "i-heroicons-cog-8-tooth",
-    children: [
-      {
-        label: "General",
-      },
-      {
-        label: "Members",
-      },
-      {
-        label: "Notifications",
-      },
-    ],
-  },
-];
-
-const signOut = inject<() => void>("signOut");
 </script>
 
 <template>
-  <UModal v-model="modelOpen" :ui="{ width: 'w-full sm:max-w-sm' }">
-    <UCard
-      :ui="{
-        ring: '',
-        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-      }"
-    >
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h2 class="text-lg font-semibold">Sign Out</h2>
-          <UButton
-            color="gray"
-            variant="ghost"
-            icon="i-ph-x"
-            class="-my-1"
-            @click="modelOpen = false"
-          />
-        </div>
-        <div class="space-y-4">Are you sure you want to sign out?</div>
-      </template>
-
-      <template #footer>
-        <div class="flex justify-end space-x-4">
-          <UButton
-            color="red"
-            label="Sign Out
-          "
-            @click="signOut"
-          />
-          <UButton color="white" label="Cancel" @click="modelOpen = false" />
-        </div>
-      </template>
-    </UCard>
-  </UModal>
+  <UDashboardSection
+    icon="i-ph-hand-waving"
+    :title="t('dashboard.home.welcome')"
+    :description="t('dashboard.home.description')"
+    orientation="vertical"
+    class="px-4 mt-6"
+  />
 </template>
diff --git a/pages/dashboard/result.vue b/pages/dashboard/result.vue
index ef417cf..aab3459 100644
--- a/pages/dashboard/result.vue
+++ b/pages/dashboard/result.vue
@@ -1 +1,7 @@
-<template>Dash</template>
+<template>Result</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "dashboard",
+});
+</script>
diff --git a/pages/dashboard/settings/index.vue b/pages/dashboard/settings/index.vue
new file mode 100644
index 0000000..ea4fd43
--- /dev/null
+++ b/pages/dashboard/settings/index.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { reactive, watchEffect } from "vue";
+import type { FormError, FormSubmitEvent } from "#ui/types";
+// Supabase composables from your Nuxt Supabase module
+const user = useSupabaseUser();
+const supabase = useSupabaseClient();
+
+const { t } = useI18n();
+
+definePageMeta({
+  layout: "dashboard",
+});
+
+const signOut = inject<() => void>("signOut");
+
+const state = reactive({
+  name: "",
+  email: "",
+});
+
+const toast = useToast();
+
+// When the authenticated user is available, populate the form.
+watchEffect(() => {
+  if (user.value) {
+    state.name = user.value.user_metadata?.full_name || "";
+    state.email = user.value.email || "";
+  }
+});
+
+// Simple client-side validation.
+function validate(state: any): FormError[] {
+  const errors: FormError[] = [];
+  if (!state.name) {
+    errors.push({
+      path: "name",
+      message: t("dashboard.settings.validate.name"),
+    });
+  }
+  if (!state.email) {
+    errors.push({
+      path: "email",
+      message: t("dashboard.settings.validate.email"),
+    });
+  }
+  return errors;
+}
+
+// On submit, update the user's profile (metadata) via Supabase.
+async function onSubmit(event: FormSubmitEvent<any>) {
+  const { error } = await supabase.auth.updateUser({
+    data: { full_name: state.name },
+  });
+  if (error) {
+    toast.add({
+      title: t("dashboard.settings.updateError"),
+      message: error.message,
+      icon: "i-ph-x",
+    });
+    return;
+  }
+  toast.add({
+    title: t("dashboard.settings.updateSuccess"),
+    icon: "i-ph-check",
+  });
+}
+</script>
+
+<template>
+  <UDashboardPanelContent class="pb-24">
+    <!-- Theme Section -->
+    <UDashboardSection
+      :title="t('dashboard.settings.theme.title')"
+      :description="t('dashboard.settings.theme.description')"
+    >
+      <template #links>
+        <UColorModeSelect />
+      </template>
+    </UDashboardSection>
+
+    <UDivider class="mb-4" />
+
+    <!-- Profile Form -->
+    <UForm
+      :state="state"
+      :validate="validate"
+      :validate-on="['submit']"
+      @submit="onSubmit"
+    >
+      <UDashboardSection
+        :title="t('dashboard.settings.account.title')"
+        :description="t('dashboard.settings.account.description')"
+      >
+        <template #links>
+          <UButton
+            type="submit"
+            :label="t('dashboard.settings.account.save')"
+            color="black"
+          />
+        </template>
+        <!-- Name Field -->
+        <UFormGroup
+          name="name"
+          :label="t('dashboard.settings.name.title')"
+          :description="t('dashboard.settings.name.description')"
+          required
+          class="grid grid-cols-2 gap-2 items-center"
+        >
+          <UInput
+            v-model="state.name"
+            autocomplete="off"
+            icon="i-ph-pencil-simple-line"
+            size="md"
+          />
+        </UFormGroup>
+
+        <!-- Email Field (Read-Only) -->
+        <UFormGroup
+          name="email"
+          :label="t('dashboard.settings.email.title')"
+          :description="t('dashboard.settings.email.description')"
+          required
+          class="grid grid-cols-2 gap-2"
+        >
+          <UInput
+            v-model="state.email"
+            type="email"
+            autocomplete="off"
+            icon="i-ph-envelope-simple"
+            size="md"
+            disabled
+          />
+        </UFormGroup>
+      </UDashboardSection>
+
+      <UDashboardSection
+        :title="t('dashboard.settings.signOut.title')"
+        :description="t('dashboard.settings.signOut.description')"
+      >
+        <template #links>
+          <UButton
+            :label="t('dashboard.settings.signOut.button')"
+            color="red"
+            @click="signOut"
+          />
+        </template>
+      </UDashboardSection>
+    </UForm>
+  </UDashboardPanelContent>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8deebe7..e7fb575 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       '@iconify-json/heroicons':
         specifier: ^1.2.2
         version: 1.2.2
+      '@iconify-json/logos':
+        specifier: ^1.2.4
+        version: 1.2.4
       '@iconify-json/ph':
         specifier: ^1.2.2
         version: 1.2.2
@@ -408,6 +411,9 @@ packages:
   '@iconify-json/heroicons@1.2.2':
     resolution: {integrity: sha512-qoW4pXr5kTTL6juEjgTs83OJIwpePu7q1tdtKVEdj+i0zyyVHgg/dd9grsXJQnpTpBt6/VwNjrXBvFjRsKPENg==}
 
+  '@iconify-json/logos@1.2.4':
+    resolution: {integrity: sha512-XC4If5D/hbaZvUkTV8iaZuGlQCyG6CNOlaAaJaGa13V5QMYwYjgtKk3vPP8wz3wtTVNVEVk3LRx1fOJz+YnSMw==}
+
   '@iconify-json/ph@1.2.2':
     resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==}
 
@@ -5124,6 +5130,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/logos@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ph@1.2.2':
     dependencies:
       '@iconify/types': 2.0.0