From 83d416730ff280b6b8e19606fb4d43c8105f5ac2 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Tue, 19 Aug 2025 12:15:35 +0200
Subject: [PATCH] Use custom logo also in webmail

fix #3648
---
 frontend/src/components/shared/NavBar.vue     | 13 ++------
 .../src/components/tools/CreationForm.vue     | 21 +++++-------
 frontend/src/composables/logos.js             | 33 +++++++++++++++++++
 .../src/layouts/webmail/WebmailLayout.vue     |  8 ++---
 4 files changed, 46 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/composables/logos.js

diff --git a/frontend/src/components/shared/NavBar.vue b/frontend/src/components/shared/NavBar.vue
index cf8e9967c..6c46969b5 100644
--- a/frontend/src/components/shared/NavBar.vue
+++ b/frontend/src/components/shared/NavBar.vue
@@ -93,7 +93,7 @@
 <script setup>
 import { useRouter } from 'vue-router'
 import { ref, computed, onMounted } from 'vue'
-import { useGlobalConfig } from '@/main'
+import { useLogos } from '@/composables/logos'
 import { useGlobalStore, useAuthStore, useLayoutStore } from '@/stores'
 import constants from '@/constants.json'
 
@@ -117,7 +117,7 @@ const globalStore = useGlobalStore()
 const authStore = useAuthStore()
 const layoutStore = useLayoutStore()
 const router = useRouter()
-const globalConfig = useGlobalConfig()
+const { menuLogoPath } = useLogos()
 
 const rail = ref(false)
 const drawer = ref(true)
@@ -131,15 +131,6 @@ 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 =
diff --git a/frontend/src/components/tools/CreationForm.vue b/frontend/src/components/tools/CreationForm.vue
index 97baaf298..64c22847b 100644
--- a/frontend/src/components/tools/CreationForm.vue
+++ b/frontend/src/components/tools/CreationForm.vue
@@ -7,7 +7,11 @@
     >
       <ConfirmDialog ref="confirm" />
       <v-stepper-header class="align-center px-10">
-        <v-img :src="logoPath" max-width="190" class="hidden-sm-and-down" />
+        <v-img
+          :src="creationFormLogoPath"
+          max-width="190"
+          class="hidden-sm-and-down"
+        />
         <v-stepper-item
           v-for="(step, index) in steps"
           :key="step.name"
@@ -101,13 +105,13 @@
 <script setup lang="js">
 import ConfirmDialog from './ConfirmDialog'
 import CreationSummary from './CreationSummary.vue'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useDisplay } from 'vuetify'
-import { useGlobalConfig } from '@/main'
+import { useLogos } from '@/composables/logos'
 
 const { smAndDown } = useDisplay()
-const globalConfig = useGlobalConfig()
+const { creationFormLogoPath } = useLogos()
 
 const props = defineProps({
   title: { type: String, default: '' },
@@ -122,15 +126,6 @@ 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/frontend/src/composables/logos.js b/frontend/src/composables/logos.js
new file mode 100644
index 000000000..ac0c69533
--- /dev/null
+++ b/frontend/src/composables/logos.js
@@ -0,0 +1,33 @@
+import { computed } from 'vue'
+import { useGlobalConfig } from '@/main'
+
+export function useLogos() {
+  const globalConfig = useGlobalConfig()
+
+  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
+  })
+
+  const creationFormLogoPath = 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
+  })
+
+  return {
+    menuLogoPath,
+    creationFormLogoPath,
+  }
+}
diff --git a/frontend/src/layouts/webmail/WebmailLayout.vue b/frontend/src/layouts/webmail/WebmailLayout.vue
index d9626a614..72f2ed381 100644
--- a/frontend/src/layouts/webmail/WebmailLayout.vue
+++ b/frontend/src/layouts/webmail/WebmailLayout.vue
@@ -10,11 +10,7 @@
       >
         <template #prepend>
           <div class="d-flex align-center">
-            <v-img
-              src="@/assets/Modoboa_RVB-BLANC-SANS.png"
-              max-width="190"
-              class="logo"
-            />
+            <v-img :src="menuLogoPath" max-width="190" class="logo" />
             <v-btn
               :icon="rail ? 'mdi-chevron-right' : 'mdi-chevron-left'"
               variant="text"
@@ -99,6 +95,7 @@ import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 import { useBusStore } from '@/stores'
+import { useLogos } from '@/composables/logos'
 import ConfirmDialog from '@/components/tools/ConfirmDialog.vue'
 import ConnectedLayout from '@/layouts/connected/ConnectedLayout.vue'
 import MailboxForm from '@/components/webmail/MailboxForm.vue'
@@ -109,6 +106,7 @@ const { $gettext } = useGettext()
 const route = useRoute()
 const router = useRouter()
 const busStore = useBusStore()
+const { menuLogoPath } = useLogos()
 
 const confirm = ref()
 const drawer = ref(true)