create users through admin page

frontend/pages/login.vue

@@ -7,7 +7,11 @@ import {
     CardContent,
     CardFooter,
 } from '@/components/ui/card';
+import { toTypedSchema } from '@vee-validate/zod';
+import { useForm } from 'vee-validate';
+import type z from 'zod';
 import { loginUser } from '~/lib/api/auth/login';
+import { loginSchema } from '~/lib/schemas/auth';
 
 definePageMeta({
     layout: 'auth',
@@ -20,34 +24,28 @@ useHead({
 // TODO: Get this from the backend
 const OPEN_ID = false;
 const loggingIn = ref(false);
-const email = ref('');
-const password = ref('');
 
-const inputValid = computed(
-    () => email.value.trim().length > 0 && password.value.trim().length > 0
+const form = useForm({
+    validationSchema: toTypedSchema(loginSchema),
+});
+
+const onSubmit = form.handleSubmit(
+    async (values: z.output<typeof loginSchema>) => {
+        if (loggingIn.value) {
+            return;
+        }
+
+        loggingIn.value = true;
+
+        const { success } = await loginUser(values.email, values.password);
+
+        if (success) {
+            await navigateTo({ path: '/' });
+        }
+
+        loggingIn.value = false;
+    }
 );
-
-async function submit() {
-    if (!inputValid.value) {
-        return;
-    }
-
-    loggingIn.value = true;
-
-    const { success } = await loginUser(email.value, password.value);
-
-    if (success) {
-        await navigateTo({ path: '/' });
-    }
-
-    loggingIn.value = false;
-}
-
-function onKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-        submit();
-    }
-}
 </script>
 
 <template>
@@ -58,33 +56,48 @@ function onKeyDown(e: KeyboardEvent) {
                 Enter your email and password to log in to your account.
             </CardDescription>
         </CardHeader>
-        <CardContent class="grid gap-4">
-            <div class="grid gap-2">
-                <Label for="email">Email</Label>
-                <Input
-                    id="email"
-                    v-model="email"
-                    type="email"
-                    placeholder="your@email.com"
-                    autocomplete="off"
-                    required
-                    @keydown="onKeyDown"
-                />
-            </div>
-            <div class="grid gap-2">
-                <Label for="password">Password</Label>
-                <Input
-                    id="password"
-                    v-model="password"
-                    type="password"
-                    autocomplete="off"
-                    required
-                    @keydown="onKeyDown"
-                />
-            </div>
+
+        <CardContent>
+            <form id="login-form" class="grid gap-4" @submit.prevent="onSubmit">
+                <FormField v-slot="{ componentField }" name="email">
+                    <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                            <Input
+                                v-bind="componentField"
+                                id="email"
+                                type="email"
+                                placeholder="name@example.com"
+                                autocomplete="off"
+                            />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <FormField v-slot="{ componentField }" name="password">
+                    <FormItem>
+                        <FormLabel>Password</FormLabel>
+                        <FormControl>
+                            <Input
+                                v-bind="componentField"
+                                id="password"
+                                type="password"
+                                autocomplete="off"
+                            />
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+            </form>
         </CardContent>
+
         <CardFooter class="flex-col gap-2">
-            <Button class="w-full" :disabled="!inputValid" @click="submit"
+            <Button
+                type="submit"
+                class="w-full"
+                form="login-form"
+                :disabled="loggingIn"
                 >Log in</Button
             >
             <Button class="w-full" variant="outline" :disabled="!OPEN_ID"