From 63ac6457a146fd47ef06944f03d281b0af922132 Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Fri, 29 Aug 2025 13:07:16 +0200
Subject: [PATCH 01/11] 5316: add poc how to make dynamic admin forms

---
 .../components/slide/content/content-form.jsx |  17 +-
 .../slide/content/feed-selector.jsx           |   2 +-
 .../slide/content/file-dropzone.jsx           |   2 +-
 .../slide/content/file-selector.jsx           |  22 +-
 .../slide/preview/slide-preview.jsx           |   2 +-
 assets/admin/components/slide/slide-form.jsx  |  10 +-
 assets/client/components/slide.jsx            |   2 +-
 assets/shared/admin-util/helper.js            |  14 +
 assets/shared/slide-utils/templates-admin.js  |  70 +++++
 .../{templates.js => templates-slide.js}      |   0
 assets/shared/templates/image-text.json       | 245 +--------------
 assets/shared/templates/image-text.jsx        | 241 +--------------
 .../templates/image-text/admin-form.jsx       | 283 ++++++++++++++++++
 .../shared/templates/image-text/template.jsx  | 244 +++++++++++++++
 .../templates/image-text/translations.json    |  46 +++
 assets/template/index.jsx                     |   2 +-
 16 files changed, 697 insertions(+), 505 deletions(-)
 create mode 100644 assets/shared/admin-util/helper.js
 create mode 100644 assets/shared/slide-utils/templates-admin.js
 rename assets/shared/slide-utils/{templates.js => templates-slide.js} (100%)
 create mode 100644 assets/shared/templates/image-text/admin-form.jsx
 create mode 100644 assets/shared/templates/image-text/template.jsx
 create mode 100644 assets/shared/templates/image-text/translations.json

diff --git a/assets/admin/components/slide/content/content-form.jsx b/assets/admin/components/slide/content/content-form.jsx
index 77dbb3dd..2b9edbd1 100644
--- a/assets/admin/components/slide/content/content-form.jsx
+++ b/assets/admin/components/slide/content/content-form.jsx
@@ -8,6 +8,7 @@ import FileSelector from "./file-selector";
 import StationSelector from "./station/station-selector";
 import RadioButtons from "../../util/forms/radio-buttons";
 import CheckboxOptions from "../../util/forms/checkbox-options";
+import getInputFiles from "../../../../shared/admin-util/helper";
 
 /**
  * Render form elements for content form.
@@ -29,20 +30,6 @@ function ContentForm({
   onChange = null,
   mediaData = {},
 }) {
-  const getInputFiles = (field) => {
-    const inputFiles = [];
-
-    if (Array.isArray(field)) {
-      field.forEach((mediaId) => {
-        if (Object.prototype.hasOwnProperty.call(mediaData, mediaId)) {
-          inputFiles.push(mediaData[mediaId]);
-        }
-      });
-    }
-
-    return inputFiles;
-  };
-
   /**
    * @param {object} formData - The data for form input.
    * @returns {object | string} - Returns a rendered jsx object.
@@ -78,7 +65,7 @@ function ContentForm({
             )}
 
             <FileSelector
-              files={getInputFiles(formStateObject[formData.name])}
+              files={getInputFiles(formStateObject[formData.name], mediaData)}
               multiple={formData.multipleImages}
               onFilesChange={onFileChange}
               name={formData.name}
diff --git a/assets/admin/components/slide/content/feed-selector.jsx b/assets/admin/components/slide/content/feed-selector.jsx
index 6cc901da..fae88ea4 100644
--- a/assets/admin/components/slide/content/feed-selector.jsx
+++ b/assets/admin/components/slide/content/feed-selector.jsx
@@ -168,7 +168,7 @@ function FeedSelector({
         onChange={configurationChange}
         name={element.name}
         formStateObject={value?.configuration ?? {}}
-        onFileChange={() => {}}
+        onFileChange={() => {}} // Todo perhaps an error instead of an empty default
       />
     );
   };
diff --git a/assets/admin/components/slide/content/file-dropzone.jsx b/assets/admin/components/slide/content/file-dropzone.jsx
index 277c3ca3..b8df6e5a 100644
--- a/assets/admin/components/slide/content/file-dropzone.jsx
+++ b/assets/admin/components/slide/content/file-dropzone.jsx
@@ -40,7 +40,7 @@ function FileDropzone({ onFilesAdded, acceptedMimetypes = null }) {
     <>
       {/* TODO: Fix styling for dropzone: https://react-dropzone.js.org/#section-styling-dropzone */}
       {/* eslint-disable react/jsx-props-no-spreading */}
-      <div {...getRootProps({ className: "dropzone drag-drop-area" })}>
+      <div {...getRootProps({ className: "dropzone drag-drop-area my-1" })}>
         <input {...getInputProps()} />
         <div>
           <span>{t("file-dropzone.drag-and-drop-text")}</span>
