Hornwitser
9592cd3160
The name is inspired by the watchful owl perching from the tree tops with complete overview of all that's going on combined with -tide in the sense it's used for in words like summertide and eastertide.
81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<main>
|
|
<h1>Account Settings</h1>
|
|
<p v-if="accountStore.type !== 'anonymous'">
|
|
Name: {{ accountStore.name }}
|
|
</p>
|
|
<p>Access: {{ accountStore.type }}</p>
|
|
<form @submit.prevent="changeSettings">
|
|
<label>
|
|
Timezone
|
|
<input type="text" v-model="timezone" :placeholder="accountStore.defaultTimezone">
|
|
</label>
|
|
<label>
|
|
Locale
|
|
<input type="text" v-model="locale" :placeholder="accountStore.defaultLocale">
|
|
</label>
|
|
<button type="submit">
|
|
Save
|
|
</button>
|
|
</form>
|
|
<p>
|
|
<ClientOnly>
|
|
<PushNotification />
|
|
</ClientOnly>
|
|
</p>
|
|
<fieldset>
|
|
<legend>Danger Zone</legend>
|
|
Delete my account and all data associated with it
|
|
<button @click="deleteAccount">
|
|
Delete
|
|
</button>
|
|
</fieldset>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
definePageMeta({
|
|
middleware: ["authenticated"],
|
|
});
|
|
useHead({
|
|
title: "Settings",
|
|
});
|
|
|
|
const sessionStore = useSessionStore();
|
|
const accountStore = useAccountStore();
|
|
|
|
const timezone = ref(accountStore.timezone ?? "");
|
|
const locale = ref(accountStore.locale ?? "");
|
|
|
|
async function changeSettings() {
|
|
try {
|
|
await $fetch("/api/auth/account", {
|
|
method: "patch",
|
|
body: {
|
|
timezone: timezone.value,
|
|
locale: locale.value,
|
|
}
|
|
});
|
|
await sessionStore.fetch();
|
|
} catch (err: any) {
|
|
alert(err.data.message);
|
|
}
|
|
}
|
|
|
|
async function deleteAccount() {
|
|
try {
|
|
await $fetch.raw("/api/auth/account", {
|
|
method: "DELETE",
|
|
});
|
|
await sessionStore.fetch();
|
|
await navigateTo("/");
|
|
|
|
} catch (err: any) {
|
|
alert(`Delete account failed: ${err.statusCode} ${err.statusMessage}`);
|
|
}
|
|
}
|
|
</script>
|