error page and better icon

master
Skye 2 years ago
parent 237b1dd368
commit c97559a6b0
Signed by: me
GPG Key ID: 0104BC05F41B77B8

@ -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>

@ -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;
};

@ -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>
Loading…
Cancel
Save