diff --git a/docs/Admin.md b/docs/Admin.md index 5d057ea0f30..ee1f8bbd699 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -38,6 +38,7 @@ Here are all the props accepted by the component: * [`customSagas`](#customsagas) * [`customRoutes`](#customroutes) * [`authProvider`](#authprovider) +* [`backgroundImage`](#backgroundImage) * [`loginPage`](#loginpage) * [`logoutButton`](#logoutbutton) * [`locale`](#internationalization) @@ -471,7 +472,9 @@ const App = () => ( ); ``` -See The [Authentication documentation](./Authentication.md#customizing-the-login-and-logout-components) for more details. +Before considering to write your own login page component, please take a look at how to change the default [background image](./Theming.md#using-a-custom-login-page) or the [Material UI theme](#theme). + +See the [Authentication documentation](./Authentication.md#customizing-the-login-and-logout-components) for more details. ## `logoutButton` diff --git a/docs/Theming.md b/docs/Theming.md index dad784c580a..706403845d8 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -704,6 +704,24 @@ const mapStateToProps = state => ({ export default withRouter(connect(mapStateToProps)(withStyles(styles)(Menu))); ``` +## Using a Custom Login Page + +### Changing the Background Image + +By default, the login page displays a random background image changing every day. If you want to change that background image, you can use the default Login page component and pass an image URL as the `backgroundImage` prop. + +```jsx +import { Admin, Login } from 'react-admin'; + +const MyLoginPage = () => ; + +const App = () => ( + + // ... + +); +``` + ## Notifications You can override the notification component, for instance to change the notification duration. It defaults to 4000, i.e. 4 seconds, and you can override it using the `autoHideDuration` prop. For instance, to create a custom Notification component with a 5 seconds default: