owltide/pages/account/settings.vue

<template>
	<main>
		<h1>Account Settings</h1>
		<p>Name: {{ session?.account.name }}</p>
		<p>Access: {{ session?.account.type }}</p>
		<p>
			<PushNotification />
		</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 } = useAccountSession();
const { refresh: sessionRefresh } = useAccountSession();

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>

<style scoped>
fieldset {
	width: fit-content;
}
</style>