From 80f5b68ebc3fdbbcf50a752a2fe08b8bf492f9c5 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Thu, 19 Sep 2019 18:38:09 +0200 Subject: [PATCH 1/4] Fix missing logout in demo UserMenu --- examples/demo/src/layout/AppBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/demo/src/layout/AppBar.js b/examples/demo/src/layout/AppBar.js index 582f11b1c22..45d8ace57f2 100644 --- a/examples/demo/src/layout/AppBar.js +++ b/examples/demo/src/layout/AppBar.js @@ -36,7 +36,7 @@ const CustomUserMenu = props => ( ); -const CustomAppBar = ({ props }) => { +const CustomAppBar = props => { const classes = useStyles(); return ( }> From d093b1dfefe5f2d4d45c4944de174e21721963ca Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Thu, 19 Sep 2019 18:38:26 +0200 Subject: [PATCH 2/4] Fix bad handling of exceptions in demo --- examples/demo/src/layout/Login.js | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/examples/demo/src/layout/Login.js b/examples/demo/src/layout/Login.js index 22d656c507d..ffa28f2f305 100644 --- a/examples/demo/src/layout/Login.js +++ b/examples/demo/src/layout/Login.js @@ -12,7 +12,7 @@ import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import LockIcon from '@material-ui/icons/Lock'; -import { Notification, useTranslate, useLogin } from 'react-admin'; +import { Notification, useTranslate, useLogin, useNotify } from 'react-admin'; import { lightTheme } from './themes'; @@ -74,16 +74,27 @@ const Login = ({ location }) => { const [loading, setLoading] = useState(false); const translate = useTranslate(); const classes = useStyles(); - const doLogin = useLogin(); + const notify = useNotify(); + const login = useLogin(); - const login = auth => { + const handleSubmit = auth => { setLoading(true); - doLogin(auth, location.state ? location.state.nextPathname : '/').then( - () => setLoading(false) - ); + login(auth, location.state ? location.state.nextPathname : '/') + .then(() => setLoading(false)) + .catch(error => { + setLoading(false); + notify( + typeof error === 'string' + ? error + : typeof error === 'undefined' || !error.message + ? 'ra.auth.sign_in_error' + : error.message, + 'warning' + ); + }); }; - const validate = (values, props) => { + const validate = values => { const errors = {}; if (!values.username) { errors.username = translate('ra.validation.required'); @@ -96,7 +107,7 @@ const Login = ({ location }) => { return (
( From 3438a15f31dbeb19f0c9d45c4058f90851699aee Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Thu, 19 Sep 2019 19:09:57 +0200 Subject: [PATCH 3/4] Fix authentication doc for custom Login --- docs/Authentication.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/Authentication.md b/docs/Authentication.md index da517b642de..9d3c3ec6fc8 100644 --- a/docs/Authentication.md +++ b/docs/Authentication.md @@ -216,7 +216,7 @@ For all these cases, it's up to you to implement your own `LoginPage` component, // in src/MyLoginPage.js import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; -import { useLogin } from 'react-admin'; +import { useLogin, useNotify } from 'react-admin'; import { ThemeProvider } from '@material-ui/styles'; const MyLoginPage = ({ theme }) => { @@ -224,9 +224,11 @@ const MyLoginPage = ({ theme }) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const login = useLogin(); + const notify = useNotify(); const submit = (e) => { e.preventDefault(); - login({ email, password }); + login({ email, password }) + .catch(() => notify('Invalid email or password')); } return ( From 9812944dc7975acde67a1c1ff6f236a1a7bd59df Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Thu, 19 Sep 2019 19:10:17 +0200 Subject: [PATCH 4/4] Logout menu adjustments --- examples/demo/src/layout/Menu.js | 15 ++++++++++++--- examples/demo/src/layout/SubMenu.js | 5 +++-- examples/simple/src/Layout.js | 3 ++- packages/ra-ui-materialui/src/auth/Logout.tsx | 6 ++---- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/examples/demo/src/layout/Menu.js b/examples/demo/src/layout/Menu.js index ce4c2102d7c..fa910bb3966 100644 --- a/examples/demo/src/layout/Menu.js +++ b/examples/demo/src/layout/Menu.js @@ -15,7 +15,7 @@ import categories from '../categories'; import reviews from '../reviews'; import SubMenu from './SubMenu'; -const Menu = ({ onMenuClick, logout }) => { +const Menu = ({ onMenuClick, dense, logout }) => { const [state, setState] = useState({ menuCatalog: false, menuSales: false, @@ -40,6 +40,7 @@ const Menu = ({ onMenuClick, logout }) => { sidebarIsOpen={open} name="pos.menu.sales" icon={} + dense={dense} > { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} + dense={dense} /> { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} + dense={dense} /> { sidebarIsOpen={open} name="pos.menu.catalog" icon={} + dense={dense} > { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} + dense={dense} /> { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} + dense={dense} /> { sidebarIsOpen={open} name="pos.menu.customers" icon={} + dense={dense} > { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} + dense={dense} /> { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} + dense={dense} /> { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} - dense + dense={dense} /> {isXsmall && ( { leftIcon={} onClick={onMenuClick} sidebarIsOpen={open} - dense + dense={dense} /> )} {isXsmall && logout} diff --git a/examples/demo/src/layout/SubMenu.js b/examples/demo/src/layout/SubMenu.js index 52e691c00c0..64985cc7e04 100644 --- a/examples/demo/src/layout/SubMenu.js +++ b/examples/demo/src/layout/SubMenu.js @@ -30,12 +30,13 @@ const SubMenu = ({ name, icon, children, + dense, }) => { const translate = useTranslate(); const classes = useStyles(); const header = ( - + {isOpen ? : icon} @@ -56,7 +57,7 @@ const SubMenu = ({ )} ({ menuItem: { color: theme.palette.text.secondary, }, + icon: { minWidth: theme.spacing(5) }, })); const SwitchLanguage = forwardRef((props, ref) => { @@ -22,7 +23,7 @@ const SwitchLanguage = forwardRef((props, ref) => { props.onClick(); }} > - + Switch Language diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx index eeee4b9eada..e0a4b3495ad 100644 --- a/packages/ra-ui-materialui/src/auth/Logout.tsx +++ b/packages/ra-ui-materialui/src/auth/Logout.tsx @@ -17,9 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({ menuItem: { color: theme.palette.text.secondary, }, - iconPaddingStyle: { - paddingRight: theme.spacing(1), - }, + icon: { minWidth: theme.spacing(5) }, })); /** @@ -46,7 +44,7 @@ const LogoutWithRef: FunctionComponent< ref={ref} {...rest} > - + {translate('ra.auth.logout')}