Inspection/web-screen/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 SHA1 from 'crypto-js/sha1';
import Hex from 'crypto-js/enc-hex';
import { ApiTable } from '$utils'
import { Request } from '@peace/utils'
import { Button, Input, Form, Row, Col, message, Tabs, Tooltip } from 'antd';
import { login, SCREEN_LOGIN_ERROR } from '../actions/auth';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Uploads } from '$components'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Func } from '$utils';
import qs from "qs";
import '../style.less';

const FormItem = Form.Item;

let codCountDownInterval = null
const Login = props => {
   const { dispatch, user, error, isRequesting, location } = 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();

   const tourl = () => {
      return '/bigScreen'
      if (Func.isAuthorized("STRU_INFO_CONFIG")) {
         return '/projectRegime/information'
      }
      if (Func.isAuthorized("QR_CODE_CONFIG")) {
         return '/projectRegime/qrCode'
      }
      if (Func.isAuthorized("USER_CONFIG")) {
         return '/organization/user'
      }
      if (Func.isAuthorized("AUTH_CONFIG")) {
         return '/organization/authority'
      }
      if (Func.isAuthorized("PATROL_PLAN_CONFIG")) {
         return '/patrolManage/patrolPlan'
      }
      if (Func.isAuthorized("PATROL_RECORD_VIEW")) {
         return '/patrolManage/patrolRecord'
      }
      if (Func.isAuthorized("CHECKREPORT")) {
         return '/patrolManage/patrolReport'
      }
      if (Func.isAuthorized("CHECKITEMSET")) {
         return '/patrolManage/checkItems'
      }
      if (Func.isAuthorized("CHECKMOULD")) {
         return '/patrolManage/patrolTemplate'
      }
      if (Func.isAuthorized("WENTICHULI")) {
         return '/issueHandle'
      }
      else {
         return message.warn('没有任何模块的查看权限')
      }
   }

   useEffect(() => {

   }, [])


   useEffect(() => {
      if (user && user.authorized) {
         dispatch(push(tourl()));
      }
   }, [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.png)',
            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: 434, backgroundColor: '#rgba(255,255,255,0.50)',
            borderRadius: '2px 2px 0 0', boxShadow: 'inset 0 0 8px 0 rgba(50,131,255,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'absolute', right: 150, top: 'calc(50% - 217px)'
         }}>
            <div style={{
               width: 410,
               height: 322,
               backgroundColor: ''
            }}>
               <img src={'/assets/images/login/login_a.png'} style={{ width: 124, height: 37, display: 'inline-block', marginBottom: 40 }} />

               <Form
                  form={form}
                  onFinish={r => {
                     form.validateFields().then(r => {
                        dispatch(login({ username: r.username, password: r.password, p: qs.parse(location?.search?.slice(1))?.p }))
                     })
                        .catch(err => {
                           dispatch({
                              type: SCREEN_LOGIN_ERROR,
                              payload: { error: '请输入账号名和密码' }
                           })
                        })

                  }}
               >
                  <Form.Item label='' name="username" rules={[{ required: true, message: '请输入用户名' },]}>
                     <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                  </Form.Item>

                  <Form.Item label='' name="password" rules={[{ required: true, message: '请输入密码' },]}>
                     <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="密码" />
                  </Form.Item>
                  <Tooltip title='请联系管理员'>
                     <a style={{ position: 'relative', left: 348, top: -17 }}>忘记密码</a>
                  </Tooltip>
                  <Form.Item
                  >
                     <Button type="primary" htmlType="submit" style={{ width: 410, height: 50 }}>
                        登录
                     </Button>
                  </Form.Item>
               </Form>




            </div>

         </div>
      </div >
   );
}

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

export default connect(mapStateToProps)(Login);