forgeplus-react/src/modules/loginRegister/LoginNew.jsx

import React, { useEffect, useState } from "react";
import { Form, Input, Button, Checkbox , Tooltip } from "antd";
import { Link } from "react-router-dom";
import axios from 'axios';
// import educoderLogo from '../login/educoder.png';
// import qqlogo from '../login/qq@2x.png';
// import WeChatlogo from '../login/WeChat@2x.png';
// import giteelogo from '../login/gitee.png';
// import githublogo from '../login/github.png';
import cookie from 'react-cookies';
import './LoginRegisterPageNew.scss';
import { Encrypt } from "../../common/Env";
import { getOrzCompanyList } from "../../forge/Information/api";

function Login(props){
  const [message,setMessage] = useState();
  // const [setting, setSetting] = useState(undefined);
  const {form, location, mygetHelmetapi} = props;
  const {getFieldDecorator } = form;
  const {search} = location;


  useEffect(()=>{
    //控制密码输入框在DOM不可见value
    clear();
    //获取第三方登录平台信息
    // setSetting(JSON.parse(localStorage.getItem("chromesetting")));
  },[])

  // 配置网页标题
  useEffect(()=>{
    if(mygetHelmetapi){
      const {name} = mygetHelmetapi;
      document.title = name;
    }
  }, [mygetHelmetapi])

  // 登录表单提交
  function handleSubmit(){
    setMessage(undefined);
    form.validateFields((err, values) => {
      if (!err) {
        axios.post(`/accounts/login.json`, {
          login: values.username,
          password: Encrypt(values.password),
          autologin: values.remember?1:0,
        }).then((response) => {
          if (!response.data.login) {
            response.data.status === -2 ? setMessage(response.data.message) : setMessage("错误的账号或密码");
          } else {
            //判断用户是否选择【下次自动登录】
            cookie.save('autologin',values.remember);
            cookie.save('supplyphone',true);
            cookie.save("login",response.data.login);
            //意见反馈
            const searchParams = new URLSearchParams(search.substring(1));
            const goPage = searchParams.get("go_page");
            // 获取工作台，如果有已开通的工作台，则跳转到第一个工作台
            if(goPage){
              window.location.href = goPage
            }else{
              getOrzCompanyList().then(res=>{
                if(res && res.data && res.data.rows && res.data.rows[0]){
                  window.location.href = `${ mygetHelmetapi && mygetHelmetapi.common.zone }/${res.data.rows[0].enterpriseIdentifier}`
                }else{
                  window.location.href = `/${response.data.login}`
                }
              }).catch(()=>{
                window.location.href = `/${response.data.login}`
              })
            }
          }
        }).catch((error) => {
          console.log('error',error);
        })
      }
    });
  }

  //清除密码框的value属性->DOM看不见密码值
  function clear(){
    const password = document.getElementById("login_password");
    if(password && password.type==="password"){
      setTimeout(()=>{
        password.removeAttribute('value');
      },0)
    }
  }


  return(
    <div className="right_cont login_content">
      <div className="login_register_head mb60">
        <p>欢迎登录 <span className="head_blue">{mygetHelmetapi && mygetHelmetapi.name}</span></p>
      </div>
      <p className = {message?"message active mb10":"message"}>{message}</p>
      <Form className="login-form">
        <Form.Item>
          {getFieldDecorator('username',{
            rules:[
              {
                required:true,  
                message:"请输入手机号/邮箱/用户名"
              }
            ],
            validateTrigger:"onBlur",
          })(<Input className="account" placeholder="请输入手机号/邮箱/用户名" prefix={<div className="input_icon"></div>} />)}
        </Form.Item>

        <Form.Item>
          {getFieldDecorator('password', {
            rules: [
              {
                required:true,
                message:"请输入登录密码"
              }
            ],
            validateTrigger:"onBlur",
          })(
            <Input.Password className="psd" placeholder="请输入登录密码" onBlur={clear} onChange={clear} prefix={<div className="input_icon"></div>} />,
          )}
        </Form.Item>

        <div className="login_register_head login mb60">
          <Form.Item>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: cookie.load('autologin'),
            })(<Checkbox>下次自动登录</Checkbox>)}
          </Form.Item>
          {/* <Link to="/resetPassword" className="goResetPsdBut">忘记密码？</Link> */}
        </div>
        <Button type="primary" htmlType="submit" onClick={handleSubmit} className="login_register_cofBut">登录</Button>
      </Form>
      <div className="link_span">没有账号？<Link to={`/register`}>去注册</Link></div>

      {
        // setting && setting.third_party_new && setting.third_party_new.length > 0 ?
        // <p className="quick_logon">
        //   <p className="quick_logon_p"></p>
        //   <span className={"startlogin"}>&nbsp;快速登录&nbsp;</span>
        //   {setting.third_party_new.map((item,key)=>{
        //     return(
        //     <a href={`${item.url}`} className="ml15 mr15">
        //       <Tooltip title={`使用${item.name === "qq" ? "QQ":item.name === "wechat" ? "微信" : item.name}账号登录`}>
        //         <img src={item.name === "educoder" ? educoderLogo : item.name === "qq" ? qqlogo : item.name === "wechat" ? WeChatlogo :  item.name === "gitee" ? giteelogo : item.name === "github" ? githublogo : ""} width="46px" alt={`${item.name}登录`}/>
        //       </Tooltip>
        //     </a>
        //     )
        //   })
        //   }
        // </p>
        // <OtherLogin />
      }
    </div>
  )

}
export default Form.create({ name: 'login' })(Login);