From c97559a6b026e531fbec3349c8c14db6427f3355 Mon Sep 17 00:00:00 2001
From: Skye <me@skye.vg>
Date: Sat, 26 Nov 2022 15:35:46 +0900
Subject: [PATCH] error page and better icon

---
 src/lib/KratosForm.svelte        |  4 ++--
 src/routes/error/+page.server.ts | 21 +++++++++++++++++++++
 src/routes/error/+page.svelte    | 24 ++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/error/+page.server.ts
 create mode 100644 src/routes/error/+page.svelte

diff --git a/src/lib/KratosForm.svelte b/src/lib/KratosForm.svelte
index dad4ab4..a6a8e76 100644
--- a/src/lib/KratosForm.svelte
+++ b/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>
diff --git a/src/routes/error/+page.server.ts b/src/routes/error/+page.server.ts
new file mode 100644
index 0000000..0cf065c
--- /dev/null
+++ b/src/routes/error/+page.server.ts
@@ -0,0 +1,21 @@
+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;
+};
diff --git a/src/routes/error/+page.svelte b/src/routes/error/+page.svelte
new file mode 100644
index 0000000..e46ee28
--- /dev/null
+++ b/src/routes/error/+page.svelte
@@ -0,0 +1,24 @@
+<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>