create users through admin page

This commit is contained in:
2025-07-19 22:18:49 +02:00
parent deff81d2ff
commit 7f2aac12e6
65 changed files with 1394 additions and 139 deletions

View File

@@ -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 { registerUser } from '~/lib/api/auth/register';
import { registerSchema } from '~/lib/schemas/auth';
definePageMeta({
layout: 'auth',
@@ -18,33 +22,29 @@ useHead({
});
const registering = ref(false);
const username = ref('');
const email = ref('');
const password = ref('');
const allFieldsValid = computed(
() =>
username.value.trim().length > 0 &&
email.value.trim().length > 0 &&
password.value.trim().length > 0
);
const form = useForm({
validationSchema: toTypedSchema(registerSchema),
});
async function submit() {
registering.value = true;
const onSubmit = form.handleSubmit(
async (values: z.output<typeof registerSchema>) => {
registering.value = true;
const { success } = await registerUser(
username.value,
email.value,
password.value
);
const { success } = await registerUser(
values.name,
values.email,
values.password
);
if (success) {
await navigateTo({ path: '/login' });
return;
if (success) {
await navigateTo({ path: '/login' });
return;
}
registering.value = false;
}
registering.value = false;
}
);
</script>
<template>
@@ -53,45 +53,66 @@ async function submit() {
<CardTitle class="text-2xl">Register</CardTitle>
<CardDescription>Create a new user account</CardDescription>
</CardHeader>
<CardContent class="grid gap-4">
<div class="grid gap-2">
<Label for="username">Username</Label>
<Input
id="username"
v-model="username"
type="username"
placeholder="409"
autocomplete="off"
required
/>
</div>
<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
/>
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<Input
id="password"
v-model="password"
type="password"
autocomplete="off"
required
/>
</div>
<CardContent>
<form
id="register-form"
class="grid gap-2"
@submit.prevent="onSubmit"
>
<FormField v-slot="{ componentField }" name="name">
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input
v-bind="componentField"
id="username"
type="text"
placeholder="confused-cat"
autocomplete="off"
/>
</FormControl>
</FormItem>
<FormMessage />
</FormField>
<FormField v-slot="{ componentField }" name="email">
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
v-bind="componentField"
id="email"
type="email"
placeholder="confusedcat@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
type="submit"
class="w-full"
:disabled="!allFieldsValid || registering"
@click="submit"
form="register-form"
:disabled="registering"
>Register</Button
>
<NuxtLink to="/login" class="w-full">