63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
/* global $fetch */
|
||
|
import { ref } from 'vue';
|
||
|
import { NuxtError, navigateTo, useFetch } from 'nuxt/app';
|
||
|
import { definePageMeta } from '~/.nuxt/imports';
|
||
|
|
||
|
import EntryEditor, { fieldDefinition } from '~/components/entryEditor.vue';
|
||
|
import Alerts, { AlertData } from '~/components/alerts.vue';
|
||
|
|
||
|
const editorFields: Array<fieldDefinition> = [
|
||
|
{ key: "username", type: "text", label: "Username", optional: false },
|
||
|
{ key: "password", type: "text", label: "Password", optional: false },
|
||
|
{ key: "email", type: "text", label: "email", optional: false },
|
||
|
];
|
||
|
|
||
|
const formValue = ref<any>({});
|
||
|
const alerts = ref<Array<AlertData>>([]);
|
||
|
|
||
|
definePageMeta({
|
||
|
layout: false,
|
||
|
});
|
||
|
|
||
|
async function submit() {
|
||
|
try {
|
||
|
await $fetch("/api/firstRun", {
|
||
|
body: formValue.value,
|
||
|
method: "POST",
|
||
|
});
|
||
|
await navigateTo("/login");
|
||
|
} catch (e) {
|
||
|
console.log(e);
|
||
|
alerts.value.push({ text: (e as NuxtError).data.message });
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (!(await useFetch("/api/firstRun")).data.value)
|
||
|
await navigateTo("/login");
|
||
|
</script>
|
||
|
|
||
|
<template>
|
||
|
<Alerts :alerts="alerts" />
|
||
|
<VCard max-width="450px" class="mx-auto mt-16" variant="outlined">
|
||
|
<template #title>
|
||
|
Initial setup
|
||
|
</template>
|
||
|
<template #text>
|
||
|
<p>
|
||
|
It looks like you've run the server with an empty or uninitialized database or with database without any users.<br>
|
||
|
Below you can initialize the database register your first user and.
|
||
|
</p><br>
|
||
|
<EntryEditor
|
||
|
:fields="editorFields"
|
||
|
@update-sub-model-value="(k, v) => { formValue[k] = v }"
|
||
|
/>
|
||
|
</template>
|
||
|
<template #actions>
|
||
|
<VBtn color="primary" @click="submit">
|
||
|
Initialize
|
||
|
</VBtn>
|
||
|
</template>
|
||
|
</VCard>
|
||
|
</template>
|