Hornwitser
fae8b4e2e4
Replace the convoluted useAccountSession composable with a pinia store that in addition allows for the consolidation of all session related functions to grouped into one module.
67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<template>
|
|
<main>
|
|
<h1>Account Settings</h1>
|
|
<p v-if="sessionStore.account?.type !== 'anonymous'">
|
|
Name: {{ sessionStore.account?.name }}
|
|
</p>
|
|
<p>Access: {{ sessionStore.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 sessionStore = useSessionStore();
|
|
|
|
const timezone = ref(sessionStore.account?.timezone ?? "");
|
|
|
|
async function changeSettings() {
|
|
try {
|
|
await $fetch("/api/account", {
|
|
method: "patch",
|
|
body: {
|
|
timezone: timezone.value,
|
|
}
|
|
});
|
|
await sessionStore.fetch();
|
|
} catch (err: any) {
|
|
alert(err.data.message);
|
|
}
|
|
}
|
|
|
|
async function deleteAccount() {
|
|
try {
|
|
await $fetch.raw("/api/account", {
|
|
method: "DELETE",
|
|
});
|
|
await sessionStore.fetch();
|
|
await navigateTo("/");
|
|
|
|
} catch (err: any) {
|
|
alert(`Delete account failed: ${err.statusCode} ${err.statusMessage}`);
|
|
}
|
|
}
|
|
</script>
|