parse-community · stepanic · Feb 19, 2021 · Feb 27, 2021 · Sep 5, 2021 · Sep 8, 2021
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
@@ -240,6 +240,12 @@ Parse Dashboard supports adding an optional background color for each app, so yo
 }
 ```
 
+## Custom branding
+
+- You can set `customBrandIcon` with a relative path from `iconsFolder`. This could be your custom logo which will appear on the login screen and on the top of the sidebar. Icon should be square (same width and height), SVG or PNG with transparent background.
+- You can set `customBrandTitle` which will be visible on top of the sidebar instead of `Parse Dashboard`.
+- You can set `customBrandColorPrimary` which will be the background color at the 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,12 @@ 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;
+    const customBrandTitle = window.CUSTOM_BRAND_TITLE;
     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={customBrandTitle || 'Brand Logo'} />}
         <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,6 +24,9 @@ export default class SidebarHeader extends React.Component {
     });
   }
   render() {
+    const customBrandIcon = window.CUSTOM_BRAND_ICON;
+    const customBrandTitle = window.CUSTOM_BRAND_TITLE;
+
     const { isCollapsed = false } = this.props;
     const headerContent = isCollapsed
       ? (
@@ -33,25 +36,29 @@ export default class SidebarHeader extends React.Component {
       )
       : (
         <>
-          <Link className={styles.logo} to={{ pathname: '/apps' }}>
-            <Icon width={28} height={28} name='infinity' fill={'#ffffff'} />
-          </Link>
-          <Link to='/apps'>
-            <div className={styles.version}>
-              <div>
-                Parse Dashboard {version}
+          <div className={styles.header}>
+            <Link className={styles.logo} to={{ pathname: '/apps' }}>
+              {!customBrandIcon && <Icon width={28} height={28} name='infinity' fill={'#ffffff'} />}
+              {customBrandIcon && <img src={'appicons/' + customBrandIcon} width={28} height={28} alt={customBrandTitle || 'Brand Logo'} />}
+            </Link>
+            <Link to='/apps'>
+              <div className={styles.version}>
                 <div>
-                  {this.state.dashboardUser}
+                  {customBrandTitle || 'Parse Dashboard'} {version}
+                  <div>
+                    {this.state.dashboardUser}
+                  </div>
                 </div>
-              </div>
-            </div>
-          </Link>
+              </div>   
+            </Link>
+          </div>
         </>
       )
+
     return (
       <div className={styles.header}>
         {headerContent}
       </div>
-    );
+    );    
   }
 }