diff --git a/assets/admin/components/slide/content/file-selector.jsx b/assets/admin/components/slide/content/file-selector.jsx
index fa2042ac..8e8267d3 100644
--- a/assets/admin/components/slide/content/file-selector.jsx
+++ b/assets/admin/components/slide/content/file-selector.jsx
@@ -107,19 +107,21 @@ function FileSelector({
       />
       {enableMediaLibrary && (
         <>
-          <Button
-            disabled={!multiple && files.length > 0}
-            variant="success"
-            onClick={() => setShowMediaModal(true)}
-          >
-            {t("file-selector.open-media-library")}
-          </Button>
-          {/*
+          <div className="d-flex align-items-center mt-2">
+            <Button
+              disabled={!multiple && files.length > 0}
+              variant="success"
+              onClick={() => setShowMediaModal(true)}
+            >
+              {t("file-selector.open-media-library")}
+            </Button>
+            {/*
               TODO: Make this configurable. It should always align with sizes in
               https://github.com/os2display/display-api-service/blob/develop/src/Entity/Tenant/Media.php
           */}
-          <div className="small mt-3">
-            {t("file-selector.max-size")}: 200 MB
+            <div className="small mt-1 mx-2">
+              {t("file-selector.max-size")}: 200 MB
+            </div>
           </div>
           <MediaSelectorModal
             selectedMedia={files}
diff --git a/assets/admin/components/slide/preview/slide-preview.jsx b/assets/admin/components/slide/preview/slide-preview.jsx
index a8f4953c..946993b9 100644
--- a/assets/admin/components/slide/preview/slide-preview.jsx
+++ b/assets/admin/components/slide/preview/slide-preview.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import ErrorBoundary from "../../error-boundary";
-import { renderSlide } from "../../../../shared/slide-utils/templates";
+import { renderSlide } from "../../../../shared/slide-utils/templates-slide";
 import "./slide-preview.scss";
 
 /**
diff --git a/assets/admin/components/slide/slide-form.jsx b/assets/admin/components/slide/slide-form.jsx
index a6baa7a7..60589532 100644
--- a/assets/admin/components/slide/slide-form.jsx
+++ b/assets/admin/components/slide/slide-form.jsx
@@ -24,7 +24,8 @@ import userContext from "../../context/user-context";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
 import Select from "../util/forms/select";
-import { getConfig } from "../../../shared/slide-utils/templates";
+import { renderAdminForm } from "../../../shared/slide-utils/templates-admin";
+import { getConfig } from "../../../shared/slide-utils/templates-slide";
 import "./slide-form.scss";
 
 /**
@@ -267,6 +268,13 @@ function SlideForm({
             {selectedTemplate && contentFormElements && (
               <>
                 <ContentBody>
+                  {renderAdminForm(
+                    idFromUrl(selectedTemplate.id),
+                    slide.content,
+                    handleContent,
+                    handleMedia,
+                    mediaData,
+                  )}
                   {contentFormElements.map((formElement) => (
                     <Fragment key={formElement.key}>
                       {formElement.input === "feed" && (
diff --git a/assets/client/components/slide.jsx b/assets/client/components/slide.jsx
index bf5b76d5..fe2a75f7 100644
--- a/assets/client/components/slide.jsx
+++ b/assets/client/components/slide.jsx
@@ -1,6 +1,6 @@
 import ErrorBoundary from "./error-boundary.jsx";
 import logger from "../logger/logger";
-import { renderSlide } from "../../shared/slide-utils/templates.js";
+import { renderSlide } from "../../shared/slide-utils/templates-slide.js";
 import "./slide.scss";
 
 /**
diff --git a/assets/shared/admin-util/helper.js b/assets/shared/admin-util/helper.js
new file mode 100644
index 00000000..781482ea
--- /dev/null
+++ b/assets/shared/admin-util/helper.js
@@ -0,0 +1,14 @@
+const getInputFiles = (field, mediaData) => {
+  const inputFiles = [];
+  if (Array.isArray(field)) {
+    field.forEach((mediaId) => {
+      if (Object.prototype.hasOwnProperty.call(mediaData, mediaId)) {
+        inputFiles.push(mediaData[mediaId]);
+      }
+    });
+  }
+
+  return inputFiles;
+};
+
+export default getInputFiles;
diff --git a/assets/shared/slide-utils/templates-admin.js b/assets/shared/slide-utils/templates-admin.js
new file mode 100644
index 00000000..a0bcfbf2
--- /dev/null
+++ b/assets/shared/slide-utils/templates-admin.js
@@ -0,0 +1,70 @@
+// Load templates.
+// @see https://vite.dev/guide/features.html#glob-import
+// @see docs/custom-templates.md
+// Eager loading because no other code piece imports the templates otherwise.
+const templateModules = import.meta.glob("../templates/*.jsx", { eager: true });
+const customTemplatesModules = import.meta.glob("../custom-templates/*.jsx", {
+  eager: true,
+});
+
+function duckTypingAdminFormModule(module) {
+  return (
+    typeof module.id === "function" &&
+    typeof module.config === "function" &&
+    typeof module.renderAdminForm === "function"
+  );
+}
+
+function findAdminFormModule(modules, templateUlid) {
+  for (const key of Object.keys(modules)) {
+    const module = modules[key].default;
+
+    if (duckTypingAdminFormModule(module)) {
+      if (module.id() === templateUlid) {
+        return module;
+      }
+    }
+  }
+
+  return null;
+}
+
+function getAdminModule(templateUlid) {
+  if (!templateUlid) {
+    return null;
+  }
+
+  const module =
+    findAdminFormModule(templateModules, templateUlid) ??
+    findAdminFormModule(customTemplatesModules, templateUlid) ??
+    null;
+
+  if (module === null) {
+    throw new Error(`Cannot find admin template with '${templateUlid}'`);
+  }
+
+  return module;
+}
+
+function renderAdminForm(
+  templateUlid,
+  formStateObject,
+  onChange,
+  handleMedia,
+  mediaData,
+) {
+  const module = getAdminModule(templateUlid);
+
+  if (!module) {
+    return null;
+  }
+
+  return module.renderAdminForm(
+    formStateObject,
+    onChange,
+    handleMedia,
+    mediaData,
+  );
+}
+
+export { renderAdminForm };
diff --git a/assets/shared/slide-utils/templates.js b/assets/shared/slide-utils/templates-slide.js
similarity index 100%
rename from assets/shared/slide-utils/templates.js
rename to assets/shared/slide-utils/templates-slide.js
diff --git a/assets/shared/templates/image-text.json b/assets/shared/templates/image-text.json
index 5b1a4d8f..946e93b5 100644
--- a/assets/shared/templates/image-text.json
+++ b/assets/shared/templates/image-text.json
@@ -1,248 +1,5 @@
 {
   "title": "Billede og tekst",
   "id": "01FP2SNGFN0BZQH03KCBXHKYHG",
-  "options": {},
-  "adminForm": [
-    {
-      "key": "image-text-form-1",
-      "input": "header",
-      "text": "Skabelon: Tekst og billede",
-      "name": "header1",
-      "formGroupClasses": "h4 mb-3"
-    },
-    {
-      "key": "image-text-form-2",
-      "input": "header-h3",
-      "text": "Indhold",
-      "name": "header2",
-      "formGroupClasses": "h5 mb-3"
-    },
-    {
-      "key": "image-text-form-3",
-      "input": "textarea",
-      "name": "title",
-      "label": "Overskrift på slide",
-      "helpText": "Her kan du skrive overskriften til slidet",
-      "formGroupClasses": "col-md-6"
-    },
-    {
-      "key": "image-text-form-4",
-      "input": "rich-text-input",
-      "name": "text",
-      "label": "Tekst på slide",
-      "helpText": "Her kan du skrive teksten til slidet",
-      "formGroupClasses": "col-md"
-    },
-    {
-      "key": "image-text-form-81",
-      "input": "select",
-      "required": true,
-      "label": "Tekststørrelse",
-      "formGroupClasses": "col-md-6 mb-3",
-      "options": [
-        {
-          "key": "fontsize1",
-          "title": "xs",
-          "value": "font-size-xs"
-        },
-        {
-          "key": "fontsize2",
-          "title": "s",
-          "value": "font-size-s"
-        },
-        {
-          "key": "fontsize3",
-          "title": "m",
-          "value": "font-size-m"
-        },
-        {
-          "key": "fontsize4",
-          "title": "l",
-          "value": "font-size-lg"
-        },
-        {
-          "key": "fontsize5",
-          "title": "xl",
-          "value": "font-size-xl"
-        }
-      ],
-      "name": "fontSize"
-    },
-
-    {
-      "key": "image-text-form-5",
-      "multipleImages": true,
-      "input": "image",
-      "name": "image",
-      "label": "Billeder",
-      "helpText": "Hvis du tilføjer mere end et billede bliver de vist i (varighed / antal_billeder) sekunder hver."
-    },
-    {
-      "key": "form-media-contain",
-      "input": "checkbox",
-      "name": "mediaContain",
-      "label": "Deaktivér billedbeskæring",
-      "helpText": "Billedet vil blive vist ubeskåret med tomme områder omkring"
-    },
-    {
-      "key": "image-text-form-6",
-      "input": "header-h3",
-      "text": "Opsætning",
-      "name": "header3",
-      "formGroupClasses": "h5 mt-3 mb-3"
-    },
-    {
-      "key": "image-text-form-7",
-      "input": "duration",
-      "name": "duration",
-      "min": "1",
-      "type": "number",
-      "label": "Varighed (i sekunder)",
-      "helpText": "Her skal du skrive varigheden på slidet.",
-      "required": true,
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-8",
-      "input": "select",
-      "required": true,
-      "label": "Hvor skal tekstboksen være placeret",
-      "formGroupClasses": "col-md-6 mb-3",
-      "options": [
-        {
-          "key": "placement1",
-          "title": "Toppen",
-          "value": "top"
-        },
-        {
-          "key": "placement2",
-          "title": "Højre",
-          "value": "right"
-        },
-        {
-          "key": "placement3",
-          "title": "Bunden",
-          "value": "bottom"
-        },
-        {
-          "key": "placement4",
-          "title": "Venstre",
-          "value": "left"
-        }
-      ],
-      "name": "boxAlign"
-    },
-    {
-      "key": "image-text-form-9",
-      "input": "checkbox",
-      "label": "Margin rundt om boks",
-      "name": "boxMargin",
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-10",
-      "input": "checkbox",
-      "label": "Animeret streg under overskrift",
-      "name": "separator",
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-11",
-      "input": "checkbox",
-      "label": "Gør tekstboksen mindre",
-      "name": "halfSize",
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-12",
-      "input": "checkbox",
-      "label": "Alternativt layout uden tekstboks",
-      "helpText": "Denne kan ikke kombineres med den animerede tekst under overskriften",
-      "name": "reversed",
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-13",
-      "input": "checkbox",
-      "label": "Skyggeeffekt på tekstboksen",
-      "name": "shadow",
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-14",
-      "input": "checkbox",
-      "label": "Vis logo fra tema",
-      "name": "showLogo",
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-15",
-      "input": "select",
-      "required": false,
-      "label": "Logostørrelse",
-      "formGroupClasses": "col-md-6 mb-3",
-      "options": [
-        {
-          "key": "logosize1",
-          "title": "s",
-          "value": "logo-size-s"
-        },
-        {
-          "key": "logosize2",
-          "title": "m",
-          "value": "logo-size-m"
-        },
-        {
-          "key": "logosize3",
-          "title": "l",
-          "value": "logo-size-l"
-        }
-      ],
-      "name": "logoSize"
-    },
-    {
-      "key": "image-text-form-16",
-      "input": "select",
-      "required": false,
-      "label": "Logoposition",
-      "formGroupClasses": "col-md-6 mb-3",
-      "options": [
-        {
-          "key": "logoposition1",
-          "title": "Top/venstre",
-          "value": "logo-position-top-left"
-        },
-        {
-          "key": "logoposition2",
-          "title": "Top/højre",
-          "value": "logo-position-top-right"
-        },
-        {
-          "key": "logoposition3",
-          "title": "Bund/venstre",
-          "value": "logo-position-bottom-left"
-        },
-        {
-          "key": "logoposition4",
-          "title": "Bund/højre",
-          "value": "logo-position-bottom-right"
-        }
-      ],
-      "name": "logoPosition"
-    },
-    {
-      "key": "image-text-form-17",
-      "input": "checkbox",
-      "label": "Margin om logo",
-      "name": "logoMargin",
-      "formGroupClasses": "col-md-6 mb-3"
-    },
-    {
-      "key": "image-text-form-18",
-      "input": "checkbox",
-      "label": "Deaktiver fade ved flere billeder",
-      "name": "disableImageFade",
-      "formGroupClasses": "col-md-6 mb-3"
-    }
-  ]
+  "options": {}
 }
diff --git a/assets/shared/templates/image-text.jsx b/assets/shared/templates/image-text.jsx
index de32bd6d..3c8189ef 100644
--- a/assets/shared/templates/image-text.jsx
+++ b/assets/shared/templates/image-text.jsx
@@ -1,15 +1,8 @@
-import { createRef, useEffect, useRef, useState } from "react";
-import parse from "html-react-parser";
-import DOMPurify from "dompurify";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
-import BaseSlideExecution from "../slide-utils/base-slide-execution.js";
-import {
-  getAllMediaUrlsFromField,
-  ThemeStyles,
-} from "../slide-utils/slide-util.jsx";
+import imageTextConfig from "./image-text.json";
+import ImageTextAdmin from "./image-text/admin-form";
+import ImageText from "./image-text/template";
 import "../slide-utils/global-styles.css";
 import "./image-text/image-text.scss";
-import imageTextConfig from "./image-text.json";
 
 function id() {
   return imageTextConfig.id;
@@ -31,227 +24,15 @@ function renderSlide(slide, run, slideDone) {
   );
 }
 
-/**
- * @param {object} props Props.
- * @param {object} props.slide The slide.
- * @param {object} props.content The slide content.
- * @param {boolean} props.run Whether or not the slide should start running.
- * @param {Function} props.slideDone Function to invoke when the slide is done playing.
- * @param {string} props.executionId Unique id for the instance.
- * @returns {JSX.Element} The component.
- */
-function ImageText({ slide, content, run, slideDone, executionId }) {
-  const imageTimeoutRef = useRef();
-  const [images, setImages] = useState([]);
-  const [currentImage, setCurrentImage] = useState();
-  const logo = slide?.theme?.logo;
-  const {
-    showLogo,
-    logoSize,
-    logoPosition,
-    logoMargin,
-    mediaContain,
-    disableImageFade,
-  } = content;
-
-  const logoUrl = showLogo && logo?.assets?.uri ? logo.assets.uri : "";
-
-  const logoClasses = ["logo"];
-
-  if (logoMargin) {
-    logoClasses.push("logo-margin");
-  }
-  if (logoSize) {
-    logoClasses.push(logoSize);
-  }
-  if (logoPosition) {
-    logoClasses.push(logoPosition);
-  }
-
-  // Styling from content
-  const {
-    separator,
-    boxAlign,
-    reversed,
-    boxMargin,
-    halfSize,
-    fontSize,
-    shadow,
-  } = content || {};
-
-  let boxClasses = "box";
-
-  // Styling objects
-  const rootStyle = {};
-  const imageTextStyle = {};
-
-  // Content from content
-  const { title, text, textColor, boxColor, duration = 15000 } = content;
-
-  const sanitizedText = DOMPurify.sanitize(text);
-
-  // Display separator depends on whether the slide is reversed.
-  const displaySeparator = separator && !reversed;
-
-  // Set background image.
-  if (!(images?.length > 0)) {
-    boxClasses = `${boxClasses} full-screen`;
-  }
-
-  // Set box colors.
-  if (boxColor) {
-    imageTextStyle.backgroundColor = boxColor;
-  }
-  if (textColor) {
-    imageTextStyle.color = textColor;
-  }
-
-  const rootClasses = ["template-image-text", fontSize];
-
-  // Position text-box.
-  if (boxAlign === "left" || boxAlign === "right") {
-    rootClasses.push("column");
-  }
-  if (boxAlign === "bottom" || boxAlign === "right") {
-    rootClasses.push("flex-end");
-  }
-  if (reversed) {
-    rootClasses.push("reversed");
-  }
-  if (boxMargin || reversed) {
-    rootClasses.push("box-margin");
-  }
-  if (halfSize && !reversed) {
-    rootClasses.push("half-size");
-  }
-  if (separator && !reversed) {
-    rootClasses.push("animated-header");
-  }
-  if (shadow) {
-    rootClasses.push("shadow");
-  }
-
-  const changeImage = (newIndex) => {
-    if (newIndex < images.length) {
-      setCurrentImage(images[newIndex]);
-
-      if (newIndex < images.length - 1) {
-        imageTimeoutRef.current = setTimeout(
-          () => changeImage(newIndex + 1),
-          duration / images.length,
-        );
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (slide?.mediaData) {
-      const imageUrls = getAllMediaUrlsFromField(
-        slide.mediaData,
-        content.image,
-      );
-
-      if (imageUrls?.length > 0) {
-        const newImages = imageUrls.map((url) => {
-          return {
-            url,
-            nodeRef: createRef(),
-          };
-        });
-
-        setImages(newImages);
-      }
-    }
-  }, [slide]);
-
-  const startTheShow = () => {
-    if (images?.length > 0 && !currentImage) {
-      setCurrentImage(images[0]);
-    }
-
-    // If there are multiple images, we are going to loop through these WITHIN the set duration.
-    if (images?.length > 1) {
-      // Kickoff the display of multiple images with the zero indexed
-      changeImage(0);
-    }
-  };
-
-  useEffect(() => {
-    if (!currentImage) {
-      startTheShow();
-    }
-  }, [images]);
-
-  /** Setup slide run function. */
-  const slideExecution = new BaseSlideExecution(slide, slideDone);
-
-  useEffect(() => {
-    if (run) {
-      startTheShow();
-      slideExecution.start(duration);
-    }
-
-    return function cleanup() {
-      slideExecution.stop();
-
-      if (imageTimeoutRef.current) {
-        clearTimeout(imageTimeoutRef.current);
-      }
-    };
-  }, [run]);
-
+function renderAdminForm(formStateObject, onChange, handleMedia, mediaData) {
   return (
-    <>
-      <div className={rootClasses.join(" ")} style={rootStyle}>
-        <TransitionGroup component={null}>
-          {currentImage && (
-            <CSSTransition
-              key={currentImage.url}
-              timeout={1000}
-              nodeRef={currentImage.nodeRef}
-              classNames={`background-image${
-                disableImageFade ? "-animation-disabled" : ""
-              }`}
-            >
-              <div
-                style={{
-                  backgroundImage: currentImage?.url
-                    ? `url("${currentImage.url}")`
-                    : "",
-                }}
-                ref={currentImage.nodeRef}
-                className={`background-image${
-                  mediaContain ? " media-contain" : ""
-                }`}
-              />
-            </CSSTransition>
-          )}
-        </TransitionGroup>
-        {(title || text) && (
-          <div className={boxClasses} style={imageTextStyle}>
-            {title && (
-              <h1>
-                {title}
-                {/* Todo theme the color of the below */}
-                {displaySeparator && <div className="separator" />}
-              </h1>
-            )}
-            {sanitizedText && (
-              <div className="text">{parse(sanitizedText)}</div>
-            )}
-          </div>
-        )}
-
-        {showLogo && logoUrl && (
-          <img className={logoClasses.join(" ")} src={logoUrl} alt="" />
-        )}
-      </div>
-
-      {slide?.theme?.cssStyles && (
-        <ThemeStyles id={executionId} css={slide.theme.cssStyles} />
-      )}
-    </>
+    <ImageTextAdmin
+      formStateObject={formStateObject}
+      onChange={onChange}
+      handleMedia={handleMedia}
+      mediaData={mediaData}
+    />
   );
 }
 
-export default { id, config, renderSlide };
+export default { id, config, renderSlide, renderAdminForm };
diff --git a/assets/shared/templates/image-text/admin-form.jsx b/assets/shared/templates/image-text/admin-form.jsx
new file mode 100644
index 00000000..5b14dd05
--- /dev/null
+++ b/assets/shared/templates/image-text/admin-form.jsx
@@ -0,0 +1,283 @@
+import { useEffect } from "react";
+import RichText from "../../../admin/components/util/forms/rich-text/rich-text.jsx";
+import Select from "../../../admin/components/util/forms/select";
+import FileSelector from "../../../admin/components/slide/content/file-selector.jsx";
+import getInputFiles from "../../admin-util/helper.js";
+import FormCheckbox from "../../../admin/components/util/forms/form-checkbox";
+import FormInput from "../../../admin/components/util/forms/form-input";
+import i18next from "i18next";
+import adminTranslations from "./translations.json";
+import { useTranslation } from "react-i18next";
+
+function ImageTextAdmin({
+  formStateObject,
+  onChange,
+  handleMedia,
+  mediaData = {},
+}) {
+  const { t } = useTranslation("image-text-admin");
+
+  useEffect(() => {
+    const currentLang = i18next.language;
+    if (!i18next.hasResourceBundle(currentLang, "image-text-admin")) {
+      i18next.addResourceBundle(
+        currentLang,
+        "image-text-admin",
+        adminTranslations["image-text-admin"],
+        true,
+        true,
+      );
+    }
+  }, []);
+
+  return (
+    <>
+      <h2 className="h4 mb-3">{t("image-text-header")}</h2>
+      <fieldset>
+        <legend className="h5 mb-3">{t("content-sub-header")}</legend>
+
+        <label htmlFor="image-text-1" className="form-label">
+          {t("slide-title-label")}
+        </label>
+        <textarea
+          onChange={onChange}
+          id="title"
+          className="col-md-6 form-control"
+          rows="3"
+          defaultValue={formStateObject["title"]}
+        />
+        <small className="form-text d-flex">{t("slide-title-help-text")}</small>
+
+        <RichText
+          name="text"
+          label={t("rich-text-label")}
+          helpText={t("rich-text-help-text")}
+          value={formStateObject["text"]}
+          onChange={onChange}
+          formGroupClasses="col-md mt-3"
+        />
+
+        <Select
+          value={formStateObject["fontSize"]}
+          name={"fontSize"}
+          options={[
+            { key: "fontsize1", title: "xs", value: "font-size-xs" },
+            { key: "fontsize2", title: "s", value: "font-size-s" },
+            { key: "fontsize3", title: "m", value: "font-size-m" },
+            { key: "fontsize4", title: "l", value: "font-size-lg" },
+            { key: "fontsize5", title: "xl", value: "font-size-xl" },
+          ]}
+          onChange={onChange}
+          label={t("font-size-label")}
+          formGroupClasses="col-md-6 my-4"
+        />
+
+        <label className="form-label mb-0 col-9">
+          {t("images-label")}
+          <FileSelector
+            files={getInputFiles(formStateObject["image"], mediaData)}
+            multiple={true}
+            onFilesChange={handleMedia}
+            name="image"
+            acceptedMimetypes="image/*"
+          />
+        </label>
+        <div>
+          <small>{t("images-help-text")}</small>
+        </div>
+
+        <FormCheckbox
+          label={t("disable-cropping-label")}
+          onChange={onChange}
+          name="mediaContain"
+          formGroupClasses="mt-3"
+          helpText={t("disable-cropping-help-text")}
+          value={formStateObject["mediaContain"]}
+        />
+      </fieldset>
+
+      <fieldset>
+        <legend className="h5 mt-3 mb-3">{t("settings-sub-header")}</legend>
+
+        <FormInput
+          name="duration"
+          min="1"
+          type="number"
+          label={t("duration-label")}
+          helpText={t("duration-help-text")}
+          formGroupClasses="col-md-6 mb-3"
+          value={
+            formStateObject["duration"]
+              ? Math.floor(formStateObject["duration"] / 1000)
+              : 15
+          }
+          onChange={(value) => {
+            const newValue = value.target.value;
+            onChange({
+              target: { id: "duration", value: Math.max(newValue, 1) * 1000 },
+            });
+          }}
+        />
+
+        <Select
+          value={formStateObject["boxAlign"]}
+          name="boxAlign"
+          options={[
+            {
+              key: "placement1",
+              title: t("box-align-options.top"),
+              value: "top",
+            },
+            {
+              key: "placement2",
+              title: t("box-align-options.right"),
+              value: "right",
+            },
+            {
+              key: "placement3",
+              title: t("box-align-options.bottom"),
+              value: "bottom",
+            },
+            {
+              key: "placement4",
+              title: t("box-align-options.left"),
+              value: "left",
+            },
+          ]}
+          onChange={onChange}
+          label={t("box-align-label")}
+          formGroupClasses="col-md-6 mb-3"
+        />
+
+        <FormCheckbox
+          label={t("box-margin-label")}
+          onChange={onChange}
+          name="boxMargin"
+          formGroupClasses="col-md-6 mb-3"
+          value={formStateObject["boxMargin"]}
+        />
+
+        <FormCheckbox
+          label={t("separator-label")}
+          onChange={onChange}
+          name="separator"
+          formGroupClasses="col-md-6 mb-3"
+          value={formStateObject["separator"]}
+        />
+
+        <FormCheckbox
+          label={t("half-size-label")}
+          onChange={onChange}
+          name="halfSize"
+          formGroupClasses="col-md-6 mb-3"
+          value={formStateObject["halfSize"]}
+        />
+
+        {formStateObject["separator"] && (
+          <FormCheckbox
+            label={t("reversed-layout-label")}
+            onChange={onChange}
+            name="reversed"
+            formGroupClasses="col-md-6 mb-3"
+            value={formStateObject["reversed"]}
+          />
+        )}
+
+        <FormCheckbox
+          label={t("shadow-label")}
+          onChange={onChange}
+          name="shadow"
+          formGroupClasses="col-md-6 mb-3"
+          value={formStateObject["shadow"]}
+        />
+
+        <FormCheckbox
+          label={t("show-logo-label")}
+          onChange={onChange}
+          name="showLogo"
+          formGroupClasses="col-md-6 mb-3"
+          value={formStateObject["showLogo"]}
+        />
+
+        {formStateObject["showLogo"] && (
+          <>
+            <Select
+              value={formStateObject["logoSize"]}
+              name="logoSize"
+              options={[
+                {
+                  key: "logosize1",
+                  title: t("logo-size-options.logo-size-s"),
+                  value: "logo-size-s",
+                },
+                {
+                  key: "logosize2",
+                  title: t("logo-size-options.logo-size-m"),
+                  value: "logo-size-m",
+                },
+                {
+                  key: "logosize3",
+                  title: t("logo-size-options.logo-size-l"),
+                  value: "logo-size-l",
+                },
+              ]}
+              onChange={onChange}
+              label={t("logo-size-label")}
+              formGroupClasses="col-md-6 mb-3"
+            />
+
+            <Select
+              value={formStateObject["logoPosition"]}
+              name="logoPosition"
+              options={[
+                {
+                  key: "logoposition1",
+                  title: t("logo-position-options.logo-position-top-left"),
+                  value: "logo-position-top-left",
+                },
+                {
+                  key: "logoposition2",
+                  title: t("logo-position-options.logo-position-top-right"),
+                  value: "logo-position-top-right",
+                },
+                {
+                  key: "logoposition3",
+                  title: t("logo-position-options.logo-position-bottom-left"),
+                  value: "logo-position-bottom-left",
+                },
+                {
+                  key: "logoposition4",
+                  title: t("logo-position-options.logo-position-bottom-right"),
+                  value: "logo-position-bottom-right",
+                },
+              ]}
+              onChange={onChange}
+              label={t("logo-position-label")}
+              formGroupClasses="col-md-6 mb-3"
+            />
+
+            <FormCheckbox
+              label={t("logo-margin-label")}
+              onChange={onChange}
+              name="logoMargin"
+              formGroupClasses="col-md-6 mb-3"
+              value={formStateObject["logoMargin"]}
+            />
+          </>
+        )}
+
+        {Object.keys(mediaData).length > 1 && (
+          <FormCheckbox
+            label={t("disable-fade-label")}
+            onChange={onChange}
+            name="disableImageFade"
+            formGroupClasses="col-md-6 mb-3"
+            value={formStateObject["disableImageFade"]}
+          />
+        )}
+      </fieldset>
+    </>
+  );
+}
+
+export default ImageTextAdmin;
diff --git a/assets/shared/templates/image-text/template.jsx b/assets/shared/templates/image-text/template.jsx
new file mode 100644
index 00000000..d9c9fa98
--- /dev/null
+++ b/assets/shared/templates/image-text/template.jsx
@@ -0,0 +1,244 @@
+import { createRef, useEffect, useRef, useState } from "react";
+import parse from "html-react-parser";
+import DOMPurify from "dompurify";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import BaseSlideExecution from "../../slide-utils/base-slide-execution.js";
+import {
+  getAllMediaUrlsFromField,
+  ThemeStyles,
+} from "../../slide-utils/slide-util.jsx";
+import "../../slide-utils/global-styles.css";
+import "../image-text/image-text.scss";
+
+/**
+ * @param {object} props Props.
+ * @param {object} props.slide The slide.
+ * @param {object} props.content The slide content.
+ * @param {boolean} props.run Whether or not the slide should start running.
+ * @param {Function} props.slideDone Function to invoke when the slide is done playing.
+ * @param {string} props.executionId Unique id for the instance.
+ * @returns {JSX.Element} The component.
+ */
+function ImageText({ slide, content, run, slideDone, executionId }) {
+  const imageTimeoutRef = useRef();
+  const [images, setImages] = useState([]);
+  const [currentImage, setCurrentImage] = useState();
+  const [themeCss, setThemeCss] = useState(null);
+  const logo = slide?.theme?.logo;
+  const {
+    showLogo,
+    logoSize,
+    logoPosition,
+    logoMargin,
+    mediaContain,
+    disableImageFade,
+  } = content;
+
+  const logoUrl = showLogo && logo?.assets?.uri ? logo.assets.uri : "";
+
+  const logoClasses = ["logo"];
+
+  if (logoMargin) {
+    logoClasses.push("logo-margin");
+  }
+  if (logoSize) {
+    logoClasses.push(logoSize);
+  }
+  if (logoPosition) {
+    logoClasses.push(logoPosition);
+  }
+
+  // Set theme styles.
+  useEffect(() => {
+    if (slide?.theme?.cssStyles) {
+      setThemeCss(
+        <ThemeStyles id={executionId} css={slide?.theme?.cssStyles} />,
+      );
+    }
+  }, [slide]);
+
+  // Styling from content
+  const {
+    separator,
+    boxAlign,
+    reversed,
+    boxMargin,
+    halfSize,
+    fontSize,
+    shadow,
+  } = content || {};
+
+  let boxClasses = "box";
+
+  // Styling objects
+  const rootStyle = {};
+  const imageTextStyle = {};
+
+  // Content from content
+  const { title, text, textColor, boxColor, duration = 15000 } = content;
+
+  const sanitizedText = DOMPurify.sanitize(text);
+
+  // Display separator depends on whether the slide is reversed.
+  const displaySeparator = separator && !reversed;
+
+  // Set background image.
+  if (!(images?.length > 0)) {
+    boxClasses = `${boxClasses} full-screen`;
+  }
+
+  // Set box colors.
+  if (boxColor) {
+    imageTextStyle.backgroundColor = boxColor;
+  }
+  if (textColor) {
+    imageTextStyle.color = textColor;
+  }
+
+  const rootClasses = ["template-image-text", fontSize];
+
+  // Position text-box.
+  if (boxAlign === "left" || boxAlign === "right") {
+    rootClasses.push("column");
+  }
+  if (boxAlign === "bottom" || boxAlign === "right") {
+    rootClasses.push("flex-end");
+  }
+  if (reversed) {
+    rootClasses.push("reversed");
+  }
+  if (boxMargin || reversed) {
+    rootClasses.push("box-margin");
+  }
+  if (halfSize && !reversed) {
+    rootClasses.push("half-size");
+  }
+  if (separator && !reversed) {
+    rootClasses.push("animated-header");
+  }
+  if (shadow) {
+    rootClasses.push("shadow");
+  }
+
+  const changeImage = (newIndex) => {
+    if (newIndex < images.length) {
+      setCurrentImage(images[newIndex]);
+
+      if (newIndex < images.length - 1) {
+        imageTimeoutRef.current = setTimeout(
+          () => changeImage(newIndex + 1),
+          duration / images.length,
+        );
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (slide?.mediaData) {
+      const imageUrls = getAllMediaUrlsFromField(
+        slide.mediaData,
+        content.image,
+      );
+
+      if (imageUrls?.length > 0) {
+        const newImages = imageUrls.map((url) => {
+          return {
+            url,
+            nodeRef: createRef(),
+          };
+        });
+
+        setImages(newImages);
+      }
+    }
+  }, [slide]);
+
+  const startTheShow = () => {
+    if (images?.length > 0 && !currentImage) {
+      setCurrentImage(images[0]);
+    }
+
+    // If there are multiple images, we are going to loop through these WITHIN the set duration.
+    if (images?.length > 1) {
+      // Kickoff the display of multiple images with the zero indexed
+      changeImage(0);
+    }
+  };
+
+  useEffect(() => {
+    if (!currentImage) {
+      startTheShow();
+    }
+  }, [images]);
+
+  /** Setup slide run function. */
+  const slideExecution = new BaseSlideExecution(slide, slideDone);
+
+  useEffect(() => {
+    if (run) {
+      startTheShow();
+      slideExecution.start(duration);
+    }
+
+    return function cleanup() {
+      slideExecution.stop();
+
+      if (imageTimeoutRef.current) {
+        clearTimeout(imageTimeoutRef.current);
+      }
+    };
+  }, [run]);
+
+  return (
+    <>
+      <div className={rootClasses.join(" ")} style={rootStyle}>
+        <TransitionGroup component={null}>
+          {currentImage && (
+            <CSSTransition
+              key={currentImage.url}
+              timeout={1000}
+              nodeRef={currentImage.nodeRef}
+              classNames={`background-image${
+                disableImageFade ? "-animation-disabled" : ""
+              }`}
+            >
+              <div
+                style={{
+                  backgroundImage: currentImage?.url
+                    ? `url("${currentImage.url}")`
+                    : "",
+                }}
+                ref={currentImage.nodeRef}
+                className={`background-image${
+                  mediaContain ? " media-contain" : ""
+                }`}
+              />
+            </CSSTransition>
+          )}
+        </TransitionGroup>
+        {(title || text) && (
+          <div className={boxClasses} style={imageTextStyle}>
+            {title && (
+              <h1>
+                {title}
+                {/* Todo theme the color of the below */}
+                {displaySeparator && <div className="separator" />}
+              </h1>
+            )}
+            {sanitizedText && (
+              <div className="text">{parse(sanitizedText)}</div>
+            )}
+          </div>
+        )}
+
+        {showLogo && logoUrl && (
+          <img className={logoClasses.join(" ")} src={logoUrl} alt="" />
+        )}
+      </div>
+
+      {themeCss}
+    </>
+  );
+}
+
+export default ImageText;
diff --git a/assets/shared/templates/image-text/translations.json b/assets/shared/templates/image-text/translations.json
new file mode 100644
index 00000000..83cdde2b
--- /dev/null
+++ b/assets/shared/templates/image-text/translations.json
@@ -0,0 +1,46 @@
+{
+  "image-text-admin": {
+    "image-text-header": "Skabelon: Tekst og billede",
+    "content-sub-header": "Indhold",
+    "slide-title-label": "Overskrift på slide",
+    "slide-title-help-text": "Her kan du skrive overskriften til slidet",
+    "rich-text-label": "Tekst på slide",
+    "rich-text-help-text": "Her kan du skrive teksten til slidet",
+    "font-size-label": "Tekststørrelse",
+    "images-label": "Billeder",
+    "images-help-text": "Hvis du tilføjer mere end et billede bliver de vist i (varighed / antal_billeder) sekunder hver.",
+    "disable-cropping-label": "Deaktivér billedbeskæring",
+    "disable-cropping-help-text": "Billedet vil blive vist ubeskåret med tomme områder omkring",
+    "settings-sub-header": "Opsætning",
+    "duration-label": "Varighed (i sekunder)",
+    "duration-help-text": "Her skal du skrive varigheden på slidet.",
+    "box-align-label": "Hvor skal tekstboksen være placeret",
+    "box-align-options": {
+      "top": "Toppen",
+      "right": "Højre",
+      "bottom": "Bunden",
+      "left": "Venstre"
+    },
+    "box-margin-label": "Margin rundt om boks",
+    "separator-label": "Animeret streg under overskrift",
+    "half-size-label": "Gør tekstboksen mindre",
+    "reversed-layout-label": "Alternativt layout uden tekstboks",
+    "shadow-label": "Skyggeeffekt på tekstboksen",
+    "show-logo-label": "Vis logo fra tema",
+    "logo-size-label": "Logostørrelse",
+    "logo-size-options": {
+      "logo-size-s": "s",
+      "logo-size-m": "m",
+      "logo-size-l": "l"
+    },
+    "logo-position-label": "Logoposition",
+    "logo-position-options": {
+      "logo-position-top-left": "Top/venstre",
+      "logo-position-top-right": "Top/højre",
+      "logo-position-bottom-left": "Bund/venstre",
+      "logo-position-bottom-right": "Bund/højre"
+    },
+    "logo-margin-label": "Margin om logo",
+    "disable-fade-label": "Deaktiver fade mellem billeder"
+  }
+}
diff --git a/assets/template/index.jsx b/assets/template/index.jsx
index 6914730f..72e0c898 100644
--- a/assets/template/index.jsx
+++ b/assets/template/index.jsx
@@ -12,7 +12,7 @@ import {
   Routes,
   useParams,
 } from "react-router-dom";
-import { renderSlide } from "../shared/slide-utils/templates.js";
+import { renderSlide } from "../shared/slide-utils/templates-slide.js";
 import slideFixtures from "./fixtures/slide-fixtures.js";
 import screenFixtures from "./fixtures/screen-fixtures.js";
 import "./index.css";

From 7b31088376baacf4be9c3502b6a810e3fcb55e13 Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Wed, 17 Sep 2025 12:31:11 +0200
Subject: [PATCH 02/11] 5316: return null instead of error

---
 assets/shared/slide-utils/templates-admin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/shared/slide-utils/templates-admin.js b/assets/shared/slide-utils/templates-admin.js
index a0bcfbf2..92c42733 100644
--- a/assets/shared/slide-utils/templates-admin.js
+++ b/assets/shared/slide-utils/templates-admin.js
@@ -40,7 +40,7 @@ function getAdminModule(templateUlid) {
     null;
 
   if (module === null) {
-    throw new Error(`Cannot find admin template with '${templateUlid}'`);
+    return null;
   }
 
   return module;

From ac5bcd94be121783a0cd26d521f61e5ab538e1d0 Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Mon, 22 Sep 2025 09:01:22 +0200
Subject: [PATCH 03/11] 5316: add tests

---
 assets/tests/admin/admin-form.spec.js | 487 ++++++++++++++++++++++++++
 assets/tests/admin/data-fixtures.js   |  72 +++-
 assets/tests/admin/test-helper.js     |  10 +-
 3 files changed, 566 insertions(+), 3 deletions(-)
 create mode 100644 assets/tests/admin/admin-form.spec.js

diff --git a/assets/tests/admin/admin-form.spec.js b/assets/tests/admin/admin-form.spec.js
new file mode 100644
index 00000000..239ef15a
--- /dev/null
+++ b/assets/tests/admin/admin-form.spec.js
@@ -0,0 +1,487 @@
+import { test, expect } from "@playwright/test";
+import {
+  beforeEachTest,
+  fulfillDataRoute,
+  fulfillEmptyRoutes,
+  loginTest,
+} from "./test-helper.js";
+import {
+  imageTextTemplate,
+  onlyImageTextListJson,
+  slideJson,
+} from "./data-fixtures.js";
+
+test.describe("Admin form ui tests", () => {
+  test.beforeEach(async ({ page }) => {
+    await beforeEachTest(page);
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await loginTest(page);
+
+    await fulfillDataRoute(page, "**/templates*", onlyImageTextListJson);
+    await fulfillEmptyRoutes(page, ["**/playlists*", "**/themes*"]);
+
+    await page.getByLabel("Tilføj nyt slide").first().click();
+    await expect(page.getByText("Opret nyt slide:")).toBeVisible();
+
+    // Pick tempalte
+    await page
+      .locator("#template-section")
+      .locator(".dropdown-container")
+      .nth(0)
+      .press("Enter");
+
+    await page.locator(".dropdown-content").locator("li").nth(0).click();
+    await page
+      .locator("#template-section")
+      .locator(".dropdown-container")
+      .nth(0)
+      .click();
+  });
+
+  test("Should fill title", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          title: "Test slide",
+        });
+      }
+    });
+
+    const title = page.locator("textarea#title");
+    await expect(title).toBeVisible();
+    await title.fill("Test slide");
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have visible text editor for description", async ({ page }) => {
+    await expect(page.locator(".text-editor")).toBeVisible();
+  });
+
+  test("Should pick font size", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          fontSize: "font-size-m",
+        });
+      }
+    });
+    const fontSize = page.locator("#fontSize");
+    expect(fontSize).toBeVisible();
+    await fontSize.selectOption("font-size-m");
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have image picker visible", async ({ page }) => {
+    await expect(
+      page.getByText(
+        "Vælg filer ved at trykke på eller trække filer ind i firkanten",
+      ),
+    ).toBeVisible();
+  });
+
+  test("Should have media contain visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          mediaContain: true,
+        });
+      }
+    });
+
+    const mediaContain = page.locator("#checkbox-mediaContain");
+    await mediaContain.waitFor();
+    await mediaContain.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have duration visible and interactable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          duration: 10000,
+        });
+      }
+    });
+
+    await expect(page.locator("#duration")).toBeVisible();
+    await page.locator("#duration").fill("10");
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have box align visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          boxAlign: "right",
+        });
+      }
+    });
+
+    const boxAlign = await page.locator("#boxAlign");
+    await boxAlign.waitFor();
+    await boxAlign.selectOption("right", { force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have box margin visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          boxMargin: true,
+        });
+      }
+    });
+
+    const boxMargin = await page.locator("#checkbox-boxMargin");
+    await boxMargin.waitFor();
+    await boxMargin.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have separator visible and checkable, when checked, alternative layout should be visible", async ({
+    page,
+  }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          separator: true,
+        });
+      }
+    });
+
+    await expect(
+      page.getByText("Alternativt layout uden tekstboks"),
+    ).toHaveCount(0);
+    const separator = await page.locator("#checkbox-separator");
+    await separator.waitFor();
+    await separator.check({ force: true });
+    await expect(
+      page.getByText("Alternativt layout uden tekstboks"),
+    ).toHaveCount(1);
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have halfsize visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          halfSize: true,
+        });
+      }
+    });
+
+    const halfSize = await page.locator("#checkbox-halfSize");
+    await halfSize.waitFor();
+    await halfSize.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have shadow visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          shadow: true,
+        });
+      }
+    });
+    const shadow = await page.locator("#checkbox-shadow");
+    await shadow.waitFor();
+    await shadow.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have show logo visible and checkable, when checked size/position/margin should be visible", async ({
+    page,
+  }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON();
+        expect(postData.content).toMatchObject({
+          showLogo: true,
+        });
+      }
+    });
+    await expect(page.getByText("Logostørrelse")).toHaveCount(0);
+    await expect(page.getByText("Logoposition")).toHaveCount(0);
+    await expect(page.getByText("Margin om logo")).toHaveCount(0);
+
+    const showLogo = await page.locator("#checkbox-showLogo");
+    await showLogo.waitFor();
+    await showLogo.check({ force: true });
+
+    await expect(page.getByText("Logostørrelse")).toHaveCount(1);
+    await expect(page.getByText("Logoposition")).toHaveCount(1);
+    await expect(page.getByText("Margin om logo")).toHaveCount(1);
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+});
+
+test.describe("Admin slide values depending on other values", () => {
+  test.beforeEach(async ({ page }) => {
+    await beforeEachTest(page);
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await loginTest(page);
+
+    await fulfillDataRoute(page, "**/templates*", onlyImageTextListJson);
+    await fulfillDataRoute(
+      page,
+      "**/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
+      imageTextTemplate,
+    );
+
+    await fulfillEmptyRoutes(page, ["**/playlists*", "**/themes*"]);
+
+    await fulfillDataRoute(
+      page,
+      "**/v2/slides/00015Y0ZVC18N407JD07SM0YCF",
+      slideJson,
+    );
+
+    await page.locator("#edit_button").first().click({ force: true });
+  });
+
+  test("Should have filled title", async ({ page }) => {
+    // await expect(page.locator("#title")).toHaveText("Test slide");
+    await expect(page.locator("#fontSize")).toHaveText("Test slide");
+  });
+
+  test("Should have visible text editor for description", async ({ page }) => {
+    await expect(page.locator(".text-editor")).toBeVisible();
+  });
+
+  test("Should pick font size", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          fontSize: "font-size-m",
+        });
+      }
+    });
+    const fontSize = page.locator("#fontSize");
+    expect(fontSize).toBeVisible();
+    await fontSize.selectOption("font-size-m");
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have image picker visible", async ({ page }) => {
+    await expect(
+      page.getByText(
+        "Vælg filer ved at trykke på eller trække filer ind i firkanten",
+      ),
+    ).toBeVisible();
+  });
+
+  test("Should have media contain visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          mediaContain: true,
+        });
+      }
+    });
+
+    const mediaContain = page.locator("#checkbox-mediaContain");
+    await mediaContain.waitFor();
+    await mediaContain.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have duration visible and interactable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          duration: 10000,
+        });
+      }
+    });
+
+    await expect(page.locator("#duration")).toBeVisible();
+    await page.locator("#duration").fill("10");
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have box align visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          boxAlign: "right",
+        });
+      }
+    });
+
+    const boxAlign = await page.locator("#boxAlign");
+    await boxAlign.waitFor();
+    await boxAlign.selectOption("right", { force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have box margin visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          boxMargin: true,
+        });
+      }
+    });
+
+    const boxMargin = await page.locator("#checkbox-boxMargin");
+    await boxMargin.waitFor();
+    await boxMargin.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have separator visible and checkable, when checked, alternative layout should be visible", async ({
+    page,
+  }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          separator: true,
+        });
+      }
+    });
+
+    await expect(
+      page.getByText("Alternativt layout uden tekstboks"),
+    ).toHaveCount(0);
+    const separator = await page.locator("#checkbox-separator");
+    await separator.waitFor();
+    await separator.check({ force: true });
+    await expect(
+      page.getByText("Alternativt layout uden tekstboks"),
+    ).toHaveCount(1);
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have halfsize visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          halfSize: true,
+        });
+      }
+    });
+
+    const halfSize = await page.locator("#checkbox-halfSize");
+    await halfSize.waitFor();
+    await halfSize.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have shadow visible and checkable", async ({ page }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON(); // Parses JSON body
+        expect(postData.content).toMatchObject({
+          shadow: true,
+        });
+      }
+    });
+    const shadow = await page.locator("#checkbox-shadow");
+    await shadow.waitFor();
+    await shadow.check({ force: true });
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+
+  test("Should have show logo visible and checkable, when checked size/position/margin should be visible", async ({
+    page,
+  }) => {
+    await page.route("**/v2/slides", async (route, request) => {
+      if (request.method() === "POST") {
+        const postData = request.postDataJSON();
+        expect(postData.content).toMatchObject({
+          showLogo: true,
+        });
+      }
+    });
+    await expect(page.getByText("Logostørrelse")).toHaveCount(0);
+    await expect(page.getByText("Logoposition")).toHaveCount(0);
+    await expect(page.getByText("Margin om logo")).toHaveCount(0);
+
+    const showLogo = await page.locator("#checkbox-showLogo");
+    await showLogo.waitFor();
+    await showLogo.check({ force: true });
+
+    await expect(page.getByText("Logostørrelse")).toHaveCount(1);
+    await expect(page.getByText("Logoposition")).toHaveCount(1);
+    await expect(page.getByText("Margin om logo")).toHaveCount(1);
+
+    const saveButton = page.locator("#save_slide");
+    await saveButton.waitFor();
+    await saveButton.click({ force: true });
+  });
+});
diff --git a/assets/tests/admin/data-fixtures.js b/assets/tests/admin/data-fixtures.js
index 99a380d4..9227e0ad 100644
--- a/assets/tests/admin/data-fixtures.js
+++ b/assets/tests/admin/data-fixtures.js
@@ -410,6 +410,45 @@ const clientConfigJson = {
   logging: false,
 };
 
