|  |  | 
 |  |  | import * as React from 'react'; | 
 |  |  | import { useState } from 'react'; | 
 |  |  | import { useLocation } from 'react-router-dom'; | 
 |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
 |  |  | import { | 
 |  |  |     Avatar, | 
 |  |  |     Box, | 
 |  |  |     Button, | 
 |  |  |     AppBar, | 
 |  |  |     Card, | 
 |  |  |     CardActions, | 
 |  |  |     Toolbar, | 
 |  |  |     CircularProgress, | 
 |  |  |     Typography, | 
 |  |  |     Tabs, | 
 |  |  |     Tab, | 
 |  |  |     useTheme, | 
 |  |  |     useMediaQuery, | 
 |  |  | } from '@mui/material'; | 
 |  |  | import LockIcon from '@mui/icons-material/Lock'; | 
 |  |  | import { | 
 |  |  |     Form, | 
 |  |  |     required, | 
 |  |  |     TextInput, | 
 |  |  |     useTranslate, | 
 |  |  |     useLogin, | 
 |  |  |     useNotify, | 
 |  |  |     SelectInput, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { LOGIN_BACKGROUND } from '@/config/setting'; | 
 |  |  | import { tenants } from '@/api/auth'; | 
 |  |  | import { getSystemInfo, tenants } from '@/api/auth'; | 
 |  |  | import Login from "./Login"; | 
 |  |  | import Register from "./Register"; | 
 |  |  |  | 
 |  |  | const Login = () => { | 
 |  |  |     const [loading, setLoading] = useState(false); | 
 |  |  | const Index = () => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); | 
 |  |  |  | 
 |  |  |     const notify = useNotify(); | 
 |  |  |     const login = useLogin(); | 
 |  |  |     const location = useLocation(); | 
 |  |  |     const [tab, setTab] = useState(0) | 
 |  |  |     const [systemInfo, setSystemInfo] = useState({}); | 
 |  |  |     const [tenantList, setTenantList] = useState([]); | 
 |  |  |  | 
 |  |  |     const [tenantList, setTenantList] = React.useState([]); | 
 |  |  |     const [tenantId, setTenantId] = React.useState(null); | 
 |  |  |     const formPosition = isSmallScreen ? 'middle' : 'right' | 
 |  |  |  | 
 |  |  |     React.useEffect(() => { | 
 |  |  |     useEffect(() => { | 
 |  |  |         getSystemInfo().then(data => { | 
 |  |  |             setSystemInfo(data); | 
 |  |  |         }) | 
 |  |  |         tenants().then(data => { | 
 |  |  |             setTenantList(data); | 
 |  |  |             if (data.length > 0) { | 
 |  |  |                 setTenantId(data[0].id); | 
 |  |  |             } | 
 |  |  |         }) | 
 |  |  |     }, []); | 
 |  |  |  | 
 |  |  |     React.useEffect(() => { | 
 |  |  |         console.log(tenantId); | 
 |  |  |     }, [tenantId]); | 
 |  |  |  | 
 |  |  |     const handleSubmit = (auth) => { | 
 |  |  |         setLoading(true); | 
 |  |  |         // js native confirm && root | 
 |  |  |         login( | 
 |  |  |             auth, | 
 |  |  |             location.state ? (location.state).nextPathname : '/' | 
 |  |  |         ).catch((error) => { | 
 |  |  |             setLoading(false); | 
 |  |  |             notify( | 
 |  |  |                 typeof error === 'string' | 
 |  |  |                     ? error | 
 |  |  |                     : typeof error === 'undefined' || !error.message | 
 |  |  |                         ? 'ra.auth.sign_in_error' | 
 |  |  |                         : error.message, | 
 |  |  |                 { | 
 |  |  |                     type: 'error', | 
 |  |  |                     messageArgs: { | 
 |  |  |                         _: | 
 |  |  |                             typeof error === 'string' | 
 |  |  |                                 ? error | 
 |  |  |                                 : error && error.message | 
 |  |  |                                     ? error.message | 
 |  |  |                                     : undefined, | 
 |  |  |                     }, | 
 |  |  |                 } | 
 |  |  |             ); | 
 |  |  |         }); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Form onSubmit={handleSubmit} noValidate> | 
 |  |  |             {/* https://unsplash.com/ */} | 
 |  |  |             <Box | 
 |  |  |                 sx={{ | 
 |  |  |                     display: 'flex', | 
 |  |  |                     flexDirection: 'column', | 
 |  |  |                     minHeight: '100vh', | 
 |  |  |                     alignItems: 'center', | 
 |  |  |                     justifyContent: 'flex-start', | 
 |  |  |                     // justifyContent: 'center', | 
 |  |  |                     background: `url(/login_bg.jpg)`, | 
 |  |  |                     backgroundRepeat: 'no-repeat', | 
 |  |  |                     backgroundSize: 'cover', | 
 |  |  |         <Box | 
 |  |  |             sx={{ | 
 |  |  |                 display: 'flex', | 
 |  |  |                 flexDirection: 'column', | 
 |  |  |                 minHeight: '100vh', | 
 |  |  |                 alignItems: formPosition === 'middle' ? 'center' : 'flex-end', | 
 |  |  |                 paddingRight: formPosition === 'middle' ? 0 : '6em', | 
 |  |  |                 justifyContent: formPosition === 'middle' ? 'flex-start' : 'center', | 
 |  |  |                 background: `url(/login_bg.jpg)`, // https://unsplash.com/ | 
 |  |  |                 backgroundRepeat: 'no-repeat', | 
 |  |  |                 backgroundSize: 'cover', | 
 |  |  |             }} | 
 |  |  |         > | 
 |  |  |             {/* <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, | 
 |  |  |                 }} | 
 |  |  |             > | 
 |  |  |                 <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_bg.mp4" type="video/mp4" /> | 
 |  |  |                     )} | 
 |  |  |                 </video> | 
 |  |  |                 {LOGIN_BACKGROUND === 'media' && ( | 
 |  |  |                     <source src="/login_bg.mp4" type="video/mp4" /> | 
 |  |  |                 )} | 
 |  |  |             </video> */} | 
 |  |  |  | 
 |  |  |                 <Card sx={{ | 
 |  |  |                     minWidth: 300, | 
 |  |  |                     marginTop: '6em', | 
 |  |  |                     zIndex: 1 | 
 |  |  |                 }}> | 
 |  |  |                     <Box | 
 |  |  |                         sx={{ | 
 |  |  |                             margin: '1em', | 
 |  |  |                             display: 'flex', | 
 |  |  |                             justifyContent: 'center', | 
 |  |  |                         }} | 
 |  |  |                     > | 
 |  |  |                         <Avatar sx={{ bgcolor: 'secondary.main' }}> | 
 |  |  |                             <LockIcon /> | 
 |  |  |                         </Avatar> | 
 |  |  |                     </Box> | 
 |  |  |                     <Box | 
 |  |  |                         sx={{ | 
 |  |  |                             marginTop: '1em', | 
 |  |  |                             display: 'flex', | 
 |  |  |                             justifyContent: 'center', | 
 |  |  |                             color: theme => theme.palette.grey[500], | 
 |  |  |                         }} | 
 |  |  |                     > | 
 |  |  |                         Hint: root / 123456 | 
 |  |  |                     </Box> | 
 |  |  |                     <Box sx={{ padding: '0 1em 1em 1em' }}> | 
 |  |  |                         <Box sx={{ marginTop: '1em' }}> | 
 |  |  |                             <SelectInput | 
 |  |  |                                 label="page.login.tenant" | 
 |  |  |                                 source="tenantId" | 
 |  |  |                                 choices={tenantList.map(item => ({ | 
 |  |  |                                     id: item.id, | 
 |  |  |                                     name: item.name | 
 |  |  |                                 }))} | 
 |  |  |                                 validate={required()} | 
 |  |  |                                 value={tenantId} | 
 |  |  |                                 onChange={e => setTenantId(e.target.value)} | 
 |  |  |                             /> | 
 |  |  |                         </Box> | 
 |  |  |                         <Box sx={{ marginTop: '.1em' }}> | 
 |  |  |                             <TextInput | 
 |  |  |                                 autoFocus | 
 |  |  |                                 source="username" | 
 |  |  |                                 label={translate('ra.auth.username')} | 
 |  |  |                                 disabled={loading} | 
 |  |  |                                 validate={required()} | 
 |  |  |                             /> | 
 |  |  |                         </Box> | 
 |  |  |                         <Box sx={{ marginTop: '.1em' }}> | 
 |  |  |                             <TextInput | 
 |  |  |                                 source="password" | 
 |  |  |                                 label={translate('ra.auth.password')} | 
 |  |  |                                 type="password" | 
 |  |  |                                 disabled={loading} | 
 |  |  |                                 validate={required()} | 
 |  |  |                             /> | 
 |  |  |                         </Box> | 
 |  |  |                     </Box> | 
 |  |  |                     <CardActions sx={{ padding: '0 1em 1em 1em' }}> | 
 |  |  |                         <Button | 
 |  |  |                             variant="contained" | 
 |  |  |                             type="submit" | 
 |  |  |                             color="primary" | 
 |  |  |                             disabled={loading} | 
 |  |  |                             fullWidth | 
 |  |  |             <Card sx={{ | 
 |  |  |                 width: 400, | 
 |  |  |                 marginTop: formPosition === 'middle' ? '6em' : 0, | 
 |  |  |                 zIndex: 1 | 
 |  |  |             }}> | 
 |  |  |                 <div> | 
 |  |  |                     <AppBar position="static" sx={{ backgroundColor: '#3D4BA7' }}> | 
 |  |  |                         <Toolbar> | 
 |  |  |                             <Typography variant="h6" color="inherit">{translate("page.login.title")}</Typography> | 
 |  |  |                         </Toolbar> | 
 |  |  |                     </AppBar> | 
 |  |  |                 </div> | 
 |  |  |  | 
 |  |  |                 {systemInfo.mode === 'ONLINE' ? ( | 
 |  |  |                     <> | 
 |  |  |                         <Tabs | 
 |  |  |                             value={tab} | 
 |  |  |                             onChange={(event, value) => { | 
 |  |  |                                 setTab(value); | 
 |  |  |                             }} | 
 |  |  |                             indicatorColor="primary" | 
 |  |  |                             textColor="primary" | 
 |  |  |                             variant="fullWidth" | 
 |  |  |                         > | 
 |  |  |                             {loading && ( | 
 |  |  |                                 <CircularProgress size={25} thickness={2} /> | 
 |  |  |                             )} | 
 |  |  |                             {translate('ra.auth.sign_in')} | 
 |  |  |                         </Button> | 
 |  |  |                     </CardActions> | 
 |  |  |                 </Card> | 
 |  |  |             </Box> | 
 |  |  |         </Form> | 
 |  |  |                             <Tab label={translate('page.login.tab.login')} sx={{ fontSize: '.8em' }} /> | 
 |  |  |                             <Tab label={translate('page.login.tab.register')} sx={{ fontSize: '.8em' }} /> | 
 |  |  |                         </Tabs> | 
 |  |  |  | 
 |  |  |                         {tab === 0 && <Login systemInfo={systemInfo} tenantList={tenantList} />} | 
 |  |  |                         {tab === 1 && <Register systemInfo={systemInfo} tenantList={tenantList} />} | 
 |  |  |                     </> | 
 |  |  |                 ) : ( | 
 |  |  |                     <Login systemInfo={systemInfo} tenantList={tenantList} /> | 
 |  |  |                 )} | 
 |  |  |  | 
 |  |  |                 {/* <Box mb={1} sx={{ textAlign: 'center' }}> | 
 |  |  |                     <Typography variant="caption" align="center">{translate("page.login.footer")}</Typography> | 
 |  |  |                 </Box> */} | 
 |  |  |             </Card> | 
 |  |  |         </Box > | 
 |  |  |     ); | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | export default Login; | 
 |  |  | export default Index; |