owltide/pages/login.vue

<template>
	<main>
		<h1>Log In</h1>
		<form @submit.prevent="logIn">
			<input v-model="name" type="text" placeholder="Name" required>
			<button type="submit">Log In</button>
		</form>
		<h2 id="create-account">Create Account</h2>
		<p>If you don't have an account you may create one</p>
		<form @submit.prevent="createAccount">
			<fieldset>
				<legend>Regular Account</legend>
				<label>
					Name:
					<input v-model="createName" type="text" placeholder="Name" required />
				</label>
				<button type="submit">Create account</button>
			</fieldset>
		</form>
		<p>
			If you do not wish to deal with logins you may create an anonymous account tied to this device.
		</p>
		<fieldset>
			<legend>Anonymous Account</legend>
			<button type="button" @click="createAnonymousAccount">Create anonymous account</button>
		</fieldset>
		<pre><code>{{ result }}</code></pre>
		<pre><code>Session: {{ session }}</code></pre>
	</main>
</template>

<script lang="ts" setup>
const { data: session, refresh: sessionRefresh } = await useAccountSession();
const { getSubscription, subscribe } = usePushNotification();

const name = ref("");
const result = ref("")
async function logIn() {
	try {
		const res = await $fetch.raw("/api/auth/login", {
			method: "POST",
			body: { name: name.value },
		});
		result.value = `Server replied: ${res.status} ${res.statusText}`;
		// Resubscribe push notifications if the user was subscribed before.
		const subscription = await getSubscription();
		if (subscription) {
			await subscribe();
		}
		await sessionRefresh();

	} catch (err: any) {
		console.log(err);
		console.log(err.data);
		result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
	}
}

const createName = ref("");
async function createAccount() {
	try {
		const res = await $fetch.raw("/api/account", {
			method: "POST",
			headers: {
				"Content-Type": "application/x-www-form-urlencoded",
			},
			body: new URLSearchParams({ name: createName.value })
		});
		result.value = `Server replied: ${res.status} ${res.statusText}`;
		await sessionRefresh();

	} catch (err: any) {
		console.log(err);
		console.log(err.data);
		result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
	}
}
async function createAnonymousAccount() {
	try {
		const res = await $fetch.raw("/api/account", {
			method: "POST",
			headers: {
				"Content-Type": "application/x-www-form-urlencoded",
			},
		});
		result.value = `Server replied: ${res.status} ${res.statusText}`;
		await sessionRefresh();

	} catch (err: any) {
		console.log(err);
		console.log(err.data);
		result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
	}
}
</script>