|  |  | 
 |  |  | import * as React from 'react'; | 
 |  |  | import { useState } from 'react'; | 
 |  |  | import { useLocation } from 'react-router-dom'; | 
 |  |  |  | 
 |  |  | import { | 
 |  |  |     Avatar, | 
 |  |  |     Box, | 
 |  |  | 
 |  |  |     useLogin, | 
 |  |  |     useNotify, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { LOGIN_BACKGROUND } from '@/config/setting'; | 
 |  |  |  | 
 |  |  | const Login = () => { | 
 |  |  |     const [loading, setLoading] = useState(false); | 
 |  |  | 
 |  |  |  | 
 |  |  |     const handleSubmit = (auth) => { | 
 |  |  |         setLoading(true); | 
 |  |  |         // js native confirm && root | 
 |  |  |         login( | 
 |  |  |             auth, | 
 |  |  |             location.state ? (location.state).nextPathname : '/' | 
 |  |  | 
 |  |  |                 typeof error === 'string' | 
 |  |  |                     ? error | 
 |  |  |                     : typeof error === 'undefined' || !error.message | 
 |  |  |                       ? 'ra.auth.sign_in_error' | 
 |  |  |                       : error.message, | 
 |  |  |                         ? 'ra.auth.sign_in_error' | 
 |  |  |                         : error.message, | 
 |  |  |                 { | 
 |  |  |                     type: 'error', | 
 |  |  |                     messageArgs: { | 
 |  |  | 
 |  |  |                             typeof error === 'string' | 
 |  |  |                                 ? error | 
 |  |  |                                 : error && error.message | 
 |  |  |                                   ? error.message | 
 |  |  |                                   : undefined, | 
 |  |  |                                     ? error.message | 
 |  |  |                                     : undefined, | 
 |  |  |                     }, | 
 |  |  |                 } | 
 |  |  |             ); | 
 |  |  | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Form onSubmit={handleSubmit} noValidate> | 
 |  |  |             {/* https://unsplash.com/ */} | 
 |  |  |             <Box | 
 |  |  |                 sx={{ | 
 |  |  |                     display: 'flex', | 
 |  |  | 
 |  |  |                     minHeight: '100vh', | 
 |  |  |                     alignItems: 'center', | 
 |  |  |                     justifyContent: 'flex-start', | 
 |  |  |                     // justifyContent: 'center', | 
 |  |  |                     background: `url(/login_bg1.jpg)`, | 
 |  |  |                     backgroundRepeat: 'no-repeat', | 
 |  |  |                     backgroundSize: 'cover', | 
 |  |  |                 }} | 
 |  |  |             > | 
 |  |  |                 {/* https://unsplash.com/ */} | 
 |  |  |                 <Card sx={{ minWidth: 300, marginTop: '6em', backgroundColor: '#fff' }}> | 
 |  |  |                 <video | 
 |  |  |                     autoPlay | 
 |  |  |                     loop | 
 |  |  |                     muted | 
 |  |  |                     style={{ | 
 |  |  |                         position: 'fixed', | 
 |  |  |                         top: 0, | 
 |  |  |                         left: 0, | 
 |  |  |                         width: '100%', | 
 |  |  |                         height: '100%', | 
 |  |  |                         // objectFit: 'cover', | 
 |  |  |                         // objectFit: 'contain', | 
 |  |  |                         objectFit: 'fill', | 
 |  |  |                         // objectFit: 'scale-down', | 
 |  |  |                         zIndex: 0, | 
 |  |  |                     }} | 
 |  |  |                 > | 
 |  |  |                     {LOGIN_BACKGROUND === 'media' && ( | 
 |  |  |                         <source src="/login_bg1.mp4" type="video/mp4" /> | 
 |  |  |                     )} | 
 |  |  |                 </video> | 
 |  |  |  | 
 |  |  |                 <Card sx={{ | 
 |  |  |                     minWidth: 300, | 
 |  |  |                     marginTop: '6em', | 
 |  |  |                     zIndex: 1 | 
 |  |  |                 }}> | 
 |  |  |                     <Box | 
 |  |  |                         sx={{ | 
 |  |  |                             margin: '1em', |