Implemented banner

ElenaStroebele · ElenaStroebele · commit 940ab3aaa1e8 · 2026-01-14T10:03:50.000Z
Signed-off-by: ElenaStroebele &lt;elena.stroebele@rohde-schwarz.com&gt;
diff --git a/src/App.vue b/src/App.vue
@@ -1,17 +1,46 @@
 <template>
-  <router-view></router-view>
+  <div class="app-shell">
+    <Banner
+      v-if="!isLoginPage && bannerConfig && bannerConfig.activateBanner"
+      :key="bannerInstanceKey"
+      class="app-banner"
+      :dismissable="bannerConfig.makeBannerDismissable"
+      :color-scheme="bannerConfig.colorScheme"
+      :message="bannerConfig.message"
+      :custom-mode="bannerConfig.customMode"
+      :html="bannerConfig.html"
+    />
+    <main class="app-content">
+      <router-view />
+    </main>
+  </div>
 </template>
-
 <script>
 // bootstrap-table still relies on jQuery for ajax calls, even though there's a supported Vue wrapper for it.
 import $ from 'jquery';
 import { getUrlVar } from './shared/utils';
 import { getToken } from './shared/permissions';
 import EventBus from './shared/eventbus';
 import VueRouter from 'vue-router';
+import Banner from './views/components/Banner.vue';
 
 export default {
   name: 'app',
+  components: {
+    Banner,
+  },
+  data() {
+    return {
+      bannerConfig: null,
+      bannerInstanceKey: 0,
+    };
+  },
+  computed: {
+    isLoginPage() {
+      const loginRoutes = ['/login'];
+      return loginRoutes.includes(this.$route.path);
+    },
+  },
   created() {
     const setJwtForAjax = (jwt) => {
       if (jwt) {
@@ -24,21 +53,42 @@ export default {
     };
 
     EventBus.$on('authenticated', (jwt) => {
+      sessionStorage.removeItem('banner-dismissed');
       if (jwt) {
         sessionStorage.setItem('token', jwt);
       } else {
         sessionStorage.removeItem('token');
       }
       setJwtForAjax(jwt);
+
+      if (jwt) {
+        this.fetchBannerConfig();
+      } else {
+        this.bannerConfig = null;
+        this.bannerInstanceKey++;
+      }
+    });
+
+    EventBus.$on('banner-updated', async () => {
+      sessionStorage.removeItem('banner-dismissed');
+      await this.fetchBannerConfig();
+      this.bannerInstanceKey++;
     });
 
     // ensure $.ajaxSettings.headers exists
     $.ajaxSetup({
       headers: {},
     });
 
+    const token = getToken();
     setJwtForAjax(getToken());
 
+    if (token) {
+      this.fetchBannerConfig();
+    } else {
+      this.bannerConfig = null;
+    }
+
     // Send XHR cross-site cookie credentials
     if (this.$api.WITH_CREDENTIALS) {
       this.axios.interceptors.request.use(function (config) {
@@ -164,6 +214,17 @@ export default {
       }
     });
   },
+  methods: {
+    async fetchBannerConfig() {
+      try {
+        const response = await this.axios.get(this.$api.URL_BANNER);
+        this.bannerConfig = response.data || null;
+      } catch (e) {
+        console.error('Failed to load banner config:', e);
+        this.bannerConfig = null;
+      }
+    },
+  },
 };
 </script>
 
@@ -175,4 +236,8 @@ $simple-line-font-path: '~simple-line-icons/fonts/';
 @import '~simple-line-icons/scss/simple-line-icons.scss';
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
 @import 'assets/scss/style';
+
+.app-content {
+  padding-top: var(--banner-offset, 0px);
+}
 </style>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "OSV-Basis-URL",
     "welcome_message": "Willkommensnachricht",
     "welcome_message_desc": "Passen Sie die Willkommensnachricht an, die auf der Startseite von Dependency-Track angezeigt wird, bevor sich Benutzer anmelden.",
-    "welcome_message_enable": "Willkommensnachricht aktivieren"
+    "welcome_message_enable": "Willkommensnachricht aktivieren",
+    "banner_activate": "Banner aktivieren",
+    "banner_color_scheme": "Farbschema",
+    "banner_dismissable": "Per Klick schließen",
+    "banner_explanation": "Konfigurieren Sie ein Banner, das über der Seite angezeigt wird.",
+    "banner_explanation_html_text": "Formatieren Sie Ihre Bannerbotschaft und Ihr Erscheinungsbild mithilfe von HTML-Tags.",
+    "banner_html_text": "HTML-Text",
+    "banner_message": "Nachricht",
+    "banner_enable_custom": "Aktivieren",
+    "banner_custom_mode": "Benutzerdefiniertes HTML"
   },
   "condition": {
     "forbidden": "Verboten (403)",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "OSV Base URL",
     "welcome_message": "Welcome Message",
     "welcome_message_desc": "Customize the welcome message that appears on the start page of Dependency-Track before users sign in.",
-    "welcome_message_enable": "Enable welcome message"
+    "welcome_message_enable": "Enable welcome message",
+    "banner_explanation": "Configure a banner which is shown above the page.",
+    "banner_activate": "Activate banner",
+    "banner_dismissable": "Dismissable",
+    "banner_message": "Message",
+    "banner_color_scheme": "Color scheme",
+    "banner_html_text": "HTML text",
+    "banner_explanation_html_text": "Format your banner message and appearance using HTML tags.",
+    "banner_enable_custom": "Enable",
+    "banner_custom_mode": "Custom HTML"
   },
   "condition": {
     "forbidden": "Forbidden (403)",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "URL base de OSV",
     "welcome_message": "Mensaje de bienvenida",
     "welcome_message_desc": "Personalice el mensaje de bienvenida que aparece en la página de inicio de Dependency-Track antes de que los usuarios inicien sesión.",
-    "welcome_message_enable": "Habilitar mensaje de bienvenida"
+    "welcome_message_enable": "Habilitar mensaje de bienvenida",
+    "banner_activate": "Activar banner",
+    "banner_color_scheme": "esquema de color",
+    "banner_dismissable": "Desestimable",
+    "banner_explanation": "Configure un banner que se muestra encima de la página.",
+    "banner_explanation_html_text": "Formatee el mensaje y la apariencia de su banner usando etiquetas HTML.",
+    "banner_html_text": "texto HTML",
+    "banner_message": "Mensaje",
+    "banner_enable_custom": "Permitir",
+    "banner_custom_mode": "HTML personalizado"
   },
   "condition": {
     "forbidden": "Prohibido (403)",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "URL de base OSV",
     "welcome_message": "Message de bienvenue",
     "welcome_message_desc": "Personnalisez le message de bienvenue qui apparaît sur la page de démarrage de Dependency-Track avant que les utilisateurs ne se connectent.",
-    "welcome_message_enable": "Activer le message de bienvenue"
+    "welcome_message_enable": "Activer le message de bienvenue",
+    "banner_activate": "Activer la bannière",
+    "banner_color_scheme": "Jeu de couleurs",
+    "banner_dismissable": "Licenciable",
+    "banner_explanation": "Configurez une bannière qui s'affiche au-dessus de la page.",
+    "banner_explanation_html_text": "Formatez votre message de bannière et votre apparence à l'aide de balises HTML.",
+    "banner_html_text": "Texte HTML",
+    "banner_message": "Message",
+    "banner_enable_custom": "Activer",
+    "banner_custom_mode": "HTML personnalisé"
   },
   "condition": {
     "forbidden": "Interdit (403)",
diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "OSV बेस यूआरएल",
     "welcome_message": "स्वागत संदेश",
     "welcome_message_desc": "उपयोगकर्ताओं के साइन इन करने से पहले डिपेंडेंसी-ट्रैक के आरंभ पृष्ठ पर दिखाई देने वाले स्वागत संदेश को अनुकूलित करें।",
-    "welcome_message_enable": "स्वागत संदेश सक्षम करें"
+    "welcome_message_enable": "स्वागत संदेश सक्षम करें",
+    "banner_activate": "बैनर सक्रिय करें",
+    "banner_color_scheme": "रंग योजना",
+    "banner_dismissable": "खारिज करने योग्य",
+    "banner_explanation": "एक बैनर कॉन्फ़िगर करें जो पृष्ठ के ऊपर दिखाया गया है।",
+    "banner_explanation_html_text": "HTML टैग का उपयोग करके अपने बैनर संदेश और स्वरूप को प्रारूपित करें।",
+    "banner_html_text": "HTML पाठ",
+    "banner_message": "संदेश",
+    "banner_enable_custom": "सक्षम",
+    "banner_custom_mode": "कस्टम HTML"
   },
   "condition": {
     "forbidden": "निषिद्ध (403)",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "URL di base OSV",
     "welcome_message": "Messaggio di benvenuto",
     "welcome_message_desc": "Personalizza il messaggio di benvenuto che appare nella pagina iniziale di Dependency-Track prima che gli utenti accedano.",
-    "welcome_message_enable": "Abilita il messaggio di benvenuto"
+    "welcome_message_enable": "Abilita il messaggio di benvenuto",
+    "banner_activate": "Attiva il banner",
+    "banner_color_scheme": "Combinazione di colori",
+    "banner_dismissable": "Ignorabile",
+    "banner_explanation": "Configura un banner che viene mostrato sopra la pagina.",
+    "banner_explanation_html_text": "Formatta il messaggio e l'aspetto del banner utilizzando i tag HTML.",
+    "banner_html_text": "Testo HTML",
+    "banner_message": "Messaggio",
+    "banner_enable_custom": "Abilitare",
+    "banner_custom_mode": "HTML personalizzato"
   },
   "condition": {
     "forbidden": "Proibito (403)",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "OSV ベース URL",
     "welcome_message": "ウェルカムメッセージ",
     "welcome_message_desc": "ユーザーがサインインする前に、Dependency-Track の開始ページに表示されるウェルカム メッセージをカスタマイズします。",
-    "welcome_message_enable": "ウェルカムメッセージを有効にする"
+    "welcome_message_enable": "ウェルカムメッセージを有効にする",
+    "banner_activate": "バナーをアクティブにする",
+    "banner_color_scheme": "配色",
+    "banner_dismissable": "却下可能",
+    "banner_explanation": "ページ上部に表示されるバナーを設定します。",
+    "banner_explanation_html_text": "HTML タグを使用して、バナー メッセージと外観をフォーマットします。",
+    "banner_html_text": "HTMLテキスト",
+    "banner_message": "メッセージ",
+    "banner_enable_custom": "有効にする",
+    "banner_custom_mode": "カスタムHTML"
   },
   "condition": {
     "forbidden": "禁止 (403)",
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "Podstawowy adres URL OSV",
     "welcome_message": "Wiadomość powitalna",
     "welcome_message_desc": "Dostosuj wiadomość powitalną wyświetlaną na stronie początkowej funkcji Depency-Track przed zalogowaniem się użytkownika.",
-    "welcome_message_enable": "Włącz wiadomość powitalną"
+    "welcome_message_enable": "Włącz wiadomość powitalną",
+    "banner_activate": "Aktywuj baner",
+    "banner_color_scheme": "Schemat kolorów",
+    "banner_dismissable": "Do odrzucenia",
+    "banner_explanation": "Skonfiguruj baner wyświetlany nad stroną.",
+    "banner_explanation_html_text": "Sformatuj treść i wygląd banera za pomocą tagów HTML.",
+    "banner_html_text": "Tekst HTML",
+    "banner_message": "Wiadomość",
+    "banner_enable_custom": "Włączać",
+    "banner_custom_mode": "Niestandardowy kod HTML"
   },
   "condition": {
     "forbidden": "Zabronione (403)",
diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "URL base do OSV",
     "welcome_message": "Mensagem de boas-vindas",
     "welcome_message_desc": "Personalize a mensagem de boas-vindas que aparece na página inicial do Dependency-Track antes dos usuários fazerem login.",
-    "welcome_message_enable": "Ativar mensagem de boas-vindas"
+    "welcome_message_enable": "Ativar mensagem de boas-vindas",
+    "banner_activate": "Ativar banner",
+    "banner_color_scheme": "Esquema de cores",
+    "banner_dismissable": "Dispensável",
+    "banner_explanation": "Configure um banner que é mostrado acima da página.",
+    "banner_explanation_html_text": "Formate a mensagem e a aparência do seu banner usando tags HTML.",
+    "banner_html_text": "Texto HTML",
+    "banner_message": "Mensagem",
+    "banner_enable_custom": "Habilitar",
+    "banner_custom_mode": "HTML personalizado"
   },
   "condition": {
     "forbidden": "Proibido (403)",
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "URL base do OSV",
     "welcome_message": "Mensagem de boas-vindas",
     "welcome_message_desc": "Personalize a mensagem de boas-vindas que aparece na página inicial do Dependency-Track antes dos usuários fazerem login.",
-    "welcome_message_enable": "Ativar mensagem de boas-vindas"
+    "welcome_message_enable": "Ativar mensagem de boas-vindas",
+    "banner_activate": "Ativar banner",
+    "banner_color_scheme": "Esquema de cores",
+    "banner_dismissable": "Dispensável",
+    "banner_explanation": "Configure um banner que é mostrado acima da página.",
+    "banner_explanation_html_text": "Formate a mensagem e a aparência do seu banner usando tags HTML.",
+    "banner_html_text": "Texto HTML",
+    "banner_message": "Mensagem",
+    "banner_enable_custom": "Habilitar",
+    "banner_custom_mode": "HTML personalizado"
   },
   "condition": {
     "forbidden": "Proibido (403)",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "Базовый URL OSV",
     "welcome_message": "Приветственное сообщение",
     "welcome_message_desc": "Настройте приветственное сообщение, которое отображается на стартовой странице Dependency-Track перед входом пользователей.",
-    "welcome_message_enable": "Включить приветственное сообщение"
+    "welcome_message_enable": "Включить приветственное сообщение",
+    "banner_activate": "Активировать баннер",
+    "banner_color_scheme": "Цветовая гамма",
+    "banner_dismissable": "Увольняемый",
+    "banner_explanation": "Настройте баннер, который отображается над страницей.",
+    "banner_explanation_html_text": "Отформатируйте сообщение и внешний вид баннера с помощью HTML-тегов.",
+    "banner_html_text": "HTML-текст",
+    "banner_message": "Сообщение",
+    "banner_enable_custom": "Давать возможность",
+    "banner_custom_mode": "Пользовательский HTML"
   },
   "condition": {
     "forbidden": "Запрещено (403)",
diff --git a/src/i18n/locales/uk-UA.json b/src/i18n/locales/uk-UA.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "Базовий URL-адреса OSV",
     "welcome_message": "Привітальне повідомлення",
     "welcome_message_desc": "Налаштуйте привітальне повідомлення, яке з'являється на стартовій сторінці Dependency-Track перед входом користувачів.",
-    "welcome_message_enable": "Увімкнути привітальне повідомлення"
+    "welcome_message_enable": "Увімкнути привітальне повідомлення",
+    "banner_activate": "Активувати банер",
+    "banner_color_scheme": "Колірна гамма",
+    "banner_dismissable": "Можна відкинути",
+    "banner_explanation": "Налаштуйте банер, який буде показано над сторінкою.",
+    "banner_explanation_html_text": "Відформатуйте повідомлення та вигляд банера за допомогою тегів HTML.",
+    "banner_html_text": "текст HTML",
+    "banner_message": "повідомлення",
+    "banner_enable_custom": "Увімкнути",
+    "banner_custom_mode": "Спеціальний HTML"
   },
   "condition": {
     "forbidden": "Заборонено (403)",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
@@ -308,7 +308,16 @@
     "vulnsource_osv_base_url": "OSV 基本 URL",
     "welcome_message": "欢迎辞",
     "welcome_message_desc": "自定义用户登录前 Dependency-Track 起始页上显示的欢迎消息。",
-    "welcome_message_enable": "启用欢迎消息"
+    "welcome_message_enable": "启用欢迎消息",
+    "banner_activate": "激活横幅",
+    "banner_color_scheme": "配色方案",
+    "banner_dismissable": "可驳回",
+    "banner_explanation": "配置显示在页面上方的横幅。",
+    "banner_explanation_html_text": "使用 HTML 标签设置横幅消息和外观的格式。",
+    "banner_html_text": "HTML 文本",
+    "banner_message": "信息",
+    "banner_enable_custom": "使能够",
+    "banner_custom_mode": "自定义 HTML"
   },
   "condition": {
     "forbidden": "禁止 (403)",
diff --git a/src/router/index.js b/src/router/index.js
@@ -31,6 +31,8 @@ const BomFormats = () =>
   import('@/views/administration/configuration/BomFormats');
 const WelcomeMessage = () =>
   import('@/views/administration/configuration/WelcomeMessage');
+const Banner = () =>
+  import('@/views/administration/configuration/BannerConfigurationModal');
 const Email = () => import('@/views/administration/configuration/Email');
 const Jira = () => import('@/views/administration/configuration/JiraConfig');
 const InternalComponents = () =>
@@ -398,6 +400,17 @@ function configRoutes() {
                 permission: 'SYSTEM_CONFIGURATION',
               },
             },
+            {
+              path: 'configuration/banner',
+              component: Banner,
+              meta: {
+                title: i18n.t('message.administration'),
+                i18n: 'message.administration',
+                sectionPath: '/admin',
+                sectionName: 'Admin',
+                permission: 'SYSTEM_CONFIGURATION',
+              },
+            },
             {
               path: 'configuration/email',
               component: Email,
diff --git a/src/shared/api.json b/src/shared/api.json
@@ -14,6 +14,7 @@
   "URL_ACL_MAPPING": "api/v1/acl/mapping",
   "URL_ACL_TEAM": "api/v1/acl/team",
   "URL_ANALYSIS": "api/v1/analysis",
+  "URL_BANNER": "api/v1/banner",
   "URL_BOM": "api/v1/bom",
   "URL_CALCULATOR_CVSS": "api/v1/calculator/cvss",
   "URL_CALCULATOR_OWASP": "api/v1/calculator/owasp",
diff --git a/src/shared/bannerColorSchemes.js b/src/shared/bannerColorSchemes.js
diff --git a/src/views/administration/AdminMenu.vue b/src/views/administration/AdminMenu.vue
diff --git a/src/views/administration/Administration.vue b/src/views/administration/Administration.vue
diff --git a/src/views/administration/configuration/BannerConfigurationModal.vue b/src/views/administration/configuration/BannerConfigurationModal.vue
diff --git a/src/views/components/Banner.vue b/src/views/components/Banner.vue
