owltide/pages/account/settings.vue
Hornwitser e52972853d License under AGPL version 3 or later
I firmly believe in free software.

The application I'm making here have capabilities that I've not seen in
any system.  It presents itself as an opportunity to collaborate on a
tool that serves the people rather than corporations.  Whose incentives
are to help people rather, not make the most money.  And whose terms
ensure that these freedoms and incentives cannot be taken back or
subverted.

I license this software under the AGPL.
2025-06-30 18:58:24 +02:00

78 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"],
});
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>