Implement authentication phase with Cidaas OAuth2 integration

- Add authentication middleware to protect routes
- Create API endpoints for login, logout, registration, and user info
- Develop UI components for login and registration forms
- Integrate VeeValidate for form validation
- Update environment configuration for Cidaas settings
- Add i18n support for English and German languages
- Enhance Tailwind CSS for improved styling of auth components
- Document authentication flow and testing procedures

app/components/Auth/LoginForm.vue

@@ -0,0 +1,69 @@
+<!-- app/components/Auth/LoginForm.vue -->
+
+<script setup lang="ts">
+import { z } from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+const { login } = useAuth()
+
+// Validation schema
+const loginSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Bitte geben Sie eine gültige E-Mail-Adresse ein'),
+  })
+)
+
+// Form state
+const { handleSubmit, isSubmitting, errors } = useForm({
+  validationSchema: loginSchema,
+})
+
+// Success/error state
+const submitError = ref<string | null>(null)
+
+// Form submit handler
+const onSubmit = handleSubmit(async (values) => {
+  submitError.value = null
+
+  try {
+    await login(values.email)
+    // Redirect happens in login() function
+  } catch (error: any) {
+    console.error('Login error:', error)
+    submitError.value = error.data?.message || 'Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.'
+  }
+})
+</script>
+
+<template>
+  <form @submit="onSubmit" class="space-y-6">
+    <!-- Error Alert -->
+    <Alert v-if="submitError" class="border-destructive bg-destructive/10 text-white">
+      <AlertCircle class="h-5 w-5 text-destructive" />
+      <AlertDescription class="text-white/90">{{ submitError }}</AlertDescription>
+    </Alert>
+
+    <!-- Email Field -->
+    <FormField v-slot="{ componentField }" name="email">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">E-Mail-Adresse</FormLabel>
+        <FormControl>
+          <Input type="email" placeholder="ihre.email@beispiel.de" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Submit Button -->
+    <Button type="submit" variant="experimenta" size="experimenta" class="w-full" :disabled="isSubmitting">
+      <Loader2 v-if="isSubmitting" class="mr-2 h-5 w-5 animate-spin" />
+      {{ isSubmitting ? 'Wird angemeldet...' : 'Anmelden' }}
+    </Button>
+
+    <!-- Info Text -->
+    <p class="text-sm text-white/70 text-center">
+      Sie werden zur sicheren Anmeldeseite weitergeleitet
+    </p>
+  </form>
+</template>

app/components/Auth/RegisterForm.vue

