feat: improve error handling on authorize page

frontend/src/lib/components/header/header.svelte

@@ -9,6 +9,7 @@
 
 	const authUrls = [
 		/^\/interaction$/,
+		/^\/interaction\/error$/,
 		/^\/device$/,
 		/^\/login(?:\/.*)?$/,
 		/^\/logout$/,

frontend/src/lib/components/login-wrapper.svelte

@@ -68,9 +68,8 @@
 			: 'justify-center'}"
 	>
 		<div
-			class="relative z-10 flex h-full p-16 {cn(
-				showAlternativeSignInMethodButton && 'pb-0',
-				backgroundImageExists && 'w-[650px] 2xl:w-[800px]'
+			class="relative z-10 flex h-full w-full max-w-[650px] 2xl:max-w-[800px] p-16 {cn(
+				showAlternativeSignInMethodButton && 'pb-0'
 			)}"
 		>
 			<div class="flex h-full w-full flex-col overflow-hidden">

frontend/src/lib/utils/redirection-util.ts

@@ -18,7 +18,7 @@ export function getAuthRedirectPath(url: URL, user: User | null) {
 
 	const isPublicPath =
 		path.startsWith('/lc/') ||
-		['/interaction', '/login/alternative/code', '/device', '/health', '/healthz'].includes(path);
+		['/interaction', '/interaction/error', '/login/alternative/code', '/device', '/health', '/healthz'].includes(path);
 
 	const isAdminPath = path == '/settings/admin' || path.startsWith('/settings/admin/');
 

frontend/src/routes/authorize/components/client-provider-images.svelte

@@ -13,18 +13,16 @@
 		error,
 		client
 	}: {
-		success: boolean;
-		error: boolean;
-		client: OidcClientMetaData;
+		success?: boolean;
+		error?: boolean;
+		client?: OidcClientMetaData;
 	} = $props();
 
 	let animationDone = $state(false);
 
 	$effect(() => {
 		if (success || error) {
-			setTimeout(() => {
-				animationDone = true;
-			}, 500);
+			setTimeout(() => (animationDone = true), client ? 500 : 0);
 		} else {
 			animationDone = false;
 		}
@@ -61,14 +59,14 @@
 			<div class="flex size-10 items-center justify-center">
 				<CrossAnimated class="size-5" />
 			</div>
-		{:else if client.hasLogo}
+		{:else if client?.hasLogo}
 			<img
 				class="aspect-square size-10 object-contain"
 				src={cachedOidcClientLogo.getUrl(client.id, isLightMode)}
 				draggable={false}
 				alt={m.client_logo()}
 			/>
-		{:else}
+		{:else if client?.name}
 			<div class="flex size-10 items-center justify-center text-3xl font-bold">
 				{client.name.charAt(0).toUpperCase()}
 			</div>

frontend/src/routes/interaction/+page.svelte

@@ -170,7 +170,7 @@
 		</div>
 	{:else if currentStep === 'consent'}
 		<div class="w-full max-w-md" transition:slide={{ duration: 300 }}>
-			<Card.Root class="mt-6 mb-10">
+			<Card.Root class="mb-10">
 				<Card.Header>
 					<p class="text-muted-foreground text-start">
 						<FormattedMessage

frontend/src/routes/interaction/error/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import SignInWrapper from '$lib/components/login-wrapper.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
+	import OidcService from '$lib/services/oidc-service';
+	import WebAuthnService from '$lib/services/webauthn-service';
+	import userStore from '$lib/stores/user-store';
+	import ClientProviderImages from '../../authorize/components/client-provider-images.svelte';
+	import type { PageProps } from './$types';
+
+	const webauthnService = new WebAuthnService();
+	const oidcService = new OidcService();
+
+	let { data }: PageProps = $props();
+	let { error } = data;
+</script>
+
+<svelte:head>
+	<title>{m.error()}</title>
+</svelte:head>
+
+<SignInWrapper>
+	<ClientProviderImages error success={false} />
+	<h1 class="font-gloock mt-5 text-3xl font-bold sm:text-4xl">
+		{m.error()}
+	</h1>
+	<p class="text-muted-foreground mt-2 mb-10">
+		{error}
+	</p>
+
+	<Button class="w-full sm:w-[50%]" variant="secondary" href={document.referrer || '/'}>
+		{m.go_back()}
+	</Button>
+</SignInWrapper>

frontend/src/routes/interaction/error/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url }) => {
+	const error = url.searchParams.get('error') ?? "An unknown error occured."
+
+	return {
+		error
+	};
+};

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

@@ -9,7 +9,6 @@
 	import { getWebauthnErrorMessage } from '$lib/utils/error-util';
 	import { startAuthentication } from '@simplewebauthn/browser';
 	import { fade } from 'svelte/transition';
-	import { cn } from 'tailwind-variants';
 	import LoginLogoErrorSuccessIndicator from './components/login-logo-error-success-indicator.svelte';
 
 	let { data } = $props();
@@ -63,7 +62,7 @@
 			</Button>
 		{/if}
 		<Button
-			class={cn($appConfigStore.allowUserSignups === 'open' && 'w-[50%]')}
+			class={$appConfigStore.allowUserSignups === 'open' ? 'w-[50%]' : 'w-[80%] sm:w-[40%]'}
 			{isLoading}
 			onclick={authenticate}
 			autofocus={true}