create users through admin page

frontend/components/admin/DeleteUserDialog.vue

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