Allow password entry for shared directories

svelte/src/filesystem/ErrorPage.svelte

@@ -1,5 +1,6 @@
 <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";
@@ -17,6 +18,16 @@ onMount(() => {
 
 
 })
+
+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()}
@@ -29,6 +40,23 @@ onMount(() => {
 		<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>