refactor: ♻️ Rewrite authentication page

components/ui/form/FormControl.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Slot } from "radix-vue";
+import { useFormField } from "./useFormField";
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

components/ui/form/FormDescription.vue

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

components/ui/form/FormItem.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+import { useId } from "radix-vue";
+import { type HTMLAttributes, provide } from "vue";
+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 :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/form/FormLabel.vue

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

components/ui/form/FormMessage.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ErrorMessage } from "vee-validate";
+import { toValue } from "vue";
+import { useFormField } from "./useFormField";
+
+const { name, formMessageId } = useFormField();
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-sm font-medium text-destructive"
+  />
+</template>

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 { Field as FormField, Form } from "vee-validate";

components/ui/form/injectionKeys.ts

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

components/ui/form/useFormField.ts

@@ -0,0 +1,37 @@
+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,
+    };
+}

components/ui/input/Input.vue

@@ -19,5 +19,5 @@ const modelValue = useVModel(props, "modelValue", emits, {
 </script>
 
 <template>
-  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground !outline-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
 </template>