PumpStation/web/client/src/sections/auth/containers/login.js

'use strict';
import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { ApiTable } from '$utils'
import { Request } from '@peace/utils'
import { Button, Input, Form, Row, Col, message, Tabs, Tooltip } from 'antd';
import { login, LOGIN_ERROR } from '../actions/auth';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Uploads } from '$components'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './login.less';

const FormItem = Form.Item;

let codCountDownInterval = null
const Login = props => {
   const { dispatch, user, error, isRequesting } = props
   const [username, setUserName] = useState('')
   const [password, setPassword] = useState('')
   const [phone, setPhone] = useState('')
   const [code, setCode] = useState('')
   const [inputChanged, setInputChanged] = useState(false)
   const [curTabKey, setCurTabKey] = useState(1)
   const [codSending, setCodSending] = useState(false)
   const [codCountDown, setCodeCountDown] = useState(60)
   const codCountDownRef = useRef(0)
   const [form] = Form.useForm();

   useEffect(() => {
      // 水环境跳转自动登录
      const structId = getUrlParams(window.location.search)?.structId;
      if (structId) {
         sessionStorage.setItem('structId', structId);
         dispatch(login({ username: 'SuperAdmin', password: '123456' }));
      }
   }, [])

   useEffect(() => {
      if (user && user.authorized) {
         dispatch(push('/systemManagement'));
      }
   }, [user])

   useEffect(() => {
      if (codSending) {
         setCodeCountDown(59)
         codCountDownRef.current = 59
         codCountDownInterval = setInterval(() => {
            codCountDownRef.current -= 1
            if (codCountDownRef.current == 0) {
               setCodSending(false)
               setCodeCountDown(60)
               clearInterval(codCountDownInterval)
               codCountDownInterval = null
            } else {
               setCodeCountDown(codCountDownRef.current)
            }
         }, 1000);
      } else {
         if (codCountDownInterval) {
            clearInterval(codCountDownInterval)
            codCountDownInterval = null
            setCodeCountDown(60)
         }
      }
   }, [codSending])



   return (
      <div
         id='loginContainer'
         style={{
            height: '100vh',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'aliceblue',
            backgroundImage: 'url(/assets/images/login/login-b.gif)',
            backgroundSize: 'cover',
            position: 'relative',
         }}
      >
         {/* <img src='/assets/images/logo.png' style={{ height: 42, borderRadius: 4, position: 'fixed', top: 32, left: 32 }} /> */}

         <div style={{
            width: 556, height: 554, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            borderRadius: '2px 2px 0 0', position: 'absolute', right: 150, top: 'calc(50% - 217px)'
         }}>
            <img src={'/assets/images/login/word.png'} style={{ width: '100%', height: 80, dispatch: 'inline-block' }} />

            <div className='login' style={{ width: 556, height: 434, background: 'url(/assets/images/login/register-bg.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', }}>
               <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '22px 10px' }}>
                  <img src={'/assets/images/login/icon_z.png'} style={{ width: 26, height: 14 }} />
                  <div style={{ color: '#C5E0FF', fontSize: 24 }}>系统登录</div>
                  <img src={'/assets/images/login/icon_y.png'} style={{ width: 26, height: 14 }} />

               </div>
               <div style={{
                  // width: 410,
                  // height: 322,

               }}>

                  <Form
                     form={form}
                     onFinish={r => {
                        form.validateFields().then(r => {
                           dispatch(login({ username: r.username, password: r.password }));
                        })
                           .catch(err => {
                              dispatch({
                                 type: LOGIN_ERROR,
                                 payload: { error: '请输入账号名和密码' }
                              })
                           })

                     }}
                     style={{ width: '100%', height: 400, display: 'flex', alignItems: 'center', flexDirection: 'column' }}
                  >
                     <Form.Item label='' name="username" rules={[{ required: true, message: '请输入账户' },]} style={{ marginTop: 50 }}>
                        <Input prefix={<>
                           <UserOutlined style={{ marginLeft: 20, color: 'white', fontSize: 18 }} />
                           <span style={{ color: 'white' }}>账户</span>
                           <span style={{ color: 'white', marginRight: 10, height: 18, borderRight: '1px solid white' }}></span>
                        </>} style={{ width: 380, margin: '6px 0px 6px 0' }} placeholder="" />
                     </Form.Item>

                     <Form.Item label='' name="password" rules={[{ required: true, message: '请输入密码' },]}>
                        <Input.Password prefix={<>
                           <LockOutlined style={{ marginLeft: 20, color: 'white', fontSize: 18 }} />
                           <span style={{ color: 'white' }}>密码</span>
                           <span style={{ color: 'white', marginRight: 10, height: 18, borderRight: '1px solid white' }}></span>
                        </>} style={{ width: 380, margin: '6px 0' }} placeholder="" />
                     </Form.Item>


                     <Form.Item
                     >
                        <Button type="primary" htmlType="submit" style={{ width: 300, height: 50, marginRight: 6, fontSize: 18, border: 0, background: 'url(/assets/images/login/button-b.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', }}>
                           立即登录
                        </Button>
                     </Form.Item>
                  </Form>




               </div>

            </div>



         </div>
      </div >
   );
}

function mapStateToProps(state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      error: auth.error,
      isRequesting: auth.isRequesting,
   }
}

export default connect(mapStateToProps)(Login);

function getUrlParams(url) {
   if (!url) return;
   let arr = url.split('?');
   let params = arr[1].split('&');
   let obj = {};
   for (let i = 0; i < params.length; i++) {
      let param = params[i].split('=');
      obj[param[0]] = param[1];
   }
   return obj;
}