OperationalService/web/client/src/sections/auth/containers/login.jsx

'use strict';
import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Form, Button, Toast } from '@douyinfe/semi-ui';
import { login, LOGIN_SUCCESS } from '../actions/auth';
import { IconLock, IconUser } from '@douyinfe/semi-icons';
import '../style.less'

const Login = props => {
   const { dispatch, user, error, actions, apiRoot, isRequesting } = props
   const form = useRef();

   useEffect(() => {
      if (error) {
         Toast.error(error);
         form.current.setValue('password', '')
      }
   }, [error])

   useEffect(() => {
      if (user && user.authorized) {
         dispatch(push('/console'));
         localStorage.setItem('poms_open_sider', JSON.stringify([]))
         localStorage.removeItem('poms_selected_sider')
      }
   }, [user])

   return (
      <div style={{
         // height: '100vh',
         //  backgroundImage: "url('/assets/images/background/loginBackground.gif')",
         // backgroundSize: 'cover',
         // backgroundRepeat: 'no-repeat',
         // position: 'relative',
      }}>
         <video
            autoPlay loop muted
            style={{
               width: "100%", objectFit: "cover", objectPosition: 'left top', height: 'calc(100vh - 4px)'
            }}
            src="/assets/video/login_bg.mp4"
            type="video/mp4"
         />
         {/* <img src='/assets/images/background/loginBackground.gif' style={{
                width: "100%",
                height: 'calc(100vh - 4px)',
                objectFit: "cover",
                objectPosition: 'left top',
                position: 'absolute',
                top: 0,
                left: 0,
                zIndex: "5"
            }} /> */}
         <div style={{
            width: 600,
            height: 90,
            objectFit: "cover",
            objectPosition: 'left top',
            position: 'absolute',
            top: 139,
            left: 41,
            zIndex: 5,
            fontSize: 14,
            color: ' #005ABD',
            display:'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
         }}>
            <div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>POMS运维中台管理系统—</span> 为企业数字化转型提供安全、稳定、高效的数字化运维底座</div>
            <div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>高效—</span> 为运维智能化升级提供领先的创新技术和平台管理</div>
            <div><span style={{ fontFamily: 'YouSheBiaoTiHei', }}>智能—</span>助力数字化转型和智能化升级一步到位</div>
         </div>
         <div style={{
            width: 512,
            height: '100%',
            padding: '45px 60px',
            background: 'rgb(255 255 255 / 50%)',
            backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
            position: 'absolute',
            top: 0,
            right: 0,
            zIndex: "6",
            textAlign: 'center',
         }}>
            <div style={{
               width: 388,
               marginTop: "40%"
            }}>
               <img src="/assets/images/background/user_login.png" alt="" style={{ width: 324, height: 24, marginBottom: 71 }} />
               <Form
                  onSubmit={values => {
                     dispatch(login(values.username, values.password)).then(res => {
                        const data = res.payload.user
                        dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token, pomsUserId: data.pomsUserInfo.id }))
                     })
                  }}
                  getFormApi={formApi => form.current = formApi}
               >
                  <Form.Input
                     className='inputbgc'
                     field='username'
                     noLabel={true}
                     label='用户名'
                     placeholder='请输入账号'
                     prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
                     style={{ background: '#FFFFFF', height: 46, marginBottom: 33, border: '1px solid #E0EFFF', borderRadius: '4px' }}
                  />
                  <Form.Input
                     field='password'
                     noLabel={true}
                     mode="password"
                     autoComplete=""
                     placeholder='请输入密码'
                     label='密码'
                     prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
                     style={{ background: '#FFFFFF', height: 46, border: '1px solid #E0EFFF', borderRadius: '4px' }}
                  />
                  <img src="/assets/images/background/xiangqi.png" style={{ width: 112, height: 14, margin: "4px 0 0 278px" }} />
                  <Button htmlType='submit' block theme="solid" loading={isRequesting} style={{ marginTop: 56, height: 46, backgroundColor: '#005ABD', borderRadius: '3px' }}>立即登录</Button>

               </Form>

            </div>

         </div>
      </div>
   );
}

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

export default connect(mapStateToProps)(Login);