From cf77f1b13f8b5e86d251d0dea1092e0d2c18b476 Mon Sep 17 00:00:00 2001
From: Mathis Hofer <hofer@puzzle.ch>
Date: Thu, 12 Dec 2024 16:04:06 +0100
Subject: [PATCH] Make footer content accessible without auth under
 /unrestricted #190

---
 README.md                                     |   1 +
 cypress/e2e/footer.cy.ts                      | 190 ++++++++++++------
 doc/unrestricted-content.md                   |  17 ++
 src/components/Content.ts                     |   3 +
 src/components/Header.ts                      |   7 +-
 src/components/Header/NavItemLink.ts          |  32 ---
 src/components/Portal.ts                      |   5 +-
 .../{Header => header}/Hamburger.ts           |   0
 .../{Header => header}/LanguageSwitcher.ts    |   0
 .../{Header => header}/MobileNav.ts           |  10 +-
 src/components/{Header => header}/Nav.ts      |   1 +
 .../{Header => header}/NavGroupDropdown.ts    |   0
 .../{Header => header}/NavGroupToggle.ts      |   1 +
 .../NotificationsDropdown.ts                  |   8 +-
 .../{Header => header}/NotificationsToggle.ts |  13 +-
 .../{Header => header}/ServiceNav.ts          |   7 +-
 .../SubstitutionsDropdown.ts                  |   0
 .../{Header => header}/SubstitutionsToggle.ts |   9 +-
 .../{Header => header}/UserSettings.ts        |   0
 src/components/index.ts                       |  20 --
 .../unrestricted/ContentUnrestricted.ts       | 104 ++++++++++
 .../unrestricted/HeaderUnrestricted.ts        | 100 +++++++++
 .../unrestricted/PortalUnrestricted.ts        |  68 +++++++
 .../content}/Contact.ts                       |   2 +-
 .../content}/Imprint.ts                       |   6 +-
 .../{Footer => unrestricted/content}/Legal.ts |   4 +-
 src/index.ts                                  |   2 +-
 src/unrestricted.ts                           |   1 +
 src/utils/routing.ts                          |   2 +-
 unrestricted/index.html                       |  30 +++
 vite.config.ts                                |   9 +
 31 files changed, 508 insertions(+), 144 deletions(-)
 create mode 100644 doc/unrestricted-content.md
 delete mode 100644 src/components/Header/NavItemLink.ts
 rename src/components/{Header => header}/Hamburger.ts (100%)
 rename src/components/{Header => header}/LanguageSwitcher.ts (100%)
 rename src/components/{Header => header}/MobileNav.ts (97%)
 rename src/components/{Header => header}/Nav.ts (98%)
 rename src/components/{Header => header}/NavGroupDropdown.ts (100%)
 rename src/components/{Header => header}/NavGroupToggle.ts (98%)
 rename src/components/{Header => header}/NotificationsDropdown.ts (96%)
 rename src/components/{Header => header}/NotificationsToggle.ts (92%)
 rename src/components/{Header => header}/ServiceNav.ts (90%)
 rename src/components/{Header => header}/SubstitutionsDropdown.ts (100%)
 rename src/components/{Header => header}/SubstitutionsToggle.ts (96%)
 rename src/components/{Header => header}/UserSettings.ts (100%)
 delete mode 100644 src/components/index.ts
 create mode 100644 src/components/unrestricted/ContentUnrestricted.ts
 create mode 100644 src/components/unrestricted/HeaderUnrestricted.ts
 create mode 100644 src/components/unrestricted/PortalUnrestricted.ts
 rename src/components/{Footer => unrestricted/content}/Contact.ts (92%)
 rename src/components/{Footer => unrestricted/content}/Imprint.ts (88%)
 rename src/components/{Footer => unrestricted/content}/Legal.ts (98%)
 create mode 100644 src/unrestricted.ts
 create mode 100644 unrestricted/index.html

