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
This commit is contained in:
Bastian Masanek
67
app/components/ui/input/Input.vue
Normal file
67
app/components/ui/input/Input.vue
Normal file
@@ -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>
|
||||
139
app/components/ui/input/README.md
Normal file
139
app/components/ui/input/README.md
Normal file
@@ -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 |
|
||||
27
app/components/ui/input/index.ts
Normal file
27
app/components/ui/input/index.ts
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user