CocoRobo_login/src/view/login.js

import React, { useState } from 'react'
import '../assets/css/login.css'
import SchoolImg from '../assets/image/school.png'
import UserImg from '../assets/image/user.png'
import PassworldImg from '../assets/image/passworld.png'
import config from '../config'
import { Alert, CircularProgress } from '@mui/joy';
import qs from 'qs';
import axios from 'axios'

// eslint-disable-next-line no-useless-escape
const regEmail = new RegExp("^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$");
// const regpass = new RegExp(/^(?=.*\d)(?=.*[A-Za-z]).{6,}$/);
function Login(props) {
    const [school, setSchool] = useState('')
    const [user, setUser] = useState('')
    const [passworld, setPassworld] = useState('')
    const [timer, setTimer] = useState(0)
    const [schoolNum, setSchoolNum] = useState('')
    const [schoolName, setSchoolName] = useState('')
    const [schoolShow, setSchoolShow] = useState(false)
    const [progressValue, setProgressValue] = useState(0)
    const [loading, setLoading] = useState(false)
    const [alertStr, setAlertStr] = useState('')
    const [alertShow, setAlertShow] = useState(false)

    const showAlert = (str) => {
        setAlertStr(str)
        setAlertShow(true)
        setTimeout(() => {
            setAlertShow(false)
        }, 1500);
    }
    // 登录
    const login = () => {
        console.log('login')
        let schoolStr = schoolNum ? ('@' + schoolNum) : '@cocorobo.cc'
        let email = ''
        let str = user.replace(/(^\s*)|(\s*$)/g, "")
        if (!regEmail.test(str)) {
            email = str + schoolStr
        } else {
            email = str
        }
        if (passworld.length < 6 || /[\u4e00-\u9fa5]/.test(passworld)) {
            //   this.geetestRegister();
            showAlert(props.lang.passwordError)
            return;
        }
        setLoading(true)
        let progressTimer = setInterval(() => {
            setProgress()
        }, 100);
        let aa = window.location.hostname.indexOf('cocorobo.cn') > -1||window.location.hostname.indexOf('localhost') > -1
        let params = {
            loginUsername: email.trim(),
            // loginPassword: passworld.trim(),
            loginPassword: aa ? window.btoa(passworld.trim()) : passworld.trim(),
            geetest_challenge: "",
            geetest_validate: "",
            geetest_seccode: ""
        }
        axios.defaults.withCredentials = true;
        axios.post(`${config.api}api/user`, qs.stringify(params)).then(res => {
            clearInterval(progressTimer)
            if (res.data.length > 0) {
                setProgressValue(100)
                showAlert(props.lang.loginSuccess)
                setAlertShow(true)
                setTimeout(() => {
                    setLoading(false)
                    setProgressValue(0)
                    setAlertShow(false)
                    postMessageToParent('loginVerify', 'logged', res.data[0][0])
                }, 1000)
            } else {
                setLoading(false)
                setProgressValue(0)
                showAlert(res)
                setAlertShow(true)
                setTimeout(() => {
                    setAlertShow(false)
                }, 1500);
            }
        }).catch(err => {
            setProgressValue(0)
            clearInterval(progressTimer)
            setLoading(false)
            showAlert(props.lang.loginError)
            console.log(err)
        })
        
    }
    const postMessageToParent = (id, status, data) => {
        //TODO: replace origin
        let result = {
            id,
            status,
            data
        }
        window.parent.postMessage(result, '*')
    }
    const schoolChange = (e) => {
        let value = e.target.value
        if (value) {
            clearTimeout(timer)
            setTimer(setTimeout(() => {
                getSchool(value)
            }, 500))
        } else {
            setSchoolShow(false)
        }
        setSchool(e.target.value)
    }

    const getSchool = e => {
        // 获取学校信息
        axios.post(`${config.edu}admin/selectorganize`, qs.stringify({ mode: e })).then(res => {
            console.log(res)
            if (res.data.length > 0) {
                setSchoolNum(res.data[0][0].mail)
                setSchoolName(res.data[0][0].name)
                setSchoolShow(true)
            } else {
                setSchoolName(props.lang.notSchool)
                setSchoolNum("")
                setSchoolShow(true)
            }
        }).catch(err => {
            setSchoolName(props.lang.notSchool)
            setSchoolNum("")
            setSchoolShow(true)
        })
    }
    const userChange = (e) => {
        setUser(e.target.value)
    }
    const passworldChange = (e) => {
        setPassworld(e.target.value)
    }
    const setProgress = () => {
        let num = progressValue + 10
        if (num > 80) {
            num = 85
        }
        setProgressValue(num)
    }
    const enter = (e) => {
        if (e.keyCode === 13) {
            login()
        }
    }
    return (
        <div className="login" onKeyDown={enter}>
            {(alertShow || props.alertShow) && <div className='login-Progress'>
                <Alert color="danger">{alertStr || props.alertStr}</Alert>
            </div>}
            {loading && <div className='login-Progress'>
                <CircularProgress size="lg" determinate value={progressValue}></CircularProgress>
            </div>}
            <div className='login-input'>
                <img src={SchoolImg} alt="school" />
                <input onChange={schoolChange} type="text" onBlur={schoolChange} placeholder={props.lang.schoolName} value={school} />
                {schoolShow && <p style={{ marginTop: 5, textAlign: 'left' }}>{schoolName}</p>}
            </div>
            <div className='login-input'>
                <img src={UserImg} alt="user" />
                <input type="text" onChange={userChange} placeholder={props.lang.username} value={user} />
            </div>
            <div className='login-input'>
                <img src={PassworldImg} alt="passworld" />
                <input type="Password" onChange={passworldChange} placeholder={props.lang.password} value={passworld} />
            </div>
            <div className='login-input'>
                <button onClick={login}>{props.lang.login}</button>
            </div>
        </div>
    )
}


export default Login;