|  |  |  | 
|---|
|  |  |  | 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; | 
|---|