sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): actual error page

Browse source
This commit is contained in:
sam 2024-12-02 15:23:58 +01:00
parent f3bb2d5d01
commit 02e2b230bf
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
2 changed files with 52 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Foxnouns.Frontend/src/lib/i18n/locales/en.json
View file

@ -73,7 +73,14 @@
"extra-info-header": "Extra error information",
"noscript-title": "This page requires JavaScript",
"noscript-info": "This page requires JavaScript to function correctly. Some buttons may not work, or the page may not work at all.",
"noscript-short": "Requires JavaScript"
"noscript-short": "Requires JavaScript",
"404-description": "The page you were trying to visit was not found. If you're sure the page should exist, check your address bar for any typos.",
"back-to-profile-button": "Go back to your profile",
"back-to-main-page-button": "Go back to the main page",
"back-to-prev-page-button": "Go back to the previous page",
"400-description": "Something went wrong with your request. This error should never land you on this page, so it's probably a bug.",
"500-description": "Something went wrong on the server. Please try again later.",
"unknown-status-description": "Something went wrong, but we're not sure what. Please try again."
},
"settings": {
"general-information-tab": "General information",

44
Foxnouns.Frontend/src/routes/+error.svelte Normal file
View file

@ -0,0 +1,44 @@
<script lang="ts">
import { page } from "$app/stores";
import { t } from "$lib/i18n";
import type { LayoutData } from "./$types";
let error = $derived($page.error!);
type Props = { data: LayoutData };
let { data }: Props = $props();
</script>
<svelte:head>
<title>{$t("title.an-error-occurred")} • pronouns.cc</title>
</svelte:head>
<div class="container">
<h3>{$t("title.an-error-occurred")}</h3>
<p>
<strong>{$page.status}</strong>: {error.message}
</p>
<p>
{#if $page.status === 400}
{$t("error.400-description")}
{:else if $page.status === 404}
{$t("error.404-description")}
{:else if $page.status === 500}
{$t("error.500-description")}
{:else}
{$t("error.unknown-status-description")}
{/if}
</p>
<div class="btn-group">
{#if data.meUser}
<a class="btn btn-primary" href="/@{data.meUser.username}">
{$t("error.back-to-profile-button")}
</a>
{:else}
<a class="btn btn-primary" href="/">{$t("error.back-to-main-page-button")}</a>
{/if}
<button class="btn btn-secondary" type="button" onclick={() => history.back()}>
{$t("error.back-to-prev-page-button")}
</button>
</div>
</div>