From c6ae1e8fc0ae1fe0d228b281401ed1cf6a1f2895 Mon Sep 17 00:00:00 2001 From: Bartholomew Date: Fri, 2 Nov 2018 18:25:36 +0100 Subject: [PATCH] feat: allow custom logo on auth page (#1818) --- .../src/AuthenticationPage.js | 5 ++- .../src/AuthenticationPage.js | 6 +++- .../src/AuthenticationPage.js | 3 +- .../src/AuthenticationPage.js | 3 +- .../src/constants/configSchema.js | 1 + .../src/AuthenticationPage.js | 34 +++++++++++++++++-- website/content/docs/configuration-options.md | 10 ++++++ 7 files changed, 56 insertions(+), 6 deletions(-) diff --git a/packages/netlify-cms-backend-bitbucket/src/AuthenticationPage.js b/packages/netlify-cms-backend-bitbucket/src/AuthenticationPage.js index 151b1e53..58e647dc 100644 --- a/packages/netlify-cms-backend-bitbucket/src/AuthenticationPage.js +++ b/packages/netlify-cms-backend-bitbucket/src/AuthenticationPage.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import styled from 'react-emotion'; import { NetlifyAuthenticator } from 'netlify-cms-lib-auth'; import { AuthenticationPage, Icon } from 'netlify-cms-ui-default'; @@ -15,6 +16,7 @@ export default class BitbucketAuthenticationPage extends React.Component { base_url: PropTypes.string, siteId: PropTypes.string, authEndpoint: PropTypes.string, + config: ImmutablePropTypes.map, }; state = {}; @@ -41,13 +43,14 @@ export default class BitbucketAuthenticationPage extends React.Component { }; render() { - const { inProgress } = this.props; + const { inProgress, config } = this.props; return ( ( diff --git a/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js b/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js index 3982abf6..fd4b64cc 100644 --- a/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js +++ b/packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import React from 'react'; import styled from 'react-emotion'; import { partial } from 'lodash'; @@ -100,6 +101,7 @@ export default class GitGatewayAuthenticationPage extends React.Component { onLogin: PropTypes.func.isRequired, inProgress: PropTypes.bool.isRequired, error: PropTypes.node, + config: ImmutablePropTypes.map, }; state = { email: '', password: '', errors: {} }; @@ -140,11 +142,12 @@ export default class GitGatewayAuthenticationPage extends React.Component { render() { const { errors } = this.state; - const { error, inProgress } = this.props; + const { error, inProgress, config } = this.props; if (window.netlifyIdentity) { return ( 'Login with Netlify Identity'} /> @@ -153,6 +156,7 @@ export default class GitGatewayAuthenticationPage extends React.Component { return ( ( {!error ? null : {error}} diff --git a/packages/netlify-cms-backend-github/src/AuthenticationPage.js b/packages/netlify-cms-backend-github/src/AuthenticationPage.js index b88faec4..bce09746 100644 --- a/packages/netlify-cms-backend-github/src/AuthenticationPage.js +++ b/packages/netlify-cms-backend-github/src/AuthenticationPage.js @@ -44,12 +44,13 @@ export default class GitHubAuthenticationPage extends React.Component { }; render() { - const { inProgress } = this.props; + const { inProgress, config } = this.props; return ( ( {inProgress ? 'Logging in...' : 'Login with GitHub'} diff --git a/packages/netlify-cms-backend-gitlab/src/AuthenticationPage.js b/packages/netlify-cms-backend-gitlab/src/AuthenticationPage.js index a049ed07..6b151a2c 100644 --- a/packages/netlify-cms-backend-gitlab/src/AuthenticationPage.js +++ b/packages/netlify-cms-backend-gitlab/src/AuthenticationPage.js @@ -63,12 +63,13 @@ export default class GitLabAuthenticationPage extends React.Component { }; render() { - const { inProgress } = this.props; + const { inProgress, config } = this.props; return ( ( {inProgress ? 'Logging in...' : 'Login with GitLab'} diff --git a/packages/netlify-cms-core/src/constants/configSchema.js b/packages/netlify-cms-core/src/constants/configSchema.js index fe1fef25..6c719bfa 100644 --- a/packages/netlify-cms-core/src/constants/configSchema.js +++ b/packages/netlify-cms-core/src/constants/configSchema.js @@ -36,6 +36,7 @@ const getConfigSchema = () => ({ required: ['name'], }, display_url: { type: 'string', examples: ['https://example.com'] }, + logo_url: { type: 'string', examples: ['https://example.com/images/logo.svg'] }, media_folder: { type: 'string', examples: ['assets/uploads'] }, public_folder: { type: 'string', examples: ['/uploads'] }, media_library: { diff --git a/packages/netlify-cms-ui-default/src/AuthenticationPage.js b/packages/netlify-cms-ui-default/src/AuthenticationPage.js index 5c825da8..47cb3f29 100644 --- a/packages/netlify-cms-ui-default/src/AuthenticationPage.js +++ b/packages/netlify-cms-ui-default/src/AuthenticationPage.js @@ -12,11 +12,38 @@ const StyledAuthenticationPage = styled.section` height: 100vh; `; -const PageLogoIcon = styled(Icon)` +const CustomIconWrapper = styled.span` + width: 300px; + height: 200px; + margin-top: -150px; +`; + +const NetlifyLogoIcon = styled(Icon)` color: #c4c6d2; margin-top: -300px; `; +const NetlifyCreditIcon = styled(Icon)` + color: #c4c6d2; + position: absolute; + bottom: 10px; +`; + +const CustomLogoIcon = ({ url }) => { + return ( + + Logo + + ); +}; + +const renderPageLogo = logoUrl => { + if (logoUrl) { + return ; + } + return ; +}; + const LoginButton = styled.button` ${buttons.button}; ${shadows.dropDeep}; @@ -39,10 +66,11 @@ const AuthenticationPage = ({ loginErrorMessage, renderButtonContent, renderPageContent, + logoUrl, }) => { return ( - + {renderPageLogo(logoUrl)} {loginErrorMessage ?

{loginErrorMessage}

: null} {!renderPageContent ? null : renderPageContent()} {!renderButtonContent ? null : ( @@ -50,12 +78,14 @@ const AuthenticationPage = ({ {renderButtonContent()} )} + {logoUrl ? : null} ); }; AuthenticationPage.propTypes = { onLogin: PropTypes.func, + logoUrl: PropTypes.string, loginDisabled: PropTypes.bool, loginErrorMessage: PropTypes.node, renderButtonContent: PropTypes.func, diff --git a/website/content/docs/configuration-options.md b/website/content/docs/configuration-options.md index a60c3467..87ab9964 100644 --- a/website/content/docs/configuration-options.md +++ b/website/content/docs/configuration-options.md @@ -95,6 +95,16 @@ When the `display_url` setting is specified, the CMS UI will include a link in t display_url: https://your-site.com ``` +## Custom Logo + +When the `logo_url` setting is specified, the CMS UI will change the logo displayed at the top of the login page, allowing you to brand the CMS with your own logo. `logo_url` is assumed to be a URL to an image file. + +**Example:** + +```yaml +logo_url: https://your-site.com/images/logo.svg +``` + ## Slug Type The `slug` option allows you to change how filenames for entries are created and sanitized. For modifying the actual data in a slug, see the per-collection option below.