ant migrate v4

spug_web/src/pages/login/index.js

@@ -3,9 +3,9 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Tabs, Modal } from 'antd';
-import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { UserOutlined, LockOutlined, CopyrightOutlined, GithubOutlined } from '@ant-design/icons';
 import styles from './login.module.css';
 import history from 'libs/history';
 import { http, updatePermissions } from 'libs';
@@ -16,29 +16,24 @@ import requestStore from 'pages/deploy/request/store';
 import execStore from 'pages/exec/task/store';
 import hostStore from 'pages/host/store';
 
-class LoginIndex extends React.Component {
+export default function () {
-  constructor(props) {
+  const [form] = Form.useForm();
-    super(props);
+  const [loading, setLoading] = useState(false);
-    this.state = {
+  const [loginType, setLoginType] = useState('default');
-      loading: false,
-      loginType: 'default'
-    }
-  }
 
-  componentDidMount() {
+  useEffect(() => {
     envStore.records = [];
     appStore.records = [];
     requestStore.records = [];
     requestStore.deploys = [];
     hostStore.records = [];
     execStore.hosts = [];
-  }
+  }, [])
 
-  handleSubmit = () => {
+  function handleSubmit() {
-    this.props.form.validateFields((err, formData) => {
+    setLoading(true);
-      if (!err) {
+    const formData = form.getFieldsValue();
-        this.setState({loading: true});
+    formData['type'] = loginType;
-        formData['type'] = this.state.loginType;
     http.post('/api/account/login/', formData)
       .then(data => {
         if (!data['has_real_ip']) {
@@ -51,17 +46,15 @@ class LoginIndex extends React.Component {
                  href="https://spug.dev/docs/practice/#%E5%AE%89%E5%85%A8%E6%80%A7%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97"
                  rel="noopener noreferrer">官方文档</a>。
             </div>,
-                onOk: () => this.doLogin(data)
+            onOk: () => doLogin(data)
           })
         } else {
-              this.doLogin(data)
+          doLogin(data)
         }
-          }, () => this.setState({loading: false}))
+      }, () => setLoading(false))
   }
-    })
-  };
 
-  doLogin = (data) => {
+  function doLogin(data) {
     localStorage.setItem('token', data['access_token']);
     localStorage.setItem('nickname', data['nickname']);
     localStorage.setItem('is_supper', data['is_supper']);
@@ -73,10 +66,8 @@ class LoginIndex extends React.Component {
     } else {
       history.push('/welcome/index')
     }
-  };
+  }
 
-  render() {
-    const {getFieldDecorator} = this.props.form;
   return (
     <div className={styles.container}>
       <div className={styles.titleContainer}>
@@ -84,30 +75,26 @@ class LoginIndex extends React.Component {
         <div className={styles.desc}>灵活、强大、功能全面的开源运维平台</div>
       </div>
       <div className={styles.formContainer}>
-          <Tabs className={styles.tabs} onTabClick={e => this.setState({loginType: e})}>
+        <Tabs className={styles.tabs} onTabClick={v => setLoginType(v)}>
           <Tabs.TabPane tab="普通登录" key="default"/>
           <Tabs.TabPane tab="LDAP登录" key="ldap"/>
         </Tabs>
-          <Form>
+        <Form form={form}>
-            <Form.Item className={styles.formItem}>
+          <Form.Item name="username" className={styles.formItem}>
-              {getFieldDecorator('username', {rules: [{required: true, message: '请输入账户'}]})(
             <Input
               size="large"
               autoComplete="off"
               placeholder="请输入账户"
               prefix={<UserOutlined className={styles.icon}/>}/>
-              )}
           </Form.Item>
-            <Form.Item className={styles.formItem}>
+          <Form.Item name="password" className={styles.formItem}>
-              {getFieldDecorator('password', {rules: [{required: true, message: '请输入密码'}]})(
             <Input
               size="large"
               type="password"
               autoComplete="off"
               placeholder="请输入密码"
-                  onPressEnter={this.handleSubmit}
+              onPressEnter={handleSubmit}
               prefix={<LockOutlined className={styles.icon}/>}/>
-              )}
           </Form.Item>
         </Form>
 
@@ -116,8 +103,8 @@ class LoginIndex extends React.Component {
           size="large"
           type="primary"
           className={styles.button}
-            loading={this.state.loading}
+          loading={loading}
-            onClick={this.handleSubmit}>登录</Button>
+          onClick={handleSubmit}>登录</Button>
       </div>
 
       <div className={styles.footerZone}>
@@ -125,15 +112,12 @@ class LoginIndex extends React.Component {
           <a className={styles.links} title="官网" href="https://www.spug.dev" target="_blank"
              rel="noopener noreferrer">官网</a>
           <a className={styles.links} title="Github" href="https://github.com/openspug/spug" target="_blank"
-               rel="noopener noreferrer"><Icon type="github"/></a>
+             rel="noopener noreferrer"><GithubOutlined/></a>
           <a title="文档" href="https://www.spug.dev/docs/about-spug/" target="_blank"
              rel="noopener noreferrer">文档</a>
         </div>
-          <div style={{color: 'rgba(0, 0, 0, .45)'}}>Copyright <Icon type="copyright"/> 2020 By OpenSpug</div>
+        <div style={{color: 'rgba(0, 0, 0, .45)'}}>Copyright <CopyrightOutlined/> 2020 By OpenSpug</div>
       </div>
     </div>
   )
 }
-}
-
-export default Form.create()(LoginIndex)