create users through admin page
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user