add base before URL to allow easy hosting with a single domain name

backend/ciso_assistant/VERSION

@@ -1 +1 @@
-1.0.0
+1.0.1

backend/ciso_assistant/settings.py

@@ -23,6 +23,7 @@
 LOG_FORMAT = os.environ.get("LOG_FORMAT", "plain")
 
 CISO_ASSISTANT_URL = os.environ.get("CISO_ASSISTANT_URL", "http://localhost:5173")
+BASE_NAME = os.environ.get("BASE_NAME", "")
 
 
 def set_ciso_assistant_url(_, __, event_dict):

backend/iam/models.py

@@ -27,6 +27,7 @@
 from django.db.models.signals import post_save
 from django.dispatch import receiver
 from ciso_assistant.settings import (
+    BASE_NAME,
     CISO_ASSISTANT_URL,
     EMAIL_HOST,
     EMAIL_HOST_USER,
@@ -376,7 +377,7 @@ def mailing(self, email_template_name, subject, pk=False):
         """
         header = {
             "email": self.email,
-            "root_url": CISO_ASSISTANT_URL,
+            "root_url": CISO_ASSISTANT_URL + "/" + BASE_NAME if BASE_NAME else CISO_ASSISTANT_URL,
             "uid": urlsafe_base64_encode(force_bytes(self.pk)),
             "user": self,
             "token": default_token_generator.make_token(self),

frontend/src/hooks.server.ts

@@ -1,6 +1,7 @@
 import { BASE_API_URL } from '$lib/utils/constants';
 import type { User } from '$lib/utils/types';
 import { redirect, type Handle, type RequestEvent, type HandleFetch } from '@sveltejs/kit';
+import { base } from '$app/paths';
 
 async function ensureCsrfToken(event: RequestEvent): Promise<string> {
 	let csrfToken = event.cookies.get('csrftoken') || '';
@@ -37,7 +38,7 @@ async function validateUserSession(event: RequestEvent): Promise<User | null> {
 		event.cookies.delete('sessionid', {
 			path: '/'
 		});
-		redirect(302, `/login?next=${event.url.pathname}`);
+		redirect(302, `${base}/login?next=${event.url.pathname}`);
 	}
 	return res.json();
 }

frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte

@@ -5,6 +5,7 @@
 	import { listViewFields } from '$lib/utils/table';
 	import * as m from '$paraglide/messages';
 	import { languageTag } from '$paraglide/runtime';
+	import { base } from '$app/paths';
 
 	let crumbs: Array<{ label: string; href: string; icon?: string }> = [];
 
@@ -21,8 +22,7 @@
 
 	$: {
 		// Remove zero-length tokens.
-		const tokens = $page.url.pathname.split('/').filter((t) => t !== '');
-		let title = '';
+		const tokens = $page.url.pathname.split('/').filter((t) => t !== '' && t !== base.replace('/', ''));
 
 		// Create { label, href } pairs for each token.
 		let tokenPath = '';
@@ -40,7 +40,7 @@
 			}
 			return {
 				label: $page.data.label || t,
-				href: Object.keys(listViewFields).includes(tokens[0]) ? tokenPath : null
+				href: Object.keys(listViewFields).includes(tokens[0]) ? base + tokenPath : null
 			};
 		});
 

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -72,7 +72,7 @@
 		const rowMetaData = $rows[rowIndex].meta;
 		/** @event {rowMetaData} selected - Fires when a table row is clicked. */
 		if (!rowMetaData[identifierField] || !URLModel) return;
-		goto(`/${URLModel}/${rowMetaData[identifierField]}`);
+		goto(`${base}/${URLModel}/${rowMetaData[identifierField]}`);
 	}
 
 	// Row Keydown Handler
@@ -108,6 +108,7 @@
 	import Search from './Search.svelte';
 	import Th from './Th.svelte';
 	import ThFilter from './ThFilter.svelte';
+	import { base } from '$app/paths';
 	$: data = source.body.map((item: Record<string, any>, index: number) => {
 		return { ...item, meta: source.meta ? { ...source.meta[index] } : undefined };
 	});
@@ -223,7 +224,7 @@
                               (item) => item.field === key
                             )?.urlModel
                           }/${val.id}`}
-                          <a href={itemHref} class="anchor" on:click={e => e.stopPropagation()}>{val.str}</a>
+                          <a href={base}{itemHref} class="anchor" on:click={e => e.stopPropagation()}>{val.str}</a>
                         {:else}
                           {val}
                         {/if}
@@ -235,7 +236,7 @@
                     {@const itemHref = `/${URL_MODEL_MAP[URLModel]['foreignKeyFields']?.find(
                       (item) => item.field === key
                     )?.urlModel}/${value.id}`}
-                    <a href={itemHref} class="anchor" on:click={e => e.stopPropagation()}>{value.str ?? '-'}</a>
+                    <a href={base}{itemHref} class="anchor" on:click={e => e.stopPropagation()}>{value.str ?? '-'}</a>
                   {:else}
                     {value.str ?? '-'}
                   {/if}
@@ -268,7 +269,7 @@
                 model={URL_MODEL_MAP[URLModel]}
                 {URLModel}
                 detailURL={`/${URLModel}/${row.meta[identifierField]}`}
-                editURL={!(row.meta.builtin || row.meta.urn) ? `/${URLModel}/${row.meta[identifierField]}/edit?next=${$page.url.pathname}` : undefined}
+                editURL={!(row.meta.builtin || row.meta.urn) ? `${base}/${URLModel}/${row.meta[identifierField]}/edit?next=${base}${$page.url.pathname}` : undefined}
                 {row}
                 hasBody={$$slots.actionsBody}
                 {identifierField}

frontend/src/lib/components/SideBar/SideBarFooter.svelte

@@ -7,6 +7,7 @@
 	import { LOCALE_MAP } from '$lib/utils/locales';
 	import * as m from '$paraglide/messages';
 	import { setCookie } from '$lib/utils/cookies';
+	import { base } from '$app/paths';
 
 	const language: any = {
 		french: m.french(),
@@ -69,7 +70,7 @@
 			data-popup="popupUser"
 		>
 			<a
-				href="/my-profile"
+				href="{base}/my-profile"
 				class="unstyled cursor-pointer flex items-center gap-2 w-full px-4 py-2.5 text-left text-sm hover:bg-gray-100 disabled:text-gray-500 text-gray-800"
 				data-testid="profile-button"><i class="fa-solid fa-address-card mr-2" />{m.myProfile()}</a
 			>
@@ -90,7 +91,7 @@
 				class="cursor-pointer flex items-center gap-2 w-full px-4 py-2.5 text-left text-sm hover:bg-gray-100 disabled:text-gray-500 text-gray-800"
 				data-testid="about-button"><i class="fa-solid fa-circle-info mr-2" />{m.aboutCiso()}</button
 			>
-			<form action="/logout" method="POST">
+			<form action="{base}/logout" method="POST">
 				<button class="w-full" type="submit" data-testid="logout-button">
 					<span
 						class="flex items-center gap-2 w-full px-4 py-2.5 text-left text-sm hover:bg-gray-100 disabled:text-gray-500 text-gray-800"

frontend/src/lib/components/SideBar/SideBarItem.svelte

@@ -1,24 +1,21 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import type { ModalSettings } from '@skeletonlabs/skeleton';
-	import { getModalStore } from '@skeletonlabs/skeleton';
 	import { localItems } from '$lib/utils/locales';
 	import { languageTag } from '$paraglide/runtime';
 	import * as m from '$paraglide/messages';
+	import { base } from '$app/paths';
 
 	export let item: any; // TODO: type this
 
-	const modalStore = getModalStore();
-
 	$: classesActive = (href: string) =>
-		href === $page.url.pathname
+		$page.url.pathname.includes(href)
 			? 'bg-primary-100 text-primary-800'
 			: 'hover:bg-primary-50 text-gray-800 ';
 </script>
 
 {#each item as item}
 	<a
-		href={item.href}
+		href={base}{item.href}
 		class="unstyled flex whitespace-nowrap items-center py-2 text-sm font-normal rounded-token {classesActive(
 			item.href ?? ''
 		)}"

frontend/src/lib/components/TableRowActions/TableRowActions.svelte

@@ -9,6 +9,7 @@
 	import type { AnyZodObject } from 'zod';
 
 	import * as m from '$paraglide/messages';
+	import { base } from '$app/paths';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -67,14 +68,14 @@
 	{#if !hasBody}
 		{#if displayDetail}
 			<a
-				href={detailURL}
+				href={base}{detailURL}
 				class="unstyled cursor-pointer hover:text-primary-500"
 				data-testid="tablerow-detail-button"><i class="fa-solid fa-eye" /></a
 			>
 		{/if}
 		{#if displayEdit}
 			<a
-				href={editURL}
+				href={base}{editURL}
 				on:click={stopPropagation}
 				class="unstyled cursor-pointer hover:text-primary-500"
 				data-testid="tablerow-edit-button"><i class="fa-solid fa-pen-to-square" /></a

frontend/src/routes/(app)/+layout.server.ts

@@ -2,11 +2,12 @@ import type { LayoutServerLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
 import { loadFlash } from 'sveltekit-flash-message/server';
 import { setLanguageTag, sourceLanguageTag } from '$paraglide/runtime';
+import { base } from '$app/paths';
 
 // get `locals.user` and pass it to the `page` store
 export const load = loadFlash(async ({ locals, url, cookies }) => {
 	if (!locals.user && !url.pathname.includes('/login')) {
-		redirect(302, `/login?next=${url.pathname}`);
+		redirect(302, `${base}/login?next=${url.pathname}`);
 	}
 	setLanguageTag(cookies.get('lang') || sourceLanguageTag)
 	return { user: locals.user };

frontend/src/routes/(app)/+page.server.ts

@@ -1,6 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import { base } from '$app/paths';
 
 export const load: PageServerLoad = async () => {
-	redirect(301, '/analytics');
+	redirect(301, `${base}/analytics`);
 };

frontend/src/routes/(app)/[model=urlmodel]/+page.svelte

@@ -11,6 +11,7 @@
 	import * as m from '$paraglide/messages';
 	import { localItems, capitalizeFirstLetter } from '$lib/utils/locales';
 	import { languageTag } from '$paraglide/runtime';
+	import { base } from '$app/paths';
 
 	export let data: PageData;
 
@@ -50,11 +51,11 @@
 						{localItems(languageTag())['add' + capitalizeFirstLetter(data.model.localName)]}
 					</button>
 				{:else if data.URLModel === 'risk-matrices'}
-					<a href="/libraries" class="btn variant-filled-primary" data-testid="add-button"
+					<a href="{base}/libraries" class="btn variant-filled-primary" data-testid="add-button"
 						><i class="fa-solid fa-file-import mr-2" />{m.importMatrices()}</a
 					>
 				{:else if data.URLModel === 'frameworks'}
-					<a href="/libraries" class="btn variant-filled-primary" data-testid="add-button"
+					<a href="{base}/libraries" class="btn variant-filled-primary" data-testid="add-button"
 						><i class="fa-solid fa-file-import mr-2" />{m.importFrameworks()}</a
 					>
 				{/if}

frontend/src/routes/(app)/[model=urlmodel]/[id=uuid]/+page.svelte

@@ -19,6 +19,7 @@
 	import { languageTag } from '$paraglide/runtime.js';
 	import * as m from '$paraglide/messages.js';
 	import { ISO_8601_REGEX } from '$lib/utils/constants';
+	import { base } from '$app/paths';
 
 	const modalStore: ModalStore = getModalStore();
 	const toastStore: ToastStore = getToastStore();
@@ -199,7 +200,7 @@
 																(item) => item.field === key
 															)?.urlModel
 														}/${val.id}`}
-														<a href={itemHref} class="anchor">{val.str}</a>
+														<a href="{base}{itemHref}" class="anchor">{val.str}</a>
 													{:else}
 														{value}
 													{/if}
@@ -215,9 +216,9 @@
 											(item) => item.field === key
 										)?.urlModel
 									}/${value.id}`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<a href="{base}{itemHref}" class="anchor">{value.str}</a>
 								{:else if isURL(value) && !value.startsWith('urn')}
-									<a href={value} target="_blank" class="anchor">{value}</a>
+									<a href="{base}{value}" target="_blank" class="anchor">{value}</a>
 								{:else if ISO_8601_REGEX.test(value)}
 									{new Date(value).toLocaleString(languageTag())}
 								{:else if localItems(languageTag())[toCamelCase((value.str || value.name) ?? value)]}
@@ -235,7 +236,7 @@
 		</div>
 		{#if displayEditButton()}
 			<a
-				href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
+				href="{`${base}${$page.url.pathname}/edit?next=${base}${$page.url.pathname}`}"
 				class="btn variant-filled-primary h-fit"
 				><i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />{m.edit()}</a
 			>

frontend/src/routes/(app)/analyses-registry/+page.svelte

@@ -6,6 +6,7 @@
 
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
 	import { popup } from '@skeletonlabs/skeleton';
+	import { base } from '$app/paths';
 
 	function stopPropagation(event: Event): void {
 		event.stopPropagation();
@@ -23,7 +24,7 @@
 		<ModelTable source={data.table} URLModel={data.URLModel}>
 			<span slot="actions" let:meta class="space-x-2 whitespace-nowrap">
 				<a
-					href="/risk-assessments/{meta.id}/plan"
+					href="{base}/risk-assessments/{meta.id}/plan"
 					class="unstyled cursor-pointer text-xl text-slate-500 hover:text-indigo-700"
 					on:click={stopPropagation}><i class="fa-solid fa-heart-pulse" /></a
 				>
@@ -38,23 +39,23 @@
 				>
 					<p class="block px-4 py-2 text-sm text-gray-800">Risk risk_assessment</p>
 					<a
-						href="/risk-assessments/{meta.id}/export/pdf"
+						href="{base}/risk-assessments/{meta.id}/export/pdf"
 						class="block px-4 py-2 text-sm text-gray-800 hover:bg-gray-200"
 						on:click={stopPropagation}>... as PDF</a
 					>
 					<a
-						href="/risk-assessments/{meta.id}/export/csv"
+						href="{base}/risk-assessments/{meta.id}/export/csv"
 						class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"
 						on:click={stopPropagation}>... as csv</a
 					>
 					<p class="block px-4 py-2 text-sm text-gray-800">Treatment plan</p>
 					<a
-						href="/risk-assessments/{meta.id}/plan/export/pdf"
+						href="{base}/risk-assessments/{meta.id}/plan/export/pdf"
 						class="block px-4 py-2 text-sm text-gray-800 hover:bg-gray-200"
 						on:click={stopPropagation}>... as PDF</a
 					>
 					<a
-						href="/risk-assessments/{meta.id}/plan/export/csv"
+						href="{base}/risk-assessments/{meta.id}/plan/export/csv"
 						class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200"
 						on:click={stopPropagation}>... as csv</a
 					>

frontend/src/routes/(app)/analytics/+page.svelte

@@ -15,6 +15,7 @@
 	import { Tab, TabGroup, tableSourceMapper } from '@skeletonlabs/skeleton';
 	import ComposerSelect from './ComposerSelect.svelte';
 	import CounterCard from './CounterCard.svelte';
+	import { base } from '$app/paths';
 
 	interface Counters {
 		domains: number;
@@ -110,37 +111,37 @@
 							count={counters.domains}
 							label={m.domains()}
 							faIcon="fa-solid fa-diagram-project"
-							href="/folders"
+							href="{base}/folders"
 						/>
 						<CounterCard
 							count={counters.projects}
 							label={m.projects()}
 							faIcon="fa-solid fa-cubes"
-							href="/projects"
+							href="{base}/projects"
 						/>
 						<CounterCard
 							count={counters.applied_controls}
 							label={m.appliedControls()}
 							faIcon="fa-solid fa-fire-extinguisher"
-							href="/applied-controls"
+							href="{base}/applied-controls"
 						/>
 						<CounterCard
 							count={counters.risk_assessments}
 							label={m.riskAssessments()}
 							faIcon="fa-solid fa-magnifying-glass-chart"
-							href="/risk-assessments"
+							href="{base}/risk-assessments"
 						/>
 						<CounterCard
 							count={counters.compliance_assessments}
 							label={m.complianceAssessments()}
 							faIcon="fa-solid fa-arrows-to-eye"
-							href="/compliance-assessments"
+							href="{base}/compliance-assessments"
 						/>
 						<CounterCard
 							count={counters.policies}
 							label={m.policies()}
 							faIcon="fas fa-file-alt"
-							href="/policies"
+							href="{base}/policies"
 						/>
 					</div>
 				</section>
@@ -308,12 +309,12 @@
 									</div>
 									<div class="absolute top-0 right-0 mt-2 space-x-1">
 										<a
-											href="/compliance-assessments/{compliance_assessment.id}/export"
+											href="{base}/compliance-assessments/{compliance_assessment.id}/export"
 											class="btn variant-filled-primary"
 											><i class="fa-solid fa-download mr-2" /> {m.exportButton()}
 										</a>
 										<a
-											href="/compliance-assessments/{compliance_assessment.id}/edit"
+											href="{base}/compliance-assessments/{compliance_assessment.id}/edit"
 											class="btn variant-filled-primary"
 											><i class="fa-solid fa-edit mr-2" /> {m.edit()}
 										</a>