Custom branding with custom icon, title and color

stepanic · stepanic · commit c01beab2d700 · 2021-02-20T22:06:04.000+01:00
diff --git a/Parse-Dashboard/app.js b/Parse-Dashboard/app.js
@@ -171,20 +171,27 @@ module.exports = function(config, options) {
       if (!users || (req.user && req.user.isAuthenticated)) {
         return res.redirect(`${mountPath}apps`);
       }
-
       let errors = req.flash('error');
       if (errors && errors.length) {
         errors = `<div id="login_errors" style="display: none;">
           ${errors.join(' ')}
         </div>`
       }
+      const customBrandIcon = config.customBrandIcon;
+      const customBrandColorPrimary = config.customBrandColorPrimary;
       res.send(`<!DOCTYPE html>
         <head>
           <link rel="shortcut icon" type="image/x-icon" href="${mountPath}favicon.ico" />
           <base href="${mountPath}"/>
           <script>
             PARSE_DASHBOARD_PATH = "${mountPath}";
+            ${customBrandIcon && 'CUSTOM_BRAND_ICON = "' + customBrandIcon + '";'}
           </script>
+          <style>
+            body {
+              ${customBrandColorPrimary && `background-color: ${customBrandColorPrimary} !important;`}
+            }
+          </style>
         </head>
         <html>
           <title>Parse Dashboard</title>
@@ -206,12 +213,16 @@ module.exports = function(config, options) {
       if (users && req.user && req.user.matchingUsername ) {
         res.append('username', req.user.matchingUsername);
       }
+      const customBrandIcon = config.customBrandIcon;
+      const customBrandTitle = config.customBrandTitle;
       res.send(`<!DOCTYPE html>
         <head>
           <link rel="shortcut icon" type="image/x-icon" href="${mountPath}favicon.ico" />
           <base href="${mountPath}"/>
           <script>
             PARSE_DASHBOARD_PATH = "${mountPath}";
+            ${customBrandIcon && 'CUSTOM_BRAND_ICON = "' + customBrandIcon + '";'}
+            ${customBrandTitle && 'CUSTOM_BRAND_TITLE = "' + customBrandTitle + '";'}
           </script>
         </head>
         <html>
diff --git a/README.md b/README.md
@@ -235,6 +235,12 @@ Parse Dashboard supports adding an optional background color for each app, so yo
 }
 ```
 
+## Custom branding
+
+- You can set `customBrandIcon` with relative path from `iconsFolder`. This could be your custom logo which will appear on login screen and on the top of sidebar. Icon should be square (same height and width), SVG or PNG with transparent background. 
+- You can set `customBrandTitle` which will be visible on top of sidebar instead of `Parse Dashboard`. 
+- You can set `customBrandColorPrimary` which will be background color at login screen.
+
 ## Other Configuration Options
 
 You can set `appNameForURL` in the config file for each app to control the url of your app within the dashboard. This can make it easier to use bookmarks or share links on your dashboard.
diff --git a/src/components/LoginForm/LoginForm.react.js b/src/components/LoginForm/LoginForm.react.js
@@ -14,9 +14,11 @@ import { verticalCenter } from 'stylesheets/base.scss';
 // Class-style component, because we need refs
 export default class LoginForm extends React.Component {
   render() {
+    const customBrandIcon = window.CUSTOM_BRAND_ICON;
     return (
       <div className={styles.login} style={{ marginTop: this.props.marginTop || '-220px' }}>
-        <Icon width={80} height={80} name='infinity' fill='#093A59' />
+        {!customBrandIcon && <Icon width={80} height={80} name='infinity' fill='#093A59' />}
+        {customBrandIcon && <img src={'appicons/' + customBrandIcon} width={80} height={80} alt="Custom BRAND icon"/>}
         <form method='post' ref='form' action={this.props.endpoint} className={styles.form}>
           <CSRFInput />
           <div className={styles.header}>{this.props.header}</div>
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js
@@ -24,15 +24,18 @@ export default class SidebarHeader extends React.Component {
     });
   }
   render() {
+    const customBrandIcon = window.CUSTOM_BRAND_ICON;
+    const customBrandTitle = window.CUSTOM_BRAND_TITLE;
     return (
       <div className={styles.header}>
         <Link className={styles.logo} to={{ pathname: '/apps' }}>
-          <Icon width={28} height={28} name='infinity' fill={'#ffffff'} />
+          {!customBrandIcon && <Icon width={28} height={28} name='infinity' fill={'#ffffff'} />}
+          {customBrandIcon && <img src={'appicons/' + customBrandIcon} width={28} height={28} alt="Custom BRAND icon"/>}
         </Link>
         <Link to='/apps'>
           <div className={styles.version}>
             <div>
-              Parse Dashboard {version}
+              {customBrandTitle || 'Parse Dashboard'} {version}
               <div>
                 {this.state.dashboardUser}
               </div>
