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/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" />
+```