Merge pull request #446 from os2display/feature/configurable-login-screen-text

feat: configurable login screen text

Author: tuj

.env

@@ -188,6 +188,10 @@ ADMIN_TOUCH_BUTTON_REGIONS=false
 ADMIN_LOGIN_METHODS='[{"type":"username-password","enabled":true,"provider":"username-password","label":""}]'
 # Enable enhanced preview mode with additional features.
 ADMIN_ENHANCED_PREVIEW=false
+# Optional HTML block shown in the login sidebar.
+# Allowed tags: strong, em, b, i, br, p, a, span. Allowed attrs: href, title, target, rel, class.
+# Leave empty to hide the sidebar text card entirely.
+ADMIN_LOGIN_SCREEN_TEXT=
 ###< Admin configuration ###
 
 ###> Client configuration ###

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- Made the Admin login sidebar text configurable via the new `ADMIN_LOGIN_SCREEN_TEXT`
+  env var. The value accepts a small allow-list of HTML tags (sanitized client-side
+  with DOMPurify); when empty the sidebar card is hidden entirely. Removed the
+  bundled Danish "medarbejder/borger MitID" copy that previously rendered by default.
+- Fixed login screen styling issue resulting in header not filling parent in some breakpoints.
 - Fixed Calendar and Colibo feed configuration urls and added [] result when no locationEndpoint is set.
 - Fixed baked-in `.env` shipping `APP_ENV=dev` in the API image; rewritten to `prod` at build time so
   direct reads don't try to bootstrap a dev environment the prod-only dependencies can't satisfy.

README.md

@@ -480,6 +480,7 @@ ADMIN_SHOW_SCREEN_STATUS=false
 ADMIN_TOUCH_BUTTON_REGIONS=false
 ADMIN_LOGIN_METHODS='[{"type":"username-password","enabled":true,"provider":"username-password","label":""}]'
 ADMIN_ENHANCED_PREVIEW=false
+ADMIN_LOGIN_SCREEN_TEXT=''
 ###< Admin configuration ###
 ```
 
@@ -529,6 +530,16 @@ ADMIN_ENHANCED_PREVIEW=false
   See [Preview mode in the Client](#preview-mode-in-the-client).
 
   **Default**: Disabled.
+- ADMIN_LOGIN_SCREEN_TEXT: Optional explanatory text rendered in the sidebar card on the Admin login page.
+  Accepts a small allow-list of HTML tags (`strong`, `em`, `b`, `i`, `br`, `p`, `a`, `span`) and attributes
+  (`href`, `title`, `target`, `rel`, `class`); the value is sanitized client-side with DOMPurify before being
+  rendered. Leave empty to hide the sidebar card entirely.
+
+  ```dotenv
+  ADMIN_LOGIN_SCREEN_TEXT='<p>Er du <strong>medarbejder</strong> skal du benytte medarbejderlogin.</p><p>Er du <strong>borger</strong> skal du benytte MitID login.</p>'
+  ```
+
+  **Default**: Empty (no sidebar card shown).
 
 ### Client configuration
 

assets/admin/components/navigation/login-sidebar/login-sidebar.jsx

@@ -1,22 +1,37 @@
-import { useTranslation, Trans } from "react-i18next";
+import { useEffect, useState } from "react";
+import DOMPurify from "dompurify";
+import AdminConfigLoader from "../../util/admin-config-loader";
 import Logo from "../logo";
 
+const SANITIZE_OPTIONS = {
+  ALLOWED_TAGS: ["strong", "em", "b", "i", "br", "p", "a", "span"],
+  ALLOWED_ATTR: ["href", "title", "target", "rel", "class"],
+};
+
 const LoginSidebar = () => {
-  const { t } = useTranslation("common", { keyPrefix: "login-sidebar" });
+  const [customHtml, setCustomHtml] = useState("");
+
+  useEffect(() => {
+    AdminConfigLoader.loadConfig().then((cfg) => {
+      const raw = cfg?.loginScreenText?.trim();
+      if (raw) setCustomHtml(DOMPurify.sanitize(raw, SANITIZE_OPTIONS));
+    });
+  }, []);
 
   return (
     <div className="background-image-screens p-4 col-md-4">
       <Logo />
-      <div className="card text-white bg-dark mb-3 border border-color-white">
-        <div className="card-body">
-          <p className="card-text" id="ad-explanation">
-            <Trans>{t("internal-info-text")}</Trans>
-          </p>
-          <p className="card-text" id="mitid-explanation">
-            <Trans>{t("external-info-text")}</Trans>
-          </p>
+      {customHtml && (
+        <div className="card text-white bg-dark mb-3 border border-color-white">
+          <div className="card-body">
+            <div
+              className="card-text"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: customHtml }}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

assets/admin/components/user/login.scss

@@ -22,11 +22,15 @@
     }
   }
 
-  @media (max-width: 1075px) {
+  @media (max-width: 1200px) {
     .info-box {
       width: 100%;
       padding: 2em;
     }
+
+    .col-md-4 {
+      width: 100%;
+    }
   }
 
   .background-image-screens {

assets/admin/components/user/oidc-login.jsx

@@ -77,7 +77,6 @@ function OIDCLogin({ config }) {
         style={{ minWidth: "160px" }}
         type="button"
         aria-label={t("login-with-oidc-aria-label")}
-        aria-describedby="ad-explanation"
       >
         {iconRender}
         {labelText}

assets/admin/components/util/admin-config-loader.js

@@ -30,6 +30,7 @@ const AdminConfigLoader = {
                 touchButtonRegions: false,
                 showScreenStatus: false,
                 enhancedPreview: false,
+                loginScreenText: "",
                 loginMethods: [
                   {
                     type: "username-password",

assets/admin/translations/da/common.json

@@ -20,10 +20,6 @@
       "load-theme-error": "Der skete en fejl da temaet med følgende id: {{id}} skulle hentes:"
     }
   },
-  "login-sidebar": {
-    "internal-info-text": "Er du <strong>medarbejder</strong> skal du benytte medarbejderlogin.",
-    "external-info-text": "Er du <strong>borger</strong> skal du benytte MitID login."
-  },
   "slides-list": {
     "columns": {
       "name": "Titel",

config/services.yaml

@@ -71,6 +71,7 @@ services:
             $showScreenStatus: '%env(bool:ADMIN_SHOW_SCREEN_STATUS)%'
             $loginMethods: '%env(json:ADMIN_LOGIN_METHODS)%'
             $enhancedPreview: '%env(bool:ADMIN_ENHANCED_PREVIEW)%'
+            $loginScreenText: '%env(string:ADMIN_LOGIN_SCREEN_TEXT)%'
 
     App\Controller\Client\ClientConfigController:
         arguments:

src/Controller/Admin/AdminConfigController.php

@@ -18,6 +18,7 @@ public function __construct(
         private readonly bool $showScreenStatus,
         private readonly array $loginMethods,
         private readonly bool $enhancedPreview,
+        private readonly string $loginScreenText,
     ) {}
 
     public function __invoke(): Response
@@ -28,6 +29,7 @@ public function __invoke(): Response
             'showScreenStatus' => $this->showScreenStatus,
             'loginMethods' => $this->loginMethods,
             'enhancedPreview' => $this->enhancedPreview,
+            'loginScreenText' => $this->loginScreenText,
         ]);
     }
 }