409/warren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create users through admin page

Browse Source
This commit is contained in:
Shawn
2025-07-19 22:18:49 +02:00
parent deff81d2ff
commit 7f2aac12e6
65 changed files with 1394 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/pages/admin/index.vue Normal file
View File

@@ -0,0 +1,76 @@
<script setup lang="ts">
import type { AuthUser } from '~/types/auth';
definePageMeta({
layout: 'admin',
middleware: ['is-admin'],
});
const session = useAuthSession();
const adminStore = useAdminStore();
const users: AuthUser[] = [
{
id: '5a307466-bf2e-4cf2-9b11-61f024e8fa71',
name: '409',
email: '409dev@protonmail.com',
admin: true,
},
{
id: '99132ce4-045c-4d4b-b957-61f5e99e708b',
name: 'test-user',
email: 'test@user.com',
admin: false,
},
];
</script>
<template>
<div class="grid grid-cols-2 gap-4">
<Card>
<CardHeader>
<CardTitle
><NuxtLink to="/admin/users">Users</NuxtLink></CardTitle
>
<CardDescription
>Add users or modify existing users' permissions or
warrens</CardDescription
>
</CardHeader>
<CardContent>
<ScrollArea class="max-h-96">
<div class="flex flex-col gap-4">
<AdminUserListing
v-for="user in users"
:key="user.id"
:user
class="group/user flex flex-row items-center justify-between gap-4"
>
<template #actions>
<Button
class="m-1"
variant="destructive"
size="icon"
:disabled="session?.user.id === user.id"
@click="
() =>
adminStore.openDeleteUserDialog(
user
)
"
>
<Icon name="lucide:trash-2" />
</Button>
</template>
</AdminUserListing>
</div>
</ScrollArea>
<div class="mt-4 flex flex-row">
<Button @click="adminStore.openCreateUserDialog"
>Create user</Button
>
</div>
</CardContent>
</Card>
</div>
</template>

9
frontend/pages/admin/stats.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
definePageMeta({
middleware: ['is-admin'],
});
</script>
<template>
<p>/admin/stats</p>
</template>

9
frontend/pages/admin/users.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
definePageMeta({
middleware: ['is-admin'],
});
</script>
<template>
<p>/admin/users</p>
</template>

9
frontend/pages/admin/warrens.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
definePageMeta({
middleware: ['is-admin'],
});
</script>
<template>
<p>/admin/warrens</p>
</template>

4
frontend/pages/index.vue
View File

@@ -3,7 +3,3 @@ definePageMeta({
middleware: ['authenticated'],
});
</script>
<template>
<p>/</p>
</template>

115
frontend/pages/login.vue
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 { loginUser } from '~/lib/api/auth/login';
import { loginSchema } from '~/lib/schemas/auth';
definePageMeta({
layout: 'auth',
@@ -20,34 +24,28 @@ useHead({
// TODO: Get this from the backend
const OPEN_ID = false;
const loggingIn = ref(false);
const email = ref('');
const password = ref('');
const inputValid = computed(
() => email.value.trim().length > 0 && password.value.trim().length > 0
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;
}
);
async function submit() {
if (!inputValid.value) {
return;
}
loggingIn.value = true;
const { success } = await loginUser(email.value, password.value);
if (success) {
await navigateTo({ path: '/' });
}
loggingIn.value = false;
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Enter') {
submit();
}
}
</script>
<template>
@@ -58,33 +56,48 @@ function onKeyDown(e: KeyboardEvent) {
Enter your email and password to log in to your account.
</CardDescription>
</CardHeader>
<CardContent class="grid gap-4">
<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
@keydown="onKeyDown"
/>
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<Input
id="password"
v-model="password"
type="password"
autocomplete="off"
required
@keydown="onKeyDown"
/>
</div>
<CardContent>
<form id="login-form" class="grid gap-4" @submit.prevent="onSubmit">
<FormField v-slot="{ componentField }" name="email">
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
v-bind="componentField"
id="email"
type="email"
placeholder="name@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 class="w-full" :disabled="!inputValid" @click="submit"
<Button
type="submit"
class="w-full"
form="login-form"
:disabled="loggingIn"
>Log in</Button
>
<Button class="w-full" variant="outline" :disabled="!OPEN_ID"

135
frontend/pages/register.vue
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">