f8572c3386
- 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
119 lines
2.9 KiB
Markdown
119 lines
2.9 KiB
Markdown
# 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" />
|
|
```
|