|  |  |  | 
|---|
|  |  |  | 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', | 
|---|
|  |  |  | background: `url(/login_bg.jpg)`, | 
|---|
|  |  |  | // justifyContent: 'center', | 
|---|
|  |  |  | background: `url(/login_bg2.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', | 
|---|