From 65685b0949f6fd58f8e8668c25f3c425f9c5b0c5 Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Mon, 13 Oct 2025 16:12:03 +0800
Subject: [PATCH 1/3] chore: install deps

---
 package.json   |  6 +++++-
 pnpm-lock.yaml | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d737481..2b947df 100644
--- a/package.json
+++ b/package.json
@@ -34,11 +34,15 @@
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3",
     "vue": "^3.5.22",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
+    "@iconify-json/lucide": "^1.2.69",
+    "@iconify-json/pepicons-pop": "^1.2.3",
+    "@iconify-json/simple-icons": "^1.2.54",
     "@nuxt/test-utils": "3.19.2",
     "@vue/test-utils": "^2.4.6",
     "happy-dom": "^19.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb19bf4..bfb0b41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+      zod:
+        specifier: ^4.1.12
+        version: 4.1.12
     devDependencies:
       '@commitlint/cli':
         specifier: ^20.1.0
@@ -63,6 +66,15 @@ importers:
       '@commitlint/config-conventional':
         specifier: ^20.0.0
         version: 20.0.0
+      '@iconify-json/lucide':
+        specifier: ^1.2.69
+        version: 1.2.69
+      '@iconify-json/pepicons-pop':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.54
+        version: 1.2.54
       '@nuxt/test-utils':
         specifier: 3.19.2
         version: 3.19.2(@vue/test-utils@2.4.6)(happy-dom@19.0.2)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/node@24.7.0)(happy-dom@19.0.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))
@@ -632,6 +644,15 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/lucide@1.2.69':
+    resolution: {integrity: sha512-xOhNf74m+C+nSCObfEqYi34dXk1GMfMUcOB+gfqKY/bn0RcsPLinGfgouOvrUFEreDEFbCti7sdheTf5HESLTA==}
+
+  '@iconify-json/pepicons-pop@1.2.3':
+    resolution: {integrity: sha512-keopIpR7DYXpwbSHNF/IPdeyRL5JaPk4ZVMpzZT25XtgK6qPz7ne24W8FA7ZKPYZw4l8wZw3Ho/zi859pN+fxg==}
+
+  '@iconify-json/simple-icons@1.2.54':
+    resolution: {integrity: sha512-OQQYl8yC5j3QklZOYnK31QYe5h47IhyCoxSLd53f0e0nA4dgi8VOZS30SgSAbsecQ+S0xlGJMjXIHTIqZ+ML3w==}
+
   '@iconify/collections@1.0.603':
     resolution: {integrity: sha512-dTIHiJHwk8843m6qgVA6i8aKnqLNDWiN2HsjKvfVSQIch8VqxpXgw+P2xF+rKVsaLg2rbHFR7iZFolccN9m/fw==}
 
@@ -6030,6 +6051,18 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/lucide@1.2.69':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/pepicons-pop@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/simple-icons@1.2.54':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.603':
     dependencies:
       '@iconify/types': 2.0.0

From 9e980bc87c7b74e8ac7d03c382accd7ca4e0fb46 Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Mon, 13 Oct 2025 16:12:37 +0800
Subject: [PATCH 2/3] fix: hide login button when navigating /login and /signup

---
 app/components/Header/index.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/components/Header/index.vue b/app/components/Header/index.vue
index 710e54a..b47ff56 100644
--- a/app/components/Header/index.vue
+++ b/app/components/Header/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { dark, experimental__simple } from '@clerk/themes';
 
+const route = useRoute();
 const colorMode = useColorMode();
 </script>
 
@@ -36,8 +37,8 @@ const colorMode = useColorMode();
           <UButton loading variant="ghost" color="neutral" />
         </template>
       </UColorModeButton>
-      <SignedOut>
-        <SignInButton>
+      <template v-if="route.fullPath !== '/login' && route.fullPath !== '/signup'">
+        <SignedOut>
           <UButton
             class="cursor-pointer"
             variant="ghost"
@@ -45,14 +46,15 @@ const colorMode = useColorMode();
             icon="lucide:log-in"
             :square="true"
             color="neutral"
+            to="/login"
           />
-        </SignInButton>
-      </SignedOut>
-      <SignedIn>
-        <UserButton
-          :appearance="{ baseTheme: colorMode.value === 'dark' ? dark : experimental__simple }"
-        />
-      </SignedIn>
+        </SignedOut>
+        <SignedIn>
+          <UserButton
+            :appearance="{ baseTheme: colorMode.value === 'dark' ? dark : experimental__simple }"
+          />
+        </SignedIn>
+      </template>
     </div>
   </header>
 </template>

