refactor!: serve the static frontend trough the backend (#520)

Co-authored-by: Alessandro (Ale) Segala <43508+ItalyPaleAle@users.noreply.github.com>

frontend/src/routes/+layout.server.ts

@@ -1,26 +0,0 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
-import AppConfigService from '$lib/services/app-config-service';
-import UserService from '$lib/services/user-service';
-import type { LayoutServerLoad } from './$types';
-
-export const load: LayoutServerLoad = async ({ cookies }) => {
-	const accessToken = cookies.get(ACCESS_TOKEN_COOKIE_NAME);
-	const userService = new UserService(accessToken);
-	const appConfigService = new AppConfigService(accessToken);
-
-	const userPromise = userService.getCurrent().catch(() => null);
-
-	const appConfigPromise = appConfigService.list().catch((e) => {
-		console.error(
-			`Failed to get application configuration: ${e.response?.data.error || e.message}`
-		);
-		return null;
-	});
-
-	const [user, appConfig] = await Promise.all([userPromise, appConfigPromise]);
-
-	return {
-		user,
-		appConfig
-	};
-};

frontend/src/routes/+layout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import ConfirmDialog from '$lib/components/confirm-dialog/confirm-dialog.svelte';
 	import Error from '$lib/components/error.svelte';
 	import Header from '$lib/components/header/header.svelte';
@@ -22,9 +21,10 @@
 
 	const { user, appConfig } = data;
 
-	if (browser && user) {
+	if (user) {
 		userStore.setUser(user);
 	}
+
 	if (appConfig) {
 		appConfigStore.set(appConfig);
 	}

frontend/src/routes/+layout.ts

@@ -0,0 +1,55 @@
+import { goto } from '$app/navigation';
+import AppConfigService from '$lib/services/app-config-service';
+import UserService from '$lib/services/user-service';
+import type { User } from '$lib/types/user.type';
+import type { LayoutLoad } from './$types';
+
+export const ssr = false;
+
+export const load: LayoutLoad = async ({ url }) => {
+	const userService = new UserService();
+	const appConfigService = new AppConfigService();
+
+	const userPromise = userService.getCurrent().catch(() => null);
+
+	const appConfigPromise = appConfigService.list().catch((e) => {
+		console.error(
+			`Failed to get application configuration: ${e.response?.data.error || e.message}`
+		);
+		return null;
+	});
+
+	const [user, appConfig] = await Promise.all([userPromise, appConfigPromise]);
+
+	const redirectPath = await getRedirectPath(url.pathname, user);
+	if (redirectPath) {
+		goto(redirectPath);
+	}
+
+	return {
+		user,
+		appConfig
+	};
+};
+
+const getRedirectPath = async (path: string, user: User | null) => {
+	const isSignedIn = !!user;
+	const isAdmin = user?.isAdmin;
+
+	const isUnauthenticatedOnlyPath =
+		path == '/login' || path.startsWith('/login/') || path == '/lc' || path.startsWith('/lc/');
+	const isPublicPath = ['/authorize', '/device', '/health', '/healthz'].includes(path);
+	const isAdminPath = path == '/settings/admin' || path.startsWith('/settings/admin/');
+
+	if (!isUnauthenticatedOnlyPath && !isPublicPath && !isSignedIn) {
+		return '/login';
+	}
+
+	if (isUnauthenticatedOnlyPath && isSignedIn) {
+		return '/settings';
+	}
+
+	if (isAdminPath && !isAdmin) {
+		return '/settings';
+	}
+};

frontend/src/routes/authorize/+page.ts

@@ -1,10 +1,9 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import OidcService from '$lib/services/oidc-service';
-import type { PageServerLoad } from './$types';
+import type { PageLoad } from './$types';
 
-export const load: PageServerLoad = async ({ url, cookies }) => {
+export const load: PageLoad = async ({ url }) => {
 	const clientId = url.searchParams.get('client_id');
-	const oidcService = new OidcService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
+	const oidcService = new OidcService();
 
 	const client = await oidcService.getClientMetaData(clientId!);
 

frontend/src/routes/device/+page.server.ts

@@ -1,9 +0,0 @@
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ url }) => {
-	const code = url.searchParams.get('code');
-
-	return {
-		code
-	};
-};

frontend/src/routes/device/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ url }) => {
+	const code = url.searchParams.get('code');
+
+	return {
+		code
+	};
+};

