create users through admin page

frontend/components/ui/form/FormControl.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from 'reka-ui'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

frontend/components/ui/form/FormDescription.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

frontend/components/ui/form/FormItem.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useId } from 'reka-ui'
+import { type HTMLAttributes, provide } from 'vue'
+import { cn } from '@/lib/utils'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    data-slot="form-item"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

frontend/components/ui/form/FormLabel.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { useFormField } from './useFormField'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(
+      'data-[error=true]:text-destructive-foreground',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

frontend/components/ui/form/FormMessage.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { ErrorMessage } from 'vee-validate'
+import { type HTMLAttributes, toValue } from 'vue'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('text-destructive-foreground text-sm', props.class)"
+  />
+</template>

frontend/components/ui/form/index.ts

@@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'

frontend/components/ui/form/injectionKeys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>

frontend/components/ui/form/useFormField.ts

@@ -0,0 +1,30 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
+
+  const { name } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: useIsFieldValid(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    error: useFieldError(name),
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}