fnx_web/svelte/src/wrap/Router.svelte

<script lang="ts">
import { onMount, tick } from "svelte";
import HomePage from "home_page/HomePage.svelte";
import LoginRouter from "login/Router.svelte";
import HomeRouter from "user_home/Router.svelte";
import AdminRouter from "admin_panel/Router.svelte";
import Filesystem from "filesystem/Filesystem.svelte";
import NotFound from "./NotFound.svelte";
import SpeedtestPage from "speedtest/SpeedtestPage.svelte";
import Appearance from "pages/Appearance.svelte";
import Footer from "layout/Footer.svelte";
import { current_page_store, type Tab } from "./RouterStore";
import { get_user, type User } from "lib/NovaAPI";
import { breadcrumbs_store } from "./BreadcrumbStore";

let pages: Tab[] = [
	{
		path: "/",
		title: "Home",
		component: HomePage,
	}, {
		path: "/login",
		title: "Login",
		component: LoginRouter,
	}, {
		path: "/register",
		title: "Register",
		component: LoginRouter,
	}, {
		path: "/user",
		prefix: "/user/",
		title: "Dashboard",
		component: HomeRouter,
		login: true,
	}, {
		path: "/d/me",
		prefix: "/d/",
		title: "Filesystem",
		component: Filesystem,
		footer: false,
		custom_breadcrumbs: true,
	}, {
		path: "/admin",
		prefix: "/admin/",
		title: "Admin Panel",
		component: AdminRouter,
		login: true,
	}, {
		path: "/speedtest",
		title: "Speedtest",
		component: SpeedtestPage,
	}, {
		path: "/appearance",
		title: "Appearance",
		component: Appearance,
	},
]

onMount(async () => {
	await load_page(window.location.href, false)
})

let current_page: Tab = $state(null)

// find_page resolves a URL path to the page which renders it. It returns null
// when no page matches, in which case the browser has to handle the navigation
const find_page = (pathname: string): Tab => {
	const path = decodeURIComponent(pathname)
	let by_prefix: Tab = null
	for (const page of pages) {
		if (path === page.path) {
			return page
		}
		if (page.prefix !== undefined && path.startsWith(page.prefix)) {
			by_prefix = page
		}
	}
	return by_prefix
}

// href can be a full URL or a path, and may contain a query string and hash.
// Those are not used for routing, but they do need to survive the navigation
const load_page = async (href: string, history: boolean): Promise<boolean> => {
	const url = new URL(href, window.location.href)
	console.debug(
		"Page router: Navigating to page", url.pathname,
		"current path", window.location.pathname,
		"log history:", history,
	)

	const page = find_page(url.pathname)
	if (page === null) {
		current_page = {
			path: "",
			title: "Not Found",
			component: NotFound,
		}
		return false
	}

	let user: User
	try {
		user = await get_user()
	} catch (err) {
		alert("Failed to get user details: " + err)
	}

	// If this page requires login, and the user is not logged in, then we
	// redirect the user to the login page. The page is deliberately not mounted
	// first, it would fire authenticated requests which are all bound to fail
	if (page.login === true && (user === null || user === undefined)) {
		console.debug("User is not logged in, redirecting to login page", user)
		return load_page(
			"/login?redirect=" + encodeURIComponent(url.pathname + url.search),
			true,
		)
	}

	window.document.title = page.title+" / Nova"

	// The address bar has to be updated before the page is mounted. Pages read
	// their parameters from it when they initialize, the login page picks up
	// the redirect target this way
	if (history) {
		window.history.pushState(
			{}, window.document.title, url.pathname + url.search + url.hash,
		)
	}

	current_page = page

	if (current_page.custom_breadcrumbs !== true) {
		breadcrumbs_store.set(breadcrumbs)
	}

	// The current_page_store updates all the listening pages for navigation
	// events. We first wait for a tick so that the current page gets unmounted
	// before sending the event. That way a stale page will not get events which
	// are not meant for them
	tick().then(() => {
		current_page_store.set(current_page)
	})

	return true
}

const click = (e: MouseEvent) => {
	// Middle clicks, right clicks and modified clicks open the link in a new
	// tab or window. That's the browser's job, not ours
	if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {
		return
	}

	const origin = (e.target as Element).closest("a")
	if (origin === null) {
		return
	}

	// Links which explicitly ask for browser behaviour: a new tab, a download,
	// or an external destination
	if (origin.target !== "" || origin.hasAttribute("download") ||
		origin.rel === "external") {
		return
	}

	// Other hosts, and protocols like mailto: and magnet:, have no host match
	const url = URL.parse(origin.href)
	if (url === null || url.host !== window.location.host) {
		return
	}

	// In-page anchors are left to the browser, it knows how to scroll to them
	if (url.pathname === window.location.pathname && url.hash !== "") {
		return
	}

	// Paths without a page of their own are served by the backend, like the API
	// and file downloads. Loading them here would replace the page the user is
	// looking at with a Not Found error while the browser navigates away
	if (find_page(url.pathname) === null) {
		return
	}

	console.log("Caught link click to", url.pathname)

	// The event has to be cancelled before the first await, after that the
	// browser has already committed to the navigation
	e.preventDefault()
	load_page(origin.href, true)
}

const popstate = (e: PopStateEvent) => {
	load_page(window.location.href, false)
}
</script>

{#snippet breadcrumbs()}
	{current_page.title}
{/snippet}

<svelte:document onclick={click}/>
<svelte:window onpopstate={popstate}/>

{#if current_page !== null}
	<current_page.component />

	{#if current_page.footer !== false}
		<Footer/>
	{/if}
{/if}