owltide/pages/account/settings.vue

<template>
	<main>
		<h1>Account Settings</h1>
		<p v-if="session?.account.type !== 'anonymous'">
			Name: {{ session?.account.name }}
		</p>
		<p>Access: {{ session?.account.type }}</p>
		<form @submit.prevent="changeSettings">
			<label>
				Timezone
				<input type="text" v-model="timezone">
			</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 { data: session, refresh: sessionRefresh } = await useAccountSession();

const timezone = ref(session.value?.account.timezone ?? "");

async function changeSettings() {
	try {
		await $fetch("/api/account", {
			method: "patch",
			body: {
				timezone: timezone.value,
			}
		});
		await sessionRefresh();
	} catch (err: any) {
		alert(err.data.message);
	}
}

async function deleteAccount() {
	try {
		await $fetch.raw("/api/account", {
			method: "DELETE",
		});
		await sessionRefresh();
		await navigateTo("/");

	} catch (err: any) {
		alert(`Delete account failed: ${err.statusCode} ${err.statusMessage}`);
	}
}
</script>