frontend/src/routes/settings/+layout.server.ts

@@ -1,37 +0,0 @@
-import { version as currentVersion } from '$app/environment';
-import { env } from '$env/dynamic/private';
-import AppConfigService from '$lib/services/app-config-service';
-import type { AppVersionInformation } from '$lib/types/application-configuration';
-import type { LayoutServerLoad } from './$types';
-
-let versionInformation: AppVersionInformation;
-let versionInformationLastUpdated: number;
-
-export const load: LayoutServerLoad = async () => {
-	if (env.UPDATE_CHECK_DISABLED === 'true') {
-		return {
-			versionInformation: {
-				currentVersion: currentVersion
-			} satisfies AppVersionInformation
-		};
-	}
-
-	const appConfigService = new AppConfigService();
-
-	// Cache the version information for 3 hours
-	const cacheExpired =
-		versionInformationLastUpdated &&
-		Date.now() - versionInformationLastUpdated > 1000 * 60 * 60 * 3;
-
-	if (!versionInformation || cacheExpired) {
-		versionInformation = await appConfigService.getVersionInformation();
-		if (versionInformation.newestVersion == null) {
-			console.error('Failed to fetch version information. Trying again in 3 hours.');
-		}
-		versionInformationLastUpdated = Date.now();
-	}
-
-	return {
-		versionInformation
-	};
-};

frontend/src/routes/settings/+layout.ts

@@ -0,0 +1,17 @@
+import versionService from '$lib/services/version-service';
+import type { AppVersionInformation } from '$lib/types/application-configuration';
+import type { LayoutLoad } from './$types';
+
+export const prerender = false;
+
+export const load: LayoutLoad = async () => {
+	const versionInformation: AppVersionInformation = {
+		currentVersion: versionService.getCurrentVersion(),
+		newestVersion: await versionService.getNewestVersion(),
+		isUpToDate: await versionService.isUpToDate()
+	};
+
+	return {
+		versionInformation
+	};
+};

frontend/src/routes/settings/account/+page.server.ts

@@ -1,20 +0,0 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
-import UserService from '$lib/services/user-service';
-import WebAuthnService from '$lib/services/webauthn-service';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ cookies }) => {
-	const accessToken = cookies.get(ACCESS_TOKEN_COOKIE_NAME);
-	const webauthnService = new WebAuthnService(accessToken);
-	const userService = new UserService(accessToken);
-
-	const [account, passkeys] = await Promise.all([
-		userService.getCurrent(),
-		webauthnService.listCredentials()
-	]);
-
-	return {
-		account,
-		passkeys
-	};
-};

frontend/src/routes/settings/account/+page.ts

@@ -0,0 +1,18 @@
+import UserService from '$lib/services/user-service';
+import WebAuthnService from '$lib/services/webauthn-service';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	const webauthnService = new WebAuthnService();
+	const userService = new UserService();
+
+	const [account, passkeys] = await Promise.all([
+		userService.getCurrent(),
+		webauthnService.listCredentials()
+	]);
+
+	return {
+		account,
+		passkeys
+	};
+};

frontend/src/routes/settings/admin/api-keys/+page.ts

@@ -1,10 +1,9 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import ApiKeyService from '$lib/services/api-key-service';
 import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
-import type { PageServerLoad } from './$types';
+import type { PageLoad } from './$types';
 
-export const load: PageServerLoad = async ({ cookies }) => {
-	const apiKeyService = new ApiKeyService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
+export const load: PageLoad = async () => {
+	const apiKeyService = new ApiKeyService();
 
 	const apiKeysRequestOptions: SearchPaginationSortRequest = {
 		sort: {

frontend/src/routes/settings/admin/application-configuration/+page.server.ts

@@ -1,9 +0,0 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
-import AppConfigService from '$lib/services/app-config-service';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ cookies }) => {
-	const appConfigService = new AppConfigService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
-	const appConfig = await appConfigService.list(true);
-	return { appConfig };
-};

frontend/src/routes/settings/admin/application-configuration/+page.ts

@@ -0,0 +1,8 @@
+import AppConfigService from '$lib/services/app-config-service';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	const appConfigService = new AppConfigService();
+	const appConfig = await appConfigService.list(true);
+	return { appConfig };
+};

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
 	import CheckboxWithLabel from '$lib/components/form/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form/form-input.svelte';
@@ -8,6 +7,7 @@
 	import * as Select from '$lib/components/ui/select';
 	import { m } from '$lib/paraglide/messages';
 	import AppConfigService from '$lib/services/app-config-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
@@ -22,7 +22,6 @@
 	} = $props();
 
 	const appConfigService = new AppConfigService();
