diff --git a/src/components/pages/Login.tsx b/src/components/pages/Login.tsx index 403799710..964d06e03 100644 --- a/src/components/pages/Login.tsx +++ b/src/components/pages/Login.tsx @@ -1,14 +1,15 @@ /** * Created by hao.cheng on 2017/4/16. */ -import React from 'react'; +import React, { useEffect } from 'react'; import { Button, Form, Input } from 'antd'; import { PwaInstaller } from '../widget'; -import { connectAlita } from 'redux-alita'; +import { useAlita } from 'redux-alita'; import { RouteComponentProps } from 'react-router'; import { FormProps } from 'antd/lib/form'; import umbrella from 'umbrella-storage'; import { GithubOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'; +import { useUpdateEffect } from 'ahooks'; const FormItem = Form.Item; type LoginProps = { @@ -16,90 +17,88 @@ type LoginProps = { auth: any; } & RouteComponentProps & FormProps; -class Login extends React.Component { - componentDidMount() { - const { setAlitaState } = this.props; - setAlitaState({ stateName: 'auth', data: null }); - } - componentDidUpdate(prevProps: LoginProps) { - // React 16.3+弃用componentWillReceiveProps - const { auth: nextAuth = {}, history } = this.props; - // const { history } = this.props; - if (nextAuth.data && nextAuth.data.uid) { + +const Login = (props: LoginProps) => { + const { history } = props; + const [auth, setAlita] = useAlita({ auth: {} }, { light: true }); + + useEffect(() => { + setAlita('auth', null); + }, [setAlita]); + + useUpdateEffect(() => { + if (auth && auth.uid) { // 判断是否登陆 - umbrella.setLocalStorage('user', nextAuth.data); + umbrella.setLocalStorage('user', auth); history.push('/'); } - } - handleSubmit = (values: any) => { - if (this.checkUser(values)) { - this.props.setAlitaState({ funcName: values.userName, stateName: 'auth' }); + }, [history, auth]); + + const handleSubmit = (values: any) => { + if (checkUser(values)) { + setAlita({ funcName: values.userName, stateName: 'auth' }); } }; - checkUser = (values: any) => { + const checkUser = (values: any) => { const users = [ ['admin', 'admin'], ['guest', 'guest'], ]; return users.some((user) => user[0] === values.userName && user[1] === values.password); }; - gitHub = () => { + const gitHub = () => { window.location.href = 'https://github.com/login/oauth/authorize?client_id=792cdcd244e98dcd2dee&redirect_uri=http://localhost:3006/&scope=user&state=reactAdmin'; }; - render() { - return ( -
-
-
- React Admin - -
-
- - } - placeholder="管理员输入admin, 游客输入guest" - /> - - +
+
+ React Admin + +
+ + + } + placeholder="管理员输入admin, 游客输入guest" + /> + + + } + type="password" + placeholder="管理员输入admin, 游客输入guest" + /> + + + + 忘记密码 + + +

+ 或 现在就去注册! + + + (第三方登录) - -

- 或 现在就去注册! - - - (第三方登录) - -

-
- -
+

+
+
- ); - } -} +
+ ); +}; -export default connectAlita(['auth'])(Login); +export default Login;