edit users

frontend/pages/admin/index.vue

@@ -9,8 +9,8 @@ const adminStore = useAdminStore();
 </script>
 
 <template>
-    <div class="grid grid-cols-2 gap-4">
-        <Card>
+    <div class="grid gap-4 lg:grid-cols-2">
+        <Card class="overflow-hidden">
             <CardHeader>
                 <CardTitle
                     ><NuxtLink to="/admin/users">Users</NuxtLink></CardTitle
@@ -20,16 +20,26 @@ const adminStore = useAdminStore();
                     warrens</CardDescription
                 >
             </CardHeader>
-            <CardContent class="max-h-64">
-                <ScrollArea class="h-full">
-                    <div class="flex flex-col gap-4">
+            <CardContent class="max-h-64 overflow-hidden">
+                <ScrollArea class="h-full w-full overflow-hidden">
+                    <div class="flex w-full flex-col gap-2 overflow-hidden">
                         <AdminUserListing
-                            v-for="user in adminStore.users"
+                            v-for="user in adminStore.resources.users"
                             :key="user.id"
                             :user
-                            class="group/user flex flex-row items-center justify-between gap-4"
                         >
                             <template #actions>
+                                <Button
+                                    class="m-1"
+                                    variant="outline"
+                                    size="icon"
+                                    @click="
+                                        () =>
+                                            adminStore.openEditUserDialog(user)
+                                    "
+                                >
+                                    <Icon name="lucide:pencil" />
+                                </Button>
                                 <Button
                                     class="m-1"
                                     variant="destructive"
@@ -50,9 +60,9 @@ const adminStore = useAdminStore();
                 </ScrollArea>
             </CardContent>
             <CardFooter>
-                <div class="mt-4 flex flex-row">
+                <div class="mt-4 flex grow flex-row justify-end">
                     <Button @click="adminStore.openCreateUserDialog"
-                        >Create user</Button
+                        >Create</Button
                     >
                 </div>
             </CardFooter>

frontend/pages/admin/stats.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
+    layout: 'admin',
     middleware: ['is-admin'],
 });
 </script>

frontend/pages/admin/users.vue

@@ -1,9 +1,22 @@
 <script setup lang="ts">
 definePageMeta({
+    layout: 'admin',
     middleware: ['is-admin'],
 });
+
+const adminStore = useAdminStore();
 </script>
 
 <template>
-    <p>/admin/users</p>
+    <div class="flex h-full w-full">
+        <ScrollArea class="h-full grow">
+            <div class="flex w-full flex-col gap-2">
+                <AdminUserListing
+                    v-for="user in adminStore.resources.users"
+                    :key="user.id"
+                    :user
+                />
+            </div>
+        </ScrollArea>
+    </div>
 </template>

frontend/pages/admin/warrens.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
+    layout: 'admin',
     middleware: ['is-admin'],
 });
 </script>

frontend/pages/login.vue

@@ -7,9 +7,8 @@ import {
     CardContent,
     CardFooter,
 } from '@/components/ui/card';
-import { toTypedSchema } from '@vee-validate/zod';
+import { toTypedSchema } from '@vee-validate/yup';
 import { useForm } from 'vee-validate';
-import type z from 'zod';
 import { loginUser } from '~/lib/api/auth/login';
 import { loginSchema } from '~/lib/schemas/auth';
 
@@ -29,23 +28,21 @@ 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;
+const onSubmit = form.handleSubmit(async (values) => {
+    if (loggingIn.value) {
+        return;
     }
-);
+
+    loggingIn.value = true;
+
+    const { success } = await loginUser(values.email, values.password);
+
+    if (success) {
+        await navigateTo({ path: '/' });
+    }
+
+    loggingIn.value = false;
+});
 </script>
 
 <template>
@@ -86,8 +83,8 @@ const onSubmit = form.handleSubmit(
                                 autocomplete="off"
                             />
                         </FormControl>
+                        <FormMessage />
                     </FormItem>
-                    <FormMessage />
                 </FormField>
             </form>
         </CardContent>

frontend/pages/register.vue

@@ -7,9 +7,8 @@ import {
     CardContent,
     CardFooter,
 } from '@/components/ui/card';
-import { toTypedSchema } from '@vee-validate/zod';
+import { toTypedSchema } from '@vee-validate/yup';
 import { useForm } from 'vee-validate';
-import type z from 'zod';
 import { registerUser } from '~/lib/api/auth/register';
 import { registerSchema } from '~/lib/schemas/auth';
 
@@ -27,24 +26,22 @@ const form = useForm({
     validationSchema: toTypedSchema(registerSchema),
 });
 
-const onSubmit = form.handleSubmit(
-    async (values: z.output<typeof registerSchema>) => {
-        registering.value = true;
+const onSubmit = form.handleSubmit(async (values) => {
+    registering.value = true;
 
-        const { success } = await registerUser(
-            values.name,
-            values.email,
-            values.password
-        );
+    const { success } = await registerUser(
+        values.name,
+        values.email,
+        values.password
+    );
 
-        if (success) {
-            await navigateTo({ path: '/login' });
-            return;
-        }
-
-        registering.value = false;
+    if (success) {
+        await navigateTo({ path: '/login' });
+        return;
     }
-);
+
+    registering.value = false;
+});
 </script>
 
 <template>
@@ -71,8 +68,8 @@ const onSubmit = form.handleSubmit(
                                 autocomplete="off"
                             />
                         </FormControl>
+                        <FormMessage />
                     </FormItem>
-                    <FormMessage />
                 </FormField>
 
                 <FormField v-slot="{ componentField }" name="email">
@@ -102,8 +99,8 @@ const onSubmit = form.handleSubmit(
                                 autocomplete="off"
                             />
                         </FormControl>
+                        <FormMessage />
                     </FormItem>
-                    <FormMessage />
                 </FormField>
             </form>
         </CardContent>