owltide/pages/account/settings.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>