feat(account): add ability to sign in with login code (#271)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/login/alternative/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import SignInWrapper from '$lib/components/login-wrapper.svelte';
+	import Logo from '$lib/components/logo.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import { LucideChevronRight, LucideMail, LucideRectangleEllipsis } from 'lucide-svelte';
+
+	const methods = [
+		{
+			icon: LucideRectangleEllipsis,
+			title: 'Login Code',
+			description: 'Enter a login code to sign in.',
+			href: '/login/alternative/code'
+		}
+	];
+
+	if ($appConfigStore.emailOneTimeAccessEnabled) {
+		methods.push({
+			icon: LucideMail,
+			title: 'Email Login',
+			description: 'Request a login code via email.',
+			href: '/login/alternative/email'
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>Sign In</title>
+</svelte:head>
+
+<SignInWrapper>
+	<div class="flex h-full flex-col justify-center">
+		<div class="bg-muted mx-auto rounded-2xl p-3">
+			<Logo class="h-10 w-10" />
+		</div>
+		<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">Alternative Sign In</h1>
+		<p class="text-muted-foreground mt-3">
+			If you dont't have access to your passkey, you can sign in using one of the following methods.
+		</p>
+		<div class="mt-5 flex flex-col gap-3">
+			{#each methods as method}
+				<a href={method.href + page.url.search}>
+					<Card.Root>
+						<Card.Content class="flex items-center justify-between p-4">
+							<div class="flex gap-3">
+								<method.icon class="text-primary h-7 w-7" />
+								<div class="text-start">
+									<h3 class="text-lg font-semibold">{method.title}</h3>
+									<p class="text-muted-foreground text-sm">{method.description}</p>
+								</div>
+							</div>
+							<Button variant="ghost"><LucideChevronRight class="h-5 w-5" /></Button>
+						</Card.Content>
+					</Card.Root>
+				</a>
+			{/each}
+		</div>
+
+		<a class="text-muted-foreground mt-5 text-xs" href={'/login' + page.url.search}
+			>Use your passkey instead?</a
+		>
+	</div>
+</SignInWrapper>

frontend/src/routes/login/alternative/code/+page.server.ts

@@ -0,0 +1,8 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+	return {
+		code: url.searchParams.get('code'),
+		redirect: url.searchParams.get('redirect') || '/settings'
+	};
+};

frontend/src/routes/login/alternative/code/+page.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import SignInWrapper from '$lib/components/login-wrapper.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import Input from '$lib/components/ui/input/input.svelte';
+	import UserService from '$lib/services/user-service';
+	import userStore from '$lib/stores/user-store.js';
+	import { getAxiosErrorMessage } from '$lib/utils/error-util';
+	import { onMount } from 'svelte';
+	import LoginLogoErrorSuccessIndicator from '../../components/login-logo-error-success-indicator.svelte';
+	import { page } from '$app/state';
+
+	let { data } = $props();
+	let code = $state(data.code ?? '');
+	let isLoading = $state(false);
+	let error: string | undefined = $state();
+
+	const userService = new UserService();
+
+	async function authenticate() {
+		isLoading = true;
+		try {
+			const user = await userService.exchangeOneTimeAccessToken(code);
+			userStore.setUser(user);
+
+			try {
+				goto(data.redirect);
+			} catch (e) {
+				error = 'Invalid redirect URL';
+			}
+		} catch (e) {
+			error = getAxiosErrorMessage(e);
+		}
+
+		isLoading = false;
+	}
+
+	onMount(() => {
+		if (code) {
+			authenticate();
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Login Code</title>
+</svelte:head>
+
+<SignInWrapper>
+	<div class="flex justify-center">
+		<LoginLogoErrorSuccessIndicator error={!!error} />
+	</div>
+	<h1 class="font-playfair mt-5 text-4xl font-bold">Login Code</h1>
+	{#if error}
+		<p class="text-muted-foreground mt-2">
+			{error}. Please try again.
+		</p>
+	{:else}
+		<p class="text-muted-foreground mt-2">Enter the code you received to sign in.</p>
+	{/if}
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			authenticate();
+		}}
+		class="w-full max-w-[450px]"
+	>
+		<Input id="Email" class="mt-7" placeholder="Code" bind:value={code} type="text" />
+		<div class="mt-8 flex justify-stretch gap-2">
+			<Button variant="secondary" class="w-full" href={"/login/alternative" + page.url.search}>Go back</Button>
+			<Button class="w-full" type="submit" {isLoading}>Submit</Button>
+		</div>
+	</form>
+</SignInWrapper>

frontend/src/routes/login/alternative/email/+page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+	return {
+		redirect: url.searchParams.get('redirect') || undefined
+	};
+};

frontend/src/routes/login/alternative/email/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import SignInWrapper from '$lib/components/login-wrapper.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import Input from '$lib/components/ui/input/input.svelte';
+	import UserService from '$lib/services/user-service';
+	import { fade } from 'svelte/transition';
+	import LoginLogoErrorSuccessIndicator from '../../components/login-logo-error-success-indicator.svelte';
+
+	const { data } = $props();
+
+	const userService = new UserService();
+
+	let email = $state('');
+	let isLoading = $state(false);
+	let error: string | undefined = $state(undefined);
+	let success = $state(false);
+
+	async function requestEmail() {
+		isLoading = true;
+		await userService
+			.requestOneTimeAccessEmail(email, data.redirect)
+			.then(() => (success = true))
+			.catch((e) => (error = e.response?.data.error || 'An unknown error occured'));
+
+		isLoading = false;
+	}
+</script>
+
+<svelte:head>
+	<title>Email Login</title>
+</svelte:head>
+
+<SignInWrapper>
+	<div class="flex justify-center">
+		<LoginLogoErrorSuccessIndicator {success} error={!!error} />
+	</div>
+	<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">Email Login</h1>
+	{#if error}
+		<p class="text-muted-foreground mt-2" in:fade>
+			{error}. Please try again.
+		</p>
+		<div class="mt-10 flex w-full justify-stretch gap-2">
+			<Button variant="secondary" class="w-full" href="/">Go back</Button>
+			<Button class="w-full" onclick={() => (error = undefined)}>Try again</Button>
+		</div>
+	{:else if success}
+		<p class="text-muted-foreground mt-2" in:fade>
+			An email has been sent to the provided email, if it exists in the system.
+		</p>
+		<div class="mt-8 flex w-full justify-stretch gap-2">
+			<Button variant="secondary" class="w-full" href={'/login/alternative' + page.url.search}
+				>Go back</Button
+			>
+			<Button class="w-full" href={'/login/alternative/code' + page.url.search}>Enter code</Button>
+		</div>
+	{:else}
+		<form onsubmit={requestEmail} class="w-full max-w-[450px]">
+			<p class="text-muted-foreground mt-2" in:fade>
+				Enter your email address to receive an email with a login code.
+			</p>
+			<Input id="Email" class="mt-7" placeholder="Your email" bind:value={email} />
+			<div class="mt-8 flex justify-stretch gap-2">
+				<Button variant="secondary" class="w-full" href={'/login/alternative' + page.url.search}
+					>Go back</Button
+				>
+				<Button class="w-full" type="submit" {isLoading}>Submit</Button>
+			</div>
+		</form>
+	{/if}
+</SignInWrapper>