@@ -0,0 +1,151 @@
+<!-- app/components/Auth/RegisterForm.vue -->
+
+<script setup lang="ts">
+import { z } from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+const { register } = useAuth()
+
+// Validation schema
+const registerSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Bitte geben Sie eine gültige E-Mail-Adresse ein'),
+    password: z
+      .string()
+      .min(8, 'Das Passwort muss mindestens 8 Zeichen lang sein')
+      .regex(/[A-Z]/, 'Das Passwort muss mindestens einen Großbuchstaben enthalten')
+      .regex(/[a-z]/, 'Das Passwort muss mindestens einen Kleinbuchstaben enthalten')
+      .regex(/[0-9]/, 'Das Passwort muss mindestens eine Zahl enthalten'),
+    firstName: z.string().min(2, 'Der Vorname muss mindestens 2 Zeichen lang sein'),
+    lastName: z.string().min(2, 'Der Nachname muss mindestens 2 Zeichen lang sein'),
+  })
+)
+
+// Form state
+const { handleSubmit, isSubmitting } = useForm({
+  validationSchema: registerSchema,
+})
+
+// Success/error state
+const submitError = ref<string | null>(null)
+const submitSuccess = ref(false)
+
+// Form submit handler
+const onSubmit = handleSubmit(async (values) => {
+  submitError.value = null
+  submitSuccess.value = false
+
+  try {
+    const result = await register(values)
+
+    submitSuccess.value = true
+
+    // Show success message for 3 seconds, then switch to login tab
+    setTimeout(() => {
+      navigateTo('/auth?tab=login')
+    }, 3000)
+  } catch (error: any) {
+    console.error('Registration error:', error)
+
+    if (error.status === 409) {
+      submitError.value = 'Diese E-Mail-Adresse ist bereits registriert.'
+    } else {
+      submitError.value = error.data?.message || 'Registrierung fehlgeschlagen. Bitte versuchen Sie es erneut.'
+    }
+  }
+})
+</script>
+
+<template>
+  <form @submit="onSubmit" class="space-y-5">
+    <!-- Success Alert -->
+    <Alert v-if="submitSuccess" class="border-success bg-success/10 text-white">
+      <CheckCircle class="h-5 w-5 text-success" />
+      <AlertTitle class="text-success font-medium">Registrierung erfolgreich!</AlertTitle>
+      <AlertDescription class="text-white/90">
+        Bitte bestätigen Sie Ihre E-Mail-Adresse über den Link, den wir Ihnen gesendet haben.
+      </AlertDescription>
+    </Alert>
+
+    <!-- Error Alert -->
+    <Alert v-if="submitError" class="border-destructive bg-destructive/10 text-white">
+      <AlertCircle class="h-5 w-5 text-destructive" />
+      <AlertDescription class="text-white/90">{{ submitError }}</AlertDescription>
+    </Alert>
+
+    <!-- First Name -->
+    <FormField v-slot="{ componentField }" name="firstName">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">Vorname</FormLabel>
+        <FormControl>
+          <Input
+            type="text"
+            placeholder="Max"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Last Name -->
+    <FormField v-slot="{ componentField }" name="lastName">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">Nachname</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Mustermann" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Email -->
+    <FormField v-slot="{ componentField }" name="email">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">E-Mail-Adresse</FormLabel>
+        <FormControl>
+          <Input type="email" placeholder="ihre.email@beispiel.de" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Password -->
+    <FormField v-slot="{ componentField }" name="password">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">Passwort</FormLabel>
+        <FormControl>
+          <Input
+            type="password"
+            placeholder="Mindestens 8 Zeichen"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormDescription class="text-white/60 text-sm">
+          Mindestens 8 Zeichen, Groß-/Kleinbuchstaben und eine Zahl
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Submit Button -->
+    <Button type="submit" variant="experimenta" size="experimenta" class="w-full" :disabled="isSubmitting || submitSuccess">
+      <Loader2 v-if="isSubmitting" class="mr-2 h-5 w-5 animate-spin" />
+      {{ isSubmitting ? 'Wird registriert...' : 'Konto erstellen' }}
+    </Button>
+
+    <!-- Terms & Privacy -->
+    <p class="text-sm text-white/70 text-center">
+      Mit der Registrierung stimmen Sie unserer
+      <a href="/datenschutz" class="text-accent font-medium transition-all duration-300 hover:brightness-125">
+        Datenschutzerklärung
+      </a>
+      und den
+      <a href="/agb" class="text-accent font-medium transition-all duration-300 hover:brightness-125">
+        Nutzungsbedingungen
+      </a>
+      zu.
+    </p>
+  </form>
+</template>

app/components/ui/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { cn } from '~/lib/utils'
+import { alertVariants } from '.'
+
+interface Props {
+  variant?: AlertVariants['variant']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+})
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

app/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

app/components/ui/alert/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

app/components/ui/card/Card.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('rounded-2xl border border-white/20 bg-white/10 backdrop-blur-lg text-white shadow-xl', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardDescription.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

app/components/ui/card/CardHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

app/components/ui/card/index.ts

@@ -0,0 +1,5 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

app/components/ui/form/FormControl.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { inject } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useFieldError } from 'vee-validate'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormControl component - Wrapper for form input elements
+ * Provides accessibility attributes and connects to form validation
+ */
+
+interface Props extends PrimitiveProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'div',
+})
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+
+// Get field validation state from the nearest parent field
+const error = useFieldError()
+</script>
+
+<template>
+  <Primitive
+    :id="formItemContext?.id"
+    v-bind="props"
+    :aria-describedby="error ? `${formItemContext?.id}-message` : undefined"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/form/FormDescription.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { inject } from 'vue'
+import { cn } from '~/lib/utils'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormDescription component - Help text for form fields
+ * Provides additional context or instructions for the user
+ */
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+</script>
+
+<template>
+  <p
+    :id="`${formItemContext?.id}-description`"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>

