feat: implement login functionality with Google authentication and form validation

2026-07-23 21:59:29 +07:00 · 2026-07-23 21:59:29 +07:00 · b3eab9320c
commit b3eab9320c
parent 4094d4d824
8 changed files with 386 additions and 15 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,2 @@
+NUXT_PUBLIC_API_BASE=http://localhost:8000/v1
+NUXT_PUBLIC_GOOGLE_CLIENT_ID=
--- a/app/app.vue
+++ b/app/app.vue
@ -1,11 +1,13 @@
 <template>
  <div>
    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-    <Toaster />
+    <NuxtPage />
+    <ClientOnly>
+      <Toaster />
+    </ClientOnly>
  </div>
 </template>

 <script setup lang="ts">
-import Toaster from '@/components/ui/sonner/Toaster.vue'
+import Toaster from '@/components/ui/sonner/Sonner.vue'
 </script>
--- a/app/components/LoginForm.vue
+++ b/app/components/LoginForm.vue
@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import * as z from 'zod'
+
+useSeoMeta({
+  title: 'Masuk Akun',
+  ogTitle: 'Masuk Akun',
+  description: 'Masuk untuk mengakses akun Anda',
+  ogDescription: 'Masuk untuk mengakses akun Anda',
+})
+
+const config = useRuntimeConfig()
+const router = useRouter()
+const loading = ref(false)
+const { signInWithGoogle, loading: googleLoading } = useGoogleAuth()
+
+const login = ref('')
+const password = ref('')
+const errors = ref<Record<string, string>>({})
+
+const schema = z.object({
+  login: z.string().min(1, 'Username atau email wajib diisi'),
+  password: z.string().min(8, 'Kata sandi minimal 8 karakter'),
+})
+
+async function onSubmit() {
+  errors.value = {}
+
+  const result = schema.safeParse({ login: login.value, password: password.value })
+  if (!result.success) {
+    for (const issue of result.error.issues) {
+      const field = issue.path[0] as string
+      errors.value[field] = issue.message
+    }
+    return
+  }
+
+  loading.value = true
+  try {
+    await $fetch(`${config.public.apiBase}/auth/login`, {
+      method: 'POST',
+      body: {
+        login: login.value,
+        password: password.value,
+      }
+    })
+    toast.success('Selamat datang kembali!', {
+      description: `Masuk sebagai ${login.value}`,
+    })
+    router.push('/')
+  } catch (error: any) {
+    const detail = error?.data?.detail
+    if (detail && Array.isArray(detail)) {
+      const fieldErrors = detail
+        .filter((e: any) => e.loc?.length >= 2)
+        .map((e: any) => ({
+          path: e.loc[e.loc.length - 1],
+          message: e.msg
+        }))
+      for (const fe of fieldErrors) {
+        errors.value[fe.path] = fe.message
+      }
+    } else {
+      toast.error('Gagal masuk', {
+        description: error?.data?.message || 'Ups, terjadi kesalahan. Silakan coba lagi beberapa saat.',
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleGoogleLogin() {
+  await signInWithGoogle(
+    (result) => {
+      toast.success('Selamat datang kembali!', {
+        description: `Masuk sebagai ${result.user.email}`,
+      })
+      router.push('/')
+    },
+    (errorMsg) => {
+      toast.error('Gagal masuk', {
+        description: errorMsg,
+      })
+    }
+  )
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <Card>
+      <CardHeader class="text-center">
+        <CardTitle class="text-xl">
+          Selamat datang kembali!
+        </CardTitle>
+        <CardDescription>
+          Masukkan kredensial Anda untuk mengakses akun.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form @submit.prevent="onSubmit">
+          <FieldGroup>
+            <Field :class="{ 'text-destructive': errors.login }">
+              <FieldLabel for="email">
+                Username atau Email <span class="text-destructive">*</span>
+              </FieldLabel>
+              <Input id="email" v-model="login" type="text" placeholder="Masukkan username atau email"
+                :class="{ 'border-destructive': errors.login }" required />
+              <p v-if="errors.login" class="text-sm text-destructive mt-1">
+                {{ errors.login }}
+              </p>
+            </Field>
+            <Field :class="{ 'text-destructive': errors.password }">
+              <div class="flex items-center">
+                <FieldLabel for="password">
+                  Kata Sandi <span class="text-destructive">*</span>
+                </FieldLabel>
+                <NuxtLink to="/auth/forgot-password" class="ml-auto text-sm underline-offset-4 hover:underline">
+                  Lupa kata sandi?
+                </NuxtLink>
+              </div>
+              <Input id="password" v-model="password" type="password" placeholder="Masukkan kata sandi"
+                :class="{ 'border-destructive': errors.password }" required />
+              <p v-if="errors.password" class="text-sm text-destructive mt-1">
+                {{ errors.password }}
+              </p>
+            </Field>
+            <Field>
+              <Button type="submit" :disabled="loading">
+                <span v-if="loading" class="i-lucide-loader-2 h-4 w-4 animate-spin mr-2" />
+                Masuk
+              </Button>
+              <FieldDescription class="text-center">
+                Tidak punya akun?&nbsp;
+                <NuxtLink to="/auth/register" class="text-primary hover:underline">
+                  Daftar
+                </NuxtLink>
+              </FieldDescription>
+            </Field>
+            <FieldSeparator class="*:data-[slot=field-separator-content]:bg-card">
+              Atau lanjutkan dengan
+            </FieldSeparator>
+            <Field>
+              <Button variant="outline" type="button" :disabled="googleLoading" @click="handleGoogleLogin">
+                <span v-if="googleLoading" class="i-lucide-loader-2 h-4 w-4 animate-spin mr-2" />
+                <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-4 w-4 mr-2">
+                  <path
+                    d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+                    fill="currentColor" />
+                </svg>
+                Masuk dengan Google
+              </Button>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+    <FieldDescription class="px-6 text-center">
+      Dengan masuk, Anda menyetujui
+      <NuxtLink to="/terms" class="text-primary hover:underline">
+        Ketentuan Layanan
+      </NuxtLink>
+      dan
+      <NuxtLink to="/privacy" class="text-primary hover:underline">
+        Kebijakan Privasi
+      </NuxtLink>.
+    </FieldDescription>
+  </div>
+</template>
--- a/app/composables/useGoogleAuth.ts
+++ b/app/composables/useGoogleAuth.ts
@ -0,0 +1,104 @@
+interface GoogleCredentialResponse {
+  credential: string
+  select_by: string
+}
+
+declare global {
+  interface Window {
+    google?: {
+      accounts: {
+        id: {
+          initialize: (config: {
+            client_id: string
+            callback: (response: GoogleCredentialResponse) => void
+            auto_select?: boolean
+          }) => void
+          prompt: (callback?: (notification: { isNotDisplayed: () => boolean; isSkippedMoment: () => boolean }) => void) => void
+          renderButton: (parent: HTMLElement, config: Record<string, unknown>) => void
+        }
+      }
+    }
+  }
+}
+
+export function useGoogleAuth() {
+  const config = useRuntimeConfig()
+  const googleClientId = config.public.googleClientId as string
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  function loadGoogleScript(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (window.google) {
+        resolve()
+        return
+      }
+
+      const existingScript = document.querySelector('script[src="https://accounts.google.com/gsi/client"]')
+      if (existingScript) {
+        existingScript.addEventListener('load', () => resolve(), { once: true })
+        return
+      }
+
+      const script = document.createElement('script')
+      script.src = 'https://accounts.google.com/gsi/client'
+      script.async = true
+      script.defer = true
+      script.onload = () => resolve()
+      script.onerror = () => reject(new Error('Gagal memuat Google Identity Services'))
+      document.head.appendChild(script)
+    })
+  }
+
+  async function signInWithGoogle(onResult?: (result: any) => void, onError?: (msg: string) => void) {
+    error.value = null
+    loading.value = true
+
+    try {
+      await loadGoogleScript()
+
+      if (!googleClientId) {
+        throw new Error('Google Client ID tidak dikonfigurasi')
+      }
+
+      window.google!.accounts.id.initialize({
+        client_id: googleClientId,
+        callback: async (response: GoogleCredentialResponse) => {
+          try {
+            const apiBase = config.public.apiBase
+            const result = await $fetch(`${apiBase}/auth/google-login`, {
+              method: 'POST',
+              body: { credential: response.credential },
+            })
+            onResult?.(result)
+          } catch (e: any) {
+            const detail = e?.data?.detail
+            const msg = detail?.message || 'Gagal masuk dengan Google'
+            error.value = msg
+            onError?.(msg)
+          } finally {
+            loading.value = false
+          }
+        },
+        auto_select: false,
+      })
+
+      window.google!.accounts.id.prompt((notification) => {
+        if (notification.isNotDisplayed()) {
+          loading.value = false
+          onError?.('Popup Google tidak dapat ditampilkan. Silakan coba metode lain.')
+        }
+      })
+    } catch (e: any) {
+      error.value = e.message
+      loading.value = false
+      onError?.(e.message)
+    }
+  }
+
+  return {
+    loading,
+    error,
+    signInWithGoogle,
+  }
+}
--- a/app/pages/auth/login/index.vue
+++ b/app/pages/auth/login/index.vue
@ -0,0 +1,14 @@
+<script lang="ts">
+</script>
+
+<script setup lang="ts">
+import LoginForm from '@/components/LoginForm.vue';
+</script>
+
+<template>
+  <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div class="flex w-full max-w-sm flex-col gap-6">
+      <LoginForm />
+    </div>
+  </div>
+</template>
--- a/docs/history/2026-07-23-login-form-functionality.md
+++ b/docs/history/2026-07-23-login-form-functionality.md
@ -0,0 +1,77 @@
+# Login Form Functionality - Session 1
+
+**Tanggal:** 2026-07-23
+**Status:** Selesai
+
+## Tujuan
+
+Menambahkan fungsionalitas login pada `web2/app/components/LoginForm.vue` dengan referensi dari `web/app/pages/auth/login.vue`.
+
+## Yang Dikerjakan
+
+### 1. Install `vue-sonner`
+- Awalnya install `sonner`, tapi paket tersebut menarik React sebagai dependency dan menyebabkan error `Invalid hook call` / `Cannot read properties of null (reading 'useState')`.
+- Solusi: ganti dengan `vue-sonner` (Vue-only fork).
+
+### 2. Update `nuxt.config.ts`
+- Tambah `runtimeConfig` untuk `apiBase` dan `googleClientId`.
+- Tambah `app.head` untuk title template.
+
+### 3. Buat `app/composables/useGoogleAuth.ts`
+- Composable untuk Google Identity Services (GIS) One Tap.
+- Load script `https://accounts.google.com/gsi/client` secara dinamis.
+- Panggil `POST /auth/google-login` ke backend setelah credential diterima.
+- Return `loading`, `error`, dan `signInWithGoogle()`.
+
+### 4. Buat `app/components/ui/sonner/Sonner.vue`
+- Wrapper component untuk `vue-sonner`'s `Toaster`.
+- Di-render di `app.vue` dengan `<ClientOnly>` (hanya di client, bukan SSR).
+
+### 5. Update `app/app.vue`
+- Import dan render `<Toaster />` di dalam `<ClientOnly>`.
+
+### 6. Update `app/components/LoginForm.vue`
+- Validasi form dengan Zod (`login` wajib, `password` min 8 karakter).
+- Submit handler: `POST /auth/login` via `$fetch`.
+- Google login handler: `useGoogleAuth().signInWithGoogle()`.
+- Loading state pada tombol Masuk dan tombol Google.
+- Error handling: field-level errors + toast notification (success/error).
+- Navigasi: `<NuxtLink>` untuk "Daftar", "Lupa kata sandi?", "Ketentuan Layanan", "Kebijakan Privasi".
+
+## File yang Diubah/Dibuat
+
+| File | Aksi |
+|------|------|
+| `nuxt.config.ts` | Diubah - tambah `runtimeConfig` + `app.head` |
+| `app/composables/useGoogleAuth.ts` | Dibuat |
+| `app/components/ui/sonner/Sonner.vue` | Dibuat |
+| `app/components/ui/sonner/index.ts` | Dibuat (auto) |
+| `app/app.vue` | Diubah - tambah `<Toaster />` |
+| `app/components/LoginForm.vue` | Diubah - tambah fungsionalitas |
+| `package.json` | Diubah - tambah `vue-sonner` |
+
+## Issues yang Dihadapi
+
+### 1. `Cannot read properties of null (reading 'useState')`
+- **Penyebab:** `sonner` (multi-framework) menarik React ke dalam project Vue.
+- **Solusi:** Ganti dengan `vue-sonner`.
+
+### 2. `Invalid hook call` (React hooks error)
+- **Penyebab:** Sisa dependency React dari paket `sonner` masih ada di `node_modules/`.
+- **Solusi:** Hapus manual `node_modules/react`, `node_modules/react-dom`, `node_modules/@types/react`.
+
+### 3. Build error `Could not load Toaster.vue`
+- **Penyebab:** File di direktori `sonner/` bernama `Sonner.vue` tapi import di `app.vue` mencari `Toaster.vue`.
+- **Solusi:** Update import path di `app.vue` ke `Sonner.vue`.
+
+## API yang Digunakan
+
+- `POST /v1/auth/login` - Body: `{ login, password }`
+- `POST /v1/auth/google-login` - Body: `{ credential }` (Google JWT)
+
+## Environment Variables
+
+```
+NUXT_PUBLIC_API_BASE=http://localhost:8000/v1
+NUXT_PUBLIC_GOOGLE_CLIENT_ID=
+```
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -4,17 +4,19 @@ export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
  shadcn: {
-    /**
-     * Prefix for all the imported component.
-     * @default "Ui"
-     */
    prefix: '',
-    /**
-     * Directory that the component lives in.
-     * Will respect the Nuxt aliases.
-     * @link https://nuxt.com/docs/api/nuxt-config#alias
-     * @default "@/components/ui"
-     */
    componentDir: '@/components/ui'
+  },
+  runtimeConfig: {
+    public: {
+      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:8000/v1',
+      googleClientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID || '',
+    }
+  },
+  app: {
+    head: {
+      title: 'Manajemen Bisnis',
+      titleTemplate: '%s - Profitra',
+    }
  }
 })
--- a/package.json
+++ b/package.json
@ -17,10 +17,10 @@
    "nuxt": "^4.5.0",
    "reka-ui": "^2.10.1",
    "shadcn-nuxt": "2.8.0",
-    "sonner": "^2.0.7",
    "tailwind-merge": "^3.6.0",
    "vue": "^3.5.40",
-    "vue-router": "^5.2.0"
+    "vue-router": "^5.2.0",
+    "vue-sonner": "^2.0.9"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "7.0.0-beta.1",