[backend/frontend] login aside panel customization (#14115)

docs/docs/administration/parameters.md

@@ -87,9 +87,9 @@ Click on the **+** icon and configure your theme properties.
 | **Name**              | Unique identifier for the theme (case-sensitive)                                                      | Theme selector                                        | `My Theme`    |
 | **Background color**  | Main application background                                                                           | Behind all content areas                              | `#122e52`     |
 | **Paper color**       | Background for content containers                                                                     | Cards, side panels, dialog bodies                     | `#0a395f`     |
-| **Navigation color**  | Navigation and header elements                                                                        | Top app bar, dialog headers, right navigation panels  | `#060b3f`     |
+| **Navigation color**  | Navigation and header elements                                                                        | Dialog headers, right navigation panels  | `#060b3f`     |
 | **Primary color**     | Main interactive elements                                                                             | Icon buttons, action buttons, highlights | `#e41682`  |
-| **Secondary color**   | Secondary actions                                                                                     | Primary action buttons in dialogs                     | `#d1c71d`     |
+| **Secondary color**   | Secondary actions                                                                                     | Badge color                     | `#d1c71d`     |
 | **Accent color**      | Highlight and emphasis                                                                                | Copied items, history entries, selected items         | `#e5abec`     |
 | **Text color**        | Primary text throughout the application                                                               | All text content                                      | `#e0e0e0`     |
 | **Logo URL**          | Full-size logo                                                                                        | Expanded left navigation panel                        | URL or Base64 |
@@ -101,6 +101,28 @@ Click on the **+** icon and configure your theme properties.
 
 ![Theme Colors in Dialog](assets/theme-desc-1.png)
 
+![Theme Colors in Parameters](assets/theme-desc-3.png)
+
+#### Login aside customization
+
+The right panel of the login page can be customized with three options:
+
+- **Color**: a single solid background color
+- **Gradient**: a linear gradient between two colors applied horizontally from the start color to the end color
+- **Image**: full-cover background image via URL or Base64. The image is scaled to cover the entire panel and centered, so edges may be cropped on smaller screens. Prefer images with a centered subject.
+
+![Login Aside config](assets/theme-login-aside-config.png)
+
+
+![Login Aside default](assets/theme-login-1.png)
+*Login page with no aside config set*
+
+![Login Aside with gradient](assets/theme-login-2.png)
+*Login page with a custom gradient background*
+
+
+
+
 #### Color requirements
 - **Format:** All colors must be in hexadecimal format (e.g., `#122e52`)
 - **Contrast:** Ensure adequate contrast between text and background colors for accessibility

opencti-platform/opencti-front/lang/back/de.json

@@ -954,6 +954,10 @@
   "Theme": "Thema",
   "Theme accent": "Thema Akzent",
   "Theme background": "Thema Hintergrund",
+  "Theme login aside color": "Thema Anmeldung neben Farbe",
+  "Theme login aside gradient end": "Theme login aside gradient end",
+  "Theme login aside gradient start": "Thema login aside gradient start",
+  "Theme login aside image": "Thema login aside Bild",
   "Theme logo": "Thema Logo",
   "Theme logo collapsed": "Theme-Logo kollabiert",
   "Theme logo login": "Themenlogo Anmeldung",

opencti-platform/opencti-front/lang/back/en.json

@@ -954,6 +954,10 @@
   "Theme": "Theme",
   "Theme accent": "Theme accent",
   "Theme background": "Theme background",
+  "Theme login aside color": "Theme login aside color",
+  "Theme login aside gradient end": "Theme login aside gradient end",
+  "Theme login aside gradient start": "Theme login aside gradient start",
+  "Theme login aside image": "Theme login aside image",
   "Theme logo": "Theme logo",
   "Theme logo collapsed": "Theme logo collapsed",
   "Theme logo login": "Theme logo login",

opencti-platform/opencti-front/lang/back/es.json

@@ -954,6 +954,10 @@
   "Theme": "Tema",
   "Theme accent": "Acento temático",
   "Theme background": "Tema de fondo",
+  "Theme login aside color": "Tema login aparte color",
+  "Theme login aside gradient end": "Tema login aside gradient end",
+  "Theme login aside gradient start": "Inicio de degradado del tema de inicio de sesión",
+  "Theme login aside image": "Imagen de inicio de sesión",
   "Theme logo": "Tema logotipo",
   "Theme logo collapsed": "Logotipo del tema colapsado",
   "Theme logo login": "Inicio de sesión del logotipo del tema",

opencti-platform/opencti-front/lang/back/fr.json

@@ -954,6 +954,10 @@
   "Theme": "Thème",
   "Theme accent": "Accent thématique",
   "Theme background": "Arrière-plan du thème",
+  "Theme login aside color": "Couleur du côté de la page de connexion",
+  "Theme login aside gradient end": "Fin du dégradé de la page de connexion",
+  "Theme login aside gradient start": "Début du dégradé de la page de connexion",
+  "Theme login aside image": "Image de la page de connexion",
   "Theme logo": "Logo du thème",
   "Theme logo collapsed": "Logo du thème collapsé",
   "Theme logo login": "Logo du thème login",

opencti-platform/opencti-front/lang/back/it.json

@@ -954,6 +954,10 @@
   "Theme": "Tema",
   "Theme accent": "Accento sul tema",
   "Theme background": "Sfondo del tema",
+  "Theme login aside color": "Tema login da parte colore",
+  "Theme login aside gradient end": "Tema login aside gradient end",
+  "Theme login aside gradient start": "Inizio gradiente tema login aside",
+  "Theme login aside image": "Tema login a parte immagine",
   "Theme logo": "Logo del tema",
   "Theme logo collapsed": "Logo del tema collassato",
   "Theme logo login": "Logo del tema login",

opencti-platform/opencti-front/lang/back/ja.json

@@ -954,6 +954,10 @@
   "Theme": "テーマ",
   "Theme accent": "テーマ・アクセント",
   "Theme background": "テーマ背景",
+  "Theme login aside color": "テーマログイン脇の色",
+  "Theme login aside gradient end": "テーマログイン脇グラデーション終了",
+  "Theme login aside gradient start": "テーマログイン脇グラデーション開始",
+  "Theme login aside image": "テーマログイン脇画像",
   "Theme logo": "テーマロゴ",
   "Theme logo collapsed": "テーマロゴ折りたたみ",
   "Theme logo login": "テーマロゴ",

opencti-platform/opencti-front/lang/back/ko.json

@@ -954,6 +954,10 @@
   "Theme": "테마",
   "Theme accent": "테마 악센트",
   "Theme background": "테마 배경",
+  "Theme login aside color": "테마 로그인 사이드 컬러",
+  "Theme login aside gradient end": "테마 로그인 옆 그라데이션 끝",
+  "Theme login aside gradient start": "테마 로그인 옆 그라데이션 시작",
+  "Theme login aside image": "테마 로그인 옆 이미지",
   "Theme logo": "테마 로고",
   "Theme logo collapsed": "테마 로고가 축소됨",
   "Theme logo login": "테마 로고 로그인",

opencti-platform/opencti-front/lang/back/ru.json

@@ -954,6 +954,10 @@
   "Theme": "Тема",
   "Theme accent": "Тематический акцент",
   "Theme background": "Тематический фон",
+  "Theme login aside color": "Тематический цвет входа в систему в стороне",
+  "Theme login aside gradient end": "Градиентный конец для входа в тему",
+  "Theme login aside gradient start": "Начало градиента для входа в тему",
+  "Theme login aside image": "Изображение в стороне от входа в тему",
   "Theme logo": "Логотип темы",
   "Theme logo collapsed": "Логотип темы свернут",
   "Theme logo login": "Логотип темы войти",

opencti-platform/opencti-front/lang/back/zh.json

@@ -954,6 +954,10 @@
   "Theme": "主题",
   "Theme accent": "主题口音",
   "Theme background": "主题背景",
+  "Theme login aside color": "主题登录颜色",
+  "Theme login aside gradient end": "主题登录时的渐变效果",
+  "Theme login aside gradient start": "主题登录旁渐变开始",
+  "Theme login aside image": "主题登录旁图像",
   "Theme logo": "主题徽标",
   "Theme logo collapsed": "主题徽标折叠",
   "Theme logo login": "主题徽标登录",

opencti-platform/opencti-front/lang/front/de.json

@@ -125,6 +125,9 @@
   "Add and complete": "Hinzufügen und ausfüllen",
   "Add attack patterns": "Angriffsmuster hinzufügen",
   "Add attributes of the instance": "Hinzufügen von Attributen der {type}",
+  "Add background color": "Hintergrundfarbe hinzufügen",
+  "Add background gradient": "Hintergrundfarbverlauf hinzufügen",
+  "Add background image": "Hintergrundbild hinzufügen",
   "Add citizenship": "Staatsbürgerschaft hinzufügen",
   "Add components": "Komponenten hinzufügen",
   "Add context": "Kontext hinzufügen",
@@ -149,6 +152,7 @@
   "Add generated and existing indicators in the container": "Generierte & hinzufügen; vorhandene Indikatoren im Container",
   "Add generated and existing observables in the container": "Hinzufügen von generierten & vorhandenen Observablen im Container",
   "Add header": "Kopfzeile hinzufügen",
+  "Add image URL": "Bild-URL hinzufügen",
   "Add in container": "Hinzufügen im Container",
   "Add indicators": "Indikatoren hinzufügen",
   "Add individual": "Einzelperson hinzufügen",
@@ -1880,6 +1884,7 @@
   "FINTEL template created": "FINTEL-Vorlage erstellt",
   "FINTEL Templates": "FINTEL-Vorlagen",
   "FINTEL templates are available with an Enterprise Edition subscription": "FINTEL Vorlagen sind mit einem Enterprise Edition Abonnement verfügbar",
+  "First color": "Erste Farbe",
   "First match": "Erstes Spiel",
   "First name expression": "Vornamensausdruck",
   "First obs.": "Erste Obs.",
@@ -2119,6 +2124,7 @@
   "If you want to keep the associated information, we recommend deactivating the user instead.": "Wenn Sie die zugehörigen Informationen behalten möchten, empfehlen wir, den Benutzer stattdessen zu deaktivieren.",
   "If your email address is found, an email will be sent to you.": "Wenn Ihre E-Mail-Adresse gefunden wurde, wird Ihnen eine E-Mail zugeschickt.",
   "if your service account has been created originally as a service account (not transformed), please also change the email of your service account before/after transforming it to a user to ensure that the future user will be able to receive an email in the forgot password workflow.": "wenn Ihr Dienstkonto ursprünglich als Dienstkonto angelegt wurde (nicht umgewandelt), ändern Sie bitte auch die E-Mail Ihres Dienstkontos vor/nach der Umwandlung in einen Benutzer, um sicherzustellen, dass der zukünftige Benutzer eine E-Mail im Workflow \"Passwort vergessen\" erhalten kann.",
+  "Image URL": "Bild-URL",
   "Impact": "Aufschlag",
   "Impacted": "Beeinflusst",
   "impacted by a modification to a linked entity (relation, added in container...)": "beeinflusst durch eine Änderung an einer verknüpften Entität (Beziehung, hinzugefügt in Container...)",
@@ -2498,6 +2504,7 @@
   "Login button label": "Anmeldeschaltflächenbeschriftung",
   "Login Button Name": "Name der Anmeldeschaltfläche",
   "Login messages": "Login-Meldungen",
+  "Login Page Customisation": "Anpassung der Login-Seite",
   "Login to the platform": "Anmeldung bei der Plattform",
   "Logo (png, jpg, svg or webp)": "Logo (png, jpg, svg oder webp)",
   "Logo URL": "Logo URL",
@@ -3601,6 +3608,7 @@
   "revoked": "Widerrufen",
   "RFI of type \"request access\" are subject to a specific workflow, that you can configure here. Request Access cases have 2 actions, Validate and Decline, that change the status automatically according to your configuration. Only specific groups of users are authorized to validate and decline Request Access cases.": "RFI des Typs \"Zugang beantragen\" unterliegen einem speziellen Workflow, den Sie hier konfigurieren können. Zugangsgesuche haben 2 Aktionen, Validieren und Ablehnen, die den Status automatisch entsprechend Ihrer Konfiguration ändern. Nur bestimmte Benutzergruppen sind berechtigt, Anträge auf Zugang zu validieren und abzulehnen.",
   "Rich editor": "Reichhaltiger Editor",
+  "Right panel customisation": "Anpassung des rechten Panels",
   "Role": "Rolle",
   "Roles": "Rollen",
   "roles": "rollen",
@@ -3668,6 +3676,7 @@
   "Search the platform": "Die Plattform durchsuchen",
   "Search these results": "Diese Ergebnisse durchsuchen",
   "second": "zweite",
+  "Second color": "Zweite Farbe",
   "Secondary color": "Sekundärfarbe",
   "Secondary motivations": "Sekundäre Motivationen",
   "seconds": "sekunden",
@@ -3689,6 +3698,7 @@
   "see metrics on your platform (coming soon)": "metriken auf Ihrer Plattform sehen (in Kürze)",
   "See more": "Mehr sehen",
   "Select": "Wählen Sie",
+  "Select a background type": "Wählen Sie einen Hintergrundtyp",
   "Select a column to add": "Wählen Sie eine Spalte zum Hinzufügen",
   "Select a configuration": "Wählen Sie eine Konfiguration",
   "Select a connector": "Wählen Sie einen Anschluss",

opencti-platform/opencti-front/lang/front/en.json

@@ -125,6 +125,9 @@
   "Add and complete": "Add and complete",
   "Add attack patterns": "Add attack patterns",
   "Add attributes of the instance": "Add attributes of the {type}",
+  "Add background color": "Add background color",
+  "Add background gradient": "Add background gradient",
+  "Add background image": "Add background image",
   "Add citizenship": "Add citizenship",
   "Add components": "Add components",
   "Add context": "Add context",
@@ -149,6 +152,7 @@
   "Add generated and existing indicators in the container": "Add generated & existing indicators in the container",
   "Add generated and existing observables in the container": "Add generated & existing observables in the container",
   "Add header": "Add header",
+  "Add image URL": "Add image URL",
   "Add in container": "Add in container",
   "Add indicators": "Add indicators",
   "Add individual": "Add individual",
@@ -1880,6 +1884,7 @@
   "FINTEL template created": "FINTEL template created",
   "FINTEL Templates": "FINTEL Templates",
   "FINTEL templates are available with an Enterprise Edition subscription": "FINTEL templates are available with an Enterprise Edition subscription",
+  "First color": "First color",
   "First match": "First match",
   "First name expression": "First name expression",
   "First obs.": "First obs.",
@@ -2119,6 +2124,7 @@
   "If you want to keep the associated information, we recommend deactivating the user instead.": "If you want to keep the associated information, we recommend deactivating the user instead.",
   "If your email address is found, an email will be sent to you.": "If your email address is found, an email will be sent to you.",
   "if your service account has been created originally as a service account (not transformed), please also change the email of your service account before/after transforming it to a user to ensure that the future user will be able to receive an email in the forgot password workflow.": "if your service account has been created originally as a service account (not transformed), please also change the email of your service account before/after transforming it to a user to ensure that the future user will be able to receive an email in the forgot password workflow.",
+  "Image URL": "Image URL",
   "Impact": "Impact",
   "Impacted": "Impacted",
   "impacted by a modification to a linked entity (relation, added in container...)": "impacted by a modification to a linked entity (relation, added in container...)",
@@ -2498,6 +2504,7 @@
   "Login button label": "Login button label",
   "Login Button Name": "Login Button Name",
   "Login messages": "Login messages",
+  "Login Page Customisation": "Login Page Customisation",
   "Login to the platform": "Login to the platform",
   "Logo (png, jpg, svg or webp)": "Logo (png, jpg, svg or webp)",
   "Logo URL": "Logo URL",
@@ -3601,6 +3608,7 @@
   "revoked": "Revoked",
   "RFI of type \"request access\" are subject to a specific workflow, that you can configure here. Request Access cases have 2 actions, Validate and Decline, that change the status automatically according to your configuration. Only specific groups of users are authorized to validate and decline Request Access cases.": "RFI of type \"request access\" are subject to a specific workflow, that you can configure here. Request Access cases have 2 actions, Validate and Decline, that change the status automatically according to your configuration. Only specific groups of users are authorized to validate and decline Request Access cases.",
   "Rich editor": "Rich editor",
+  "Right panel customisation": "Right panel customisation",
   "Role": "Role",
   "Roles": "Roles",
   "roles": "roles",
@@ -3668,6 +3676,7 @@
   "Search the platform": "Search the platform",
   "Search these results": "Search these results",
   "second": "second",
+  "Second color": "Second color",
   "Secondary color": "Secondary color",
   "Secondary motivations": "Secondary motivations",
   "seconds": "seconds",
@@ -3689,6 +3698,7 @@
   "see metrics on your platform (coming soon)": "see metrics on your platform (coming soon)",
   "See more": "See more",
   "Select": "Select",
+  "Select a background type": "Select a background type",
   "Select a column to add": "Select a column to add",
   "Select a configuration": "Select a configuration",
   "Select a connector": "Select a connector",