From b8e64cdeddae07bc7558cbc593b33e1059243615 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Thu, 31 Jul 2025 19:21:24 +0200
Subject: [PATCH] Improved loading of custom logos for the frontend.

---
 doc/configuration.rst                         | 14 ++++++++++-
 frontend/public/config.json                   |  4 +---
 frontend/src/components/shared/NavBar.vue     | 23 ++++++++++++++++++-
 .../src/components/tools/CreationForm.vue     | 17 +++++++++-----
 .../management/commands/load_initial_data.py  | 10 +-------
 5 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/doc/configuration.rst b/doc/configuration.rst
index 2caff6679..b45ef47e3 100644
--- a/doc/configuration.rst
+++ b/doc/configuration.rst
@@ -193,7 +193,7 @@ Custom logo
 ===========
 
 You have the possibility to use a custom logo instead of the default
-one on the login page.
+one on the login page and inside generated PDF documents.
 
 To do so, open the :file:`settings.py` file and add a
 ``MODOBOA_CUSTOM_LOGO`` variable. This variable must contain the
@@ -204,6 +204,18 @@ relative URL of your logo under ``MEDIA_URL``. For example::
 Then copy your logo file into the directory indicated by
 ``MEDIA_ROOT``.
 
+You can also customize the logo(s) used in the frontend application
+(left menu and creation forms).
+
+To do so, copy the corresponding files inside the frontend directory
+directly (defaults to ``/srv/modoboa/instance/frontend``).
+
+Then, edit the :file:`config.json` file located in this very same
+directory and add the following variables::
+
+  "MENU_LOGO_PATH": "/cusrtom_logo.png",
+  "CREATION_FORM_LOGO_PATH": "/custom_logo2.png"
+
 ******************
 Host configuration
 ******************
diff --git a/frontend/public/config.json b/frontend/public/config.json
index 752b63e3a..105af1242 100644
--- a/frontend/public/config.json
+++ b/frontend/public/config.json
@@ -5,7 +5,5 @@
     "OAUTH_CLIENT_ID": "LVQbfIIX3khWR3nDvix1u9yEGHZUxcx53bhJ7FlD",
     "OAUTH_REDIRECT_URI": "/login/logged",
     "OAUTH_POST_REDIRECT_URI": "/",
-    "HTML_PAGE_TITLE": "Test title",
-    "MENU_LOGO_PATH": "/src/assets/Modoboa_RVB-BLANC-SANS.png",
-    "CREATION_FORM_LOGO_PATH": "/src/assets/Modoboa_RVB-BLEU-SANS.png"
+    "HTML_PAGE_TITLE": "Test title"
 }
diff --git a/frontend/src/components/shared/NavBar.vue b/frontend/src/components/shared/NavBar.vue
index a238a9f0c..3e5115691 100644
--- a/frontend/src/components/shared/NavBar.vue
+++ b/frontend/src/components/shared/NavBar.vue
@@ -8,7 +8,7 @@
   >
     <div class="d-flex align-center">
       <v-img
-        :src="globalConfig.MENU_LOGO_PATH"
+        :src="menuLogoPath"
         max-width="190"
         class="logo"
         @click="router.push(props.logoRoute)"
@@ -131,6 +131,15 @@ const displayInformationBell = computed(
     globalStore.notifications.length !== 0
 )
 
+const menuLogoPath = computed(() => {
+  if (globalConfig.MENU_LOGO_PATH) {
+    return globalConfig.MENU_LOGO_PATH
+  }
+  const imgUrl = new URL('@/assets/Modoboa_RVB-BLANC-SANS.png', import.meta.url)
+    .href
+  return imgUrl
+})
+
 function displayMenuItem(item) {
   if (isAuthenticated.value) {
     const condition =
@@ -155,3 +164,15 @@ onMounted(() => {
   cursor: pointer;
 }
 </style>
+
+<style lang="scss" scoped>
+.logo {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss" scoped>
+.logo {
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/components/tools/CreationForm.vue b/frontend/src/components/tools/CreationForm.vue
index b112ecf3b..97baaf298 100644
--- a/frontend/src/components/tools/CreationForm.vue
+++ b/frontend/src/components/tools/CreationForm.vue
@@ -7,11 +7,7 @@
     >
       <ConfirmDialog ref="confirm" />
       <v-stepper-header class="align-center px-10">
-        <v-img
-          :src="globalConfig.CREATION_FORM_LOGO_PATH"
-          max-width="190"
-          class="hidden-sm-and-down"
-        />
+        <v-img :src="logoPath" max-width="190" class="hidden-sm-and-down" />
         <v-stepper-item
           v-for="(step, index) in steps"
           :key="step.name"
@@ -105,7 +101,7 @@
 <script setup lang="js">
 import ConfirmDialog from './ConfirmDialog'
 import CreationSummary from './CreationSummary.vue'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useDisplay } from 'vuetify'
 import { useGlobalConfig } from '@/main'
@@ -126,6 +122,15 @@ const currentStep = ref(1)
 const working = ref(false)
 const confirm = ref()
 
+const logoPath = computed(() => {
+  if (globalConfig.CREATION_FORM_LOGO_PATH) {
+    return globalConfig.CREATION_FORM_LOGO_PATH
+  }
+  const imgUrl = new URL('@/assets/Modoboa_RVB-BLEU-SANS.png', import.meta.url)
+    .href
+  return imgUrl
+})
+
 const emit = defineEmits(['close', 'create', 'validationError'])
 
 const { $gettext } = useGettext()
diff --git a/modoboa/core/management/commands/load_initial_data.py b/modoboa/core/management/commands/load_initial_data.py
index ad5ac6f89..318bd9bbd 100644
--- a/modoboa/core/management/commands/load_initial_data.py
+++ b/modoboa/core/management/commands/load_initial_data.py
@@ -159,12 +159,6 @@ class Command(BaseCommand):
             os.path.dirname(__file__), "../../../frontend_dist/"
         )
         frontend_target_dir = f"{settings.BASE_DIR}/frontend"
-        if hasattr(settings, "MODOBOA_CUSTOM_LOGO"):
-            menu_logo_path = settings.MODOBOA_CUSTOM_LOGO
-            form_logo_path = settings.MODOBOA_CUSTOM_LOGO
-        else:
-            menu_logo_path = f"{frontend_target_dir}/assets/Modoboa_RVB-BLANC-SANS.png"
-            form_logo_path = f"{frontend_target_dir}/assets/Modoboa_RVB-BLEU-SANS.png"
         if os.path.isdir(base_frontend_dir):
             shutil.rmtree(frontend_target_dir, ignore_errors=True)
             os.makedirs(frontend_target_dir, exist_ok=True)
@@ -194,9 +188,7 @@ class Command(BaseCommand):
   "OAUTH_AUTHORITY_URL": "{oauth_authority_url}",
   "OAUTH_CLIENT_ID": "{client_id}",
   "OAUTH_REDIRECT_URI": "{redirect_uri}",
-  "OAUTH_POST_REDIRECT_URI": "{oauth_post_logout_redirect_uri}",
-  "MENU_LOGO_PATH": "{menu_logo_path}",
-  "CREATION_FORM_LOGO_PATH": "{form_logo_path}"
+  "OAUTH_POST_REDIRECT_URI": "{oauth_post_logout_redirect_uri}"
 }}
 """
                 )