From 39f6999cc21f0dedd003c19ab50dd1227f0273a5 Mon Sep 17 00:00:00 2001
From: root <root@gwa-test.coreboso.de>
Date: Mon, 3 Aug 2026 16:28:03 +0200
Subject: [PATCH] Add default hostname to customImages setting

- On servers with multiple DNS names and reverse proxies, it is errorprone
  to add each name to `config.json`, including copies of all options.
  Add a special hostname "*" that is used as fallback config.
---
 README.md                          | 6 ++++++
 src/App.tsx                        | 5 +++--
 src/components/NavigationLinks.tsx | 4 +++-
 src/containers/Login.tsx           | 2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 0153aa96..383cb1c1 100644
--- a/README.md
+++ b/README.md
@@ -126,6 +126,7 @@ Each hostname is the key of an object, which has following keys:
   * `background`: The background image in light mode
   * `backgroundDark`: The background image in dark mode
   Each of these keys must be an URL to an image file.
+If none of the hostnames matches, the special hostname `*` will be used as a fallback.
 
   An example `customImages` object looks like this:
 
@@ -143,6 +144,11 @@ Each hostname is the key of an object, which has following keys:
       "logoLight": "anotherUrl.to/light/logo.png",
       "icon": "anotherUrl.to/light/icon.svg"
     },
+    "*": {
+      "logo": "defaultUrl.to/logo.png",
+      "logoLight": "defaultUrl.to/light/logo.png",
+      "icon": "defaultUrl.to/light/icon.svg"
+    }
   }
   ```
 As you can see, it is not necessary to overwrite every image, but the hostnames need to be accurate.
diff --git a/src/App.tsx b/src/App.tsx
index ea69d28d..a675f668 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,6 +45,7 @@ const App = () => {
   const { Domains, loading } = useAppSelector(state => state.drawer);
   const serverConfig = useAppSelector(state => state.config);
   const configError = serverConfig.error;
+  const customImages = serverConfig.customImages[window.location.hostname] || serverConfig.customImages["*"];
 
   const routesProps: RoutesProps = {
     authenticated,
@@ -71,8 +72,8 @@ const App = () => {
       className={classes.root}
       style={{
         backgroundImage: darkMode ?
-          `url(${serverConfig.customImages[window.location.hostname]?.backgroundDark || backgroundDark})` : 
-          `url(${serverConfig.customImages[window.location.hostname]?.background || background})`
+          `url(${customImages?.backgroundDark || backgroundDark})` :
+          `url(${customImages?.background || background})`
       }}
     >
       {authenticated && <SilentRefresh />}
diff --git a/src/components/NavigationLinks.tsx b/src/components/NavigationLinks.tsx
index bed87e25..c12d0b93 100644
--- a/src/components/NavigationLinks.tsx
+++ b/src/components/NavigationLinks.tsx
@@ -209,11 +209,13 @@ const NavigationLinks = (props: NavigationLinksProps) => {
   const { filter, adding, snackbar } = state;
   const isSysAdmin = capabilities.includes(SYSTEM_ADMIN_READ);
   const pathname = location.pathname;
+  const customImages = config.customImages[window.location.hostname] || config.customImages["*"];
+
   return (
     (<React.Fragment>
       <div className={classes.drawerHeader}>
         <img
-          src={config.customImages[window.location.hostname]?.logoLight || logo}
+          src={customImages?.logoLight || logo}
           height="32"
           alt="grommunio"
           onClick={handleNavigation('')}
diff --git a/src/containers/Login.tsx b/src/containers/Login.tsx
index e92fbc2e..2bb95676 100644
--- a/src/containers/Login.tsx
+++ b/src/containers/Login.tsx
@@ -165,7 +165,7 @@ const Login = () => {
   }
 
   const { user, pass, loading, langsAnchorEl } = state;
-  const config = serverConfig.customImages[window.location.hostname];
+  const config = serverConfig.customImages[window.location.hostname] || serverConfig.customImages["*"];
 
   return (
     <div className={classes.root}>