owltide/error.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<template v-if='data?.data?.code === "SESSION_TAKEN"'>
		<h1>Session taken</h1>
		<p>
			Your session with the server has been taken over by another browser, device, or HTTP agent. This could happen due to one of the following reasons:
		</p>
		<ul>
			<li>
				The session cookie on this device got restored to an earlier state for example as a result of a restore or a crash.
			</li>
			<li>
				The server issued a new session to the client but the client didn't get the repsonse.
			</li>
			<li>
				The session cookie was copied and used on another device, browser or HTTP agent.
			</li>
		</ul>
		<p>
			It's possible however unlikely that someone else have hijacked your session.
		</p>
		<p>
			<button
				type="button"
				@click="abandonSession"
			>
				Abandon Session
			</button>
		</p>
	</template>
	<template v-else>
		<Header />
		<h1>{{ error.statusCode }} {{ error.statusMessage }}</h1>
		<p v-if="error.message !== error.statusMessage">
			{{ error.message }}
		</p>
		<pre v-if="error.stack"><code>{{ error.stack }}</code></pre>
	</template>
</template>

<script setup lang="ts">
const props = defineProps<{ error: {
	statusCode: number,
	fatal: boolean,
	unhandled: boolean,
	statusMessage?: string,
	data?: string,
	cause?: unknown,

	// Undocumented fields
	url?: string,
	message?: string,
	stack?: string,
}}>();
const data = computed<{
	data?: {
		code?: string,
	},
}>(() => props.error.data ? JSON.parse(props.error.data) : undefined);
async function abandonSession() {
	await $fetch("/api/auth/session", { method: "DELETE", }).catch(err => alert(err.message));
	await navigateTo("/");
}
</script>