fnx_web/svelte/src/filesystem/ErrorPage.svelte

<script lang="ts">
import TextBlock from "layout/TextBlock.svelte";
import Button from "layout/Button.svelte";
import { type FSNavigator } from "./FSNavigator";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/HeaderStore";

let {
	nav
}: {
	nav: FSNavigator;
} = $props();

onMount(() => {
	return nav.subscribe(nav => {
		breadcrumbs_store.set(breadcrumbs)
	})


})

let password = $state("")
let wrong_password = $state(false)
const submit_password = async (e: SubmitEvent) => {
	e.preventDefault()
	await nav.navigate(nav.last_requested_path, false, password)

	// This page is gone if the password was right
	wrong_password = true
}
</script>

{#snippet breadcrumbs()}
	{$nav.navigation_error}
{/snippet}

<TextBlock>
	{#if $nav.navigation_error === "not_found" || $nav.navigation_error === "path_not_found"}
		<h1>Page not found</h1>
		<p>
			This page could not be found.
		</p>
	{:else if $nav.navigation_error === "password_required"}
		<h1>Password required</h1>
		<p>
			This directory is protected with a password.
		</p>
		<form onsubmit={submit_password}>
			<!-- Password managers take the directory for the username. Without
				this they fill in the password of the visitor's Nova account. The
				hidden attribute does not work, the stylesheet overrides it -->
			<input type="text" autocomplete="username" value={$nav.last_requested_path.split("/")[1]} style="display: none;">
			<!-- svelte-ignore a11y_autofocus -->
			<input type="password" bind:value={password} placeholder="Password" required autofocus>
			<Button type="submit" icon="lock_open" label="Open"/>
		</form>
		{#if wrong_password}
			<p>This password is not correct.</p>
		{/if}
	{:else if $nav.navigation_error === "permission_denied" || $nav.navigation_error === "forbidden"}
		<h1>Permission denied</h1>
		<p>
			You are not allowed to access this resource.
		</p>
	{:else if $nav.navigation_error === "unavailable_for_legal_reasons"}
		<h1>Unavailable for legal reasons</h1>
		<p>
			This content has been removed for breaking the law.
		</p>
	{:else if $nav.navigation_error === "out_of_transfer"}
		<h1>Traffic limit exceeded</h1>
		<p>
			The host user has exceeded the traffic limit of their subscription.
			They need to upgrade to a higher subscription tier.
		</p>
	{:else}
		<h1>Unknown error code</h1>
		<p>
			{$nav.navigation_error}
		</p>
	{/if}
</TextBlock>