create users through admin page

frontend/components/admin/CreateUserDialog.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/switch';
+import { useForm } from 'vee-validate';
+import { createUserSchema } from '~/lib/schemas/admin';
+import { toTypedSchema } from '@vee-validate/zod';
+import type z from 'zod';
+import { createUser } from '~/lib/api/admin/createUser';
+
+const adminStore = useAdminStore();
+const creating = ref(false);
+
+function cancel() {
+    adminStore.closeCreateUserDialog();
+}
+
+const form = useForm({
+    validationSchema: toTypedSchema(createUserSchema),
+});
+
+const onSubmit = form.handleSubmit(
+    async (values: z.output<typeof createUserSchema>) => {
+        if (creating.value) {
+            return;
+        }
+
+        creating.value = true;
+
+        const result = await createUser(values);
+
+        creating.value = false;
+
+        if (result.success) {
+            adminStore.closeCreateUserDialog();
+        }
+    }
+);
+</script>
+
+<template>
+    <Dialog :open="adminStore.createUserDialog != null">
+        <DialogTrigger><slot /></DialogTrigger>
+        <DialogContent @escape-key-down="cancel">
+            <DialogHeader>
+                <DialogTitle>Create user</DialogTitle>
+                <DialogDescription>
+                    Enter a username, email and password to create a new user
+                </DialogDescription>
+            </DialogHeader>
+
+            <form
+                id="create-user-form"
+                class="flex flex-col 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"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </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"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </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"
+                                data-1p-ignore
+                                data-protonpass-ignore
+                                data-bwignore
+                            />
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+
+                <FormField v-slot="{ value, handleChange }" name="admin">
+                    <FormItem>
+                        <FormLabel>Admin</FormLabel>
+                        <FormControl>
+                            <Switch
+                                id="admin"
+                                :model-value="value"
+                                @update:model-value="handleChange"
+                            />
+                        </FormControl>
+                    </FormItem>
+                    <FormMessage />
+                </FormField>
+            </form>
+
+            <DialogFooter>
+                <Button variant="outline" @click="cancel">Cancel</Button>
+                <Button type="submit" form="create-user-form">Create</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>