import * as React from 'react';
|
import { useState } from 'react';
|
import { useLocation } from 'react-router-dom';
|
import {
|
Avatar,
|
Box,
|
Button,
|
Card,
|
CardActions,
|
CircularProgress,
|
} 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';
|
|
const Login = () => {
|
const [loading, setLoading] = useState(false);
|
const translate = useTranslate();
|
|
const notify = useNotify();
|
const login = useLogin();
|
const location = useLocation();
|
|
const [tenantList, setTenantList] = React.useState([]);
|
const [tenantId, setTenantId] = React.useState(null);
|
|
React.useEffect(() => {
|
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',
|
}}
|
>
|
<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>
|
|
<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
|
>
|
{loading && (
|
<CircularProgress size={25} thickness={2} />
|
)}
|
{translate('ra.auth.sign_in')}
|
</Button>
|
</CardActions>
|
</Card>
|
</Box>
|
</Form>
|
);
|
};
|
|
export default Login;
|
