Add default hostname to customImages setting

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.

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 />}

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('')}

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}>