edit users

frontend/components/admin/CreateUserDialog.vue

@@ -2,50 +2,48 @@
 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';
+import { toTypedSchema } from '@vee-validate/yup';
 
 const adminStore = useAdminStore();
 const creating = ref(false);
 
 function cancel() {
     adminStore.closeCreateUserDialog();
+    form.resetForm();
 }
 
 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();
-        }
+const onSubmit = form.handleSubmit(async (values) => {
+    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>
+    <AlertDialog :open="adminStore.createUserDialogOpen">
+        <AlertDialogTrigger><slot /></AlertDialogTrigger>
+        <AlertDialogContent @escape-key-down="cancel">
+            <AlertDialogHeader>
+                <AlertDialogTitle>Create user</AlertDialogTitle>
+                <AlertDialogDescription>
                     Enter a username, email and password to create a new user
-                </DialogDescription>
-            </DialogHeader>
+                </AlertDialogDescription>
+            </AlertDialogHeader>
 
             <form
                 id="create-user-form"
@@ -67,8 +65,8 @@ const onSubmit = form.handleSubmit(
                                 data-bwignore
                             />
                         </FormControl>
+                        <FormMessage />
                     </FormItem>
-                    <FormMessage />
                 </FormField>
 
                 <FormField v-slot="{ componentField }" name="email">
@@ -104,8 +102,8 @@ const onSubmit = form.handleSubmit(
                                 data-bwignore
                             />
                         </FormControl>
+                        <FormMessage />
                     </FormItem>
-                    <FormMessage />
                 </FormField>
 
                 <FormField v-slot="{ value, handleChange }" name="admin">
@@ -118,15 +116,19 @@ const onSubmit = form.handleSubmit(
                                 @update:model-value="handleChange"
                             />
                         </FormControl>
+                        <FormMessage />
                     </FormItem>
-                    <FormMessage />
                 </FormField>
             </form>
 
-            <DialogFooter>
-                <Button variant="outline" @click="cancel">Cancel</Button>
-                <Button type="submit" form="create-user-form">Create</Button>
-            </DialogFooter>
-        </DialogContent>
-    </Dialog>
+            <AlertDialogFooter>
+                <AlertDialogCancel variant="outline" @click="cancel"
+                    >Cancel</AlertDialogCancel
+                >
+                <AlertDialogAction type="submit" form="create-user-form"
+                    >Create</AlertDialogAction
+                >
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
 </template>