app/components/ui/form/FormField.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Field } from 'vee-validate'
+
+/**
+ * FormField component - Wraps vee-validate Field component
+ * Provides form validation and error handling
+ */
+
+interface Props {
+  name: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <Field v-slot="{ field, errorMessage, meta }" :name="name">
+    <slot :field="field" :error-message="errorMessage" :meta="meta" />
+  </Field>
+</template>

app/components/ui/form/FormItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { provide } from 'vue'
+import { useId } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormItem component - Container for form fields with proper spacing
+ * Provides unique ID context for label and error message association
+ */
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Generate unique ID for this form item
+const id = useId()
+
+// Provide the ID to child components (FormLabel, FormControl, FormMessage)
+provide(FORM_ITEM_INJECT_KEY, { id })
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/form/FormLabel.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { LabelProps } from 'reka-ui'
+import { inject } from 'vue'
+import { Label } from 'reka-ui'
+import { useFieldError } from 'vee-validate'
+import { cn } from '~/lib/utils'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormLabel component - Label for form fields with error state styling
+ * Automatically associates with the form control via htmlFor
+ */
+
+interface Props extends LabelProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+
+// Get the field error state from the nearest parent field
+const error = useFieldError()
+</script>
+
+<template>
+  <Label
+    :for="formItemContext?.id"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        error && 'text-destructive',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

app/components/ui/form/FormMessage.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { inject } from 'vue'
+import { useFieldError } from 'vee-validate'
+import { cn } from '~/lib/utils'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormMessage component - Displays validation error messages
+ * Only renders when there is an error for the associated field
+ */
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+
+// Get the field error message from the nearest parent field
+const error = useFieldError()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-200 ease-out"
+    enter-from-class="opacity-0 -translate-y-1"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition-all duration-150 ease-in"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-1"
+  >
+    <p
+      v-if="error"
+      :id="`${formItemContext?.id}-message`"
+      :class="cn('form-error', props.class)"
+    >
+      {{ error }}
+    </p>
+  </Transition>
+</template>

app/components/ui/form/README.md

@@ -0,0 +1,118 @@
+# Form Components
+
+shadcn-nuxt Form components with VeeValidate integration.
+
+## Components
+
+- **FormField** - Wraps vee-validate Field component for validation
+- **FormItem** - Container for form fields with proper spacing
+- **FormLabel** - Label with error state styling
+- **FormControl** - Wrapper for input elements with accessibility
+- **FormMessage** - Error message display with animations
+- **FormDescription** - Help text for form fields
+
+## Usage Example
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  FormDescription,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+
+const formSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Please enter a valid email'),
+    password: z.string().min(8, 'Password must be at least 8 characters'),
+  })
+)
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit((values) => {
+  console.log('Form submitted:', values)
+})
+</script>
+
+<template>
+  <form @submit="onSubmit" class="space-y-6">
+    <!-- Email Field -->
+    <FormField v-slot="{ field }" name="email">
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+        <FormControl>
+          <Input
+            type="email"
+            placeholder="you@example.com"
+            v-bind="field"
+          />
+        </FormControl>
+        <FormDescription>
+          We'll never share your email with anyone else.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Password Field -->
+    <FormField v-slot="{ field }" name="password">
+      <FormItem>
+        <FormLabel>Password</FormLabel>
+        <FormControl>
+          <Input
+            type="password"
+            placeholder="Enter your password"
+            v-bind="field"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">Submit</Button>
+  </form>
+</template>
+```
+
+## Features
+
+- **VeeValidate Integration** - Full validation support with error messages
+- **Accessibility** - Proper ARIA attributes and label associations
+- **Error State** - Automatic error styling for labels and inputs
+- **Animations** - Smooth transitions for error messages
+- **TypeScript** - Full type safety
+- **Responsive** - Mobile-first design
+
+## Input Variants
+
+The Input component supports multiple variants and sizes:
+
+```vue
+<!-- Default -->
+<Input v-model="value" />
+
+<!-- Error state -->
+<Input v-model="value" variant="error" />
+
+<!-- Sizes -->
+<Input v-model="value" size="sm" />
+<Input v-model="value" size="default" />
+<Input v-model="value" size="lg" />
+
+<!-- Types -->
+<Input type="text" />
+<Input type="email" />
+<Input type="password" />
+<Input type="number" />
+```

app/components/ui/form/index.ts

@@ -0,0 +1,13 @@
+export { default as FormField } from './FormField.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormControl } from './FormControl.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { default as FormDescription } from './FormDescription.vue'
+
+// Inject keys for form field context
+export const FORM_ITEM_INJECT_KEY = Symbol('form-item-inject-key')
+
+export interface FormItemContext {
+  id: string
+}

app/components/ui/input/Input.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue'
+import type { InputVariants } from '.'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+import { inputVariants } from '.'
+
+/**
+ * Input component - Text input field with variants and two-way binding
+ * Supports all native input attributes and custom styling variants
+ */
+
+interface Props {
+  /** The input value */
+  modelValue?: string | number
+  /** Input type (text, email, password, etc.) */
+  type?: InputHTMLAttributes['type']
+  /** Placeholder text */
+  placeholder?: string
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** Whether the input is required */
+  required?: boolean
+  /** Input name attribute */
+  name?: string
+  /** Input ID attribute */
+  id?: string
+  /** Autocomplete attribute */
+  autocomplete?: string
+  /** Input variant */
+  variant?: InputVariants['variant']
+  /** Input size */
+  size?: InputVariants['size']
+  /** Custom CSS class */
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  variant: 'default',
+  size: 'default',
+})
+
+const emits = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+// Two-way binding support using computed property
+const modelValue = computed({
+  get: () => props.modelValue ?? '',
+  set: (value) => emits('update:modelValue', value),
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :type="type"
+    :class="cn(inputVariants({ variant, size }), props.class)"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :required="required"
+    :name="name"
+    :id="id"
+    :autocomplete="autocomplete"
+  />
+</template>

app/components/ui/input/README.md

@@ -0,0 +1,139 @@
+# Input Component
+
+shadcn-nuxt Input component with TypeScript support and variants.
+
+## Features
+
+- **Two-way binding** - Full v-model support
+- **Variants** - Default and error states
+- **Sizes** - Small, default, and large
+- **TypeScript** - Full type safety
+- **All HTML input types** - text, email, password, number, etc.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input } from '@/components/ui/input'
+
+const email = ref('')
+</script>
+
+<template>
+  <Input v-model="email" type="email" placeholder="Enter your email" />
+</template>
+```
+
+## With VeeValidate Form
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+const formSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Please enter a valid email'),
+  })
+)
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+</script>
+
+<template>
+  <form @submit="form.handleSubmit((values) => console.log(values))">
+    <FormField v-slot="{ field }" name="email">
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+        <FormControl>
+          <Input
+            v-bind="field"
+            type="email"
+            placeholder="you@example.com"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </form>
+</template>
+```
+
+## Variants
+
+```vue
+<!-- Default -->
+<Input v-model="value" />
+
+<!-- Error state (use with form validation) -->
+<Input v-model="value" variant="error" />
+```
+
+## Sizes
+
+```vue
+<!-- Small -->
+<Input v-model="value" size="sm" />
+
+<!-- Default -->
+<Input v-model="value" size="default" />
+
+<!-- Large -->
+<Input v-model="value" size="lg" />
+```
+
+## Input Types
+
+```vue
+<!-- Text (default) -->
+<Input v-model="text" type="text" />
+
+<!-- Email -->
+<Input v-model="email" type="email" />
+
+<!-- Password -->
+<Input v-model="password" type="password" />
+
+<!-- Number -->
+<Input v-model="age" type="number" />
+
+<!-- Date -->
+<Input v-model="date" type="date" />
+
+<!-- Search -->
+<Input v-model="query" type="search" />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| modelValue | string \| number | undefined | The input value |
+| type | string | 'text' | HTML input type |
+| placeholder | string | undefined | Placeholder text |
+| disabled | boolean | false | Disable the input |
+| required | boolean | false | Mark as required |
+| name | string | undefined | Input name attribute |
+| id | string | undefined | Input ID attribute |
+| autocomplete | string | undefined | Autocomplete attribute |
+| variant | 'default' \| 'error' | 'default' | Visual variant |
+| size | 'sm' \| 'default' \| 'lg' | 'default' | Input size |
+| class | string | undefined | Additional CSS classes |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | string \| number | Emitted when value changes |

