refactor: ♻️ Rewrite password reset page, polish auth

components/oauth/login.vue

@@ -43,10 +43,6 @@ const form = useForm({
     validationSchema: formSchema,
 });
 
-const onSubmit = form.handleSubmit((values) => {
-    console.info("Form submitted!", values);
-});
-
 const redirectUrl = new URL("/api/auth/login", `https://${instance.domain}`);
 
 const params = useUrlSearchParams();
@@ -85,7 +81,7 @@ const issuerRedirectUrl = (issuerId: string) => {
 
 <template>
     <div class="grid gap-6">
-        <form @submit="onSubmit" method="post" :action="redirectUrl.toString()">
+        <form @submit="form.submitForm" method="post" :action="redirectUrl.toString()">
             <div class="grid gap-6">
                 <FormField v-slot="{ componentField }" name="identifier">
                     <FormItem>
@@ -93,7 +89,7 @@ const issuerRedirectUrl = (issuerId: string) => {
                             Email (or username)
                         </FormLabel>
                         <FormControl>
-                            <Input placeholder="petergriffin" type="email" auto-capitalize="none"
+                            <Input placeholder="petergriffin" type="text" auto-capitalize="none"
                             auto-complete="idenfifier" auto-correct="off" :disabled="isLoading"
                             v-bind="componentField" />
                         </FormControl>

components/ui/alert/Alert.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+import { type AlertVariants, alertVariants } from ".";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+    variant?: AlertVariants["variant"];
+}>();
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

components/ui/alert/index.ts

@@ -0,0 +1,23 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Alert } from "./Alert.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+
+export const alertVariants = cva(
+    "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+    {
+        variants: {
+            variant: {
+                default: "bg-background text-foreground",
+                destructive:
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;