From aa4fa7a2f4fbfe18cb06b13e9f6513d24f0b430d Mon Sep 17 00:00:00 2001
From: rockyroed <roed-imp.vo97b@slmail.me>
Date: Mon, 13 Oct 2025 16:12:58 +0800
Subject: [PATCH 3/3] feat: create login and signup pages

---
 app/pages/login.vue        | 143 +++++++++++++++++++++++++++++++++++
 app/pages/signup.vue       | 148 +++++++++++++++++++++++++++++++++++++
 app/pages/sso-callback.vue |  21 ++++++
 3 files changed, 312 insertions(+)
 create mode 100644 app/pages/login.vue
 create mode 100644 app/pages/signup.vue
 create mode 100644 app/pages/sso-callback.vue

diff --git a/app/pages/login.vue b/app/pages/login.vue
new file mode 100644
index 0000000..54f0bc2
--- /dev/null
+++ b/app/pages/login.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import * as z from 'zod';
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui';
+
+const toast = useToast();
+const { signIn, isLoaded } = useSignIn();
+
+const fields: AuthFormField[] = [
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true,
+  },
+  {
+    name: 'password',
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter your password',
+    required: true,
+  },
+  {
+    name: 'remember',
+    label: 'Remember me',
+    type: 'checkbox',
+  },
+];
+
+const isLoading = ref(false);
+
+async function signInWithOAuth(provider: 'oauth_google' | 'oauth_github') {
+  if (!isLoaded.value || !signIn.value) return;
+
+  try {
+    await signIn.value.authenticateWithRedirect({
+      strategy: provider,
+      redirectUrl: '/sso-callback',
+      redirectUrlComplete: '/',
+    });
+  } catch (error: unknown) {
+    const providerName = provider.replace('oauth_', '');
+    const errorMessage =
+      error &&
+      typeof error === 'object' &&
+      'errors' in error &&
+      Array.isArray(error.errors) &&
+      error.errors[0] &&
+      typeof error.errors[0] === 'object' &&
+      'message' in error.errors[0]
+        ? error.errors[0].message
+        : `Failed to sign in with ${providerName}`;
+
+    toast.add({
+      title: 'Error',
+      description: String(errorMessage),
+      color: 'error',
+    });
+  }
+}
+
+const providers = [
+  {
+    label: 'Google',
+    icon: 'i-simple-icons-google',
+    onClick: () => signInWithOAuth('oauth_google'),
+  },
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    onClick: () => signInWithOAuth('oauth_github'),
+  },
+];
+
+const schema = z.object({
+  email: z.email('Invalid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters long'),
+});
+
+type Schema = z.output<typeof schema>;
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  if (!isLoaded.value || !signIn.value) return;
+
+  isLoading.value = true;
+
+  try {
+    const result = await signIn.value.create({
+      identifier: event.data.email,
+      password: event.data.password,
+    });
+
+    if (result.status === 'complete') {
+      await navigateTo('/');
+      toast.add({
+        title: 'Success',
+        description: 'You have been signed in successfully.',
+        color: 'success',
+      });
+    }
+  } catch (error: unknown) {
+    const errorMessage =
+      error &&
+      typeof error === 'object' &&
+      'errors' in error &&
+      Array.isArray(error.errors) &&
+      error.errors[0] &&
+      typeof error.errors[0] === 'object' &&
+      'message' in error.errors[0]
+        ? error.errors[0].message
+        : 'Failed to sign in';
+
+    toast.add({
+      title: 'Error',
+      description: String(errorMessage),
+      color: 'error',
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <section class="flex flex-col items-center justify-center gap-11 m-12">
+    <UPageCard class="w-full max-w-md">
+      <UAuthForm
+        :schema="schema"
+        title="Login"
+        description="Enter your credentials to access your account."
+        icon="i-lucide-user"
+        :fields="fields"
+        :providers="providers"
+        :loading="isLoading"
+        @submit="onSubmit"
+      />
+    </UPageCard>
+    <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
+      Don't have an account?
+      <NuxtLink to="/signup" class="font-bold hover:underline">Sign up here</NuxtLink>
+    </div>
+  </section>
+</template>
diff --git a/app/pages/signup.vue b/app/pages/signup.vue
new file mode 100644
index 0000000..235864f
--- /dev/null
+++ b/app/pages/signup.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import * as z from 'zod';
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui';
+
+const toast = useToast();
+const { signUp, isLoaded } = useSignUp();
+
+const fields: AuthFormField[] = [
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true,
+  },
+  {
+    name: 'password',
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter your password',
+    required: true,
+  },
+  {
+    name: 'first-name',
+    label: 'First Name',
+    type: 'text',
+    placeholder: 'Enter your first name',
+  },
+];
+
+const isLoading = ref(false);
+
+async function signUpWithOAuth(provider: 'oauth_google' | 'oauth_github') {
+  if (!isLoaded.value || !signUp.value) return;
+
+  try {
+    await signUp.value.authenticateWithRedirect({
+      strategy: provider,
+      redirectUrl: '/sso-callback',
+      redirectUrlComplete: '/',
+    });
+  } catch (error: unknown) {
+    const providerName = provider.replace('oauth_', '');
+    const errorMessage =
+      error &&
+      typeof error === 'object' &&
+      'errors' in error &&
+      Array.isArray(error.errors) &&
+      error.errors[0] &&
+      typeof error.errors[0] === 'object' &&
+      'message' in error.errors[0]
+        ? error.errors[0].message
+        : `Failed to sign in with ${providerName}`;
+
+    toast.add({
+      title: 'Error',
+      description: String(errorMessage),
+      color: 'error',
+    });
+  }
+}
+
+const providers = [
+  {
+    label: 'Google',
+    icon: 'i-simple-icons-google',
+    onClick: () => signUpWithOAuth('oauth_google'),
+  },
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    onClick: () => signUpWithOAuth('oauth_github'),
+  },
+];
+
+const schema = z.object({
+  email: z.email('Invalid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters long'),
+  'first-name': z.string().min(1, 'First name is required'),
+});
+
+type Schema = z.output<typeof schema>;
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  // TODO: Email verification functionality
+  if (!isLoaded.value || !signUp.value) return;
+
+  isLoading.value = true;
+
+  try {
+    const result = await signUp.value.create({
+      emailAddress: event.data.email,
+      password: event.data.password,
+      firstName: event.data['first-name'],
+    });
+
+    if (result.status === 'complete') {
+      await navigateTo('/');
+      toast.add({
+        title: 'Success',
+        description: 'Account created successfully!',
+        color: 'success',
+      });
+    }
+  } catch (error: unknown) {
+    const errorMessage =
+      error &&
+      typeof error === 'object' &&
+      'errors' in error &&
+      Array.isArray(error.errors) &&
+      error.errors[0] &&
+      typeof error.errors[0] === 'object' &&
+      'message' in error.errors[0]
+        ? error.errors[0].message
+        : 'Failed to create account';
+
+    toast.add({
+      title: 'Error',
+      description: String(errorMessage),
+      color: 'error',
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <section class="flex flex-col items-center justify-center gap-11 m-12">
+    <UPageCard class="w-full max-w-md">
+      <UAuthForm
+        :schema="schema"
+        title="Create Account"
+        description="Enter your details to create your account."
+        icon="i-lucide-user-plus"
+        :fields="fields"
+        :providers="providers"
+        :loading="isLoading"
+        @submit="onSubmit"
+      />
+    </UPageCard>
+
+    <div class="text-sm font-medium text-gray-600 dark:text-gray-400">
+      Already have an account?
+      <NuxtLink to="/login" class="font-bold hover:underline">Login here</NuxtLink>
+    </div>
+  </section>
+</template>
diff --git a/app/pages/sso-callback.vue b/app/pages/sso-callback.vue
new file mode 100644
index 0000000..4e2c824
--- /dev/null
+++ b/app/pages/sso-callback.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// This page handles OAuth redirects from social providers
+// Clerk will automatically process the callback and redirect appropriately
+
+onMounted(() => {
+  // If for some reason we end up here without being redirected,
+  // redirect back to home after a short delay
+  setTimeout(() => {
+    navigateTo('/');
+  }, 3000);
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center min-h-screen">
+    <div class="flex flex-col items-center gap-4">
+      <UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin text-primary-500" />
+      <p class="text-gray-600 dark:text-gray-400">Completing sign in...</p>
+    </div>
+  </div>
+</template>