major: Migration from better-auth to keycloak

legalconsenthub/pages/login.vue

@@ -1,80 +1,42 @@
 <template>
-  <UAuthForm
-    :fields="fields"
-    :schema="signInSchema"
-    :providers="providers"
-    title="Welcome back"
-    icon="i-lucide-lock"
-    @submit="onLoginSubmit"
-  >
-    <template #description>
-      Don't have an account? <ULink to="/signup" class="text-primary-500 font-medium">Sign up</ULink>.
-    </template>
+    <UCard variant="subtle">
+      <template #header>
+        <div class="text-center">
+          <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
+          <h1 class="text-3xl font-bold text-gray-900 mb-2">
+            Welcome
+          </h1>
+          <p class="text-gray-600">
+            You will be redirected to Keycloak to authenticate
+          </p>
+        </div>
+      </template>
 
-    <template #password-hint>
-      <ULink to="/" class="text-primary-500 font-medium">Forgot password?</ULink>
-    </template>
+      <div class="text-center">
+        <UButton
+          color="primary"
+          size="xl"
+          icon="i-lucide-log-in"
+          @click="handleSignIn"
+        >
+          Sign in with Keycloak
+        </UButton>
+      </div>
 
-    <template #footer>
-      By signing in, you agree to our <ULink to="/" class="text-primary-500 font-medium">Terms of Service</ULink>.
-    </template>
-  </UAuthForm>
+      <template #footer>
+        <div class="text-center text-xs text-gray-500">
+          By signing in, you agree to our terms of service
+        </div>
+      </template>
+    </UCard>
 </template>
 
 <script setup lang="ts">
-import type { FormSubmitEvent } from '@nuxt/ui'
-import { signInSchema, type SignInSchema } from '~/types/schemas'
-
-definePageMeta({ layout: 'auth' })
+definePageMeta({ auth: false, layout: 'auth' })
 
 useSeoMeta({ title: 'Login' })
 
-const toast = useToast()
-const { signIn } = useAuth()
-
-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' })
-    }
-  }
-]
-
-function onLoginSubmit(payload: FormSubmitEvent<SignInSchema>) {
-  if (!payload.data.email || !payload.data.password) {
-    alert('Bitte alle Felder ausfüllen')
-    return
-  }
-  signIn(payload)
+function handleSignIn() {
+  navigateTo('/auth/keycloak', { external: true })
 }
 </script>