prettier

src/lib/KratosForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { AlertCircleIcon, CheckCircleIcon } from 'svelte-feather-icons';
+	import { XCircleIcon, AlertCircleIcon, CheckCircleIcon } from 'svelte-feather-icons';
 
 	import type { UiContainer, UiNodeInputAttributesTypeEnum } from '@ory/client';
 	import {
@@ -27,7 +27,7 @@
 		{:else if message.type == 'error'}
 			<div class="alert alert-error">
 				<div>
-					<AlertCircleIcon class="stroke-current flex-shrink-0 w-6 h-6" />
+					<XCircleIcon class="stroke-current flex-shrink-0 w-6 h-6" />
 					<span>{message.text}</span>
 				</div>
 			</div>

src/routes/error/+page.server.ts

@@ -0,0 +1,19 @@
+import type { PageServerLoad } from './$types';
+import { KratosPublicApi } from '$lib/server/APIClients.js';
+import { redirect } from '@sveltejs/kit';
+import { DEFAULT_REDIRECT_URL, KRATOS_PUBLIC_URL } from '$lib/server/config';
+
+export const load: PageServerLoad = async ({ url, request }) => {
+	const id = url.searchParams.get('id');
+
+	if (id == undefined) {
+		throw redirect(303, DEFAULT_REDIRECT_URL);
+	}
+
+	const { data: error } = await KratosPublicApi.getSelfServiceError(id).catch((e) => {
+		console.log(e);
+		throw redirect(303, DEFAULT_REDIRECT_URL);
+	});
+
+	return error as any;
+};

src/routes/error/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { XCircleIcon } from 'svelte-feather-icons';
+
+	import type { PageData } from './$types';
+	export let data: PageData;
+</script>
+
+<div class="flex h-full justify-center">
+	<div class="place-self-center space-y-2 max-w-sm">
+		<h1 class="text-xl font-bold text-error">An Error Occurred</h1>
+		{data.error.message}
+		<div role="group" class="collapse collapse-arrow">
+			<input id="collapse" type="checkbox" />
+			<label for="collapse" class="collapse-title text-sm font-medium"> Details </label>
+			<div class="collapse-content">
+				<code class="whitespace-normal break-all">{JSON.stringify(data)}</code>
+			</div>
+		</div>
+	</div>
+</div>