diff --git a/README.md b/README.md
index 5e89d4f5..5edd6b54 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,7 @@ Download the [latest build](https://bkd-mba-fbi.github.io/evento-portal/evento-p
 - [Browser Testing](./doc/browser-testing.md) – Support & BrowserStack.com
 - [Progressive Web App (PWA)](./doc/pwa.md) – Installability & offline support
 - [iframe Limitations & Workarounds](./doc/iframe.md) – Implementation details (iframe.js)
+- [Unrestricted Content Pages](./doc/unrestricted-content.md) – Footer content
 
 ### Operations
 
diff --git a/cypress/e2e/footer.cy.ts b/cypress/e2e/footer.cy.ts
index ad7c215e..f32fcf98 100644
--- a/cypress/e2e/footer.cy.ts
+++ b/cypress/e2e/footer.cy.ts
@@ -3,88 +3,158 @@ describe("Footer", () => {
     cy.resizeToDesktop();
   });
 
-  describe("de", () => {
-    beforeEach(() => {
-      cy.login({ locale: "de-CH", roles: ["TeacherRole"], permissions: [] });
-    });
+  describe("authenticated", () => {
+    describe("de", () => {
+      beforeEach(() => {
+        cy.login({ locale: "de-CH", roles: ["TeacherRole"], permissions: [] });
+      });
 
-    it("renders the footer with links to contact, legal and imprint pages", () => {
-      cy.visitPortal("/index.html");
+      it("renders the footer with links to contact, legal and imprint pages", () => {
+        cy.visitPortal("/");
 
-      cy.get("bkd-footer").within(() => {
-        cy.get("a").contains("Kontakt");
-        cy.get("a").contains("Rechtliche Hinweise");
-        cy.get("a").contains("Impressum");
+        cy.get("bkd-footer").within(() => {
+          cy.get("a").contains("Kontakt");
+          cy.get("a").contains("Rechtliche Hinweise");
+          cy.get("a").contains("Impressum");
+        });
       });
-    });
 
-    it("renders the static contact page", () => {
-      cy.visitPortal("/index.html");
-      cy.get("bkd-footer").find("a").contains("Kontakt").click();
+      it("renders the static contact page", () => {
+        cy.visitPortal("/");
+        cy.get("bkd-footer").find("a").contains("Kontakt").click();
 
-      cy.get("h1").contains("Kontakt", {});
-      cy.contains("an die zuständige Stelle in ihrer Schule");
-      cy.get("iframe").should("not.exist");
-    });
+        cy.get("h1").contains("Kontakt", {});
+        cy.contains("an die zuständige Stelle in ihrer Schule");
+        cy.get("iframe").should("not.exist");
+      });
 
-    it("renders the static legal page", () => {
-      cy.visitPortal("/index.html");
-      cy.get("bkd-footer").find("a").contains("Rechtliche Hinweise").click();
+      it("renders the static legal page", () => {
+        cy.visitPortal("/");
+        cy.get("bkd-footer").find("a").contains("Rechtliche Hinweise").click();
 
-      cy.get("h1").contains("Rechtliche Hinweise", {});
-      cy.contains("Haftungsausschluss");
-      cy.get("iframe").should("not.exist");
+        cy.get("h1").contains("Rechtliche Hinweise", {});
+        cy.contains("Haftungsausschluss");
+        cy.get("iframe").should("not.exist");
+      });
+
+      it("renders the static imprint page", () => {
+        cy.visitPortal("/");
+        cy.get("bkd-footer").find("a").contains("Impressum").click();
+
+        cy.get("h1").contains("Impressum", {});
+        cy.contains("Inhaltsverantwortung");
+        cy.get("iframe").should("not.exist");
+      });
     });
 
-    it("renders the static imprint page", () => {
-      cy.visitPortal("/index.html");
-      cy.get("bkd-footer").find("a").contains("Impressum").click();
+    describe("fr", () => {
+      beforeEach(() => {
+        cy.login({ locale: "fr-CH", roles: ["TeacherRole"], permissions: [] });
+      });
+
+      it("renders the footer with links to contact, legal and imprint pages", () => {
+        cy.visitPortal("/?locale=fr-CH");
+        cy.get("bkd-footer").within(() => {
+          cy.get("a").contains("Contact");
+          cy.get("a").contains("Mentions légales");
+          cy.get("a").contains("Impressum");
+        });
+      });
+
+      it("renders the static contact page", () => {
+        cy.visitPortal("/?locale=fr-CH");
+        cy.get("bkd-footer").find("a").contains("Contact").click();
+
+        cy.get("h1").contains("Contact", {});
+        cy.contains("contacter le service compétent de leur établissement");
+        cy.get("iframe").should("not.exist");
+      });
+
+      it("renders the static legal page", () => {
+        cy.visitPortal("/?locale=fr-CH");
+        cy.get("bkd-footer").find("a").contains("Mentions légales").click();
+
+        cy.get("h1").contains("Mentions légales", {});
+        cy.contains("Exclusion de la responsabilité");
+        cy.get("iframe").should("not.exist");
+      });
+
+      it("renders the static imprint page", () => {
+        cy.visitPortal("/?locale=fr-CH");
+        cy.get("bkd-footer").find("a").contains("Impressum").click();
 
-      cy.get("h1").contains("Impressum", {});
-      cy.contains("Inhaltsverantwortung");
-      cy.get("iframe").should("not.exist");
+        cy.get("h1").contains("Impressum", {});
+        cy.contains("Responsabilité du contenu");
+        cy.get("iframe").should("not.exist");
+      });
     });
   });
 
-  describe("fr", () => {
-    beforeEach(() => {
-      cy.login({ locale: "fr-CH", roles: ["TeacherRole"], permissions: [] });
-    });
+  describe("unauthenticated via /unrestricted/", () => {
+    describe("de", () => {
+      it("renders the static contact page", () => {
+        cy.visit("/unrestricted/?locale=de-CH&module=contact");
 
-    it("renders the footer with links to contact, legal and imprint pages", () => {
-      cy.visitPortal("/index.html?locale=fr-CH");
-      cy.get("bkd-footer").within(() => {
-        cy.get("a").contains("Contact");
-        cy.get("a").contains("Mentions légales");
-        cy.get("a").contains("Impressum");
+        cy.get("h1").contains("Kontakt", {});
+        cy.contains("an die zuständige Stelle in ihrer Schule");
       });
-    });
 
-    it("renders the static contact page", () => {
-      cy.visitPortal("/index.html?locale=fr-CH");
-      cy.get("bkd-footer").find("a").contains("Contact").click();
+      it("renders the static legal page", () => {
+        cy.visit("/unrestricted/?locale=de-CH&module=legal");
 
-      cy.get("h1").contains("Contact", {});
-      cy.contains("contacter le service compétent de leur établissement");
-      cy.get("iframe").should("not.exist");
-    });
+        cy.get("h1").contains("Rechtliche Hinweise", {});
+        cy.contains("Haftungsausschluss");
+      });
 
-    it("renders the static legal page", () => {
-      cy.visitPortal("/index.html?locale=fr-CH");
-      cy.get("bkd-footer").find("a").contains("Mentions légales").click();
+      it("renders the static imprint page", () => {
+        cy.visit("/unrestricted/?locale=de-CH&module=imprint");
+
+        cy.get("h1").contains("Impressum", {});
+        cy.contains("Inhaltsverantwortung");
+      });
+
+      it("navigates to legal page via footer", () => {
+        cy.visit("/unrestricted/?locale=de-CH&module=contact");
+        cy.get("h1").contains("Kontakt", {});
+
+        cy.get("bkd-footer").find("a").contains("Rechtliche Hinweise").click();
+        cy.get("h1").contains("Rechtliche Hinweise", {});
+      });
 
-      cy.get("h1").contains("Mentions légales", {});
-      cy.contains("Exclusion de la responsabilité");
-      cy.get("iframe").should("not.exist");
+      it("switches language", () => {
+        cy.visit("/unrestricted/?locale=de-CH&module=contact");
+        cy.get("h1").contains("Kontakt", {});
+
+        cy.get("bkd-language-switcher").find("a").contains("fr").click();
+        cy.get("h1").contains("Contact", {});
+        cy.url().should(
+          "include",
+          "/unrestricted/?locale=fr-CH&module=contact",
+        );
+      });
     });
 
-    it("renders the static imprint page", () => {
-      cy.visitPortal("/index.html?locale=fr-CH");
-      cy.get("bkd-footer").find("a").contains("Impressum").click();
+    describe("fr", () => {
+      it("renders the static contact page", () => {
+        cy.visit("/unrestricted/?locale=fr-CH&module=contact");
+
+        cy.get("h1").contains("Contact", {});
+        cy.contains("contacter le service compétent de leur établissement");
+      });
+
+      it("renders the static legal page", () => {
+        cy.visit("/unrestricted/?locale=fr-CH&module=legal");
 
-      cy.get("h1").contains("Impressum", {});
-      cy.contains("Responsabilité du contenu");
-      cy.get("iframe").should("not.exist");
+        cy.get("h1").contains("Mentions légales", {});
+        cy.contains("Exclusion de la responsabilité");
+      });
+
+      it("renders the static imprint page", () => {
+        cy.visit("/unrestricted/?locale=fr-CH&module=imprint");
+
+        cy.get("h1").contains("Impressum", {});
+        cy.contains("Responsabilité du contenu");
+      });
     });
   });
 });
diff --git a/doc/unrestricted-content.md b/doc/unrestricted-content.md
new file mode 100644
index 00000000..27f74673
--- /dev/null
+++ b/doc/unrestricted-content.md
@@ -0,0 +1,17 @@
+[back](../README.md)
+
+# Unrestricted Content Pages
+
+The pages linked in the footer (contact, legal & imprint) are rendered by the _Evento Portal_, not within the `<iframe>`. These are "static" content, that is sourced from the i18n translations.
+
+For the external OAuth login page to be able to link to these pages from its footer, there is an unrestricted version of them under the `/unrestricted` path which is accessible without being authenticated.
+
+Technically it is implemented as follows:
+
+- We have a second Vite entry point [unrestricted/index.html](../unrestricted/index.html) (see `build.rollupOptions.build` in [vite.config.ts](../vite.config.ts)).
+- This version of the app uses a separate `<bkd-portal-unrestricted>` component, that works without authentication and uses the `<bkd-header-unrestricted>` and `<bkd-content-unrestricted` components for rendering the contents for unauthenticated users.
+- The unrestricted variant has no navigation or service menu. It also does not initiate the OAuth login flow or the token renewal logic.
+- The unrestricted pages are available under the following paths:
+  - `/unrestricted/?locale=de-CH&module=contact`
+  - `/unrestricted/?locale=de-CH&module=legal`
+  - `/unrestricted/?locale=de-CH&module=imprint`
diff --git a/src/components/Content.ts b/src/components/Content.ts
index 839e92e5..2afe64ab 100644
--- a/src/components/Content.ts
+++ b/src/components/Content.ts
@@ -8,6 +8,9 @@ import { StateController } from "@lit-app/state";
 import { portalState } from "../state/portal-state";
 import { tokenState } from "../state/token-state";
 import { theme } from "../utils/theme";
+import "./unrestricted/content/Contact";
+import "./unrestricted/content/Imprint";
+import "./unrestricted/content/Legal";
 
 @customElement("bkd-content")
 @localized()
diff --git a/src/components/Header.ts b/src/components/Header.ts
index 712abb14..35083eca 100644
--- a/src/components/Header.ts
+++ b/src/components/Header.ts
@@ -9,8 +9,11 @@ import { portalState } from "../state/portal-state";
 import { buildUrl } from "../utils/routing";
 import { theme } from "../utils/theme";
 import { UserSettingsItem } from "../utils/user-settings";
-import { MobileNav } from "./Header/MobileNav";
-import { ServiceNav } from "./Header/ServiceNav";
+import { MobileNav } from "./header/MobileNav";
+import "./header/MobileNav";
+import "./header/Nav";
+import { ServiceNav } from "./header/ServiceNav";
+import "./header/ServiceNav";
 
 @customElement("bkd-header")
 @localized()
diff --git a/src/components/Header/NavItemLink.ts b/src/components/Header/NavItemLink.ts
deleted file mode 100644
index 04e032f8..00000000
--- a/src/components/Header/NavItemLink.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { localized } from "@lit/localize";
-import { NavigationItem } from "../../settings";
-import { theme } from "../../utils/theme";
-
-@customElement("bkd-nav-item-link")
-@localized()
-export class NavItemLink extends LitElement {
-  @property()
-  item?: NavigationItem;
-
-  static styles = [theme, css``];
-
-  private handleClick(event: MouseEvent): void {
-    event.preventDefault();
-  }
-
-  render() {
-    if (!this.item) return;
-
-    return html`<a href="#" @click=${this.handleClick.bind(this)}
-      >${this.item.label}</a
-    >`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "bkd-nav-item-link": NavItemLink;
-  }
-}
diff --git a/src/components/Portal.ts b/src/components/Portal.ts
index b0d2a023..33489a92 100644
--- a/src/components/Portal.ts
+++ b/src/components/Portal.ts
@@ -5,7 +5,7 @@ import { localized } from "@lit/localize";
 import { StateController, Unsubscribe } from "@lit-app/state";
 import { settings } from "../settings";
 import { portalState } from "../state/portal-state";
-import { tokenState } from "../state/token-state.ts";
+import { tokenState } from "../state/token-state";
 import {
   activateTokenForScope,
   createOAuthClient,
@@ -21,6 +21,9 @@ import {
   registerLightDomStyles,
   theme,
 } from "../utils/theme";
+import "./Content";
+import "./Footer";
+import "./Header";
 
 const oAuthClient = createOAuthClient();
 const authReady = (async function () {
diff --git a/src/components/Header/Hamburger.ts b/src/components/header/Hamburger.ts
similarity index 100%
rename from src/components/Header/Hamburger.ts
rename to src/components/header/Hamburger.ts
diff --git a/src/components/Header/LanguageSwitcher.ts b/src/components/header/LanguageSwitcher.ts
similarity index 100%
rename from src/components/Header/LanguageSwitcher.ts
rename to src/components/header/LanguageSwitcher.ts
diff --git a/src/components/Header/MobileNav.ts b/src/components/header/MobileNav.ts
similarity index 97%
rename from src/components/Header/MobileNav.ts
rename to src/components/header/MobileNav.ts
index ac09615b..783efd42 100644
--- a/src/components/Header/MobileNav.ts
+++ b/src/components/header/MobileNav.ts
@@ -9,14 +9,12 @@ import { StateController } from "@lit-app/state";
 import arrowDownIcon from "../../assets/icons/arrow-down.svg?raw";
 import arrowUpIcon from "../../assets/icons/arrow-up.svg?raw";
 import { NavigationGroup, NavigationItem, settings } from "../../settings";
-import { portalState } from "../../state/portal-state.ts";
+import { portalState } from "../../state/portal-state";
 import { getNavigationItem } from "../../utils/navigation";
-import { buildUrl } from "../../utils/routing.ts";
+import { buildUrl } from "../../utils/routing";
 import { theme } from "../../utils/theme";
-import {
-  UserSettingsItem,
-  userSettingsItems,
-} from "../../utils/user-settings.ts";
+import { UserSettingsItem, userSettingsItems } from "../../utils/user-settings";
+import "./LanguageSwitcher";
 
 @customElement("bkd-mobile-nav")
 @localized()
diff --git a/src/components/Header/Nav.ts b/src/components/header/Nav.ts
similarity index 98%
rename from src/components/Header/Nav.ts
rename to src/components/header/Nav.ts
index e278f19b..28fc919e 100644
--- a/src/components/Header/Nav.ts
+++ b/src/components/header/Nav.ts
@@ -6,6 +6,7 @@ import { StateController } from "@lit-app/state";
 import { NavigationGroup } from "../../settings";
 import { portalState } from "../../state/portal-state";
 import { theme } from "../../utils/theme";
+import "./NavGroupToggle";
 
 @customElement("bkd-nav")
 @localized()
diff --git a/src/components/Header/NavGroupDropdown.ts b/src/components/header/NavGroupDropdown.ts
similarity index 100%
rename from src/components/Header/NavGroupDropdown.ts
rename to src/components/header/NavGroupDropdown.ts
diff --git a/src/components/Header/NavGroupToggle.ts b/src/components/header/NavGroupToggle.ts
similarity index 98%
rename from src/components/Header/NavGroupToggle.ts
rename to src/components/header/NavGroupToggle.ts
index a2efd0d3..c66fde84 100644
--- a/src/components/Header/NavGroupToggle.ts
+++ b/src/components/header/NavGroupToggle.ts
@@ -6,6 +6,7 @@ import { DropdownController } from "../../controllers/dropdown";
 import { NavigationGroup } from "../../settings";
 import { theme } from "../../utils/theme";
 import { NavGroupDropdown } from "./NavGroupDropdown";
+import "./NavGroupDropdown";
 
 @customElement("bkd-nav-group-toggle")
 @localized()
diff --git a/src/components/Header/NotificationsDropdown.ts b/src/components/header/NotificationsDropdown.ts
similarity index 96%
rename from src/components/Header/NotificationsDropdown.ts
rename to src/components/header/NotificationsDropdown.ts
index 21d34cd9..94c39e40 100644
--- a/src/components/Header/NotificationsDropdown.ts
+++ b/src/components/header/NotificationsDropdown.ts
@@ -5,10 +5,10 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { localized, msg } from "@lit/localize";
 import spinnerIcon from "../../assets/icons/spinner.svg?raw";
 import trashIcon from "../../assets/icons/trash.svg?raw";
-import { NotificationDataEntry } from "../../utils/fetch.ts";
-import { sanitize } from "../../utils/sanitize.ts";
-import { theme } from "../../utils/theme.ts";
-import { NotificationsState } from "./NotificationsToggle.ts";
+import { NotificationDataEntry } from "../../utils/fetch";
+import { sanitize } from "../../utils/sanitize";
+import { theme } from "../../utils/theme";
+import { NotificationsState } from "./NotificationsToggle";
 
 @customElement("bkd-notifications-dropdown")
 @localized()
diff --git a/src/components/Header/NotificationsToggle.ts b/src/components/header/NotificationsToggle.ts
similarity index 92%
rename from src/components/Header/NotificationsToggle.ts
rename to src/components/header/NotificationsToggle.ts
index c7525c78..030723d2 100644
--- a/src/components/Header/NotificationsToggle.ts
+++ b/src/components/header/NotificationsToggle.ts
@@ -3,16 +3,17 @@ import { customElement, query, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { localized, msg } from "@lit/localize";
 import bellIcon from "../../assets/icons/bell.svg?raw";
-import { DropdownController } from "../../controllers/dropdown.ts";
-import { getEnvSettings } from "../../env-settings.ts";
+import { DropdownController } from "../../controllers/dropdown";
+import { getEnvSettings } from "../../env-settings";
 import {
   NotificationDataEntry,
   fetchNotifications,
   updateNotifications,
-} from "../../utils/fetch.ts";
-import { log } from "../../utils/logging.ts";
-import { theme } from "../../utils/theme.ts";
-import { NotificationsDropdown } from "./NotificationsDropdown.ts";
+} from "../../utils/fetch";
+import { log } from "../../utils/logging";
+import { theme } from "../../utils/theme";
+import { NotificationsDropdown } from "./NotificationsDropdown";
+import "./NotificationsDropdown";
 
 const envSettings = getEnvSettings();
 if (typeof envSettings?.notificationRefreshTime !== "number") {
diff --git a/src/components/Header/ServiceNav.ts b/src/components/header/ServiceNav.ts
similarity index 90%
rename from src/components/Header/ServiceNav.ts
rename to src/components/header/ServiceNav.ts
index 9dee196b..dfaec386 100644
--- a/src/components/Header/ServiceNav.ts
+++ b/src/components/header/ServiceNav.ts
@@ -3,8 +3,13 @@ import { customElement, property } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { localized, msg } from "@lit/localize";
 import { StateController } from "@lit-app/state";
-import { portalState } from "../../state/portal-state.ts";
+import { portalState } from "../../state/portal-state";
 import { theme } from "../../utils/theme";
+import "./Hamburger";
+import "./LanguageSwitcher";
+import "./NotificationsToggle";
+import "./SubstitutionsToggle";
+import "./UserSettings";
 
 @customElement("bkd-service-nav")
 @localized()
diff --git a/src/components/Header/SubstitutionsDropdown.ts b/src/components/header/SubstitutionsDropdown.ts
similarity index 100%
rename from src/components/Header/SubstitutionsDropdown.ts
rename to src/components/header/SubstitutionsDropdown.ts
diff --git a/src/components/Header/SubstitutionsToggle.ts b/src/components/header/SubstitutionsToggle.ts
similarity index 96%
rename from src/components/Header/SubstitutionsToggle.ts
rename to src/components/header/SubstitutionsToggle.ts
index 2722020e..b771a725 100644
--- a/src/components/Header/SubstitutionsToggle.ts
+++ b/src/components/header/SubstitutionsToggle.ts
@@ -8,14 +8,15 @@ import caretIcon from "../../assets/icons/caret.svg?raw";
 import closeSmallIcon from "../../assets/icons/close-small.svg?raw";
 import substitutionIcon from "../../assets/icons/substitution.svg?raw";
 import { DropdownController } from "../../controllers/dropdown";
-import { getEnvSettings } from "../../env-settings.ts";
-import { portalState } from "../../state/portal-state.ts";
-import { tokenState } from "../../state/token-state.ts";
+import { getEnvSettings } from "../../env-settings";
+import { portalState } from "../../state/portal-state";
+import { tokenState } from "../../state/token-state";
 import { Substitution, fetchCurrentSubstitutions } from "../../utils/fetch";
-import { buildUrl } from "../../utils/routing.ts";
+import { buildUrl } from "../../utils/routing";
 import { submit } from "../../utils/submit";
 import { theme } from "../../utils/theme";
 import { SubstitutionsDropdown } from "./SubstitutionsDropdown";
+import "./SubstitutionsDropdown";
 
 @customElement("bkd-substitutions-toggle")
 @localized()
diff --git a/src/components/Header/UserSettings.ts b/src/components/header/UserSettings.ts
similarity index 100%
rename from src/components/Header/UserSettings.ts
rename to src/components/header/UserSettings.ts
diff --git a/src/components/index.ts b/src/components/index.ts
deleted file mode 100644
index 091eaaf9..00000000
--- a/src/components/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export * from "./Content";
-export * from "./Footer";
-export * from "./Footer/Contact";
-export * from "./Footer/Imprint";
-export * from "./Footer/Legal";
-export * from "./Header";
-export * from "./Header/Hamburger";
-export * from "./Header/LanguageSwitcher";
-export * from "./Header/MobileNav";
-export * from "./Header/Nav";
-export * from "./Header/NavGroupDropdown";
-export * from "./Header/NavGroupToggle";
-export * from "./Header/NavItemLink";
-export * from "./Header/ServiceNav";
-export * from "./Header/SubstitutionsDropdown";
-export * from "./Header/SubstitutionsToggle";
-export * from "./Header/NotificationsToggle";
-export * from "./Header/NotificationsDropdown";
-export * from "./Header/UserSettings";
-export * from "./Portal";
diff --git a/src/components/unrestricted/ContentUnrestricted.ts b/src/components/unrestricted/ContentUnrestricted.ts
new file mode 100644
index 00000000..5265bcdf
--- /dev/null
+++ b/src/components/unrestricted/ContentUnrestricted.ts
@@ -0,0 +1,104 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { choose } from "lit/directives/choose.js";
+import { when } from "lit/directives/when.js";
+import { localized } from "@lit/localize";
+import { StateController } from "@lit-app/state";
+import { settings } from "../../settings";
+import { portalState } from "../../state/portal-state";
+import { getApp } from "../../utils/navigation";
+import { theme } from "../../utils/theme";
+import "./content/Contact";
+import "./content/Imprint";
+import "./content/Legal";
+
+portalState.init();
+
+@customElement("bkd-content-unrestricted")
+@localized()
+export class ContentUnrestricted extends LitElement {
+  static styles = [
+    theme,
+    css`
+      /* Large screen */
+
+      :host {
+        --bkd-content-margin-top: 3rem;
+        --bkd-content-margin-horizontal: var(--bkd-margin-horizontal-large);
+        padding: var(--bkd-content-margin-top)
+          var(--bkd-content-margin-horizontal) 0
+          var(--bkd-content-margin-horizontal);
+      }
+
+      h1 {
+        font-size: 3.375rem;
+        font-weight: 100;
+        line-height: 2.25rem;
+        letter-spacing: 0.01rem;
+        word-spacing: 0.025rem;
+        margin: 0 0 calc(3.375rem / 2) 0;
+      }
+
+      /* Medium screen */
+
+      @media screen and (max-width: 1200px) {
+        :host {
+          --bkd-content-margin-top: 2rem;
+          --bkd-content-margin-horizontal: var(--bkd-margin-horizontal-medium);
+        }
+
+        h1 {
+          font-size: 2.25rem;
+        }
+      }
+
+      /* Small screen */
+
+      @media screen and (max-width: 767px) {
+        :host {
+          --bkd-content-margin-top: 1rem;
+          --bkd-content-margin-horizontal: var(--bkd-margin-horizontal-small);
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    new StateController(this, portalState);
+  }
+
+  private renderFooterContent() {
+    return html`
+      ${choose(
+        portalState.navigationItemKey,
+        [
+          ["contact", () => html`<bkd-contact></bkd-contact>`],
+          ["legal", () => html`<bkd-legal></bkd-legal>`],
+          ["imprint", () => html`<bkd-imprint></bkd-imprint>`],
+        ],
+        () => html``,
+      )}
+    `;
+  }
+
+  render() {
+    const navigationItem = settings.footer.find(
+      ({ key }) => key === portalState.navigationItemKey,
+    );
+    const app = navigationItem ? getApp(navigationItem) : null;
+    return html`
+      <main role="main">
+        ${when(app?.heading, () => html`<h1>${navigationItem?.label}</h1>`)}
+        ${when(!navigationItem, () => html`<h1>Not found</h1>`)}
+        ${this.renderFooterContent()}
+      </main>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "bkd-content-unrestricted": ContentUnrestricted;
+  }
+}
diff --git a/src/components/unrestricted/HeaderUnrestricted.ts b/src/components/unrestricted/HeaderUnrestricted.ts
new file mode 100644
index 00000000..1418666b
--- /dev/null
+++ b/src/components/unrestricted/HeaderUnrestricted.ts
@@ -0,0 +1,100 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import { theme } from "../../utils/theme";
+import "../header/LanguageSwitcher";
+
+@customElement("bkd-header-unrestricted")
+@localized()
+export class HeaderUnrestricted extends LitElement {
+  static styles = [
+    theme,
+    css`
+      /* Large screen */
+
+      :host {
+        --bkd-header-margin-top: 12px;
+        --bkd-header-margin-bottom: calc(2 * var(--bkd-header-margin-top));
+        --bkd-header-margin-horizontal: var(--bkd-margin-horizontal-large);
+
+        position: relative;
+        padding: var(--bkd-header-margin-top)
+          var(--bkd-header-margin-horizontal) var(--bkd-header-margin-bottom)
+          var(--bkd-header-margin-horizontal);
+        border-bottom: 1px solid var(--bkd-func-bg-grey);
+      }
+
+      header {
+        display: grid;
+        grid-template-columns: max-content auto;
+        grid-template-areas:
+          "lang lang"
+          "logo ."
+          "logo-caption logo-caption";
+      }
+
+      .logo {
+        grid-area: logo;
+        display: block;
+        width: 150px;
+      }
+
+      .logo-caption {
+        grid-area: logo-caption;
+        align-self: baseline;
+        max-width: 21rem;
+        line-height: 2.5625rem;
+        vertical-align: middle;
+      }
+
+      bkd-language-switcher {
+        grid-area: lang;
+        justify-self: end;
+      }
+
+      /* Medium screen */
+
+      @media screen and (max-width: 1200px) {
+        :host {
+          --bkd-header-margin-horizontal: var(--bkd-margin-horizontal-medium);
+        }
+
+        .logo {
+          width: 110px;
+        }
+
+        .logo-caption {
+          margin-top: 12px;
+          font-size: 0.75rem;
+          font-weight: 400;
+          line-height: 0.75rem;
+          max-width: 13.125rem;
+        }
+      }
+
+      /* Small screen */
+
+      @media screen and (max-width: 767px) {
+        :host {
+          --bkd-header-margin-horizontal: var(--bkd-margin-horizontal-small);
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <header role="banner">
+        <img class="logo" src="../logo.svg" alt=${msg("Evento")} />
+        <div class="logo-caption">Evento</div>
+        <bkd-language-switcher></bkd-language-switcher>
+      </header>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "bkd-header-unrestricted": HeaderUnrestricted;
+  }
+}
diff --git a/src/components/unrestricted/PortalUnrestricted.ts b/src/components/unrestricted/PortalUnrestricted.ts
new file mode 100644
index 00000000..c06782ff
--- /dev/null
+++ b/src/components/unrestricted/PortalUnrestricted.ts
@@ -0,0 +1,68 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { localized } from "@lit/localize";
+import { StateController } from "@lit-app/state";
+import { portalState } from "../../state/portal-state";
+import {
+  customProperties,
+  fontFaces,
+  registerLightDomStyles,
+  theme,
+} from "../../utils/theme";
+import "../Footer";
+import "./ContentUnrestricted";
+import "./HeaderUnrestricted";
+
+portalState.init();
+
+// Make custom properties available globally in light DOM
+registerLightDomStyles(
+  css`
+    ${fontFaces}
+    :root {
+      ${customProperties}
+    }
+  `.toString(),
+);
+
+@customElement("bkd-portal-unrestricted")
+@localized()
+export class PortalUnrestricted extends LitElement {
+  static styles = [
+    theme,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        width: 100%;
+        max-width: 1920px;
+        margin: 0 auto;
+      }
+
+      bkd-content-unrestricted {
+        flex: auto;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+
+    new StateController(this, portalState);
+  }
+
+  render() {
+    return html`
+      <bkd-header-unrestricted></bkd-header-unrestricted>
+      <bkd-content-unrestricted></bkd-content-unrestricted>
+      <bkd-footer></bkd-footer>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "bkd-portal-unrestricted": PortalUnrestricted;
+  }
+}
diff --git a/src/components/Footer/Contact.ts b/src/components/unrestricted/content/Contact.ts
similarity index 92%
rename from src/components/Footer/Contact.ts
rename to src/components/unrestricted/content/Contact.ts
index 3c5426e3..0d187c89 100644
--- a/src/components/Footer/Contact.ts
+++ b/src/components/unrestricted/content/Contact.ts
@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { localized, msg } from "@lit/localize";
-import { contentStyles, theme } from "../../utils/theme";
+import { contentStyles, theme } from "../../../utils/theme";
 
 @customElement("bkd-contact")
 @localized()
diff --git a/src/components/Footer/Imprint.ts b/src/components/unrestricted/content/Imprint.ts
similarity index 88%
rename from src/components/Footer/Imprint.ts
rename to src/components/unrestricted/content/Imprint.ts
index 886ae2f3..8054f2ee 100644
--- a/src/components/Footer/Imprint.ts
+++ b/src/components/unrestricted/content/Imprint.ts
@@ -2,9 +2,9 @@ import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { localized, msg } from "@lit/localize";
 import { StateController } from "@lit-app/state";
-import { portalState } from "../../state/portal-state";
-import { withLineBreaks } from "../../utils/templates";
-import { contentStyles, theme } from "../../utils/theme";
+import { portalState } from "../../../state/portal-state";
+import { withLineBreaks } from "../../../utils/templates";
+import { contentStyles, theme } from "../../../utils/theme";
 
 @customElement("bkd-imprint")
 @localized()
diff --git a/src/components/Footer/Legal.ts b/src/components/unrestricted/content/Legal.ts
similarity index 98%
rename from src/components/Footer/Legal.ts
rename to src/components/unrestricted/content/Legal.ts
index 1025c62f..f1a39b58 100644
--- a/src/components/Footer/Legal.ts
+++ b/src/components/unrestricted/content/Legal.ts
@@ -1,8 +1,8 @@
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { localized, msg } from "@lit/localize";
-import { withLineBreaks } from "../../utils/templates";
-import { contentStyles, theme } from "../../utils/theme";
+import { withLineBreaks } from "../../../utils/templates";
+import { contentStyles, theme } from "../../../utils/theme";
 
 @customElement("bkd-legal")
 @localized()
diff --git a/src/index.ts b/src/index.ts
index a49d04ff..7df3e337 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1 @@
-export * from "./components/index";
+export * from "./components/Portal";
diff --git a/src/unrestricted.ts b/src/unrestricted.ts
new file mode 100644
index 00000000..6dfb05aa
--- /dev/null
+++ b/src/unrestricted.ts
@@ -0,0 +1 @@
+export * from "./components/unrestricted/PortalUnrestricted";
diff --git a/src/utils/routing.ts b/src/utils/routing.ts
index 8459beae..8e79eb5e 100644
--- a/src/utils/routing.ts
+++ b/src/utils/routing.ts
@@ -64,7 +64,7 @@ export function buildUrl(itemOrKey: NavigationItem | string): string {
 }
 
 function buildItemUrl(item: NavigationItem): URL {
-  const url = new URL(location.origin);
+  const url = new URL(location.origin + location.pathname);
   url.searchParams.set(LOCALE_QUERY_PARAM, portalState.locale);
   url.searchParams.set(NAV_ITEM_QUERY_PARAM, item.key);
   url.hash = item.appPath;
diff --git a/unrestricted/index.html b/unrestricted/index.html
new file mode 100644
index 00000000..bf355da9
--- /dev/null
+++ b/unrestricted/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="../favicon.ico" sizes="any" />
+    <link rel="icon" href="../icon.svg" type="image/svg+xml" />
+    <link
+      rel="apple-touch-icon"
+      href="../icons/apple-touch-icon-180x180.png"
+      sizes="180x180"
+    />
+    <link
+      rel="mask-icon"
+      href="../icons/maskable-icon-512x512.png"
+      color="#3C505A"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#3C505A" />
+    <title>Evento</title>
+    <meta
+      name="description"
+      content="Schulverwaltungsapplikation des Kantons Bern"
+    />
+    <link rel="stylesheet" href="../src/index.css" />
+    <script type="module" src="/src/unrestricted.ts"></script>
+  </head>
+  <body>
+    <bkd-portal-unrestricted></bkd-portal-unrestricted>
+  </body>
+</html>
diff --git a/vite.config.ts b/vite.config.ts
index 67448300..020c31b8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 // vite.config.js
 import basicSsl from "@vitejs/plugin-basic-ssl";
+import { resolve } from "path";
 import { defineConfig } from "vite";
 import { VitePWA } from "vite-plugin-pwa";
 
@@ -59,5 +60,13 @@ export default defineConfig({
   server: {
     port: 3000,
   },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "index.html"),
+        unrestricted: resolve(__dirname, "unrestricted/index.html"),
+      },
+    },
+  },
   plugins: process.env.SSL ? [...commonPlugins, basicSsl()] : commonPlugins,
 });