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,52 +16,45 @@ 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 = [];
+  }, [])
+
+  function handleSubmit() {
+    setLoading(true);
+    const formData = form.getFieldsValue();
+    formData['type'] = loginType;
+    http.post('/api/account/login/', formData)
+      .then(data => {
+        if (!data['has_real_ip']) {
+          Modal.warning({
+            title: '安全警告',
+            className: styles.tips,
+            content: <div>
+              未能获取到访问者的真实IP，无法提供基于请求来源IP的合法性验证，详细信息请参考
+              <a target="_blank"
+                 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: () => doLogin(data)
+          })
+        } else {
+          doLogin(data)
+        }
+      }, () => setLoading(false))
   }
 
-  handleSubmit = () => {
+  function doLogin(data) {
-    this.props.form.validateFields((err, formData) => {
-      if (!err) {
-        this.setState({loading: true});
-        formData['type'] = this.state.loginType;
-        http.post('/api/account/login/', formData)
-          .then(data => {
-            if (!data['has_real_ip']) {
-              Modal.warning({
-                title: '安全警告',
-                className: styles.tips,
-                content: <div>
-                  未能获取到访问者的真实IP，无法提供基于请求来源IP的合法性验证，详细信息请参考
-                  <a target="_blank"
-                     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)
-              })
-            } else {
-              this.doLogin(data)
-            }
-          }, () => this.setState({loading: false}))
-      }
-    })
-  };
-
-  doLogin = (data) => {
     localStorage.setItem('token', data['access_token']);
     localStorage.setItem('nickname', data['nickname']);
     localStorage.setItem('is_supper', data['is_supper']);
@@ -73,67 +66,58 @@ 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}>
-          <div><img className={styles.logo} src={logo} alt="logo"/></div>
-          <div className={styles.desc}>灵活、强大、功能全面的开源运维平台</div>
-        </div>
-        <div className={styles.formContainer}>
-          <Tabs className={styles.tabs} onTabClick={e => this.setState({loginType: e})}>
-            <Tabs.TabPane tab="普通登录" key="default"/>
-            <Tabs.TabPane tab="LDAP登录" key="ldap"/>
-          </Tabs>
-          <Form>
-            <Form.Item 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}>
-              {getFieldDecorator('password', {rules: [{required: true, message: '请输入密码'}]})(
-                <Input
-                  size="large"
-                  type="password"
-                  autoComplete="off"
-                  placeholder="请输入密码"
-                  onPressEnter={this.handleSubmit}
-                  prefix={<LockOutlined className={styles.icon}/>}/>
-              )}
-            </Form.Item>
-          </Form>
-
-          <Button
-            block
-            size="large"
-            type="primary"
-            className={styles.button}
-            loading={this.state.loading}
-            onClick={this.handleSubmit}>登录</Button>
-        </div>
-
-        <div className={styles.footerZone}>
-          <div className={styles.linksZone}>
-            <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>
-            <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>
-      </div>
-    )
   }
-}
 
-export default Form.create()(LoginIndex)
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleContainer}>
+        <div><img className={styles.logo} src={logo} alt="logo"/></div>
+        <div className={styles.desc}>灵活、强大、功能全面的开源运维平台</div>
+      </div>
+      <div className={styles.formContainer}>
+        <Tabs className={styles.tabs} onTabClick={v => setLoginType(v)}>
+          <Tabs.TabPane tab="普通登录" key="default"/>
+          <Tabs.TabPane tab="LDAP登录" key="ldap"/>
+        </Tabs>
+        <Form form={form}>
+          <Form.Item name="username" className={styles.formItem}>
+            <Input
+              size="large"
+              autoComplete="off"
+              placeholder="请输入账户"
+              prefix={<UserOutlined className={styles.icon}/>}/>
+          </Form.Item>
+          <Form.Item name="password" className={styles.formItem}>
+            <Input
+              size="large"
+              type="password"
+              autoComplete="off"
+              placeholder="请输入密码"
+              onPressEnter={handleSubmit}
+              prefix={<LockOutlined className={styles.icon}/>}/>
+          </Form.Item>
+        </Form>
+
+        <Button
+          block
+          size="large"
+          type="primary"
+          className={styles.button}
+          loading={loading}
+          onClick={handleSubmit}>登录</Button>
+      </div>
+
+      <div className={styles.footerZone}>
+        <div className={styles.linksZone}>
+          <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"><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 <CopyrightOutlined/> 2020 By OpenSpug</div>
+      </div>
+    </div>
+  )
+}