feat(frontend): Update nuxt-ui, add login, signup, logout

legalconsenthub/pages/login.vue

@@ -1,45 +1,113 @@
 <template>
-  <UDashboardPanel id="home">
-    <template #header>
-      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
-        <template #leading>
-          <UDashboardSidebarCollapse />
-        </template>
-
-        <template #right>
-          <UDropdownMenu :items="items">
-            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
-          </UDropdownMenu>
-        </template>
-      </UDashboardNavbar>
-
-      <UDashboardToolbar>
-        <template #left> toolbar left </template>
-      </UDashboardToolbar>
+  <UAuthForm
+    :fields="fields"
+    :schema="schema"
+    :providers="providers"
+    title="Welcome back"
+    icon="i-lucide-lock"
+    @submit="onSubmit"
+  >
+    <template #description>
+      Don't have an account? <ULink to="/signup" class="text-primary-500 font-medium">Sign up</ULink>.
     </template>
 
-    <template #body>
-      <div>
-        <pre>{{ session }}</pre>
-        <h1>{{ session.data ? 'Du bist eingeloggt' : 'Nicht eingeloggt' }}</h1>
-        <button v-if="session?.data" @click="authClient.signOut()">Sign out</button>
-      </div>
-      <Register />
-      <Login />
+    <template #password-hint>
+      <ULink to="/" class="text-primary-500 font-medium">Forgot password?</ULink>
     </template>
-  </UDashboardPanel>
+
+    <template #footer>
+      By signing in, you agree to our <ULink to="/" class="text-primary-500 font-medium">Terms of Service</ULink>.
+    </template>
+  </UAuthForm>
 </template>
 
 <script setup lang="ts">
-const session = authClient.useSession()
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
 
-const items = [
-  [
-    {
-      label: 'Neuer Mitbestimmungsantrag',
-      icon: 'i-lucide-send',
-      to: '/create'
-    }
-  ]
+definePageMeta({ layout: 'auth' })
+
+useSeoMeta({ title: 'Login' })
+
+const toast = useToast()
+
+const fields = [
+  {
+    name: 'email',
+    type: 'text' as const,
+    label: 'Email',
+    placeholder: 'Enter your email',
+    required: true
+  },
+  {
+    name: 'password',
+    label: 'Password',
+    type: 'password' as const,
+    placeholder: 'Enter your password'
+  },
+  {
+    name: 'remember',
+    label: 'Remember me',
+    type: 'checkbox' as const
+  }
 ]
+
+const providers = [
+  {
+    label: 'Google',
+    icon: 'i-simple-icons-google',
+    onClick: () => {
+      toast.add({ title: 'Google', description: 'Login with Google' })
+    }
+  },
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    onClick: () => {
+      toast.add({ title: 'GitHub', description: 'Login with GitHub' })
+    }
+  }
+]
+
+const schema = z.object({
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Must be at least 8 characters')
+})
+
+type Schema = z.output<typeof schema>
+
+function onSubmit(payload: FormSubmitEvent<Schema>) {
+  if (!payload.data.email || !payload.data.password) {
+    alert('Bitte alle Felder ausfüllen')
+    return
+  }
+  authClient.signIn.email(
+    {
+      email: payload.data.email,
+      password: payload.data.password
+    },
+    {
+      onRequest: () => {
+        // TODO: Show loading spinner
+        console.log('Sending login request')
+      },
+      onResponse: () => {
+        // TODO: Hide loading spinner
+        console.log('Receiving login response')
+      },
+      onSuccess: async (ctx) => {
+        console.log('Successfully logged in!', ctx)
+        await navigateTo('/')
+      },
+      onError: (ctx) => {
+        console.log(ctx.error.message)
+        useToast().add({
+          title: 'Fehler bei der Anmeldung',
+          description: ctx.error.message,
+          color: 'error'
+        })
+      }
+    }
+  )
+}
 </script>