151 lines
4.0 KiB
JavaScript
151 lines
4.0 KiB
JavaScript
import React, { useEffect, lazy } from 'react';
|
||
import { useForm, Controller } from 'react-hook-form';
|
||
import { Button, TextField } from '@material-ui/core';
|
||
import PermIdentity from '@material-ui/icons/PermIdentity';
|
||
import LockOpen from '@material-ui/icons/LockOpen';
|
||
import './index.less';
|
||
import Snackbar from '@material-ui/core/Snackbar';
|
||
import MuiAlert from '@material-ui/lab/Alert';
|
||
import { useHistory } from 'react-router';
|
||
import loginService from '../../models/_/login';
|
||
import { useDispatch, useSelector } from 'react-redux';
|
||
import config from '../../config';
|
||
|
||
|
||
const ReactLazyPreload = importStatement => {
|
||
const Component = React.lazy(importStatement);
|
||
Component.preload = importStatement;
|
||
return Component;
|
||
};
|
||
|
||
const Home = ReactLazyPreload(() =>
|
||
import("../Home")
|
||
);
|
||
|
||
function Alert(props) {
|
||
return <MuiAlert elevation={6} variant="filled" {...props} />;
|
||
}
|
||
|
||
function Login() {
|
||
const [open, setOpen] = React.useState(false);
|
||
|
||
const { handleSubmit, control, formState: { errors } } = useForm({
|
||
mode: 'onSubmit'
|
||
});
|
||
|
||
const history = useHistory();
|
||
|
||
const logoDisplaying = useSelector(s => s.runtime.logoDisplaying);
|
||
const dispatch = useDispatch();
|
||
|
||
useEffect(() => {
|
||
Home.preload();
|
||
}, []);
|
||
useEffect(() => {
|
||
if (logoDisplaying) {
|
||
setTimeout(() => {
|
||
dispatch.runtime.setLogoDisplaying(false);
|
||
}, 10000);
|
||
}
|
||
}, [logoDisplaying]);
|
||
|
||
const logoEnd = () => {
|
||
dispatch.runtime.setLogoDisplaying(false);
|
||
}
|
||
|
||
const onSubmit = async (data) => {
|
||
const user = await loginService.auth(data);
|
||
|
||
if (user) {
|
||
history.push('/v/home');
|
||
} else {
|
||
// 提示错误信息
|
||
setOpen(true);
|
||
}
|
||
}
|
||
|
||
const handleClose = (event, reason) => {
|
||
if (reason === 'clickaway') {
|
||
return;
|
||
}
|
||
setOpen(false);
|
||
};
|
||
|
||
return (
|
||
logoDisplaying ? (
|
||
<div className="logo-container">
|
||
<video
|
||
style={{ objectFit: 'cover' }}
|
||
src="/assets/logo.mp4"
|
||
objectfit="true"
|
||
autoPlay
|
||
muted
|
||
width="100%"
|
||
height="100%"
|
||
onEnded={logoEnd}
|
||
>
|
||
您的浏览器不支持 video 标签。
|
||
</video>
|
||
</div>
|
||
) : (
|
||
<div className="loginDiv">
|
||
<div className="loginTxt">
|
||
<p>{config.title}</p>
|
||
</div>
|
||
<Snackbar open={open} autoHideDuration={1500} onClose={handleClose} anchorOrigin={{ vertical: 'top', horizontal: 'center' }}>
|
||
<Alert onClose={handleClose} severity="error">
|
||
用户名或密码错误！
|
||
</Alert>
|
||
</Snackbar>
|
||
<form onSubmit={handleSubmit(onSubmit)} className="myForm1">
|
||
<div className="formitem">
|
||
<PermIdentity />
|
||
<Controller
|
||
name="user"
|
||
control={control}
|
||
render={({ field }) => (
|
||
<TextField
|
||
{...field}
|
||
error={!!errors.user}
|
||
variant="outlined"
|
||
label="登录名"
|
||
fullWidth
|
||
helperText={errors.user?.message || ' '}
|
||
/>
|
||
)}
|
||
defaultValue=""
|
||
rules={{ required: '必填' }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="formitem">
|
||
<LockOpen />
|
||
<Controller
|
||
name="pw"
|
||
control={control}
|
||
render={({ field }) => (
|
||
<TextField
|
||
{...field}
|
||
error={!!errors.pw}
|
||
type="password"
|
||
variant="outlined"
|
||
label="密码"
|
||
fullWidth
|
||
helperText={errors.pw?.message || ' '}
|
||
/>
|
||
)}
|
||
defaultValue=""
|
||
rules={{
|
||
required: '必填'
|
||
}}
|
||
/>
|
||
</div>
|
||
<Button type="submit" color="primary" fullWidth size="large" variant="outlined" className="myBtn">登陆</Button>
|
||
</form>
|
||
</div>
|
||
)
|
||
)
|
||
}
|
||
|
||
export default Login
|