Implement register and login with Telegram

Add the concept of authentication methods that authenticate an account
where using the telegram login widget is one such method.  If a login is
done with an authentication method that's not associated with any
account the session ends up with the data from the authentication
method in order to allow registering a new account with the
authentication method.

This has to be stored on the session as otherwise it wouldn't be
possible to implement authentication methods such as OAuth2 that takes
the user to a third-party site and then redirects the browser back.

pages/login.vue

@@ -9,6 +9,7 @@
 			<input v-model="name" type="text" placeholder="Name" required>
 			<button type="submit">Log In</button>
 		</form>
+		<LogInTelegram v-if="authTelegramEnabled" />
 		<h2 id="create-account">Create Account</h2>
 		<p>If you don't have an account you may create one</p>
 		<form @submit.prevent="createAccount">
@@ -38,6 +39,8 @@ useHead({
 	title: "Login",
 });
 
+const runtimeConfig = useRuntimeConfig();
+const authTelegramEnabled = runtimeConfig.public.authTelegramEnabled;
 const sessionStore = useSessionStore();
 const { getSubscription, subscribe } = usePushNotification();
 

pages/register.vue

@@ -0,0 +1,57 @@
+<!--
+	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
+	SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<main>
+		<h1>Register</h1>
+		<form @submit.prevent="register">
+			<h2>User Details</h2>
+			<p>
+				<label>
+					Username
+					<input type="text" v-model="username">
+				</label>
+			</p>
+			<h2>Authentication Method</h2>
+			<p v-if="sessionStore.authenticationProvider">
+				Provider: {{ sessionStore.authenticationProvider }}
+				<br>Identifier: {{ sessionStore.authenticationName }}
+				<br><button type="button" @click="clearProvider">Clear Method</button>
+			</p>
+			<p v-else>
+				<LogInTelegram />
+			</p>
+			<p>
+				<button type="submit">Register new account</button>
+			</p>
+		</form>
+	</main>
+</template>
+
+<script setup lang="ts">
+const sessionStore = useSessionStore();
+const username = ref("");
+
+async function clearProvider() {
+	sessionStore.logOut();
+}
+async function register() {
+	let session;
+	try {
+		session = await $fetch("/api/auth/account", {
+			method: "POST",
+			body: {
+				name: username.value,
+			},
+		});
+	} catch (err: any) {
+		alert(err.data?.message ?? err.message);
+		return;
+	}
+	sessionStore.update(session);
+	if (session.account) {
+		await navigateTo("/account/settings");
+	}
+}
+</script>