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

132
frontend/components/admin/CreateUserDialog.vue Normal file
View File

@@ -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>

90
frontend/components/admin/DeleteUserDialog.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup lang="ts">
import { Input } from '@/components/ui/input';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import type { AuthUser } from '~/types/auth';
const adminStore = useAdminStore();
// We'll only update this value if there is a user to prevent layout shifts on close
const user = ref<AuthUser>();
const confirmEmailInput = ref<InstanceType<typeof Input>>();
const confirmEmail = ref<string>('');
const emailMatches = computed(
() => user.value != null && user.value.email === confirmEmail.value
);
adminStore.$subscribe(async (_mutation, state) => {
if (state.deleteUserDialog != null) {
user.value = state.deleteUserDialog.user;
setTimeout(() => confirmEmailInput.value?.domRef?.focus(), 25);
}
});
function cancel() {
adminStore.clearDeleteUserDialog();
}
function submit() {}
</script>
<template>
<AlertDialog :open="adminStore.deleteUserDialog != null">
<AlertDialogTrigger as-child>
<slot />
</AlertDialogTrigger>
<AlertDialogContent @escape-key-down="cancel">
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription class="space-y-1">
<p ref="test">
This action cannot be undone. This will permanently
delete the user and remove their data from the database
</p>
</AlertDialogDescription>
</AlertDialogHeader>
<AlterDialogContent v-if="user != null">
<div class="flex flex-col gap-4">
<AdminUserListing :user />
<div class="flex flex-col gap-1">
<p
:class="[
'tight text-sm',
emailMatches
? 'text-muted-foreground'
: 'text-destructive-foreground',
]"
>
Enter their email address to continue
</p>
<Input
ref="confirmEmailInput"
v-model="confirmEmail"
type="text"
:placeholder="user.email"
autocomplete="off"
data-1p-ignore
data-protonpass-ignore
data-bwignore
/>
</div>
</div>
</AlterDialogContent>
<AlertDialogFooter>
<AlertDialogCancel @click="cancel">Cancel</AlertDialogCancel>
<AlertDialogAction :disabled="!emailMatches" @click="submit"
>Delete</AlertDialogAction
>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</template>

26
frontend/components/admin/UserListing.vue Normal file
View File

@@ -0,0 +1,26 @@
<script setup lang="ts">
import type { AuthUser } from '~/types/auth';
const { user } = defineProps<{
user: AuthUser;
}>();
// TODO: Remove once this is a field on the users
const AVATAR =
'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp';
</script>
<template>
<div class="group/user flex flex-row items-center justify-between gap-4">
<Avatar>
<AvatarImage :src="AVATAR" />
</Avatar>
<div class="flex grow flex-col leading-4">
<span class="text-sm font-medium">{{ user.name }}</span>
<span class="text-muted-foreground text-xs">{{ user.email }}</span>
</div>
<div class="opacity-0 transition-all group-hover/user:opacity-100">
<slot name="actions" />
</div>
</div>
</template>