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