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/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 |