Add option to change the logo of the login page

strapi · Aug 9, 2019 · 25d7fad · 25d7fad
1 parent 668dac6
commit 25d7fad
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 10 deletions.
diff --git a/packages/strapi-admin/admin/src/config.js b/packages/strapi-admin/admin/src/config.js
@@ -1 +1,2 @@
+export const LOGIN_LOGO = null;
 export const SHOW_TUTORIALS = true;
diff --git a/packages/strapi-admin/admin/src/containers/PluginDispatcher/index.js b/packages/strapi-admin/admin/src/containers/PluginDispatcher/index.js
@@ -10,6 +10,8 @@ import { get } from 'lodash';
 
 import Helmet from 'react-helmet';
 import { BlockerComponent } from 'strapi-helper-plugin';
+
+import { LOGIN_LOGO } from '../../config';
 import ErrorBoundary from '../ErrorBoundary';
 
 export function PluginDispatcher(props) {
@@ -46,7 +48,11 @@ export function PluginDispatcher(props) {
     <div>
       <Helmet title={`Strapi - ${name}`} />
       <ErrorBoundary>
-        <PluginEntryComponent {...props} {...blockerComponentProps} />
+        <PluginEntryComponent
+          {...props}
+          {...blockerComponentProps}
+          assets={{ loginLogo: LOGIN_LOGO }}
+        />
       </ErrorBoundary>
     </div>
   );

diff --git a/packages/strapi-admin/doc/change-the-login-page-logo.md b/packages/strapi-admin/doc/change-the-login-page-logo.md
@@ -0,0 +1,28 @@
+# Change the logo of the login page
+
+In order to change the logo of the login page follow these steps:
+
+### 1 Add your new logo in your `./my-project/admin/src/<mylogo>.png`'s folder project (the location doesn't matter)
+
+### 2 Create a configuration file:
+
+**`Path: ./my-project/admin/src/config.js`**
+
+```js
+import MyLogo from './<mylogo>.png';
+
+export const LOGIN_LOGO = MyLogo;
+export const SHOW_TUTORIALS = true;
+```
+
+### 3 Rebuild your app
+
+```js
+# Using yarn
+
+yarn build
+
+# Using npm
+
+npm run build
+```
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/App/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/App/index.js
@@ -29,13 +29,15 @@ class App extends React.Component {
     }
   }
 
+  renderRoute = props => <AuthPage {...this.props} {...props} />;
+
   render() {
     return (
       <div className={pluginId}>
         <Switch>
           <Route
             path={`/plugins/${pluginId}/auth/:authType/:id?`}
-            component={AuthPage}
+            render={this.renderRoute}
             exact
           />
           <Route

diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
@@ -83,6 +83,14 @@ export class AuthPage extends React.Component {
     return get(formErrors, ['0', 'errors', '0', 'id']);
   };
 
+  getLogo = () => {
+    const {
+      assets: { loginLogo },
+    } = this.props;
+
+    return loginLogo || LogoStrapi;
+  };
+
   setForm = () => {
     const {
       location: { search },
@@ -202,7 +210,7 @@ export class AuthPage extends React.Component {
   renderLogo = () =>
     this.isAuthType('register') && (
       <div className={styles.logoContainer}>
-        <img src={LogoStrapi} alt="logo" />
+        <img src={this.getLogo()} alt="logo" />
       </div>
     );
 
@@ -248,9 +256,9 @@ export class AuthPage extends React.Component {
     return map(inputs, (input, key) => {
       const label = isForgotEmailSent
         ? {
-          id:
+            id:
               'users-permissions.Auth.form.forgot-password.email.label.success',
-        }
+          }
         : get(input, 'label');
 
       return (
@@ -278,6 +286,7 @@ export class AuthPage extends React.Component {
 
   render() {
     const { modifiedData, noErrorsDescription, submitSuccess } = this.props;
+
     let divStyle = this.isAuthType('register')
       ? { marginTop: '3.2rem' }
       : { marginTop: '.9rem' };
@@ -293,7 +302,7 @@ export class AuthPage extends React.Component {
             {this.isAuthType('register') ? (
               <FormattedMessage id="users-permissions.Auth.form.header.register" />
             ) : (
-              <img src={LogoStrapi} alt="logo" />
+              <img src={this.getLogo()} alt="logo" />
             )}
           </div>
           <div className={styles.headerDescription}>
@@ -307,7 +316,7 @@ export class AuthPage extends React.Component {
               styles.formContainer,
               this.isAuthType('forgot-password') && submitSuccess
                 ? styles.borderedSuccess
-                : styles.bordered,
+                : styles.bordered
             )}
             style={divStyle}
           >
@@ -346,7 +355,12 @@ AuthPage.contextTypes = {
   updatePlugin: PropTypes.func,
 };
 
+AuthPage.defaultProps = {
+  assets: { loginLogo: null },
+};
+
 AuthPage.propTypes = {
+  assets: PropTypes.object,
   didCheckErrors: PropTypes.bool.isRequired,
   formErrors: PropTypes.array.isRequired,
   hideLoginErrorsInput: PropTypes.func.isRequired,
@@ -373,13 +387,13 @@ function mapDispatchToProps(dispatch) {
       setForm,
       submit,
     },
-    dispatch,
+    dispatch
   );
 }
 
 const withConnect = connect(
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 );
 const withReducer = window.strapi.injectReducer({
   key: 'authPage',
@@ -391,5 +405,5 @@ const withSaga = window.strapi.injectSaga({ key: 'authPage', saga, pluginId });
 export default compose(
   withReducer,
   withSaga,
-  withConnect,
+  withConnect
 )(AuthPage);