-	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
 	const tlsOptions = {
 		none: 'None',
 		starttls: 'StartTLS',
@@ -96,7 +95,7 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<fieldset disabled={uiConfigDisabled}>
+	<fieldset disabled={$appConfigStore.uiConfigDisabled}>
 		<h4 class="text-lg font-semibold">{m.smtp_configuration()}</h4>
 		<div class="mt-4 grid grid-cols-1 items-end gap-5 md:grid-cols-2">
 			<FormInput label={m.smtp_host()} bind:input={$inputs.smtpHost} />
@@ -160,6 +159,6 @@
 		<Button isLoading={isSendingTestEmail} variant="secondary" onclick={onTestEmail}
 			>{m.send_test_email()}</Button
 		>
-		<Button type="submit" disabled={uiConfigDisabled}>{m.save()}</Button>
+		<Button type="submit" disabled={$appConfigStore.uiConfigDisabled}>{m.save()}</Button>
 	</div>
 </form>

frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import CheckboxWithLabel from '$lib/components/form/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { m } from '$lib/paraglide/messages';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
@@ -17,7 +17,6 @@
 		callback: (appConfig: Partial<AllAppConfig>) => Promise<void>;
 	} = $props();
 
-	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
 	let isLoading = $state(false);
 
 	const updatedAppConfig = {
@@ -47,7 +46,7 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<fieldset class="flex flex-col gap-5" disabled={uiConfigDisabled}>
+	<fieldset class="flex flex-col gap-5" disabled={$appConfigStore.uiConfigDisabled}>
 		<div class="flex flex-col gap-5">
 			<FormInput label={m.application_name()} bind:input={$inputs.appName} />
 			<FormInput

frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import CheckboxWithLabel from '$lib/components/form/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { m } from '$lib/paraglide/messages';
 	import AppConfigService from '$lib/services/app-config-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { createForm } from '$lib/utils/form-util';
@@ -20,7 +20,6 @@
 	} = $props();
 
 	const appConfigService = new AppConfigService();
-	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
 
 	let ldapEnabled = $state(appConfig.ldapEnabled);
 	let ldapSyncing = $state(false);
@@ -106,7 +105,7 @@
 
 <form onsubmit={onSubmit}>
 	<h4 class="text-lg font-semibold">{m.client_configuration()}</h4>
-	<fieldset disabled={uiConfigDisabled}>
+	<fieldset disabled={$appConfigStore.uiConfigDisabled}>
 		<div class="mt-4 grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 			<FormInput
 				label={m.ldap_url()}