+const slideJson = {
+  "@context": "/contexts/Slide",
+  "@id": "/v2/slides/01K5E2JGX3G60S73YRGR26W81J",
+  "@type": "Slide",
+  title: "",
+  description: "",
+  templateInfo: {
+    "@id": "/v2/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
+    options: [],
+  },
+  onPlaylists: [],
+  published: {
+    from: "2025-09-18T09:30:00.000Z",
+    to: null,
+  },
+  media: [],
+  content: {
+    title: "Title",
+    text: "",
+    fontSize: "font-size-xl",
+    mediaContain: true,
+    duration: 18000,
+    boxAlign: "top",
+    boxMargin: true,
+    separator: true,
+    halfSize: true,
+    shadow: true,
+    showLogo: true,
+  },
+  modifiedBy: "admin@example.com",
+  createdBy: "admin@example.com",
+  id: "01K5E2JGX3G60S73YRGR26W81J",
+  created: "2025-09-18T11:30:32.000Z",
+  modified: "2025-09-18T11:33:13.000Z",
+  relationsChecksum: {
+    templateInfo: "b2341f464f952dcd78c26990075ab5090af1286c",
+  },
+};
+
 const slidesJson1 = {
   "@id": "/v2/slides",
   "hydra:member": [
@@ -986,6 +1025,25 @@ const screensListJson = {
   ],
 };
 
+const onlyImageTextListJson = {
+  "@context": "/contexts/Template",
+  "@id": "/v2/templates",
+  "@type": "hydra:Collection",
+  "hydra:totalItems": 1,
+  "hydra:member": [
+    {
+      "@id": "/v2/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
+      "@type": "Template",
+      title: "Billede og tekst",
+      modifiedBy: "",
+      createdBy: "",
+      id: "01FP2SNGFN0BZQH03KCBXHKYHG",
+      created: "2024-08-03T09:38:27.000Z",
+      modified: "2025-02-01T06:08:28.000Z",
+    },
+  ],
+};
+
 const templatesListJson = {
   "@id": "/v2/templates",
   "hydra:member": [
@@ -1076,6 +1134,15 @@ const templatesListJson = {
   "hydra:totalItems": 12,
 };
 
+const imageTextTemplate = {
+  title: "Billede og tekst",
+  modifiedBy: "",
+  createdBy: "",
+  id: "01FP2SNGFN0BZQH03KCBXHKYHG",
+  created: "2024-08-04T06:32:42.000Z",
+  modified: "2025-02-02T03:02:43.000Z",
+};
+
 const slidesListJson = {
   "@id": "/v2/slides",
   "hydra:member": [
@@ -1089,7 +1156,7 @@ const slidesListJson = {
       modifiedBy: "",
       createdBy: "",
       templateInfo: {
-        "@id": "/v2/templates/00MWCNKC4P0X5C0AT70E741E2V",
+        "@id": "/v2/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
         options: [],
       },
       theme: "",
@@ -1645,4 +1712,7 @@ export {
   slidesListJson,
   themesJson,
   themesSingleJson,
+  onlyImageTextListJson,
+  slideJson,
+  imageTextTemplate,
 };
diff --git a/assets/tests/admin/test-helper.js b/assets/tests/admin/test-helper.js
index 94fb07bb..e459aca1 100644
--- a/assets/tests/admin/test-helper.js
+++ b/assets/tests/admin/test-helper.js
@@ -1,4 +1,9 @@
-import { adminConfigJson, emptyJson, tokenAdminJson } from "./data-fixtures.js";
+import {
+  adminConfigJson,
+  emptyJson,
+  slidesJson1,
+  tokenAdminJson,
+} from "./data-fixtures.js";
 import { expect } from "@playwright/test";
 
 const beforeEachTest = async (page) => {
@@ -41,13 +46,14 @@ const loginTest = async (page) => {
   });
 
   await page.route("**/slides*", async (route) => {
-    await route.fulfill({ json: emptyJson });
+    await route.fulfill({ json: slidesJson1 });
   });
 
   await expect(page).toHaveTitle(/OS2Display Admin/);
   await page.getByLabel("Email").fill("admin@example.com");
   await page.getByLabel("Kodeord").fill("password");
   await page.locator("#login").click();
+
   await expect(page.locator("h1").getByText("Slides")).toBeVisible();
 };
 

From bdd5cb5c73b843f99bead10b7f96bca9c0d5f4ac Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Mon, 22 Sep 2025 10:38:05 +0200
Subject: [PATCH 04/11] 5316: documentation, changed names make more sense, add
 example of admin form

---
 README.md                                     | 191 ++++++++++--------
 .../custom-template-example.jsx               |  82 +++++++-
 .../translations.json                         |  10 +
 .../templates/image-text/admin-form.jsx       |  78 +++----
 4 files changed, 238 insertions(+), 123 deletions(-)
 create mode 100644 assets/shared/custom-templates-example/translations.json

diff --git a/README.md b/README.md
index dcd91eb9..c8c05e19 100644
--- a/README.md
+++ b/README.md
@@ -36,8 +36,8 @@ At the core of OS2Display is an API that clients communicate with. All data runs
 It includes an Admin for creating content and a Client for displaying the content.
 
 The structure is that slides are the content element of the system. Each slide is based on a Template with content
-added. The slides are gathered into playlists. Playlists are then added to screens.
-A screen is the connection between a physical device and the content.
+added. The slides are gathered into playlists. Playlists are then added to screens. A screen is the connection between a
+physical device and the content.
 
 ```mermaid
 flowchart LR
@@ -51,7 +51,7 @@ Further documentation can be found in the
 ## Content Structure
 
 | Component | Description                                                                                                                                                                                                                                                                                                                                                            | Accessible by |
-|-----------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------------|
+| --------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------ |
 | Slide     | A slide is the visible content on a screen.                                                                                                                                                                                                                                                                                                                            | Admin, editor |
 | Media     | Media is either images or videos used as content for slides.                                                                                                                                                                                                                                                                                                           | Admin, editor |
 | Theme     | A theme has css, that can override the slide css.                                                                                                                                                                                                                                                                                                                      | Admin         |
@@ -90,14 +90,13 @@ Architectural decisions are recorded in `docs/adr`.
 
 ## Versioning
 
-We use [SemVer](http://semver.org/) for versioning.
-For the versions available, see the
-[tags on this repository](https://github.com/os2display/display-api-service/tags).
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this
+repository](https://github.com/os2display/display-api-service/tags).
 
 ## Technologies
 
-The API is written in PHP project, built with [Symfony](https://symfony.com/) and
-[API Platform](https://api-platform.com/).
+The API is written in PHP project, built with [Symfony](https://symfony.com/) and [API
+Platform](https://api-platform.com/).
 
 The Admin and Client are written in javascript and [React](https://react.dev/) and built with [Vite](https://vite.dev/).
 
@@ -186,13 +185,13 @@ The API is stateless except for the `/v2/authentication` routes.
 
 ## Authentication
 
-Authentication is achieved through `/v2/authentication/token` for the `/admin`
-and through `/v2/authentication/screen` for the `/client`.
+Authentication is achieved through `/v2/authentication/token` for the `/admin` and through `/v2/authentication/screen`
+for the `/client`.
 
 ## Tenants
 
-Content is connected to a Tenant. A user is in x tenants.
-This allows for maintaining multiple content silos in the same installation.
+Content is connected to a Tenant. A user is in x tenants. This allows for maintaining multiple content silos in the same
+installation.
 
 You can add a new tenant:
 
@@ -211,16 +210,13 @@ It is also possible to configure if a tenants should support interactive slides.
 
 ## OIDC providers
 
-At the present two possible oidc providers are implemented: 'internal' and 'external'.
-These work differently.
+At the present two possible oidc providers are implemented: 'internal' and 'external'. These work differently.
 
-The internal provider is expected to handle both authentication and authorization.
-Any users logging in through the internal will be granted access based on the
-tenants/roles provided.
+The internal provider is expected to handle both authentication and authorization. Any users logging in through the
+internal will be granted access based on the tenants/roles provided.
 
-The external provider only handles authentication. A user logging in through the
-external provider will not be granted access automatically, but will be challenged
-to enter an activation (invite) code to verify access.
+The external provider only handles authentication. A user logging in through the external provider will not be granted
+access automatically, but will be challenged to enter an activation (invite) code to verify access.
 
 See `docs/feed/openid-connect.md` for environment variables for OpenID Connect configuration.
 
@@ -234,20 +230,17 @@ The claim keys needed are set in the env variables:
 - `INTERNAL_OIDC_CLAIM_EMAIL`
 - `INTERNAL_OIDC_CLAIM_GROUPS`
 
-The value of the claim with the name that is defined in the env variable `INTERNAL_OIDC_CLAIM_GROUPS` is mapped to
-the user's access to tenants in `App\Security\AzureOidcAuthenticator`. The claim field should consist of an array of
-names that should follow the following structure `<TENANT_NAME><ROLE_IN_TENANT>`.
-`<ROLE_IN_TENANT>` can be `Admin` or `Redaktoer` (editor).
-E.g. `Example1Admin` will map to the tenant with name `Example1` with `ROLE_ADMIN`.
-If the tenant does not exist it will be created when the user logs in.
+The value of the claim with the name that is defined in the env variable `INTERNAL_OIDC_CLAIM_GROUPS` is mapped to the
+user's access to tenants in `App\Security\AzureOidcAuthenticator`. The claim field should consist of an array of names
+that should follow the following structure `<TENANT_NAME><ROLE_IN_TENANT>`. `<ROLE_IN_TENANT>` can be `Admin` or
+`Redaktoer` (editor). E.g. `Example1Admin` will map to the tenant with name `Example1` with `ROLE_ADMIN`. If the tenant
+does not exist it will be created when the user logs in.
 
 ### External
 
-The external oidc provider takes only the claim defined in the env variable
-OIDC_EXTERNAL_CLAIM_ID, hashes it and uses this hash as providerId for the user.
-When a user logs in with this provider, it is initially not in any tenant.
-To be added to a tenant the user has to use an activation code a
-ROLE_EXTERNAL_USER_ADMIN has created.
+The external oidc provider takes only the claim defined in the env variable OIDC_EXTERNAL_CLAIM_ID, hashes it and uses
+this hash as providerId for the user. When a user logs in with this provider, it is initially not in any tenant. To be
+added to a tenant the user has to use an activation code a ROLE_EXTERNAL_USER_ADMIN has created.
 
 ## JWT Auth
 
@@ -263,8 +256,7 @@ Then create a local test user if needed:
 docker compose exec phpfpm bin/console app:user:add
 ```
 
-You can now obtain a token by sending a `POST` request to the
-`/v2/authentication/token` endpoint:
+You can now obtain a token by sending a `POST` request to the `/v2/authentication/token` endpoint:
 
 ```curl
 curl --location --request 'POST' \
@@ -316,9 +308,8 @@ See the `docker-compose.override.yml` playwright entry and the version imported
 
 #### Testing on the built files
 
-This project includes a test script that handles building assets, running
-Playwright tests, and stops and starts the node container. This script tests the
-*built* files. This is the approach the GitHub Action uses.
+This project includes a test script that handles building assets, running Playwright tests, and stops and starts the
+node container. This script tests the _built_ files. This is the approach the GitHub Action uses.
 
 ```shell
 task test:frontend-built
@@ -330,9 +321,8 @@ or
 ./scripts/test {TEST-PATH}
 ```
 
-TEST-PATH is optional, and is the specific test file or directory to run like
-`admin`/`client`/`template` or a specific file, e.g. `admin-app.spec.js`. If
-TEST-PATH is omitted, all tests will run.
+TEST-PATH is optional, and is the specific test file or directory to run like `admin`/`client`/`template` or a specific
+file, e.g. `admin-app.spec.js`. If TEST-PATH is omitted, all tests will run.
 
 #### Testing on local machine
 
@@ -364,8 +354,8 @@ task generate:api-spec
 
 This will generate `public/api-spec-v2.json` and `public/api-spec-v2.yaml`.
 
-This generated API specification is used to generate
-[Redux Toolkit RTK Query](https://redux-toolkit.js.org/rtk-query/overview) code for interacting with the API.
+This generated API specification is used to generate [Redux Toolkit RTK
+Query](https://redux-toolkit.js.org/rtk-query/overview) code for interacting with the API.
 
 To generate the Redux Toolkit RTK Query code, run the following command:
 
@@ -400,10 +390,11 @@ TRACK_SCREEN_INFO_UPDATE_INTERVAL_SECONDS=300
 ###< App ###
 ```
 
-- APP_ACTIVATION_CODE_EXPIRE_INTERVAL: Specifies how long an external user activation code should live.
-  The format of the interval should follow <https://www.php.net/manual/en/dateinterval.construct.php>.
+- APP_ACTIVATION_CODE_EXPIRE_INTERVAL: Specifies how long an external user activation code should live. The format of
+  the interval should follow <https://www.php.net/manual/en/dateinterval.construct.php>.
 
   **Default**: 2 days.
+
 - APP_KEY_VAULT_SOURCE: Source of key-value pair for `src/Service/KeyVaultService`. Atm. "ENVIRONMENT" is the only
   option.
 - APP_KEY_VAULT_JSON: A json object formatted as a string. Contains key-value pairs that can be accessed by through
@@ -427,27 +418,30 @@ ADMIN_ENHANCED_PREVIEW=false
 ###< Admin configuration ###
 ```
 
-- ADMIN_REJSEPLANEN_APIKEY: An API key accessing Rejseplanen API used for Travel template.
-  See [https://labs.rejseplanen.dk/](https://labs.rejseplanen.dk/) for information about acquiring an API key.
+- ADMIN_REJSEPLANEN_APIKEY: An API key accessing Rejseplanen API used for Travel template. See
+  [https://labs.rejseplanen.dk/](https://labs.rejseplanen.dk/) for information about acquiring an API key.
 
   **Default**: Not set.
+
 - ADMIN_SHOW_SCREEN_STATUS: Should the status of the screen be shown in the Admin (true|false)?
 
   **Default**: Disabled.
-- ADMIN_TOUCH_BUTTON_REGIONS: Should the option of setting a button name for a slide be enabled in the Admin?
-  This option is used by the Client if a region is configured to be a "touch-buttons" region.
+
+- ADMIN_TOUCH_BUTTON_REGIONS: Should the option of setting a button name for a slide be enabled in the Admin? This
+  option is used by the Client if a region is configured to be a "touch-buttons" region.
 
   **Default**: Disabled.
+
 - ADMIN_LOGIN_METHODS: Which login methods should be displayed in the admin (array of objects as json string)?
 
   Available types: "oidc" | "username-password".
 
   ```json
   {
-      "type": "oidc",
-      "provider": "internal",
-      "label": "Button text",
-      "icon": "faCity"
+    "type": "oidc",
+    "provider": "internal",
+    "label": "Button text",
+    "icon": "faCity"
   }
   ```
 
@@ -456,21 +450,22 @@ ADMIN_ENHANCED_PREVIEW=false
   - icon: Name of the fontawesome icon to use for the button or "mitID" for MitID logo.
 
   ```json
-    {
-      "type": "username-password",
-      "provider": "username-password",
-      "label": ""
-    }
+  {
+    "type": "username-password",
+    "provider": "username-password",
+    "label": ""
+  }
   ```
 
   - provider: "username-password"
   - label: Label for the username password login section
 
   **Default**: Username and password login option is enabled.
+
 - ADMIN_ENHANCED_PREVIEW: Should the enhanced preview mode be active (true|false)? When enabled, previews will be
-  handled by iFraming in the Client app. This will allow the option of previewing playlists and screens.
-  If disabled, only slides can be previewed. This will be with the "live" method. This preview is not as precise.
-  See [Preview mode in the Client](#preview-mode-in-the-client).
+  handled by iFraming in the Client app. This will allow the option of previewing playlists and screens. If disabled,
+  only slides can be previewed. This will be with the "live" method. This preview is not as precise. See [Preview mode
+  in the Client](#preview-mode-in-the-client).
 
   **Default**: Disabled.
 
@@ -494,26 +489,31 @@ CLIENT_DEBUG=false
   waiting for being activated in the administration.
 
   **Default**: 20 s.
+
 - CLIENT_REFRESH_TOKEN_TIMEOUT: How often (milliseconds) should it be checked whether the token needs to be refreshed?
 
   **Default**: 30 s.
+
 - CLIENT_REFRESH_TOKEN_TIMEOUT: How often (milliseconds) should it be checked whether the token needs to be refreshed?
 
   **Default**: 60 s.
+
 - CLIENT_SCHEDULING_INTERVAL: How often (milliseconds) should the scheduling be run for the logged in screen?
 
   **Default**: 60 s.
+
 - CLIENT_PULL_STRATEGY_INTERVAL: How often (milliseconds) should data be pulled from the API?
 
   **Default**: 1 m. and 30 s.
-- CLIENT_COLOR_SCHEME: Which colour scheme should be enabled? Should be a json object as string.
-  This is used to signal how changes to darkmode are handled.
-  Options are:
+
+- CLIENT_COLOR_SCHEME: Which colour scheme should be enabled? Should be a json object as string. This is used to signal
+  how changes to darkmode are handled. Options are:
   - Not set - will use the browsers prefers-color-scheme setting.
   - '{"type":"library","lat":56.0,"lng":10.0}' - In this case the change to darkmode is handled with a library that
     activates darkmode according to sunrise/sunset of the location given by the longitude/latitude (lat/lng).
 
   **Default**: Library mode with a lat/lng set in Denmark.
+
 - CLIENT_DEBUG: Should the Client be in debug mode (true|false). When not in debug mode the mouse pointer is hidden.
 
   **Default**: Disabled.
@@ -591,10 +591,10 @@ classDiagram
 
 ## Online check for Client
 
-If the client does not have internet when starting, it cannot load the assets needed for the Client.
-The `public/client/online-check` has been added to handle this.
-The folder contains an `index.html`, that checks connectivity before redirecting to `/client`.
-If this index.html is cached in the browser the online check page can load without internet.
+If the client does not have internet when starting, it cannot load the assets needed for the Client. The
+`public/client/online-check` has been added to handle this. The folder contains an `index.html`, that checks
+connectivity before redirecting to `/client`. If this index.html is cached in the browser the online check page can load
+without internet.
 
 To use this, set the starting path of the Client to `/client/online-check`.
 
@@ -627,8 +627,8 @@ This feature is used in the Admin for displaying previews of slides, playlists a
 
 ## Screen status
 
-Screen status consists of 2 elements. Tracking latest request from a screen client.
-This data is collected and exposed through the API.
+Screen status consists of 2 elements. Tracking latest request from a screen client. This data is collected and exposed
+through the API.
 
 The other part is in the admin where the data can be exposed to the user.
 
@@ -648,20 +648,20 @@ ADMIN_SHOW_SCREEN_STATUS=true
 
 In the list view of screens, there is a column called "Status".
 
-This column shows the status of the connection of a "screen" in the administration and an
-actual "machine" running the screen data.
+This column shows the status of the connection of a "screen" in the administration and an actual "machine" running the
+screen data.
 
 This status can be:
 
 - "+ Tilkobl": The screen is not connected to a machine.
-- ✓ (green):  The machine is connected and running the latest code.
+- ✓ (green): The machine is connected and running the latest code.
 - i (yellow circle): The machine is not running the newest released code.
 - ! (red triangle): The machine has not called the API within the last hour or the access token is expired.
 
 ### Screen edit view
 
-In the screen edit view, the "Tilkobling" section shows the status of the connection between the
-screen entity and a machine running the screen data.
+In the screen edit view, the "Tilkobling" section shows the status of the connection between the screen entity and a
+machine running the screen data.
 
 The status can be:
 
@@ -677,8 +677,8 @@ Furthermore, the section "Tilkobling" will show the following data:
 * Kodeudgivelsestidspunkt: 17/6 2024 17:26
 ```
 
-This shows when the latest communication has occured, what client version the machine is running,
-and the time of client code release.
+This shows when the latest communication has occured, what client version the machine is running, and the time of client
+code release.
 
 ## Feeds
 
@@ -791,8 +791,8 @@ It is possible to include custom templates in your installation.
 
 ### Location
 
-Custom templates should be placed in the folder `assets/shared/custom-templates/`.
-This folder is in `.gitignore` so the contents will not be added to the git repository.
+Custom templates should be placed in the folder `assets/shared/custom-templates/`. This folder is in `.gitignore` so the
+contents will not be added to the git repository.
 
 How you populate this folder with your custom templates is up to you:
 
@@ -824,11 +824,37 @@ The `.jsx` should expose the following functions:
 
 For an example of a custom template see `assets/shared/custom-templates-example/`.
 
-The slide is responsible for signaling that it is done executing.
-This is done by calling the slideDone() function. If the slide should just run for X milliseconds then you can use the
-BaseSlideExecution class to handle this. See the example for this approach.
+The slide is responsible for signaling that it is done executing. This is done by calling the slideDone() function. If
+the slide should just run for X milliseconds then you can use the BaseSlideExecution class to handle this. See the
+example for this approach.
+
+#### custom-template-name.json
+
+The `.json` should include:
+
+```json
+{
+  "title": "Billede og tekst",
+  "id": "01FP2SNGFN0BZQH03KCBXHKYHG", // ULID, https://ulidgenerator.com/
+  "options": {} // Optional, can contain extra options such as `disableLivePreview` that disables live preview in the admin UI
+  "adminForm": {} // Optional, described below
+}
+```
+
+##### Admin Form not set in json
+
+It is possible to create an interactive admin form in a `.jsx`-file. As described above with renderSlide, when a
+template has a custom `.jsx` admin form, it needs to implement a `renderAdminForm` function in the base file.
+
+- renderAdminForm(formStateObject, onChange, handleMedia, mediaData) - Should return the JSX for the admin form.
+  - slideContent: The slide data object from the admin, could e.g. contain a title `slideContent["title"]`
+  - onSlideContentChange: A callback for changes on the slide content.
+  - handleMedia: A function that handles saving media (only necessary if the slide has media)
+  - mediaData: An object that can contain already saved media (only necessary if the slide has media)
+
+For an example of a custom template see `assets/shared/custom-templates-example/`.
 
-##### Admin Form
+##### Admin Form set in json
 
 To get content into the slide the config.adminForm field should be set. This should be an array of objects with the
 following attributes:
@@ -874,8 +900,7 @@ If you think the template could be used by other, consider contributing the temp
 
 ## Screen Layouts
 
-A screen layout is a setting that defines how a screen is divided into different regions.
-A layout consists of a grid.
+A screen layout is a setting that defines how a screen is divided into different regions. A layout consists of a grid.
 
 The grid regions are created from the number of rows and columns selected for the given layout. The regions are named
 
diff --git a/assets/shared/custom-templates-example/custom-template-example.jsx b/assets/shared/custom-templates-example/custom-template-example.jsx
index 0ea8a45f..088ad86e 100644
--- a/assets/shared/custom-templates-example/custom-template-example.jsx
+++ b/assets/shared/custom-templates-example/custom-template-example.jsx
@@ -2,6 +2,10 @@ import { useEffect } from "react";
 import templateConfig from "./custom-template-example.json";
 import BaseSlideExecution from "../slide-utils/base-slide-execution.js";
 import { ThemeStyles } from "../slide-utils/slide-util.jsx";
+import i18next from "i18next";
+import adminTranslations from "./translations.json";
+import { useTranslation } from "react-i18next";
+import getInputFiles from "../admin-util/helper.js";
 
 /**
  * Get the ULID of the template.
@@ -38,6 +42,17 @@ function renderSlide(slide, run, slideDone) {
   );
 }
 
+function renderAdminForm(formStateObject, onChange, handleMedia, mediaData) {
+  return (
+    <CustomTemplateAdminExample
+      formStateObject={formStateObject}
+      onChange={onChange}
+      handleMedia={handleMedia}
+      mediaData={mediaData}
+    />
+  );
+}
+
 /**
  * @param {object} props Props.
  * @param {object} props.slide The slide.
@@ -82,4 +97,69 @@ function CustomTemplateExample({
   );
 }
 
-export default { id, config, renderSlide };
+/**
+ * @param {object} props Props.
+ * @param {object} props.slideContent The slide content.
+ * @param {Function} props.onSlideContentChange on slide content change.
+ * @param {Function} props.handleMedia on slide media change.
+ * @param {object} props.mediaData The media object.
+ * @returns {JSX.Element} The component.
+ */
+function CustomTemplateAdminExample({
+  slideContent,
+  onSlideContentChange,
+  handleMedia = () => {},
+  mediaData = {},
+}) {
+  const { t } = useTranslation("custom-template-admin-example");
+
+  useEffect(() => {
+    const currentLang = i18next.language;
+    if (
+      !i18next.hasResourceBundle(currentLang, "custom-template-admin-example")
+    ) {
+      i18next.addResourceBundle(
+        currentLang,
+        "custom-template-admin-example",
+        adminTranslations["custom-template-admin-example"],
+        true,
+        true,
+      );
+    }
+  }, []);
+
+  return (
+    <>
+      <h2 className="h4 mb-3">{t("header")}</h2>
+      <fieldset>
+        <legend className="h5 mb-3">{t("content-sub-header")}</legend>
+        <label className="form-label">
+          {t("slide-title-label")}
+          <textarea
+            onChange={onSlideContentChange}
+            id="title"
+            className="col-md-6 form-control"
+            rows="3"
+            defaultValue={slideContent["title"]}
+          />
+          <small className="form-text d-flex">
+            {t("slide-title-help-text")}
+          </small>
+        </label>
+        <label className="form-label mb-0 col-9">
+          {t("images-label")}
+          <FileSelector
+            files={getInputFiles(slideContent["image"], mediaData)}
+            multiple={true}
+            onFilesChange={handleMedia}
+            name="image"
+            acceptedMimetypes="image/*"
+          />
+        </label>
+        <small>{t("images-help-text")}</small>
+      </fieldset>
+    </>
+  );
+}
+
+export default { id, config, renderSlide, renderAdminForm };
diff --git a/assets/shared/custom-templates-example/translations.json b/assets/shared/custom-templates-example/translations.json
new file mode 100644
index 00000000..df2e0857
--- /dev/null
+++ b/assets/shared/custom-templates-example/translations.json
@@ -0,0 +1,10 @@
+{
+  "custom-template-admin-example": {
+    "header": "Example header",
+    "content-sub-header": "Indhold",
+    "slide-title-label": "Overskrift på slide",
+    "slide-title-help-text": "Her kan du skrive overskriften til slidet",
+    "images-label": "Billeder",
+    "images-help-text": "Her tilføjer du bare et billede"
+  }
+}
diff --git a/assets/shared/templates/image-text/admin-form.jsx b/assets/shared/templates/image-text/admin-form.jsx
index 5b14dd05..d32d3752 100644
--- a/assets/shared/templates/image-text/admin-form.jsx
+++ b/assets/shared/templates/image-text/admin-form.jsx
@@ -10,9 +10,9 @@ import adminTranslations from "./translations.json";
 import { useTranslation } from "react-i18next";
 
 function ImageTextAdmin({
-  formStateObject,
-  onChange,
-  handleMedia,
+  slideContent,
+  onSlideContentChange,
+  handleMedia = () => {},
   mediaData = {},
 }) {
   const { t } = useTranslation("image-text-admin");
@@ -40,11 +40,11 @@ function ImageTextAdmin({
           {t("slide-title-label")}
         </label>
         <textarea
-          onChange={onChange}
+          onChange={onSlideContentChange}
           id="title"
           className="col-md-6 form-control"
           rows="3"
-          defaultValue={formStateObject["title"]}
+          defaultValue={slideContent["title"]}
         />
         <small className="form-text d-flex">{t("slide-title-help-text")}</small>
 
@@ -52,13 +52,13 @@ function ImageTextAdmin({
           name="text"
           label={t("rich-text-label")}
           helpText={t("rich-text-help-text")}
-          value={formStateObject["text"]}
-          onChange={onChange}
+          value={slideContent["text"]}
+          onChange={onSlideContentChange}
           formGroupClasses="col-md mt-3"
         />
 
         <Select
-          value={formStateObject["fontSize"]}
+          value={slideContent["fontSize"]}
           name={"fontSize"}
           options={[
             { key: "fontsize1", title: "xs", value: "font-size-xs" },
@@ -67,7 +67,7 @@ function ImageTextAdmin({
             { key: "fontsize4", title: "l", value: "font-size-lg" },
             { key: "fontsize5", title: "xl", value: "font-size-xl" },
           ]}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           label={t("font-size-label")}
           formGroupClasses="col-md-6 my-4"
         />
@@ -75,7 +75,7 @@ function ImageTextAdmin({
         <label className="form-label mb-0 col-9">
           {t("images-label")}
           <FileSelector
-            files={getInputFiles(formStateObject["image"], mediaData)}
+            files={getInputFiles(slideContent["image"], mediaData)}
             multiple={true}
             onFilesChange={handleMedia}
             name="image"
@@ -88,11 +88,11 @@ function ImageTextAdmin({
 
         <FormCheckbox
           label={t("disable-cropping-label")}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           name="mediaContain"
           formGroupClasses="mt-3"
           helpText={t("disable-cropping-help-text")}
-          value={formStateObject["mediaContain"]}
+          value={slideContent["mediaContain"]}
         />
       </fieldset>
 
@@ -107,20 +107,20 @@ function ImageTextAdmin({
           helpText={t("duration-help-text")}
           formGroupClasses="col-md-6 mb-3"
           value={
-            formStateObject["duration"]
-              ? Math.floor(formStateObject["duration"] / 1000)
+            slideContent["duration"]
+              ? Math.floor(slideContent["duration"] / 1000)
               : 15
           }
           onChange={(value) => {
             const newValue = value.target.value;
-            onChange({
+            onSlideContentChange({
               target: { id: "duration", value: Math.max(newValue, 1) * 1000 },
             });
           }}
         />
 
         <Select
-          value={formStateObject["boxAlign"]}
+          value={slideContent["boxAlign"]}
           name="boxAlign"
           options={[
             {
@@ -144,65 +144,65 @@ function ImageTextAdmin({
               value: "left",
             },
           ]}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           label={t("box-align-label")}
           formGroupClasses="col-md-6 mb-3"
         />
 
         <FormCheckbox
           label={t("box-margin-label")}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           name="boxMargin"
           formGroupClasses="col-md-6 mb-3"
-          value={formStateObject["boxMargin"]}
+          value={slideContent["boxMargin"]}
         />
 
         <FormCheckbox
           label={t("separator-label")}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           name="separator"
           formGroupClasses="col-md-6 mb-3"
-          value={formStateObject["separator"]}
+          value={slideContent["separator"]}
         />
 
         <FormCheckbox
           label={t("half-size-label")}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           name="halfSize"
           formGroupClasses="col-md-6 mb-3"
-          value={formStateObject["halfSize"]}
+          value={slideContent["halfSize"]}
         />
 
-        {formStateObject["separator"] && (
+        {slideContent["separator"] && (
           <FormCheckbox
             label={t("reversed-layout-label")}
-            onChange={onChange}
+            onChange={onSlideContentChange}
             name="reversed"
             formGroupClasses="col-md-6 mb-3"
-            value={formStateObject["reversed"]}
+            value={slideContent["reversed"]}
           />
         )}
 
         <FormCheckbox
           label={t("shadow-label")}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           name="shadow"
           formGroupClasses="col-md-6 mb-3"
-          value={formStateObject["shadow"]}
+          value={slideContent["shadow"]}
         />
 
         <FormCheckbox
           label={t("show-logo-label")}
-          onChange={onChange}
+          onChange={onSlideContentChange}
           name="showLogo"
           formGroupClasses="col-md-6 mb-3"
-          value={formStateObject["showLogo"]}
+          value={slideContent["showLogo"]}
         />
 
-        {formStateObject["showLogo"] && (
+        {slideContent["showLogo"] && (
           <>
             <Select
-              value={formStateObject["logoSize"]}
+              value={slideContent["logoSize"]}
               name="logoSize"
               options={[
                 {
@@ -221,13 +221,13 @@ function ImageTextAdmin({
                   value: "logo-size-l",
                 },
               ]}
-              onChange={onChange}
+              onChange={onSlideContentChange}
               label={t("logo-size-label")}
               formGroupClasses="col-md-6 mb-3"
             />
 
             <Select
-              value={formStateObject["logoPosition"]}
+              value={slideContent["logoPosition"]}
               name="logoPosition"
               options={[
                 {
@@ -251,17 +251,17 @@ function ImageTextAdmin({
                   value: "logo-position-bottom-right",
                 },
               ]}
-              onChange={onChange}
+              onChange={onSlideContentChange}
               label={t("logo-position-label")}
               formGroupClasses="col-md-6 mb-3"
             />
 
             <FormCheckbox
               label={t("logo-margin-label")}
-              onChange={onChange}
+              onChange={onSlideContentChange}
               name="logoMargin"
               formGroupClasses="col-md-6 mb-3"
-              value={formStateObject["logoMargin"]}
+              value={slideContent["logoMargin"]}
             />
           </>
         )}
@@ -269,10 +269,10 @@ function ImageTextAdmin({
         {Object.keys(mediaData).length > 1 && (
           <FormCheckbox
             label={t("disable-fade-label")}
-            onChange={onChange}
+            onChange={onSlideContentChange}
             name="disableImageFade"
             formGroupClasses="col-md-6 mb-3"
-            value={formStateObject["disableImageFade"]}
+            value={slideContent["disableImageFade"]}
           />
         )}
       </fieldset>

From 4fa4025e256d07cd58b7ab9432f2fa9f6583ea3b Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Mon, 22 Sep 2025 11:08:59 +0200
Subject: [PATCH 05/11] 5316: move dropdowns out of forms folder to ready the
 move of forms folder

---
 .../playlist-drag-and-drop/playlist-drag-and-drop.jsx           | 2 +-
 assets/admin/components/playlist/playlist-form.jsx              | 2 +-
 assets/admin/components/screen/screen-form.jsx                  | 2 +-
 assets/admin/components/slide/content/feed-selector.jsx         | 2 +-
 .../components/slide/content/multiselect-from-endpoint.jsx      | 2 +-
 .../admin/components/slide/content/station/station-selector.jsx | 2 +-
 assets/admin/components/slide/slide-form.jsx                    | 2 +-
 .../components/util/multi-and-table/select-groups-table.jsx     | 2 +-
 .../components/util/multi-and-table/select-playlists-table.jsx  | 2 +-
 .../components/util/multi-and-table/select-screens-table.jsx    | 2 +-
 .../components/util/multi-and-table/select-slides-table.jsx     | 2 +-
 .../{forms => }/multiselect-dropdown/groups/groups-dropdown.jsx | 0
 .../util/{forms => }/multiselect-dropdown/multi-dropdown.jsx    | 2 +-
 .../util/{forms => }/multiselect-dropdown/multi-dropdown.scss   | 0
 .../multiselect-dropdown/playlists/playlists-dropdown.jsx       | 0
 .../multiselect-dropdown/screens/screens-dropdown.jsx           | 0
 .../{forms => }/multiselect-dropdown/slides/slides-dropdown.jsx | 0
 .../multiselect-dropdown/tenants/tenants-dropdown.jsx           | 0
 18 files changed, 12 insertions(+), 12 deletions(-)
 rename assets/admin/components/util/{forms => }/multiselect-dropdown/groups/groups-dropdown.jsx (100%)
 rename assets/admin/components/util/{forms => }/multiselect-dropdown/multi-dropdown.jsx (99%)
 rename assets/admin/components/util/{forms => }/multiselect-dropdown/multi-dropdown.scss (100%)
 rename assets/admin/components/util/{forms => }/multiselect-dropdown/playlists/playlists-dropdown.jsx (100%)
 rename assets/admin/components/util/{forms => }/multiselect-dropdown/screens/screens-dropdown.jsx (100%)
 rename assets/admin/components/util/{forms => }/multiselect-dropdown/slides/slides-dropdown.jsx (100%)
 rename assets/admin/components/util/{forms => }/multiselect-dropdown/tenants/tenants-dropdown.jsx (100%)

diff --git a/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx b/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
index 1735e166..357bbfa0 100644
--- a/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
+++ b/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SelectPlaylistColumns } from "../playlist/playlists-columns";
-import PlaylistsDropdown from "../util/forms/multiselect-dropdown/playlists/playlists-dropdown";
+import PlaylistsDropdown from "../util/multiselect-dropdown/playlists/playlists-dropdown";
 import DragAndDropTable from "../util/drag-and-drop-table/drag-and-drop-table";
 import FormCheckbox from "../util/forms/form-checkbox";
 import {
diff --git a/assets/admin/components/playlist/playlist-form.jsx b/assets/admin/components/playlist/playlist-form.jsx
index fd894738..6d3bd7b7 100644
--- a/assets/admin/components/playlist/playlist-form.jsx
+++ b/assets/admin/components/playlist/playlist-form.jsx
@@ -5,7 +5,7 @@ import UserContext from "../../context/user-context";
 import Schedule from "../util/schedule/schedule";
 import { useGetV2TenantsQuery } from "../../../shared/redux/enhanced-api.ts";
 import ContentBody from "../util/content-body/content-body";
-import TenantsDropdown from "../util/forms/multiselect-dropdown/tenants/tenants-dropdown";
+import TenantsDropdown from "../util/multiselect-dropdown/tenants/tenants-dropdown";
 
 /**
  * The playlist form component.
diff --git a/assets/admin/components/screen/screen-form.jsx b/assets/admin/components/screen/screen-form.jsx
index 8f64516c..4d12f84f 100644
--- a/assets/admin/components/screen/screen-form.jsx
+++ b/assets/admin/components/screen/screen-form.jsx
@@ -9,7 +9,7 @@ import FormInput from "../util/forms/form-input";
 import FormInputArea from "../util/forms/form-input-area";
 import SelectGroupsTable from "../util/multi-and-table/select-groups-table";
 import GridGenerationAndSelect from "./util/grid-generation-and-select";
-import MultiSelectComponent from "../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../util/multiselect-dropdown/multi-dropdown";
 import idFromUrl from "../util/helpers/id-from-url";
 import {
   useGetV2LayoutsQuery,
diff --git a/assets/admin/components/slide/content/feed-selector.jsx b/assets/admin/components/slide/content/feed-selector.jsx
index fae88ea4..e7648658 100644
--- a/assets/admin/components/slide/content/feed-selector.jsx
+++ b/assets/admin/components/slide/content/feed-selector.jsx
@@ -7,7 +7,7 @@ import {
   enhancedApi,
   useGetV2FeedSourcesQuery,
 } from "../../../../shared/redux/enhanced-api.ts";
-import MultiSelectComponent from "../../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../../util/multiselect-dropdown/multi-dropdown.jsx";
 import idFromUrl from "../../util/helpers/id-from-url";
 import ContentForm from "./content-form";
 import MultiselectFromEndpoint from "./multiselect-from-endpoint";
diff --git a/assets/admin/components/slide/content/multiselect-from-endpoint.jsx b/assets/admin/components/slide/content/multiselect-from-endpoint.jsx
index daa08b54..c1b1be16 100644
--- a/assets/admin/components/slide/content/multiselect-from-endpoint.jsx
+++ b/assets/admin/components/slide/content/multiselect-from-endpoint.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import MultiSelectComponent from "../../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../../util/multiselect-dropdown/multi-dropdown";
 import localStorageKeys from "../../util/local-storage-keys";
 import { displayError } from "../../util/list/toast-component/display-toast";
 
diff --git a/assets/admin/components/slide/content/station/station-selector.jsx b/assets/admin/components/slide/content/station/station-selector.jsx
index f7fe9bf0..4679f94e 100644
--- a/assets/admin/components/slide/content/station/station-selector.jsx
+++ b/assets/admin/components/slide/content/station/station-selector.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import MultiSelectComponent from "../../../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../../../util/multiselect-dropdown/multi-dropdown";
 import { displayError } from "../../../util/list/toast-component/display-toast";
 import userContext from "../../../../context/user-context";
 
diff --git a/assets/admin/components/slide/slide-form.jsx b/assets/admin/components/slide/slide-form.jsx
index 60589532..feef4d84 100644
--- a/assets/admin/components/slide/slide-form.jsx
+++ b/assets/admin/components/slide/slide-form.jsx
@@ -6,7 +6,7 @@ import Form from "react-bootstrap/Form";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
-import MultiSelectComponent from "../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../util/multiselect-dropdown/multi-dropdown";
 import {
   useGetV2TemplatesQuery,
   useGetV2ThemesQuery,
diff --git a/assets/admin/components/util/multi-and-table/select-groups-table.jsx b/assets/admin/components/util/multi-and-table/select-groups-table.jsx
index 316c591a..03b3aa99 100644
--- a/assets/admin/components/util/multi-and-table/select-groups-table.jsx
+++ b/assets/admin/components/util/multi-and-table/select-groups-table.jsx
@@ -6,7 +6,7 @@ import {
   useGetV2ScreenGroupsQuery,
   useGetV2ScreenGroupsByIdScreensQuery,
 } from "../../../../shared/redux/enhanced-api.ts";
-import GroupsDropdown from "../forms/multiselect-dropdown/groups/groups-dropdown";
+import GroupsDropdown from "../multiselect-dropdown/groups/groups-dropdown";
 import useFetchDataHook from "../fetch-data-hook.js";
 
 /**
diff --git a/assets/admin/components/util/multi-and-table/select-playlists-table.jsx b/assets/admin/components/util/multi-and-table/select-playlists-table.jsx
index 89e9235f..a01ad19e 100644
--- a/assets/admin/components/util/multi-and-table/select-playlists-table.jsx
+++ b/assets/admin/components/util/multi-and-table/select-playlists-table.jsx
@@ -6,7 +6,7 @@ import {
   useGetV2PlaylistsQuery,
   useGetV2PlaylistsByIdSlidesQuery,
 } from "../../../../shared/redux/enhanced-api.ts";
-import PlaylistsDropdown from "../forms/multiselect-dropdown/playlists/playlists-dropdown";
+import PlaylistsDropdown from "../multiselect-dropdown/playlists/playlists-dropdown";
 import { SelectPlaylistColumns } from "../../playlist/playlists-columns";
 import useFetchDataHook from "../fetch-data-hook.js";
 
diff --git a/assets/admin/components/util/multi-and-table/select-screens-table.jsx b/assets/admin/components/util/multi-and-table/select-screens-table.jsx
index 1b743c58..1e3555ee 100644
--- a/assets/admin/components/util/multi-and-table/select-screens-table.jsx
+++ b/assets/admin/components/util/multi-and-table/select-screens-table.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import Table from "../table/table";
-import ScreensDropdown from "../forms/multiselect-dropdown/screens/screens-dropdown";
+import ScreensDropdown from "../multiselect-dropdown/screens/screens-dropdown";
 import { SelectScreenColumns } from "../../screen/util/screen-columns";
 import {
   enhancedApi,
diff --git a/assets/admin/components/util/multi-and-table/select-slides-table.jsx b/assets/admin/components/util/multi-and-table/select-slides-table.jsx
index 43e1f894..6fab0228 100644
--- a/assets/admin/components/util/multi-and-table/select-slides-table.jsx
+++ b/assets/admin/components/util/multi-and-table/select-slides-table.jsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import dayjs from "dayjs";
 import { SelectSlideColumns } from "../../slide/slides-columns";
 import DragAndDropTable from "../drag-and-drop-table/drag-and-drop-table";
-import SlidesDropdown from "../forms/multiselect-dropdown/slides/slides-dropdown";
+import SlidesDropdown from "../multiselect-dropdown/slides/slides-dropdown";
 import {
   useGetV2SlidesQuery,
   useGetV2PlaylistsByIdQuery,
diff --git a/assets/admin/components/util/forms/multiselect-dropdown/groups/groups-dropdown.jsx b/assets/admin/components/util/multiselect-dropdown/groups/groups-dropdown.jsx
similarity index 100%
rename from assets/admin/components/util/forms/multiselect-dropdown/groups/groups-dropdown.jsx
rename to assets/admin/components/util/multiselect-dropdown/groups/groups-dropdown.jsx
diff --git a/assets/admin/components/util/forms/multiselect-dropdown/multi-dropdown.jsx b/assets/admin/components/util/multiselect-dropdown/multi-dropdown.jsx
similarity index 99%
rename from assets/admin/components/util/forms/multiselect-dropdown/multi-dropdown.jsx
rename to assets/admin/components/util/multiselect-dropdown/multi-dropdown.jsx
index 0ae2cd44..5d378934 100644
--- a/assets/admin/components/util/forms/multiselect-dropdown/multi-dropdown.jsx
+++ b/assets/admin/components/util/multiselect-dropdown/multi-dropdown.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { MultiSelect } from "react-multi-select-component";
 import Form from "react-bootstrap/Form";
 import { useTranslation } from "react-i18next";
-import contentString from "../../helpers/content-string";
+import contentString from "../helpers/content-string";
 import "./multi-dropdown.scss";
 
 /**
diff --git a/assets/admin/components/util/forms/multiselect-dropdown/multi-dropdown.scss b/assets/admin/components/util/multiselect-dropdown/multi-dropdown.scss
similarity index 100%
rename from assets/admin/components/util/forms/multiselect-dropdown/multi-dropdown.scss
rename to assets/admin/components/util/multiselect-dropdown/multi-dropdown.scss
diff --git a/assets/admin/components/util/forms/multiselect-dropdown/playlists/playlists-dropdown.jsx b/assets/admin/components/util/multiselect-dropdown/playlists/playlists-dropdown.jsx
similarity index 100%
rename from assets/admin/components/util/forms/multiselect-dropdown/playlists/playlists-dropdown.jsx
rename to assets/admin/components/util/multiselect-dropdown/playlists/playlists-dropdown.jsx
diff --git a/assets/admin/components/util/forms/multiselect-dropdown/screens/screens-dropdown.jsx b/assets/admin/components/util/multiselect-dropdown/screens/screens-dropdown.jsx
similarity index 100%
rename from assets/admin/components/util/forms/multiselect-dropdown/screens/screens-dropdown.jsx
rename to assets/admin/components/util/multiselect-dropdown/screens/screens-dropdown.jsx
diff --git a/assets/admin/components/util/forms/multiselect-dropdown/slides/slides-dropdown.jsx b/assets/admin/components/util/multiselect-dropdown/slides/slides-dropdown.jsx
similarity index 100%
rename from assets/admin/components/util/forms/multiselect-dropdown/slides/slides-dropdown.jsx
rename to assets/admin/components/util/multiselect-dropdown/slides/slides-dropdown.jsx
diff --git a/assets/admin/components/util/forms/multiselect-dropdown/tenants/tenants-dropdown.jsx b/assets/admin/components/util/multiselect-dropdown/tenants/tenants-dropdown.jsx
similarity index 100%
rename from assets/admin/components/util/forms/multiselect-dropdown/tenants/tenants-dropdown.jsx
rename to assets/admin/components/util/multiselect-dropdown/tenants/tenants-dropdown.jsx

From af7d2e9d8343992bc1d645a053c2d392a6c83658 Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Mon, 22 Sep 2025 11:12:38 +0200
Subject: [PATCH 06/11] 5316: move forms folder as the content is shared

---
 .../activation-code-activate.jsx              |   2 +-
 .../activation-code/activation-code-form.jsx  |   4 +-
 .../feed-sources/feed-source-form.jsx         |   6 +-
 .../templates/colibo-feed-type.jsx            |   2 +-
 .../templates/event-database-feed-type.jsx    |   2 +-
 .../templates/event-database-v2-feed-type.jsx |   2 +-
 .../templates/notified-feed-type.jsx          |   2 +-
 assets/admin/components/groups/group-form.jsx |   2 +-
 assets/admin/components/media/media-list.jsx  |   2 +-
 .../playlist-drag-and-drop.jsx                |   2 +-
 .../playlist/playlist-campaign-form.jsx       |   6 +-
 .../playlist/playlist-gantt-chart.jsx         |   2 +-
 .../admin/components/screen/screen-form.jsx   |   8 +-
 .../admin/components/screen/screen-status.jsx |   2 +-
 .../screen/util/screen-gantt-chart.jsx        |   2 +-
 .../slide/content/contacts/contact-form.jsx   |   2 +-
 .../components/slide/content/content-form.jsx |  14 +-
 .../slide/content/file-form-element.jsx       |   2 +-
 .../content/poster/poster-selector-v1.jsx     |   6 +-
 .../content/poster/poster-single-override.jsx |   4 +-
 .../content/poster/poster-single-search.jsx   |   2 +-
 assets/admin/components/slide/slide-form.jsx  |   4 +-
 assets/admin/components/themes/theme-form.jsx |   4 +-
 assets/admin/components/user/login.jsx        |   2 +-
 .../components/util/image-uploader/image.jsx  |   2 +-
 assets/admin/components/util/list/list.jsx    |   4 +-
 .../components/util/schedule/schedule.jsx     |   6 +-
 .../forms/checkbox-options.jsx                |   0
 .../util => shared}/forms/form-checkbox.jsx   |   0
 .../util => shared}/forms/form-input-area.jsx |   0
 .../util => shared}/forms/form-input.jsx      |   2 +-
 .../forms/form-table/editable-cell.jsx        |   0
 .../forms/form-table/form-table.jsx           |   0
 .../forms/form-table/react-table.jsx          |   0
 .../forms/form-table/react-table.scss         |   0
 .../forms/form-table/table-component.jsx      |   0
 .../multiselect-dropdown/multi-dropdown.jsx   | 206 ++++++++++++++++++
 .../util => shared}/forms/radio-buttons.jsx   |   0
 .../forms/rich-text/rich-text.jsx             |   0
 .../forms/rich-text/rich-text.scss            |   0
 .../util => shared}/forms/select.jsx          |   0
 .../templates/image-text/admin-form.jsx       |   8 +-
 42 files changed, 260 insertions(+), 54 deletions(-)
 rename assets/{admin/components/util => shared}/forms/checkbox-options.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/form-checkbox.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/form-input-area.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/form-input.jsx (97%)
 rename assets/{admin/components/util => shared}/forms/form-table/editable-cell.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/form-table/form-table.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/form-table/react-table.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/form-table/react-table.scss (100%)
 rename assets/{admin/components/util => shared}/forms/form-table/table-component.jsx (100%)
 create mode 100644 assets/shared/forms/multiselect-dropdown/multi-dropdown.jsx
 rename assets/{admin/components/util => shared}/forms/radio-buttons.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/rich-text/rich-text.jsx (100%)
 rename assets/{admin/components/util => shared}/forms/rich-text/rich-text.scss (100%)
 rename assets/{admin/components/util => shared}/forms/select.jsx (100%)

diff --git a/assets/admin/components/activation-code/activation-code-activate.jsx b/assets/admin/components/activation-code/activation-code-activate.jsx
index 711aabbb..6b822c31 100644
--- a/assets/admin/components/activation-code/activation-code-activate.jsx
+++ b/assets/admin/components/activation-code/activation-code-activate.jsx
@@ -10,7 +10,7 @@ import {
 } from "../util/list/toast-component/display-toast";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input.jsx";
 import ContentFooter from "../util/content-footer/content-footer";
 
 /**
diff --git a/assets/admin/components/activation-code/activation-code-form.jsx b/assets/admin/components/activation-code/activation-code-form.jsx
index 6dab9bfa..92f66e7e 100644
--- a/assets/admin/components/activation-code/activation-code-form.jsx
+++ b/assets/admin/components/activation-code/activation-code-form.jsx
@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
-import RadioButtons from "../util/forms/radio-buttons";
+import FormInput from "../../../shared/forms/form-input";
+import RadioButtons from "../../../shared/forms/radio-buttons";
 import StickyFooter from "../util/sticky-footer";
 
 /**
diff --git a/assets/admin/components/feed-sources/feed-source-form.jsx b/assets/admin/components/feed-sources/feed-source-form.jsx
index bf9c0db2..6b876fdd 100644
--- a/assets/admin/components/feed-sources/feed-source-form.jsx
+++ b/assets/admin/components/feed-sources/feed-source-form.jsx
@@ -3,10 +3,10 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
-import FormInputArea from "../util/forms/form-input-area";
-import FormSelect from "../util/forms/select";
+import FormInputArea from "../../../shared/forms/form-input-area";
+import FormSelect from "../../../shared/forms/select";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 import CalendarApiFeedType from "./templates/calendar-api-feed-type";
 import NotifiedFeedType from "./templates/notified-feed-type";
 import EventDatabaseApiFeedType from "./templates/event-database-feed-type";
diff --git a/assets/admin/components/feed-sources/templates/colibo-feed-type.jsx b/assets/admin/components/feed-sources/templates/colibo-feed-type.jsx
index 36abcf91..8ec81611 100644
--- a/assets/admin/components/feed-sources/templates/colibo-feed-type.jsx
+++ b/assets/admin/components/feed-sources/templates/colibo-feed-type.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert } from "react-bootstrap";
 import MultiselectFromEndpoint from "../../slide/content/multiselect-from-endpoint";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const ColiboFeedType = ({
   feedSourceId,
diff --git a/assets/admin/components/feed-sources/templates/event-database-feed-type.jsx b/assets/admin/components/feed-sources/templates/event-database-feed-type.jsx
index 56834272..1572062c 100644
--- a/assets/admin/components/feed-sources/templates/event-database-feed-type.jsx
+++ b/assets/admin/components/feed-sources/templates/event-database-feed-type.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const EventDatabaseApiTemplate = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {
diff --git a/assets/admin/components/feed-sources/templates/event-database-v2-feed-type.jsx b/assets/admin/components/feed-sources/templates/event-database-v2-feed-type.jsx
index 10e09dc6..865bfeb0 100644
--- a/assets/admin/components/feed-sources/templates/event-database-v2-feed-type.jsx
+++ b/assets/admin/components/feed-sources/templates/event-database-v2-feed-type.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const EventDatabaseApiV2FeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {
diff --git a/assets/admin/components/feed-sources/templates/notified-feed-type.jsx b/assets/admin/components/feed-sources/templates/notified-feed-type.jsx
index c1abec00..688a53f8 100644
--- a/assets/admin/components/feed-sources/templates/notified-feed-type.jsx
+++ b/assets/admin/components/feed-sources/templates/notified-feed-type.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const NotifiedFeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {
diff --git a/assets/admin/components/groups/group-form.jsx b/assets/admin/components/groups/group-form.jsx
index b1889c5b..c49bf211 100644
--- a/assets/admin/components/groups/group-form.jsx
+++ b/assets/admin/components/groups/group-form.jsx
@@ -5,7 +5,7 @@ import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
 import ContentFooter from "../util/content-footer/content-footer";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 
 /**
  * The group form component.
diff --git a/assets/admin/components/media/media-list.jsx b/assets/admin/components/media/media-list.jsx
index 5cd8ed32..058f3099 100644
--- a/assets/admin/components/media/media-list.jsx
+++ b/assets/admin/components/media/media-list.jsx
@@ -17,7 +17,7 @@ import {
   useGetV2MediaQuery,
   useDeleteV2MediaByIdMutation,
 } from "../../../shared/redux/enhanced-api.ts";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 import "./media-list.scss";
 
 /**
diff --git a/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx b/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
index 357bbfa0..18b1379b 100644
--- a/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
+++ b/assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { SelectPlaylistColumns } from "../playlist/playlists-columns";
 import PlaylistsDropdown from "../util/multiselect-dropdown/playlists/playlists-dropdown";
 import DragAndDropTable from "../util/drag-and-drop-table/drag-and-drop-table";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 import {
   useGetV2PlaylistsByIdSlidesQuery,
   useGetV2PlaylistsQuery,
diff --git a/assets/admin/components/playlist/playlist-campaign-form.jsx b/assets/admin/components/playlist/playlist-campaign-form.jsx
index c9618613..52d96a1b 100644
--- a/assets/admin/components/playlist/playlist-campaign-form.jsx
+++ b/assets/admin/components/playlist/playlist-campaign-form.jsx
@@ -5,15 +5,15 @@ import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
-import FormInputArea from "../util/forms/form-input-area";
+import FormInput from "../../../shared/forms/form-input";
+import FormInputArea from "../../../shared/forms/form-input-area";
 import SelectSlidesTable from "../util/multi-and-table/select-slides-table";
 import LoadingComponent from "../util/loading-component/loading-component";
 import Preview from "../preview/preview";
 import idFromUrl from "../util/helpers/id-from-url";
 import StickyFooter from "../util/sticky-footer";
 import localStorageKeys from "../util/local-storage-keys";
-import Select from "../util/forms/select";
+import Select from "../../../shared/forms/select";
 import userContext from "../../context/user-context";
 
 /**
diff --git a/assets/admin/components/playlist/playlist-gantt-chart.jsx b/assets/admin/components/playlist/playlist-gantt-chart.jsx
index f7bd6e03..67880861 100644
--- a/assets/admin/components/playlist/playlist-gantt-chart.jsx
+++ b/assets/admin/components/playlist/playlist-gantt-chart.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import GanttChart from "../util/gantt-chart";
 import localStorageKeys from "../util/local-storage-keys";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 
 /**
  * @param {object} props The props.
diff --git a/assets/admin/components/screen/screen-form.jsx b/assets/admin/components/screen/screen-form.jsx
index 4d12f84f..26df02ae 100644
--- a/assets/admin/components/screen/screen-form.jsx
+++ b/assets/admin/components/screen/screen-form.jsx
@@ -5,8 +5,8 @@ import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
-import FormInputArea from "../util/forms/form-input-area";
+import FormInput from "../../../shared/forms/form-input";
+import FormInputArea from "../../../shared/forms/form-input-area";
 import SelectGroupsTable from "../util/multi-and-table/select-groups-table";
 import GridGenerationAndSelect from "./util/grid-generation-and-select";
 import MultiSelectComponent from "../util/multiselect-dropdown/multi-dropdown";
@@ -15,10 +15,10 @@ import {
   useGetV2LayoutsQuery,
   enhancedApi,
 } from "../../../shared/redux/enhanced-api.ts";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
-import Select from "../util/forms/select";
+import Select from "../../../shared/forms/select";
 import userContext from "../../context/user-context";
 import ScreenStatus from "./screen-status";
 import { displayError } from "../util/list/toast-component/display-toast";
diff --git a/assets/admin/components/screen/screen-status.jsx b/assets/admin/components/screen/screen-status.jsx
index 972c39cf..b9a96bb6 100644
--- a/assets/admin/components/screen/screen-status.jsx
+++ b/assets/admin/components/screen/screen-status.jsx
@@ -16,7 +16,7 @@ import { useDispatch } from "react-redux";
 import idFromUrl from "../util/helpers/id-from-url";
 import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
 import { displayError } from "../util/list/toast-component/display-toast";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 import AdminConfigLoader from "../util/admin-config-loader.js";
 
 /**
diff --git a/assets/admin/components/screen/util/screen-gantt-chart.jsx b/assets/admin/components/screen/util/screen-gantt-chart.jsx
index e59cb50e..e907f355 100644
--- a/assets/admin/components/screen/util/screen-gantt-chart.jsx
+++ b/assets/admin/components/screen/util/screen-gantt-chart.jsx
@@ -3,7 +3,7 @@ import { RRule } from "rrule";
 import { useTranslation } from "react-i18next";
 import GanttChart from "../../util/gantt-chart";
 import localStorageKeys from "../../util/local-storage-keys";
-import FormCheckbox from "../../util/forms/form-checkbox";
+import FormCheckbox from "../../../../shared/forms/form-checkbox";
 import UserContext from "../../../context/user-context";
 
 /**
diff --git a/assets/admin/components/slide/content/contacts/contact-form.jsx b/assets/admin/components/slide/content/contacts/contact-form.jsx
index 2e1cff04..f84fedd7 100644
--- a/assets/admin/components/slide/content/contacts/contact-form.jsx
+++ b/assets/admin/components/slide/content/contacts/contact-form.jsx
@@ -2,7 +2,7 @@ import set from "lodash.set";
 import { Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import FileSelector from "../file-selector";
-import FormInput from "../../../util/forms/form-input";
+import FormInput from "../../../../../shared/forms/form-input";
 
 /**
  * Contact form.
diff --git a/assets/admin/components/slide/content/content-form.jsx b/assets/admin/components/slide/content/content-form.jsx
index 2b9edbd1..a3f91504 100644
--- a/assets/admin/components/slide/content/content-form.jsx
+++ b/assets/admin/components/slide/content/content-form.jsx
@@ -1,13 +1,13 @@
-import FormCheckbox from "../../util/forms/form-checkbox";
-import FormInput from "../../util/forms/form-input";
-import Select from "../../util/forms/select";
+import FormCheckbox from "../../../../shared/forms/form-checkbox";
+import FormInput from "../../../../shared/forms/form-input";
+import Select from "../../../../shared/forms/select";
 import Contacts from "./contacts/contacts";
-import RichText from "../../util/forms/rich-text/rich-text";
-import FormTable from "../../util/forms/form-table/form-table";
+import RichText from "../../../../shared/forms/rich-text/rich-text";
+import FormTable from "../../../../shared/forms/form-table/form-table";
 import FileSelector from "./file-selector";
 import StationSelector from "./station/station-selector";
-import RadioButtons from "../../util/forms/radio-buttons";
-import CheckboxOptions from "../../util/forms/checkbox-options";
+import RadioButtons from "../../../../shared/forms/radio-buttons";
+import CheckboxOptions from "../../../../shared/forms/checkbox-options";
 import getInputFiles from "../../../../shared/admin-util/helper";
 
 /**
diff --git a/assets/admin/components/slide/content/file-form-element.jsx b/assets/admin/components/slide/content/file-form-element.jsx
index 78a4a339..ff138507 100644
--- a/assets/admin/components/slide/content/file-form-element.jsx
+++ b/assets/admin/components/slide/content/file-form-element.jsx
@@ -1,6 +1,6 @@
 import { Button, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 import FilePreview from "./file-preview";
 
 /**
diff --git a/assets/admin/components/slide/content/poster/poster-selector-v1.jsx b/assets/admin/components/slide/content/poster/poster-selector-v1.jsx
index 106692e6..758b597e 100644
--- a/assets/admin/components/slide/content/poster/poster-selector-v1.jsx
+++ b/assets/admin/components/slide/content/poster/poster-selector-v1.jsx
@@ -5,9 +5,9 @@ import AsyncSelect from "react-select/async";
 import Col from "react-bootstrap/Col";
 import dayjs from "dayjs";
 import localeDa from "dayjs/locale/da";
-import Select from "../../../util/forms/select";
-import FormInput from "../../../util/forms/form-input";
-import FormCheckbox from "../../../util/forms/form-checkbox";
+import Select from "../../../../../shared/forms/select";
+import FormInput from "../../../../../shared/forms/form-input";
+import FormCheckbox from "../../../../../shared/forms/form-checkbox";
 import localStorageKeys from "../../../util/local-storage-keys";
 
 /**
diff --git a/assets/admin/components/slide/content/poster/poster-single-override.jsx b/assets/admin/components/slide/content/poster/poster-single-override.jsx
index dce8e179..05a2e0f6 100644
--- a/assets/admin/components/slide/content/poster/poster-single-override.jsx
+++ b/assets/admin/components/slide/content/poster/poster-single-override.jsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../../util/forms/form-input";
-import FormCheckbox from "../../../util/forms/form-checkbox";
+import FormInput from "../../../../../shared/forms/form-input";
+import FormCheckbox from "../../../../../shared/forms/form-checkbox";
 
 /**
  * @param {object} props The props.
diff --git a/assets/admin/components/slide/content/poster/poster-single-search.jsx b/assets/admin/components/slide/content/poster/poster-single-search.jsx
index 91bb995d..324aea1f 100644
--- a/assets/admin/components/slide/content/poster/poster-single-search.jsx
+++ b/assets/admin/components/slide/content/poster/poster-single-search.jsx
@@ -4,7 +4,7 @@ import Col from "react-bootstrap/Col";
 import { useTranslation } from "react-i18next";
 import { MultiSelect } from "react-multi-select-component";
 import Form from "react-bootstrap/Form";
-import FormInput from "../../../util/forms/form-input";
+import FormInput from "../../../../../shared/forms/form-input";
 import { getHeaders, loadDropdownOptionsPromise } from "./poster-helper";
 
 /**
diff --git a/assets/admin/components/slide/slide-form.jsx b/assets/admin/components/slide/slide-form.jsx
index feef4d84..6c93a58c 100644
--- a/assets/admin/components/slide/slide-form.jsx
+++ b/assets/admin/components/slide/slide-form.jsx
@@ -12,7 +12,7 @@ import {
   useGetV2ThemesQuery,
 } from "../../../shared/redux/enhanced-api.ts";
 import idFromUrl from "../util/helpers/id-from-url";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 import ContentForm from "./content/content-form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import SlidePreview from "./preview/slide-preview";
@@ -23,7 +23,7 @@ import { displayError } from "../util/list/toast-component/display-toast";
 import userContext from "../../context/user-context";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
-import Select from "../util/forms/select";
+import Select from "../../../shared/forms/select";
 import { renderAdminForm } from "../../../shared/slide-utils/templates-admin";
 import { getConfig } from "../../../shared/slide-utils/templates-slide";
 import "./slide-form.scss";
diff --git a/assets/admin/components/themes/theme-form.jsx b/assets/admin/components/themes/theme-form.jsx
index 03b75693..aadef68a 100644
--- a/assets/admin/components/themes/theme-form.jsx
+++ b/assets/admin/components/themes/theme-form.jsx
@@ -3,9 +3,9 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
-import FormInputArea from "../util/forms/form-input-area";
+import FormInputArea from "../../../shared/forms/form-input-area";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 import ImageUploader from "../util/image-uploader/image-uploader";
 import StickyFooter from "../util/sticky-footer";
 
diff --git a/assets/admin/components/user/login.jsx b/assets/admin/components/user/login.jsx
index 26b802c7..4528d3e1 100644
--- a/assets/admin/components/user/login.jsx
+++ b/assets/admin/components/user/login.jsx
@@ -7,7 +7,7 @@ import queryString from "query-string";
 import Col from "react-bootstrap/Col";
 import { MultiSelect } from "react-multi-select-component";
 import UserContext from "../../context/user-context";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
 import AdminConfigLoader from "../util/admin-config-loader.js";
 import { displayError } from "../util/list/toast-component/display-toast";
diff --git a/assets/admin/components/util/image-uploader/image.jsx b/assets/admin/components/util/image-uploader/image.jsx
index e3710b43..dcb6c522 100644
--- a/assets/admin/components/util/image-uploader/image.jsx
+++ b/assets/admin/components/util/image-uploader/image.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import FormInput from "../forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 import "./image-uploader.scss";
 
 /**
diff --git a/assets/admin/components/util/list/list.jsx b/assets/admin/components/util/list/list.jsx
index 9a0f127c..78558427 100644
--- a/assets/admin/components/util/list/list.jsx
+++ b/assets/admin/components/util/list/list.jsx
@@ -10,9 +10,9 @@ import useModal from "../../../context/modal-context/modal-context-hook";
 import Pagination from "../paginate/pagination";
 import ListLoading from "../loading-component/list-loading";
 import localStorageKeys from "../local-storage-keys";
-import FormCheckbox from "../forms/form-checkbox";
+import FormCheckbox from "../../../../shared/forms/form-checkbox";
 import ListContext from "../../../context/list-context";
-import Select from "../forms/select";
+import Select from "../../../../shared/forms/select";
 
 /**
  * @param {object} props - The props.
diff --git a/assets/admin/components/util/schedule/schedule.jsx b/assets/admin/components/util/schedule/schedule.jsx
index 7c8a7a28..eb425233 100644
--- a/assets/admin/components/util/schedule/schedule.jsx
+++ b/assets/admin/components/util/schedule/schedule.jsx
@@ -5,8 +5,8 @@ import { Button, FormGroup } from "react-bootstrap";
 import dayjs from "dayjs";
 import { RRule } from "rrule";
 import utc from "dayjs/plugin/utc";
-import FormInput from "../forms/form-input";
-import Select from "../forms/select";
+import FormInput from "../../../../shared/forms/form-input";
+import Select from "../../../../shared/forms/select";
 import {
   createNewSchedule,
   createScheduleFromRRule,
@@ -16,7 +16,7 @@ import {
   getNextOccurrences,
   getRruleString,
 } from "./schedule-util";
-import FormCheckbox from "../forms/form-checkbox";
+import FormCheckbox from "../../../../shared/forms/form-checkbox";
 import Tooltip from "../tooltip";
 
 dayjs.extend(utc);
diff --git a/assets/admin/components/util/forms/checkbox-options.jsx b/assets/shared/forms/checkbox-options.jsx
similarity index 100%
rename from assets/admin/components/util/forms/checkbox-options.jsx
rename to assets/shared/forms/checkbox-options.jsx
diff --git a/assets/admin/components/util/forms/form-checkbox.jsx b/assets/shared/forms/form-checkbox.jsx
similarity index 100%
rename from assets/admin/components/util/forms/form-checkbox.jsx
rename to assets/shared/forms/form-checkbox.jsx
diff --git a/assets/admin/components/util/forms/form-input-area.jsx b/assets/shared/forms/form-input-area.jsx
similarity index 100%
rename from assets/admin/components/util/forms/form-input-area.jsx
rename to assets/shared/forms/form-input-area.jsx
diff --git a/assets/admin/components/util/forms/form-input.jsx b/assets/shared/forms/form-input.jsx
similarity index 97%
rename from assets/admin/components/util/forms/form-input.jsx
rename to assets/shared/forms/form-input.jsx
index 25ffda2d..83110dca 100644
--- a/assets/admin/components/util/forms/form-input.jsx
+++ b/assets/shared/forms/form-input.jsx
@@ -1,6 +1,6 @@
 import { FormControl, FormGroup, FormLabel, InputGroup } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import Tooltip from "../tooltip";
+import Tooltip from "../../admin/components/util/tooltip";
 
 /**
  * An input for forms.
diff --git a/assets/admin/components/util/forms/form-table/editable-cell.jsx b/assets/shared/forms/form-table/editable-cell.jsx
similarity index 100%
rename from assets/admin/components/util/forms/form-table/editable-cell.jsx
rename to assets/shared/forms/form-table/editable-cell.jsx
diff --git a/assets/admin/components/util/forms/form-table/form-table.jsx b/assets/shared/forms/form-table/form-table.jsx
similarity index 100%
rename from assets/admin/components/util/forms/form-table/form-table.jsx
rename to assets/shared/forms/form-table/form-table.jsx
diff --git a/assets/admin/components/util/forms/form-table/react-table.jsx b/assets/shared/forms/form-table/react-table.jsx
similarity index 100%
rename from assets/admin/components/util/forms/form-table/react-table.jsx
rename to assets/shared/forms/form-table/react-table.jsx
diff --git a/assets/admin/components/util/forms/form-table/react-table.scss b/assets/shared/forms/form-table/react-table.scss
similarity index 100%
rename from assets/admin/components/util/forms/form-table/react-table.scss
rename to assets/shared/forms/form-table/react-table.scss
diff --git a/assets/admin/components/util/forms/form-table/table-component.jsx b/assets/shared/forms/form-table/table-component.jsx
similarity index 100%
rename from assets/admin/components/util/forms/form-table/table-component.jsx
rename to assets/shared/forms/form-table/table-component.jsx
diff --git a/assets/shared/forms/multiselect-dropdown/multi-dropdown.jsx b/assets/shared/forms/multiselect-dropdown/multi-dropdown.jsx
new file mode 100644
index 00000000..0f9db4bd
--- /dev/null
+++ b/assets/shared/forms/multiselect-dropdown/multi-dropdown.jsx
@@ -0,0 +1,206 @@
+import { useEffect, useState } from "react";
+import { MultiSelect } from "react-multi-select-component";
+import Form from "react-bootstrap/Form";
+import { useTranslation } from "react-i18next";
+import contentString from "../../../admin/components/util/helpers/content-string";
+import "./multi-dropdown.scss";
+
+/**
+ * A searchable multiselect component. Using a multiselect from
+ * react-multi-select-component, and making some adjustments, replacing default
+ * fuzzy search with string match and displaying the values selected using
+ * contentstring-method.
+ *
+ * @param {object} props - The props.
+ * @param {Array} props.options - The option for the searchable dropdown.
+ * @param {Function} props.handleSelection - The callback when an option is selected
+ * @param {Array} props.selected - The selected options
+ * @param {string} props.name - The id of the form element
+ * @param {boolean} props.isLoading - Whether the component is loading.
+ * @param {string | null} props.noSelectedString - The label for when there is
+ *   nothing selected.
+ * @param {string} props.errorText - The string to display on error.
+ * @param {string} props.label - The input label
+ * @param {string | null} props.helpText - Help text for the dropdown.
+ * @param {Function} props.filterCallback - The callback on search filter.
+ * @param {boolean} props.singleSelect - If the dropdown is single select.
+ * @param {boolean} props.disableSearch - Disable search option.
+ * @param {boolean} props.error - Error.
+ * @returns {object} - The multidropdown
+ */
+function MultiSelectComponent({
+  handleSelection,
+  name,
+  label,
+  noSelectedString = null,
+  isLoading = false,
+  errorText = "",
+  error = false,
+  helpText = null,
+  selected = [],
+  options = [],
+  singleSelect = false,
+  disableSearch = false,
+  filterCallback = () => {},
+}) {
+  const { t } = useTranslation("common");
+  const [mappedOptions, setMappedOptions] = useState();
+  const [mappedSelected, setMappedSelected] = useState();
+  const textOnError = errorText || t("multi-dropdown.validation-text");
+  const nothingSelectedLabel =
+    noSelectedString || t("multi-dropdown.nothing-selected");
+
+  /**
+   * @param {Array} arrayWithDuplicates - Array of objects to make unique
+   * @param {string} key - The key to make array unique by.
+   * @returns {Array} Unique array
+   */
+  function removeDuplicatesByKey(arrayWithDuplicates, key) {
+    return [
+      ...new Map(arrayWithDuplicates.map((item) => [item[key], item])).values(),
+    ];
+  }
+
+  /**
+   * @param {Array} dataToMap - The data to map to {label, value, disabled}
+   * @returns {Array} An array of {label, value, disabled}
+   */
+  function mapDataToFitMultiselect(dataToMap) {
+    return (
+      dataToMap.map((item) => {
+        return {
+          label: item.title || item.name,
+          value: item["@id"] || item.id,
+          disabled: false,
+        };
+      }) ?? []
+    );
+  }
+
+  /** Map data to fit component. */
+  useEffect(() => {
+    const localMappedOptions =
+      options.length > 0 ? mapDataToFitMultiselect(options) : [];
+
+    const localMappedSelected =
+      selected.length > 0 ? mapDataToFitMultiselect(selected) : [];
+
+    const optionsWithSelected = removeDuplicatesByKey(
+      [...localMappedOptions, ...localMappedSelected],
+      "value",
+    );
+
+    setMappedOptions(optionsWithSelected);
+    setMappedSelected(localMappedSelected);
+  }, [selected, selected.length, options]);
+
+  /**
+   * Filter to replace the default filter in multi-select. It matches the label name.
+   *
+   * @param {Array} optionsToFilter The options to filter in
+   * @param {string} filter The string to filter by
+   * @returns {Array} Array of matching values
+   */
+  const filterOptions = (optionsToFilter, filter) => {
+    if (!filter) {
+      return optionsToFilter;
+    }
+
+    filterCallback(filter);
+
+    return optionsToFilter.filter(
+      ({ label: shadowLabel }) =>
+        shadowLabel && shadowLabel.match(new RegExp(filter, "i")),
+    );
+  };
+
+  /**
+   * Filter to replace the default filter in multi-select. It matches the label name.
+   *
+   * @param {Array} multiselectData Data from the multiselect component
+   * @returns {Array} Array of selected values without duplicates
+   */
+  const addOrRemoveNewEntryToSelected = (multiselectData) => {
+    let selectedOptions = [];
+    const idsOfSelectedEntries = multiselectData.map(({ value }) => value);
+    const selectedAndOptions = [...selected, ...options];
+    if ("@id" in selectedAndOptions[0]) {
+      selectedOptions = removeDuplicatesByKey(
+        selectedAndOptions.filter((option) =>
+          idsOfSelectedEntries.includes(option["@id"]),
+        ),
+        "@id",
+      );
+    } else {
+      selectedOptions = removeDuplicatesByKey(
+        selectedAndOptions.filter(({ id }) =>
+          idsOfSelectedEntries.includes(id),
+        ),
+        "id",
+      );
+    }
+
+    if (singleSelect) {
+      selectedOptions = [selectedOptions[selectedOptions.length - 1]];
+    }
+
+    return selectedOptions;
+  };
+
+  /**
+   * A callback on changed data.
+   *
+   * @param {Array} data The data to call back with
+   */
+  const changeData = (data) => {
+    let selectedOptions = [];
+    if (data.length > 0) {
+      selectedOptions = addOrRemoveNewEntryToSelected(data);
+    }
+
+    const target = { value: selectedOptions, id: name };
+    handleSelection({ target });
+  };
+
+  /**
+   * Renders the label in the multiselect.
+   *
+   * @param {Array} valueSelected The value(s) selected to render label from.
+   * @returns {string} The string to use as a label
+   */
+  const customValueRenderer = (valueSelected) => {
+    return valueSelected.length
+      ? contentString(valueSelected, t("multi-dropdown.and-string"))
+      : nothingSelectedLabel;
+  };
+
+  return (
+    <>
+      {mappedOptions && mappedSelected && (
+        <div className={`mb-3 ${error ? "invalid" : ""}`}>
+          <Form.Label htmlFor={name}>{label}</Form.Label>
+          <MultiSelect
+            isCreatable={false}
+            options={mappedOptions}
+            value={mappedSelected}
+            hasSelectAll={false}
+            disableSearch={disableSearch}
+            filterOptions={filterOptions}
+            onChange={changeData}
+            id={name}
+            className={`${error ? "invalid" : ""} ${
+              singleSelect ? "single-select" : ""
+            }`}
+            isLoading={isLoading}
+            valueRenderer={customValueRenderer}
+            labelledBy={name}
+          />
+          {error && <div className="invalid-feedback-multi">{textOnError}</div>}
+          {helpText && <small>{helpText}</small>}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default MultiSelectComponent;
diff --git a/assets/admin/components/util/forms/radio-buttons.jsx b/assets/shared/forms/radio-buttons.jsx
similarity index 100%
rename from assets/admin/components/util/forms/radio-buttons.jsx
rename to assets/shared/forms/radio-buttons.jsx
diff --git a/assets/admin/components/util/forms/rich-text/rich-text.jsx b/assets/shared/forms/rich-text/rich-text.jsx
similarity index 100%
rename from assets/admin/components/util/forms/rich-text/rich-text.jsx
rename to assets/shared/forms/rich-text/rich-text.jsx
diff --git a/assets/admin/components/util/forms/rich-text/rich-text.scss b/assets/shared/forms/rich-text/rich-text.scss
similarity index 100%
rename from assets/admin/components/util/forms/rich-text/rich-text.scss
rename to assets/shared/forms/rich-text/rich-text.scss
diff --git a/assets/admin/components/util/forms/select.jsx b/assets/shared/forms/select.jsx
similarity index 100%
rename from assets/admin/components/util/forms/select.jsx
rename to assets/shared/forms/select.jsx
diff --git a/assets/shared/templates/image-text/admin-form.jsx b/assets/shared/templates/image-text/admin-form.jsx
index d32d3752..770b9ae7 100644
--- a/assets/shared/templates/image-text/admin-form.jsx
+++ b/assets/shared/templates/image-text/admin-form.jsx
@@ -1,10 +1,10 @@
 import { useEffect } from "react";
-import RichText from "../../../admin/components/util/forms/rich-text/rich-text.jsx";
-import Select from "../../../admin/components/util/forms/select";
+import RichText from "../../forms/rich-text/rich-text.jsx";
+import Select from "../../forms/select.jsx";
 import FileSelector from "../../../admin/components/slide/content/file-selector.jsx";
 import getInputFiles from "../../admin-util/helper.js";
-import FormCheckbox from "../../../admin/components/util/forms/form-checkbox";
-import FormInput from "../../../admin/components/util/forms/form-input";
+import FormCheckbox from "../../forms/form-checkbox.jsx";
+import FormInput from "../../forms/form-input.jsx";
 import i18next from "i18next";
 import adminTranslations from "./translations.json";
 import { useTranslation } from "react-i18next";

From 203b7cd87d38ae24465264c5e80be1c5c2b10a38 Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Tue, 23 Sep 2025 12:58:51 +0200
Subject: [PATCH 07/11] 5316: fix tests, renamed imports

---
 assets/shared/templates/image-text.jsx        |  4 +-
 .../templates/image-text/admin-form.jsx       | 40 ++++++++--------
 assets/tests/admin/admin-form.spec.js         | 47 +++++++++++++++----
 assets/tests/admin/test-helper.js             |  2 +-
 4 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/assets/shared/templates/image-text.jsx b/assets/shared/templates/image-text.jsx
index 3c8189ef..754c9d65 100644
--- a/assets/shared/templates/image-text.jsx
+++ b/assets/shared/templates/image-text.jsx
@@ -27,8 +27,8 @@ function renderSlide(slide, run, slideDone) {
 function renderAdminForm(formStateObject, onChange, handleMedia, mediaData) {
   return (
     <ImageTextAdmin
-      formStateObject={formStateObject}
-      onChange={onChange}
+      slideContent={formStateObject}
+      onSlideContentChange={onChange}
       handleMedia={handleMedia}
       mediaData={mediaData}
     />
diff --git a/assets/shared/templates/image-text/admin-form.jsx b/assets/shared/templates/image-text/admin-form.jsx
index 770b9ae7..7fbc82d5 100644
--- a/assets/shared/templates/image-text/admin-form.jsx
+++ b/assets/shared/templates/image-text/admin-form.jsx
@@ -44,7 +44,7 @@ function ImageTextAdmin({
           id="title"
           className="col-md-6 form-control"
           rows="3"
-          defaultValue={slideContent["title"]}
+          defaultValue={slideContent?.title}
         />
         <small className="form-text d-flex">{t("slide-title-help-text")}</small>
 
@@ -52,13 +52,13 @@ function ImageTextAdmin({
           name="text"
           label={t("rich-text-label")}
           helpText={t("rich-text-help-text")}
-          value={slideContent["text"]}
+          value={slideContent?.text}
           onChange={onSlideContentChange}
           formGroupClasses="col-md mt-3"
         />
 
         <Select
-          value={slideContent["fontSize"]}
+          value={slideContent?.fontSize}
           name={"fontSize"}
           options={[
             { key: "fontsize1", title: "xs", value: "font-size-xs" },
@@ -75,7 +75,7 @@ function ImageTextAdmin({
         <label className="form-label mb-0 col-9">
           {t("images-label")}
           <FileSelector
-            files={getInputFiles(slideContent["image"], mediaData)}
+            files={getInputFiles(slideContent?.image, mediaData)}
             multiple={true}
             onFilesChange={handleMedia}
             name="image"
@@ -92,7 +92,7 @@ function ImageTextAdmin({
           name="mediaContain"
           formGroupClasses="mt-3"
           helpText={t("disable-cropping-help-text")}
-          value={slideContent["mediaContain"]}
+          value={slideContent?.mediaContain}
         />
       </fieldset>
 
@@ -107,8 +107,8 @@ function ImageTextAdmin({
           helpText={t("duration-help-text")}
           formGroupClasses="col-md-6 mb-3"
           value={
-            slideContent["duration"]
-              ? Math.floor(slideContent["duration"] / 1000)
+            slideContent?.duration
+              ? Math.floor(slideContent.duration / 1000)
               : 15
           }
           onChange={(value) => {
@@ -120,7 +120,7 @@ function ImageTextAdmin({
         />
 
         <Select
-          value={slideContent["boxAlign"]}
+          value={slideContent?.boxAlign}
           name="boxAlign"
           options={[
             {
@@ -154,7 +154,7 @@ function ImageTextAdmin({
           onChange={onSlideContentChange}
           name="boxMargin"
           formGroupClasses="col-md-6 mb-3"
-          value={slideContent["boxMargin"]}
+          value={slideContent?.boxMargin}
         />
 
         <FormCheckbox
@@ -162,7 +162,7 @@ function ImageTextAdmin({
           onChange={onSlideContentChange}
           name="separator"
           formGroupClasses="col-md-6 mb-3"
-          value={slideContent["separator"]}
+          value={slideContent?.separator}
         />
 
         <FormCheckbox
@@ -170,16 +170,16 @@ function ImageTextAdmin({
           onChange={onSlideContentChange}
           name="halfSize"
           formGroupClasses="col-md-6 mb-3"
-          value={slideContent["halfSize"]}
+          value={slideContent?.halfSize}
         />
 
-        {slideContent["separator"] && (
+        {slideContent?.separator && (
           <FormCheckbox
             label={t("reversed-layout-label")}
             onChange={onSlideContentChange}
             name="reversed"
             formGroupClasses="col-md-6 mb-3"
-            value={slideContent["reversed"]}
+            value={slideContent?.reversed}
           />
         )}
 
@@ -188,7 +188,7 @@ function ImageTextAdmin({
           onChange={onSlideContentChange}
           name="shadow"
           formGroupClasses="col-md-6 mb-3"
-          value={slideContent["shadow"]}
+          value={slideContent?.shadow}
         />
 
         <FormCheckbox
@@ -196,13 +196,13 @@ function ImageTextAdmin({
           onChange={onSlideContentChange}
           name="showLogo"
           formGroupClasses="col-md-6 mb-3"
-          value={slideContent["showLogo"]}
+          value={slideContent?.showLogo}
         />
 
-        {slideContent["showLogo"] && (
+        {slideContent?.showLogo && (
           <>
             <Select
-              value={slideContent["logoSize"]}
+              value={slideContent?.logoSize}
               name="logoSize"
               options={[
                 {
@@ -227,7 +227,7 @@ function ImageTextAdmin({
             />
 
             <Select
-              value={slideContent["logoPosition"]}
+              value={slideContent?.logoPosition}
               name="logoPosition"
               options={[
                 {
@@ -261,7 +261,7 @@ function ImageTextAdmin({
               onChange={onSlideContentChange}
               name="logoMargin"
               formGroupClasses="col-md-6 mb-3"
-              value={slideContent["logoMargin"]}
+              value={slideContent?.logoMargin}
             />
           </>
         )}
@@ -272,7 +272,7 @@ function ImageTextAdmin({
             onChange={onSlideContentChange}
             name="disableImageFade"
             formGroupClasses="col-md-6 mb-3"
-            value={slideContent["disableImageFade"]}
+            value={slideContent?.disableImageFade}
           />
         )}
       </fieldset>
diff --git a/assets/tests/admin/admin-form.spec.js b/assets/tests/admin/admin-form.spec.js
index 239ef15a..fe62fddf 100644
--- a/assets/tests/admin/admin-form.spec.js
+++ b/assets/tests/admin/admin-form.spec.js
@@ -9,6 +9,8 @@ import {
   imageTextTemplate,
   onlyImageTextListJson,
   slideJson,
+  slidesJson1,
+  tokenAdminJson,
 } from "./data-fixtures.js";
 
 test.describe("Admin form ui tests", () => {
@@ -21,9 +23,20 @@ test.describe("Admin form ui tests", () => {
 
     await fulfillDataRoute(page, "**/templates*", onlyImageTextListJson);
     await fulfillEmptyRoutes(page, ["**/playlists*", "**/themes*"]);
+    await fulfillDataRoute(
+      page,
+      "**/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
+      imageTextTemplate,
+    );
 
-    await page.getByLabel("Tilføj nyt slide").first().click();
-    await expect(page.getByText("Opret nyt slide:")).toBeVisible();
+    await Promise.all([
+      page.waitForURL("**/slide/create"),
+      await page.getByLabel("Tilføj nyt slide").first().click(),
+    ]);
+
+    const header = page.getByText("Opret nyt slide:");
+    await header.waitFor();
+    await expect(header).toBeVisible();
 
     // Pick tempalte
     await page
@@ -263,29 +276,47 @@ test.describe("Admin slide values depending on other values", () => {
   });
 
   test.beforeEach(async ({ page }) => {
-    await loginTest(page);
+    await page.goto("/admin/slides/list");
+
+    await page.route("**/token", async (route) => {
+      await route.fulfill({ json: tokenAdminJson });
+    });
+
+    await page.route("**/slides*", async (route) => {
+      await route.fulfill({ json: slidesJson1 });
+    });
 
     await fulfillDataRoute(page, "**/templates*", onlyImageTextListJson);
+
     await fulfillDataRoute(
       page,
       "**/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
       imageTextTemplate,
     );
 
-    await fulfillEmptyRoutes(page, ["**/playlists*", "**/themes*"]);
-
     await fulfillDataRoute(
       page,
       "**/v2/slides/00015Y0ZVC18N407JD07SM0YCF",
       slideJson,
     );
 
-    await page.locator("#edit_button").first().click({ force: true });
+    await fulfillEmptyRoutes(page, ["**/playlists*", "**/themes*"]);
+
+    await page.getByLabel("Email").fill("admin@example.com");
+    await page.getByLabel("Kodeord").fill("password");
+    await page.locator("#login").click();
+
+    await Promise.all([
+      page.waitForURL("**/slide/edit/*"),
+      await page.locator("#edit_button").first().click({ force: true }),
+    ]);
   });
 
   test("Should have filled title", async ({ page }) => {
-    // await expect(page.locator("#title")).toHaveText("Test slide");
-    await expect(page.locator("#fontSize")).toHaveText("Test slide");
+    const title = page.locator("textarea#title");
+    await title.waitFor();
+    await expect(title).toBeVisible();
+    await expect(title).toHaveValue("Title");
   });
 
   test("Should have visible text editor for description", async ({ page }) => {
diff --git a/assets/tests/admin/test-helper.js b/assets/tests/admin/test-helper.js
index e459aca1..d3f58a34 100644
--- a/assets/tests/admin/test-helper.js
+++ b/assets/tests/admin/test-helper.js
@@ -46,7 +46,7 @@ const loginTest = async (page) => {
   });
 
   await page.route("**/slides*", async (route) => {
-    await route.fulfill({ json: slidesJson1 });
+    await route.fulfill({ json: emptyJson });
   });
 
   await expect(page).toHaveTitle(/OS2Display Admin/);

From f83c291562adf7dc4209b46cc0240211d4054dfb Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Fri, 26 Sep 2025 11:10:50 +0200
Subject: [PATCH 08/11] 5316: fix test, inject slides into logintest, fix
 *templates* routes

---
 assets/tests/admin/admin-form.spec.js | 82 ++++++++++++++++++---------
 assets/tests/admin/test-helper.js     | 11 +---
 2 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/assets/tests/admin/admin-form.spec.js b/assets/tests/admin/admin-form.spec.js
index fe62fddf..58365215 100644
--- a/assets/tests/admin/admin-form.spec.js
+++ b/assets/tests/admin/admin-form.spec.js
@@ -10,7 +10,6 @@ import {
   onlyImageTextListJson,
   slideJson,
   slidesJson1,
-  tokenAdminJson,
 } from "./data-fixtures.js";
 
 test.describe("Admin form ui tests", () => {
@@ -276,17 +275,49 @@ test.describe("Admin slide values depending on other values", () => {
   });
 
   test.beforeEach(async ({ page }) => {
-    await page.goto("/admin/slides/list");
+    await fulfillDataRoute(
+      page,
+      "**/templates?itemsPerPage*",
+      onlyImageTextListJson,
+    );
 
-    await page.route("**/token", async (route) => {
-      await route.fulfill({ json: tokenAdminJson });
-    });
+    await page.route(
+      "**/templates/000YR9PMQC0GMC1TP90V9N07WX",
+      async (route) => {
+        await route.fulfill(imageTextTemplate);
+      },
+    );
 
-    await page.route("**/slides*", async (route) => {
-      await route.fulfill({ json: slidesJson1 });
-    });
+    await fulfillDataRoute(
+      page,
+      "**/templates/01FGC8EXSE1KCC1PTR0NHB0H3R",
+      imageTextTemplate,
+    );
 
-    await fulfillDataRoute(page, "**/templates*", onlyImageTextListJson);
+    await fulfillDataRoute(
+      page,
+      "**/templates/002BAP34VD1EHG0E4J0D2Y00JW",
+      imageTextTemplate,
+    );
+
+    await fulfillDataRoute(
+      page,
+      "**/templates/017BG9P0E0103F0TFS17FM016M",
+      imageTextTemplate,
+    );
+
+    await fulfillDataRoute(
+      page,
+      "**/templates/016MHSNKCH1PQW1VY615JC19Y3",
+      imageTextTemplate,
+    );
+    await fulfillDataRoute(
+      page,
+      "**/templates/000BGWFMBS15N807E60HP91JCX",
+      imageTextTemplate,
+    );
+
+    await loginTest(page, slidesJson1);
 
     await fulfillDataRoute(
       page,
@@ -299,17 +330,16 @@ test.describe("Admin slide values depending on other values", () => {
       "**/v2/slides/00015Y0ZVC18N407JD07SM0YCF",
       slideJson,
     );
-
     await fulfillEmptyRoutes(page, ["**/playlists*", "**/themes*"]);
-
-    await page.getByLabel("Email").fill("admin@example.com");
-    await page.getByLabel("Kodeord").fill("password");
-    await page.locator("#login").click();
-
     await Promise.all([
       page.waitForURL("**/slide/edit/*"),
       await page.locator("#edit_button").first().click({ force: true }),
     ]);
+
+    const title = page.getByText("Rediger slide:");
+    await title.waitFor();
+
+    await expect(title).toBeVisible();
   });
 
   test("Should have filled title", async ({ page }) => {
@@ -325,7 +355,7 @@ test.describe("Admin slide values depending on other values", () => {
 
   test("Should pick font size", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
+      if (request.method() === "PUT") {
         const postData = request.postDataJSON(); // Parses JSON body
         expect(postData.content).toMatchObject({
           fontSize: "font-size-m",
@@ -351,8 +381,8 @@ test.describe("Admin slide values depending on other values", () => {
 
   test("Should have media contain visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+      if (request.method() === "PUT") {
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           mediaContain: true,
         });
@@ -370,8 +400,8 @@ test.describe("Admin slide values depending on other values", () => {
 
   test("Should have duration visible and interactable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+      if (request.method() === "PUT") {
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           duration: 10000,
         });
@@ -388,7 +418,7 @@ test.describe("Admin slide values depending on other values", () => {
 
   test("Should have box align visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
+      if (request.method() === "PUT") {
         const postData = request.postDataJSON(); // Parses JSON body
         expect(postData.content).toMatchObject({
           boxAlign: "right",
@@ -407,7 +437,7 @@ test.describe("Admin slide values depending on other values", () => {
 
   test("Should have box margin visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
+      if (request.method() === "PUT") {
         const postData = request.postDataJSON(); // Parses JSON body
         expect(postData.content).toMatchObject({
           boxMargin: true,
@@ -428,7 +458,7 @@ test.describe("Admin slide values depending on other values", () => {
     page,
   }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
+      if (request.method() === "PUT") {
         const postData = request.postDataJSON(); // Parses JSON body
         expect(postData.content).toMatchObject({
           separator: true,
@@ -453,7 +483,7 @@ test.describe("Admin slide values depending on other values", () => {
 
   test("Should have halfsize visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
+      if (request.method() === "PUT") {
         const postData = request.postDataJSON(); // Parses JSON body
         expect(postData.content).toMatchObject({
           halfSize: true,
@@ -472,7 +502,7 @@ test.describe("Admin slide values depending on other values", () => {
 
   test("Should have shadow visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
+      if (request.method() === "PUT") {
         const postData = request.postDataJSON(); // Parses JSON body
         expect(postData.content).toMatchObject({
           shadow: true,
@@ -492,7 +522,7 @@ test.describe("Admin slide values depending on other values", () => {
     page,
   }) => {
     await page.route("**/v2/slides", async (route, request) => {
-      if (request.method() === "POST") {
+      if (request.method() === "PUT") {
         const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           showLogo: true,
diff --git a/assets/tests/admin/test-helper.js b/assets/tests/admin/test-helper.js
index d3f58a34..37360db5 100644
--- a/assets/tests/admin/test-helper.js
+++ b/assets/tests/admin/test-helper.js
@@ -1,9 +1,4 @@
-import {
-  adminConfigJson,
-  emptyJson,
-  slidesJson1,
-  tokenAdminJson,
-} from "./data-fixtures.js";
+import { adminConfigJson, emptyJson, tokenAdminJson } from "./data-fixtures.js";
 import { expect } from "@playwright/test";
 
 const beforeEachTest = async (page) => {
@@ -38,7 +33,7 @@ const fulfillDataRoute = async (page, routePattern, data, status) => {
   });
 };
 
-const loginTest = async (page) => {
+const loginTest = async (page, slides = null) => {
   await page.goto("/admin/slides/list");
 
   await page.route("**/token", async (route) => {
@@ -46,7 +41,7 @@ const loginTest = async (page) => {
   });
 
   await page.route("**/slides*", async (route) => {
-    await route.fulfill({ json: emptyJson });
+    await route.fulfill({ json: slides ?? emptyJson });
   });
 
   await expect(page).toHaveTitle(/OS2Display Admin/);

From 0a641eb5f8a34f026861e663356a438e2310ea05 Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Fri, 26 Sep 2025 11:11:24 +0200
Subject: [PATCH 09/11] 5316: fix failing test

---
 assets/shared/slide-utils/templates-admin.js |  2 +-
 assets/tests/admin/admin-form.spec.js        | 16 ++++++++--------
 assets/tests/admin/data-fixtures.js          | 10 ----------
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/assets/shared/slide-utils/templates-admin.js b/assets/shared/slide-utils/templates-admin.js
index 92c42733..f487bb17 100644
--- a/assets/shared/slide-utils/templates-admin.js
+++ b/assets/shared/slide-utils/templates-admin.js
@@ -1,4 +1,4 @@
-// Load templates.
+// Load templates admin.
 // @see https://vite.dev/guide/features.html#glob-import
 // @see docs/custom-templates.md
 // Eager loading because no other code piece imports the templates otherwise.
diff --git a/assets/tests/admin/admin-form.spec.js b/assets/tests/admin/admin-form.spec.js
index 58365215..d64f60d6 100644
--- a/assets/tests/admin/admin-form.spec.js
+++ b/assets/tests/admin/admin-form.spec.js
@@ -468,13 +468,13 @@ test.describe("Admin slide values depending on other values", () => {
 
     await expect(
       page.getByText("Alternativt layout uden tekstboks"),
-    ).toHaveCount(0);
+    ).not.toBeVisible();
     const separator = await page.locator("#checkbox-separator");
     await separator.waitFor();
     await separator.check({ force: true });
     await expect(
       page.getByText("Alternativt layout uden tekstboks"),
-    ).toHaveCount(1);
+    ).toBeVisible();
 
     const saveButton = page.locator("#save_slide");
     await saveButton.waitFor();
@@ -529,17 +529,17 @@ test.describe("Admin slide values depending on other values", () => {
         });
       }
     });
-    await expect(page.getByText("Logostørrelse")).toHaveCount(0);
-    await expect(page.getByText("Logoposition")).toHaveCount(0);
-    await expect(page.getByText("Margin om logo")).toHaveCount(0);
+    await expect(page.getByText("Logostørrelse")).not.toBeVisible();
+    await expect(page.getByText("Logoposition")).not.toBeVisible();
+    await expect(page.getByText("Margin om logo")).not.toBeVisible();
 
     const showLogo = await page.locator("#checkbox-showLogo");
     await showLogo.waitFor();
     await showLogo.check({ force: true });
 
-    await expect(page.getByText("Logostørrelse")).toHaveCount(1);
-    await expect(page.getByText("Logoposition")).toHaveCount(1);
-    await expect(page.getByText("Margin om logo")).toHaveCount(1);
+    await expect(page.getByText("Logostørrelse")).toBeVisible();
+    await expect(page.getByText("Logoposition")).toBeVisible();
+    await expect(page.getByText("Margin om logo")).toBeVisible();
 
     const saveButton = page.locator("#save_slide");
     await saveButton.waitFor();
diff --git a/assets/tests/admin/data-fixtures.js b/assets/tests/admin/data-fixtures.js
index 9227e0ad..70fa112d 100644
--- a/assets/tests/admin/data-fixtures.js
+++ b/assets/tests/admin/data-fixtures.js
@@ -428,16 +428,6 @@ const slideJson = {
   media: [],
   content: {
     title: "Title",
-    text: "",
-    fontSize: "font-size-xl",
-    mediaContain: true,
-    duration: 18000,
-    boxAlign: "top",
-    boxMargin: true,
-    separator: true,
-    halfSize: true,
-    shadow: true,
-    showLogo: true,
   },
   modifiedBy: "admin@example.com",
   createdBy: "admin@example.com",

From 9fa3690b1bcc7e614f8bb6a4ceaabc39a323975b Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Fri, 26 Sep 2025 11:30:17 +0200
Subject: [PATCH 10/11] 5316: CI: true in GA

---
 .github/workflows/playwright.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/playwright.yaml b/.github/workflows/playwright.yaml
index 5b78012d..52be0281 100644
--- a/.github/workflows/playwright.yaml
+++ b/.github/workflows/playwright.yaml
@@ -33,7 +33,7 @@ jobs:
 
       - name: Run playwright
         env:
-          CI: "true"
+          CI: true
         run: |
           docker compose run --rm playwright npx playwright install --with-deps
           docker compose run --rm playwright npx playwright test

From 14ebc97660f540c151aac361f391324aff211b4e Mon Sep 17 00:00:00 2001
From: sinejespersen <sinejespersen@protonmail.com>
Date: Fri, 26 Sep 2025 14:16:41 +0200
Subject: [PATCH 11/11] 5316: disable instead of remove from interface, add
 help texts

---
 assets/shared/forms/form-checkbox.jsx         |   3 +
 .../templates/image-text/admin-form.jsx       | 190 ++++++++++--------
 .../templates/image-text/translations.json    |   5 +-
 assets/tests/admin/admin-form.spec.js         |  62 +++---
 4 files changed, 139 insertions(+), 121 deletions(-)

diff --git a/assets/shared/forms/form-checkbox.jsx b/assets/shared/forms/form-checkbox.jsx
index 4a985134..7d10b1fa 100644
--- a/assets/shared/forms/form-checkbox.jsx
+++ b/assets/shared/forms/form-checkbox.jsx
@@ -7,6 +7,7 @@ import { FormCheck, FormGroup } from "react-bootstrap";
  * @param {string} props.name The name of the checkbox
  * @param {string} props.label The label for the checkbox
  * @param {string} props.helpText The help text for the checkbox, if it is needed.
+ * @param {string} props.disabled If the checkbox is disabled.
  * @param {string} props.value The value of the checkbox
  * @param {Function} props.onChange The callback for changes in the checkbox
  * @param {string} props.formGroupClasses Classes for the form group
@@ -17,6 +18,7 @@ function FormCheckbox({
   label,
   onChange,
   helpText = "",
+  disabled = false,
   formGroupClasses = "",
   value = false,
 }) {
@@ -39,6 +41,7 @@ function FormCheckbox({
         type="checkbox"
         name={name}
         checked={value}
+        disabled={disabled}
         label={label}
       />
       {helpText && <small>{helpText}</small>}
diff --git a/assets/shared/templates/image-text/admin-form.jsx b/assets/shared/templates/image-text/admin-form.jsx
index 7fbc82d5..fb0d2051 100644
--- a/assets/shared/templates/image-text/admin-form.jsx
+++ b/assets/shared/templates/image-text/admin-form.jsx
@@ -42,7 +42,7 @@ function ImageTextAdmin({
         <textarea
           onChange={onSlideContentChange}
           id="title"
-          className="col-md-6 form-control"
+          className="col-md-9 form-control"
           rows="3"
           defaultValue={slideContent?.title}
         />
@@ -69,7 +69,7 @@ function ImageTextAdmin({
           ]}
           onChange={onSlideContentChange}
           label={t("font-size-label")}
-          formGroupClasses="col-md-6 my-4"
+          formGroupClasses="col-md-9 my-4"
         />
 
         <label className="form-label mb-0 col-9">
@@ -105,7 +105,7 @@ function ImageTextAdmin({
           type="number"
           label={t("duration-label")}
           helpText={t("duration-help-text")}
-          formGroupClasses="col-md-6 mb-3"
+          formGroupClasses="col-md-9 mb-3"
           value={
             slideContent?.duration
               ? Math.floor(slideContent.duration / 1000)
@@ -146,14 +146,14 @@ function ImageTextAdmin({
           ]}
           onChange={onSlideContentChange}
           label={t("box-align-label")}
-          formGroupClasses="col-md-6 mb-3"
+          formGroupClasses="col-md-9 mb-3"
         />
 
         <FormCheckbox
           label={t("box-margin-label")}
           onChange={onSlideContentChange}
           name="boxMargin"
-          formGroupClasses="col-md-6 mb-3"
+          formGroupClasses="col-md-9 mb-3"
           value={slideContent?.boxMargin}
         />
 
@@ -161,117 +161,129 @@ function ImageTextAdmin({
           label={t("separator-label")}
           onChange={onSlideContentChange}
           name="separator"
-          formGroupClasses="col-md-6 mb-3"
+          formGroupClasses="col-md-9 mb-3"
           value={slideContent?.separator}
         />
 
-        <FormCheckbox
-          label={t("half-size-label")}
-          onChange={onSlideContentChange}
-          name="halfSize"
-          formGroupClasses="col-md-6 mb-3"
-          value={slideContent?.halfSize}
-        />
-
-        {slideContent?.separator && (
+        {slideContent && (
           <FormCheckbox
             label={t("reversed-layout-label")}
             onChange={onSlideContentChange}
             name="reversed"
-            formGroupClasses="col-md-6 mb-3"
+            disabled={!slideContent.separator}
+            helpText={t("reversed-layout-help-text")}
+            formGroupClasses="col-md-9 mb-3"
             value={slideContent?.reversed}
           />
         )}
 
         <FormCheckbox
-          label={t("shadow-label")}
+          label={t("half-size-label")}
           onChange={onSlideContentChange}
-          name="shadow"
-          formGroupClasses="col-md-6 mb-3"
-          value={slideContent?.shadow}
+          name="halfSize"
+          formGroupClasses="col-md-9 mb-3"
+          value={slideContent?.halfSize}
         />
 
         <FormCheckbox
-          label={t("show-logo-label")}
+          label={t("shadow-label")}
           onChange={onSlideContentChange}
-          name="showLogo"
-          formGroupClasses="col-md-6 mb-3"
-          value={slideContent?.showLogo}
+          name="shadow"
+          formGroupClasses="col-md-9 mb-3"
+          value={slideContent?.shadow}
         />
+        <fieldset>
+          <legend className="form-label">{t("logo-settings-legend")}</legend>
 
-        {slideContent?.showLogo && (
-          <>
-            <Select
-              value={slideContent?.logoSize}
-              name="logoSize"
-              options={[
-                {
-                  key: "logosize1",
-                  title: t("logo-size-options.logo-size-s"),
-                  value: "logo-size-s",
-                },
-                {
-                  key: "logosize2",
-                  title: t("logo-size-options.logo-size-m"),
-                  value: "logo-size-m",
-                },
-                {
-                  key: "logosize3",
-                  title: t("logo-size-options.logo-size-l"),
-                  value: "logo-size-l",
-                },
-              ]}
-              onChange={onSlideContentChange}
-              label={t("logo-size-label")}
-              formGroupClasses="col-md-6 mb-3"
-            />
+          <FormCheckbox
+            label={t("show-logo-label")}
+            onChange={onSlideContentChange}
+            name="showLogo"
+            formGroupClasses="col-md-9 mb-3"
+            value={slideContent?.showLogo}
+          />
+          <small className="form-text d-flex mb-2">
+            {t("logo-settings-help-text")}
+          </small>
 
-            <Select
-              value={slideContent?.logoPosition}
-              name="logoPosition"
-              options={[
-                {
-                  key: "logoposition1",
-                  title: t("logo-position-options.logo-position-top-left"),
-                  value: "logo-position-top-left",
-                },
-                {
-                  key: "logoposition2",
-                  title: t("logo-position-options.logo-position-top-right"),
-                  value: "logo-position-top-right",
-                },
-                {
-                  key: "logoposition3",
-                  title: t("logo-position-options.logo-position-bottom-left"),
-                  value: "logo-position-bottom-left",
-                },
-                {
-                  key: "logoposition4",
-                  title: t("logo-position-options.logo-position-bottom-right"),
-                  value: "logo-position-bottom-right",
-                },
-              ]}
-              onChange={onSlideContentChange}
-              label={t("logo-position-label")}
-              formGroupClasses="col-md-6 mb-3"
-            />
+          {slideContent && (
+            <>
+              <Select
+                disabled={!slideContent.showLogo}
+                value={slideContent?.logoSize}
+                name="logoSize"
+                options={[
+                  {
+                    key: "logosize1",
+                    title: t("logo-size-options.logo-size-s"),
+                    value: "logo-size-s",
+                  },
+                  {
+                    key: "logosize2",
+                    title: t("logo-size-options.logo-size-m"),
+                    value: "logo-size-m",
+                  },
+                  {
+                    key: "logosize3",
+                    title: t("logo-size-options.logo-size-l"),
+                    value: "logo-size-l",
+                  },
+                ]}
+                onChange={onSlideContentChange}
+                label={t("logo-size-label")}
+                formGroupClasses="col-md-9 mb-3"
+              />
 
-            <FormCheckbox
-              label={t("logo-margin-label")}
-              onChange={onSlideContentChange}
-              name="logoMargin"
-              formGroupClasses="col-md-6 mb-3"
-              value={slideContent?.logoMargin}
-            />
-          </>
-        )}
+              <Select
+                disabled={!slideContent.showLogo}
+                value={slideContent?.logoPosition}
+                name="logoPosition"
+                options={[
+                  {
+                    key: "logoposition1",
+                    title: t("logo-position-options.logo-position-top-left"),
+                    value: "logo-position-top-left",
+                  },
+                  {
+                    key: "logoposition2",
+                    title: t("logo-position-options.logo-position-top-right"),
+                    value: "logo-position-top-right",
+                  },
+                  {
+                    key: "logoposition3",
+                    title: t("logo-position-options.logo-position-bottom-left"),
+                    value: "logo-position-bottom-left",
+                  },
+                  {
+                    key: "logoposition4",
+                    title: t(
+                      "logo-position-options.logo-position-bottom-right",
+                    ),
+                    value: "logo-position-bottom-right",
+                  },
+                ]}
+                onChange={onSlideContentChange}
+                label={t("logo-position-label")}
+                formGroupClasses="col-md-9 mb-3"
+              />
 
+              <FormCheckbox
+                disabled={!slideContent.showLogo}
+                label={t("logo-margin-label")}
+                onChange={onSlideContentChange}
+                name="logoMargin"
+                formGroupClasses="col-md-9 mb-3"
+                value={slideContent?.logoMargin}
+              />
+            </>
+          )}
+        </fieldset>
         {Object.keys(mediaData).length > 1 && (
           <FormCheckbox
             label={t("disable-fade-label")}
             onChange={onSlideContentChange}
             name="disableImageFade"
-            formGroupClasses="col-md-6 mb-3"
+            formGroupClasses="col-md-9 mb-3"
             value={slideContent?.disableImageFade}
           />
         )}
diff --git a/assets/shared/templates/image-text/translations.json b/assets/shared/templates/image-text/translations.json
index 83cdde2b..6ca8699d 100644
--- a/assets/shared/templates/image-text/translations.json
+++ b/assets/shared/templates/image-text/translations.json
@@ -25,8 +25,11 @@
     "separator-label": "Animeret streg under overskrift",
     "half-size-label": "Gør tekstboksen mindre",
     "reversed-layout-label": "Alternativt layout uden tekstboks",
+    "reversed-layout-help-text": "Denne mulighed aktiveres hvis 'Animeret streg under overskrift' er valgt",
     "shadow-label": "Skyggeeffekt på tekstboksen",
-    "show-logo-label": "Vis logo fra tema",
+    "show-logo-label": "Vis logoet fra tema",
+    "logo-settings-legend": "Logoindstillinger",
+    "logo-settings-help-text": "Følgende indstillinger afhænger af hvorvidt 'vis logoet fra temaet' er valgt",
     "logo-size-label": "Logostørrelse",
     "logo-size-options": {
       "logo-size-s": "s",
diff --git a/assets/tests/admin/admin-form.spec.js b/assets/tests/admin/admin-form.spec.js
index d64f60d6..17be6a3b 100644
--- a/assets/tests/admin/admin-form.spec.js
+++ b/assets/tests/admin/admin-form.spec.js
@@ -55,7 +55,7 @@ test.describe("Admin form ui tests", () => {
   test("Should fill title", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           title: "Test slide",
         });
@@ -78,7 +78,7 @@ test.describe("Admin form ui tests", () => {
   test("Should pick font size", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           fontSize: "font-size-m",
         });
@@ -104,7 +104,7 @@ test.describe("Admin form ui tests", () => {
   test("Should have media contain visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           mediaContain: true,
         });
@@ -123,7 +123,7 @@ test.describe("Admin form ui tests", () => {
   test("Should have duration visible and interactable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           duration: 10000,
         });
@@ -141,7 +141,7 @@ test.describe("Admin form ui tests", () => {
   test("Should have box align visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           boxAlign: "right",
         });
@@ -160,7 +160,7 @@ test.describe("Admin form ui tests", () => {
   test("Should have box margin visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           boxMargin: true,
         });
@@ -181,7 +181,7 @@ test.describe("Admin form ui tests", () => {
   }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           separator: true,
         });
@@ -190,13 +190,13 @@ test.describe("Admin form ui tests", () => {
 
     await expect(
       page.getByText("Alternativt layout uden tekstboks"),
-    ).toHaveCount(0);
+    ).toBeDisabled();
     const separator = await page.locator("#checkbox-separator");
     await separator.waitFor();
     await separator.check({ force: true });
     await expect(
       page.getByText("Alternativt layout uden tekstboks"),
-    ).toHaveCount(1);
+    ).toBeEnabled();
 
     const saveButton = page.locator("#save_slide");
     await saveButton.waitFor();
@@ -206,7 +206,7 @@ test.describe("Admin form ui tests", () => {
   test("Should have halfsize visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           halfSize: true,
         });
@@ -225,7 +225,7 @@ test.describe("Admin form ui tests", () => {
   test("Should have shadow visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "POST") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           shadow: true,
         });
@@ -251,17 +251,17 @@ test.describe("Admin form ui tests", () => {
         });
       }
     });
-    await expect(page.getByText("Logostørrelse")).toHaveCount(0);
-    await expect(page.getByText("Logoposition")).toHaveCount(0);
-    await expect(page.getByText("Margin om logo")).toHaveCount(0);
+    await expect(page.getByText("Logostørrelse")).toBeDisabled();
+    await expect(page.getByText("Logoposition")).toBeDisabled();
+    await expect(page.getByText("Margin om logo")).toBeDisabled();
 
     const showLogo = await page.locator("#checkbox-showLogo");
     await showLogo.waitFor();
     await showLogo.check({ force: true });
 
-    await expect(page.getByText("Logostørrelse")).toHaveCount(1);
-    await expect(page.getByText("Logoposition")).toHaveCount(1);
-    await expect(page.getByText("Margin om logo")).toHaveCount(1);
+    await expect(page.getByText("Logostørrelse")).toBeEnabled();
+    await expect(page.getByText("Logoposition")).toBeEnabled();
+    await expect(page.getByText("Margin om logo")).toBeEnabled();
 
     const saveButton = page.locator("#save_slide");
     await saveButton.waitFor();
@@ -356,7 +356,7 @@ test.describe("Admin slide values depending on other values", () => {
   test("Should pick font size", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "PUT") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           fontSize: "font-size-m",
         });
@@ -419,7 +419,7 @@ test.describe("Admin slide values depending on other values", () => {
   test("Should have box align visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "PUT") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           boxAlign: "right",
         });
@@ -438,7 +438,7 @@ test.describe("Admin slide values depending on other values", () => {
   test("Should have box margin visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "PUT") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           boxMargin: true,
         });
@@ -459,7 +459,7 @@ test.describe("Admin slide values depending on other values", () => {
   }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "PUT") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           separator: true,
         });
@@ -468,13 +468,13 @@ test.describe("Admin slide values depending on other values", () => {
 
     await expect(
       page.getByText("Alternativt layout uden tekstboks"),
-    ).not.toBeVisible();
+    ).toBeDisabled();
     const separator = await page.locator("#checkbox-separator");
     await separator.waitFor();
     await separator.check({ force: true });
     await expect(
       page.getByText("Alternativt layout uden tekstboks"),
-    ).toBeVisible();
+    ).toBeEnabled();
 
     const saveButton = page.locator("#save_slide");
     await saveButton.waitFor();
@@ -484,7 +484,7 @@ test.describe("Admin slide values depending on other values", () => {
   test("Should have halfsize visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "PUT") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           halfSize: true,
         });
@@ -503,7 +503,7 @@ test.describe("Admin slide values depending on other values", () => {
   test("Should have shadow visible and checkable", async ({ page }) => {
     await page.route("**/v2/slides", async (route, request) => {
       if (request.method() === "PUT") {
-        const postData = request.postDataJSON(); // Parses JSON body
+        const postData = request.postDataJSON();
         expect(postData.content).toMatchObject({
           shadow: true,
         });
@@ -529,17 +529,17 @@ test.describe("Admin slide values depending on other values", () => {
         });
       }
     });
-    await expect(page.getByText("Logostørrelse")).not.toBeVisible();
-    await expect(page.getByText("Logoposition")).not.toBeVisible();
-    await expect(page.getByText("Margin om logo")).not.toBeVisible();
+    await expect(page.getByText("Logostørrelse")).toBeDisabled();
+    await expect(page.getByText("Logoposition")).toBeDisabled();
+    await expect(page.getByText("Margin om logo")).toBeDisabled();
 
     const showLogo = await page.locator("#checkbox-showLogo");
     await showLogo.waitFor();
     await showLogo.check({ force: true });
 
-    await expect(page.getByText("Logostørrelse")).toBeVisible();
-    await expect(page.getByText("Logoposition")).toBeVisible();
-    await expect(page.getByText("Margin om logo")).toBeVisible();
+    await expect(page.getByText("Logostørrelse")).toBeEnabled();
+    await expect(page.getByText("Logoposition")).toBeEnabled();
+    await expect(page.getByText("Margin om logo")).toBeEnabled();
 
     const saveButton = page.locator("#save_slide");
     await saveButton.waitFor();