app/components/ui/input/index.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Input } from './Input.vue'
+
+export const inputVariants = cva(
+  'flex w-full rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-base text-white ring-offset-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-white/50 transition-all duration-300 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      size: {
+        default: 'h-12',
+        sm: 'h-10 text-sm px-3 py-2',
+        lg: 'h-14 text-lg px-5 py-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export type InputVariants = VariantProps<typeof inputVariants>

app/components/ui/tabs/Tabs.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

app/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { TabsContent, useForwardProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+interface Props extends TabsContentProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsContent>
+</template>

app/components/ui/tabs/TabsList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { TabsList, useForwardProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+interface Props extends TabsListProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsList
+    v-bind="forwarded"
+    :class="
+      cn(
+        'inline-flex h-12 items-center justify-center rounded-xl bg-white/5 p-1.5 text-white/70',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

app/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { TabsTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+interface Props extends TabsTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwarded"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-base font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>

app/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

app/composables/useAuth.ts

@@ -0,0 +1,91 @@
+// composables/useAuth.ts
+
+/**
+ * Authentication composable
+ *
+ * Wrapper around nuxt-auth-utils useUserSession() with convenience methods
+ *
+ * Usage:
+ * const { user, loggedIn, login, logout } = useAuth()
+ */
+
+export function useAuth() {
+  const { loggedIn, user, clear, fetch } = useUserSession()
+
+  /**
+   * Login with email
+   * Initiates OAuth2 flow
+   */
+  async function login(email: string) {
+    try {
+      // Call login endpoint to get redirect URL
+      const { redirectUrl } = await $fetch('/api/auth/login', {
+        method: 'POST',
+        body: { email },
+      })
+
+      // Redirect to Cidaas
+      navigateTo(redirectUrl, { external: true })
+    } catch (error) {
+      console.error('Login failed:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Register new user
+   */
+  async function register(data: {
+    email: string
+    password: string
+    firstName: string
+    lastName: string
+  }) {
+    try {
+      const result = await $fetch('/api/auth/register', {
+        method: 'POST',
+        body: data,
+      })
+
+      return result
+    } catch (error) {
+      console.error('Registration failed:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Logout
+   * Clears session and redirects to homepage
+   */
+  async function logout() {
+    try {
+      await $fetch('/api/auth/logout', { method: 'POST' })
+      await clear() // Clear client-side state
+      navigateTo('/') // Redirect to homepage
+    } catch (error) {
+      console.error('Logout failed:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Refresh user data from server
+   */
+  async function refreshUser() {
+    try {
+      await fetch() // Re-fetch session from server
+    } catch (error) {
+      console.error('Refresh user failed:', error)
+    }
+  }
+
+  return {
+    user,
+    loggedIn,
+    login,
+    register,
+    logout,
+    refreshUser,
+  }
+}

app/pages/auth.vue

@@ -0,0 +1,105 @@
+<!-- app/pages/auth.vue -->
+
+<script setup lang="ts">
+/**
+ * Combined Authentication Page
+ *
+ * Features:
+ * - Tab navigation (Login / Register)
+ * - Redirects logged-in users to homepage
+ * - Stores intended destination for post-login redirect
+ */
+
+const route = useRoute()
+const { loggedIn } = useAuth()
+
+// Redirect if already logged in
+if (loggedIn.value) {
+  navigateTo('/')
+}
+
+// Active tab state
+const activeTab = ref<'login' | 'register'>('login')
+
+// Set tab from query param if present
+onMounted(() => {
+  if (route.query.tab === 'register') {
+    activeTab.value = 'register'
+  }
+})
+
+// Error message from OAuth callback
+const errorMessage = computed(() => {
+  if (route.query.error === 'login_failed') {
+    return 'Login fehlgeschlagen. Bitte versuchen Sie es erneut.'
+  }
+  return null
+})
+
+// Set page meta
+definePageMeta({
+  layout: 'auth', // Optional: Use separate layout for auth pages
+})
+</script>
+
+<template>
+  <div class="container mx-auto max-w-lg px-4 py-12 sm:py-16">
+    <div class="mb-10 text-center">
+      <h1 class="text-4xl font-light tracking-tight">
+        Willkommen
+      </h1>
+      <p class="mt-3 text-lg text-white/80">
+        Melden Sie sich an oder erstellen Sie ein Konto
+      </p>
+    </div>
+
+    <!-- Error Alert -->
+    <Alert v-if="errorMessage" class="mb-6 border-destructive bg-destructive/10 text-white">
+      <AlertCircle class="h-5 w-5 text-destructive" />
+      <AlertTitle class="text-destructive">Fehler</AlertTitle>
+      <AlertDescription class="text-white/90">{{ errorMessage }}</AlertDescription>
+    </Alert>
+
+    <!-- Tabs -->
+    <Tabs v-model="activeTab" class="w-full">
+      <TabsList class="mb-6 grid w-full grid-cols-2">
+        <TabsTrigger value="login">
+          Anmelden
+        </TabsTrigger>
+        <TabsTrigger value="register">
+          Registrieren
+        </TabsTrigger>
+      </TabsList>
+
+      <!-- Login Tab -->
+      <TabsContent value="login">
+        <Card class="p-6 sm:p-8">
+          <CardHeader class="px-0 pt-0">
+            <CardTitle class="text-2xl font-medium">Anmelden</CardTitle>
+            <CardDescription class="text-white/70 mt-2">
+              Melden Sie sich mit Ihrer E-Mail-Adresse an
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="px-0 pb-0">
+            <AuthLoginForm />
+          </CardContent>
+        </Card>
+      </TabsContent>
+
+      <!-- Register Tab -->
+      <TabsContent value="register">
+        <Card class="p-6 sm:p-8">
+          <CardHeader class="px-0 pt-0">
+            <CardTitle class="text-2xl font-medium">Konto erstellen</CardTitle>
+            <CardDescription class="text-white/70 mt-2">
+              Erstellen Sie ein neues experimenta-Konto
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="px-0 pb-0">
+            <AuthRegisterForm />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>

app/pages/index.vue

@@ -40,13 +40,13 @@ const handleClick = () => {
         </p>
 
         <div class="flex flex-wrap gap-4 items-center">
-          <UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
+          <Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
             Zur experimenta Startseite
-          </UiButton>
+          </Button>
 
-          <UiButton variant="experimenta" size="experimenta" @click="handleClick">
+          <Button variant="experimenta" size="experimenta" @click="handleClick">
             Mit Click Handler
-          </UiButton>
+          </Button>
         </div>
 
         <p class="mt-6 text-sm text-white/70">
@@ -60,17 +60,17 @@ const handleClick = () => {
         <p class="mb-6 text-white/90">Testing shadcn-nuxt Button component integration:</p>
 
         <div class="flex flex-wrap gap-4">
-          <UiButton variant="default" @click="handleClick"> Default Button </UiButton>
+          <Button variant="default" @click="handleClick"> Default Button </Button>
 
-          <UiButton variant="destructive" @click="handleClick"> Destructive </UiButton>
+          <Button variant="destructive" @click="handleClick"> Destructive </Button>
 
-          <UiButton variant="outline" @click="handleClick"> Outline </UiButton>
+          <Button variant="outline" @click="handleClick"> Outline </Button>
 
-          <UiButton variant="secondary" @click="handleClick"> Secondary </UiButton>
+          <Button variant="secondary" @click="handleClick"> Secondary </Button>
 
-          <UiButton variant="ghost" @click="handleClick"> Ghost </UiButton>
+          <Button variant="ghost" @click="handleClick"> Ghost </Button>
 
-          <UiButton variant="link" @click="handleClick"> Link </UiButton>
+          <Button variant="link" @click="handleClick"> Link </Button>
         </div>
 
         <p class="mt-6 text-sm text-white/70">Open browser console to see button click events.</p>

app/pages/internal/styleguide.vue

@@ -223,20 +223,20 @@ const copyCode = async (code: string) => {
           </p>
 
           <div class="flex flex-wrap gap-4 items-center mb-6">
-            <UiButton variant="experimenta" size="experimenta" @click="handleClick">
+            <Button variant="experimenta" size="experimenta" @click="handleClick">
               experimenta Button
-            </UiButton>
+            </Button>
 
-            <UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
+            <Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
               As Link
-            </UiButton>
+            </Button>
           </div>
 
           <details class="bg-white/5 p-4 rounded-lg">
             <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
-            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="experimenta" size="experimenta" @click="handleClick"&gt;
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;Button variant="experimenta" size="experimenta" @click="handleClick"&gt;
   experimenta Button
-&lt;/UiButton&gt;</code></pre>
+&lt;/Button&gt;</code></pre>
           </details>
         </div>
 
@@ -246,22 +246,22 @@ const copyCode = async (code: string) => {
           <p class="mb-6 text-white/90">All button variants from shadcn-nuxt component library:</p>
 
           <div class="flex flex-wrap gap-4 mb-6">
-            <UiButton variant="default" @click="handleClick">Default</UiButton>
-            <UiButton variant="destructive" @click="handleClick">Destructive</UiButton>
-            <UiButton variant="outline" @click="handleClick">Outline</UiButton>
-            <UiButton variant="secondary" @click="handleClick">Secondary</UiButton>
-            <UiButton variant="ghost" @click="handleClick">Ghost</UiButton>
-            <UiButton variant="link" @click="handleClick">Link</UiButton>
+            <Button variant="default" @click="handleClick">Default</Button>
+            <Button variant="destructive" @click="handleClick">Destructive</Button>
+            <Button variant="outline" @click="handleClick">Outline</Button>
+            <Button variant="secondary" @click="handleClick">Secondary</Button>
+            <Button variant="ghost" @click="handleClick">Ghost</Button>
+            <Button variant="link" @click="handleClick">Link</Button>
           </div>
 
           <details class="bg-white/5 p-4 rounded-lg">
             <summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
-            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="default"&gt;Default&lt;/UiButton&gt;
-&lt;UiButton variant="destructive"&gt;Destructive&lt;/UiButton&gt;
-&lt;UiButton variant="outline"&gt;Outline&lt;/UiButton&gt;
-&lt;UiButton variant="secondary"&gt;Secondary&lt;/UiButton&gt;
-&lt;UiButton variant="ghost"&gt;Ghost&lt;/UiButton&gt;
-&lt;UiButton variant="link"&gt;Link&lt;/UiButton&gt;</code></pre>
+            <pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;Button variant="default"&gt;Default&lt;/Button&gt;
+&lt;Button variant="destructive"&gt;Destructive&lt;/Button&gt;
+&lt;Button variant="outline"&gt;Outline&lt;/Button&gt;
+&lt;Button variant="secondary"&gt;Secondary&lt;/Button&gt;
+&lt;Button variant="ghost"&gt;Ghost&lt;/Button&gt;
+&lt;Button variant="link"&gt;Link&lt;/Button&gt;</code></pre>
           </details>
         </div>
       </section>
@@ -431,6 +431,21 @@ const copyCode = async (code: string) => {
                 </label>
               </div>
             </div>
+
+            <!-- Error Messages -->
+            <div>
+              <label class="form-label">Form mit Fehlermeldung</label>
+              <input type="email" class="form-input border-red-500/50" placeholder="ihre.email@beispiel.de" />
+              <p class="form-error">Bitte geben Sie eine gültige E-Mail-Adresse ein</p>
+            </div>
+
+            <!-- Error Message Styles -->
+            <div class="space-y-3 mt-6">
+              <h4 class="text-lg font-semibold text-white">Fehlermeldungen (.form-error)</h4>
+              <p class="form-error">Dies ist eine Fehlermeldung mit gutem Kontrast</p>
+              <p class="form-error">Required</p>
+              <p class="form-error">Das Passwort muss mindestens 8 Zeichen lang sein</p>
+            </div>
           </div>
 
           <details class="bg-white/5 p-4 rounded-lg mt-6">
@@ -568,7 +583,7 @@ const copyCode = async (code: string) => {
           <ul class="list-disc list-inside space-y-2 text-white/90">
             <li><strong>CommonHeader</strong> - Main navigation header with experimenta logo</li>
             <li><strong>CommonFooter</strong> - Footer with 4-column grid (links, contact, legal, social)</li>
-            <li><strong>UiButton</strong> - shadcn-nuxt Button component with 7 variants</li>
+            <li><strong>Button</strong> - shadcn-nuxt Button component with 7 variants</li>
           </ul>
           <p class="mt-4 text-sm text-white/70">
             See individual component files in <code