@@ -215,13 +214,13 @@
 
 	<div class="mt-8 flex flex-wrap justify-end gap-3">
 		{#if ldapEnabled}
-			<Button variant="secondary" onclick={onDisable} disabled={uiConfigDisabled}
+			<Button variant="secondary" onclick={onDisable} disabled={$appConfigStore.uiConfigDisabled}
 				>{m.disable()}</Button
 			>
 			<Button variant="secondary" onclick={syncLdap} isLoading={ldapSyncing}>{m.sync_now()}</Button>
-			<Button type="submit" disabled={uiConfigDisabled}>{m.save()}</Button>
+			<Button type="submit" disabled={$appConfigStore.uiConfigDisabled}>{m.save()}</Button>
 		{:else}
-			<Button onclick={onEnable} disabled={uiConfigDisabled}>{m.enable()}</Button>
+			<Button onclick={onEnable} disabled={$appConfigStore.uiConfigDisabled}>{m.enable()}</Button>
 		{/if}
 	</div>
 </form>

frontend/src/routes/settings/admin/oidc-clients/+page.ts

@@ -1,10 +1,9 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import OIDCService from '$lib/services/oidc-service';
 import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
-import type { PageServerLoad } from './$types';
+import type { PageLoad } from './$types';
 
-export const load: PageServerLoad = async ({ cookies }) => {
-	const oidcService = new OIDCService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
+export const load: PageLoad = async () => {
+	const oidcService = new OIDCService();
 
 	const clientsRequestOptions: SearchPaginationSortRequest = {
 		sort: {

frontend/src/routes/settings/admin/oidc-clients/[id]/+page.server.ts

@@ -1,8 +0,0 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
-import OidcService from '$lib/services/oidc-service';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ params, cookies }) => {
-	const oidcService = new OidcService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
-	return await oidcService.getClient(params.id);
-};

frontend/src/routes/settings/admin/oidc-clients/[id]/+page.ts

@@ -0,0 +1,7 @@
+import OidcService from '$lib/services/oidc-service';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const oidcService = new OidcService();
+	return await oidcService.getClient(params.id);
+};

frontend/src/routes/settings/admin/user-groups/+page.ts

@@ -1,10 +1,9 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import UserGroupService from '$lib/services/user-group-service';
 import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
-import type { PageServerLoad } from './$types';
+import type { PageLoad } from './$types';
 
-export const load: PageServerLoad = async ({ cookies }) => {
-	const userGroupService = new UserGroupService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
+export const load: PageLoad = async () => {
+	const userGroupService = new UserGroupService();
 
 	const userGroupsRequestOptions: SearchPaginationSortRequest = {
 		sort: {

frontend/src/routes/settings/admin/user-groups/[id]/+page.server.ts

@@ -1,10 +0,0 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
-import UserGroupService from '$lib/services/user-group-service';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ params, cookies }) => {
-	const userGroupService = new UserGroupService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
-	const userGroup = await userGroupService.get(params.id);
-
-	return { userGroup };
-};

frontend/src/routes/settings/admin/user-groups/[id]/+page.ts

@@ -0,0 +1,9 @@
+import UserGroupService from '$lib/services/user-group-service';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const userGroupService = new UserGroupService();
+	const userGroup = await userGroupService.get(params.id);
+
+	return { userGroup };
+};

frontend/src/routes/settings/admin/users/+page.ts

@@ -1,10 +1,9 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import UserService from '$lib/services/user-service';
 import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
-import type { PageServerLoad } from './$types';
+import type { PageLoad } from './$types';
 
-export const load: PageServerLoad = async ({ cookies }) => {
-	const userService = new UserService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
+export const load: PageLoad = async () => {
+	const userService = new UserService();
 
 	const usersRequestOptions: SearchPaginationSortRequest = {
 		sort: {

frontend/src/routes/settings/admin/users/[id]/+page.server.ts

@@ -1,12 +0,0 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
-import UserService from '$lib/services/user-service';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ params, cookies }) => {
-	const userService = new UserService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
-	const user = await userService.get(params.id);
-
-	return {
-		user
-	};
-};

frontend/src/routes/settings/admin/users/[id]/+page.ts

@@ -0,0 +1,11 @@
+import UserService from '$lib/services/user-service';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const userService = new UserService();
+	const user = await userService.get(params.id);
+
+	return {
+		user
+	};
+};

frontend/src/routes/settings/audit-log/+page.ts

@@ -1,10 +1,9 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import AuditLogService from '$lib/services/audit-log-service';
 import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
-import type { PageServerLoad } from './$types';
+import type { PageLoad } from './$types';
 
-export const load: PageServerLoad = async ({ cookies }) => {
-	const auditLogService = new AuditLogService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
+export const load: PageLoad = async () => {
+	const auditLogService = new AuditLogService();
 	const auditLogsRequestOptions: SearchPaginationSortRequest = {
 		sort: {
 			column: 'createdAt',

frontend/src/routes/settings/audit-log/global/+page.ts

@@ -1,10 +1,9 @@
-import { ACCESS_TOKEN_COOKIE_NAME } from '$lib/constants';
 import AuditLogService from '$lib/services/audit-log-service';
 import type { SearchPaginationSortRequest } from '$lib/types/pagination.type';
-import type { PageServerLoad } from './$types';
+import type { PageLoad } from './$types';
 
-export const load: PageServerLoad = async ({ cookies }) => {
-	const auditLogService = new AuditLogService(cookies.get(ACCESS_TOKEN_COOKIE_NAME));
+export const load: PageLoad = async () => {
+	const auditLogService = new AuditLogService();
 
 	const requestOptions: SearchPaginationSortRequest = {
 		sort: {