diff --git a/Parse-Dashboard/app.js b/Parse-Dashboard/app.js index 2a793e5610..33c5160d48 100644 --- 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 = `` } + const customBrandIcon = config.customBrandIcon; + const customBrandColorPrimary = config.customBrandColorPrimary; res.send(` + Parse Dashboard @@ -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(` diff --git a/README.md b/README.md index 39e4adece0..c90726e32f 100644 --- 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 index e651658ff1..51cb91ccac 100644 --- 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 (
- + {!customBrandIcon && } + {customBrandIcon && {customBrandTitle}
{this.props.header}
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js index bab045fe4f..de8cc3a366 100644 --- 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 { ) : ( <> - - - - -
-
- Parse Dashboard {version} +
+ + {!customBrandIcon && } + {customBrandIcon && {customBrandTitle} + + +
- {this.state.dashboardUser} + {customBrandTitle || 'Parse Dashboard'} {version} +
+ {this.state.dashboardUser} +
-
-
- +
+ +
) + return (
{headerContent}
- ); + ); } }