|
@@ -1,134 +1,137 @@
|
|
|
-import styles from "./index.module.scss";
|
|
|
+import styles from './index.module.scss'
|
|
|
|
|
|
-import { Input, Button } from "antd";
|
|
|
-import { UserOutlined, LockOutlined, NumberOutlined } from "@ant-design/icons";
|
|
|
-import { useCallback, useEffect, useState } from "react";
|
|
|
-import { Base64 } from "js-base64";
|
|
|
-import encodeStr from "@/utils/pass";
|
|
|
-import { setTokenInfo } from "@/utils/storage";
|
|
|
-import history from "@/utils/history";
|
|
|
-import { MessageFu } from "@/utils/message";
|
|
|
-import { API_LoginGetCode, userLoginAPI } from "@/store/action/layout";
|
|
|
-import LogoImg from "@/assets/img/logo.png";
|
|
|
+import { Input, Button } from 'antd'
|
|
|
+import { UserOutlined, LockOutlined, NumberOutlined } from '@ant-design/icons'
|
|
|
+import { useCallback, useEffect, useState } from 'react'
|
|
|
+import { Base64 } from 'js-base64'
|
|
|
+import encodeStr from '@/utils/pass'
|
|
|
+import { setTokenInfo } from '@/utils/storage'
|
|
|
+import history from '@/utils/history'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
+import { API_LoginGetCode, userLoginAPI } from '@/store/action/layout'
|
|
|
+import LogoImg from '@/assets/img/logo.png'
|
|
|
|
|
|
export default function Login() {
|
|
|
// 获取验证码
|
|
|
const LoginGetCodeFu = useCallback(async () => {
|
|
|
- const res: any = await API_LoginGetCode();
|
|
|
- const reader = new FileReader();
|
|
|
- reader.readAsDataURL(res);
|
|
|
+ const res: any = await API_LoginGetCode()
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.readAsDataURL(res)
|
|
|
reader.onload = () => {
|
|
|
- setCodeImg(reader.result);
|
|
|
- };
|
|
|
- }, []);
|
|
|
+ setCodeImg(reader.result)
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- LoginGetCodeFu();
|
|
|
- }, [LoginGetCodeFu]);
|
|
|
+ LoginGetCodeFu()
|
|
|
+ }, [LoginGetCodeFu])
|
|
|
|
|
|
// 账号密码 - 验证码
|
|
|
- const [userName, setUserName] = useState("");
|
|
|
- const [passWord, setPassWord] = useState("");
|
|
|
- const [code, setCode] = useState<any>("");
|
|
|
- const [codeImg, setCodeImg] = useState<any>("");
|
|
|
+ const [userName, setUserName] = useState('')
|
|
|
+ const [passWord, setPassWord] = useState('')
|
|
|
+ const [code, setCode] = useState<any>('')
|
|
|
+ const [codeImg, setCodeImg] = useState<any>('')
|
|
|
|
|
|
useEffect(() => {
|
|
|
//进入登录页 重置 权限信息为空
|
|
|
- }, []);
|
|
|
+ }, [])
|
|
|
|
|
|
// 键盘按下回车事件
|
|
|
const keyUpEntFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
|
- if (e.key === "Enter") loginClickFu();
|
|
|
- };
|
|
|
+ if (e.key === 'Enter') loginClickFu()
|
|
|
+ }
|
|
|
// 点击登录
|
|
|
const loginClickFu = useCallback(async () => {
|
|
|
// 非空判断
|
|
|
- if (userName === "") return MessageFu.warning("请输入账号!");
|
|
|
- else if (passWord === "") return MessageFu.warning("请输入密码!");
|
|
|
+ if (userName === '') return MessageFu.warning('请输入账号!')
|
|
|
+ else if (passWord === '') return MessageFu.warning('请输入密码!')
|
|
|
+
|
|
|
+ const regex =
|
|
|
+ /^(?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[!@#$%^&*])|(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/
|
|
|
+
|
|
|
+ const flagPass = regex.test(passWord)
|
|
|
+ if (!flagPass) {
|
|
|
+ return MessageFu.warning('密码要求由数字、字母或特殊字符中2种方式组成')
|
|
|
+ }
|
|
|
+
|
|
|
const obj = {
|
|
|
userName,
|
|
|
passWord: encodeStr(Base64.encode(passWord)),
|
|
|
- randCode: code,
|
|
|
- };
|
|
|
- const res: any = await userLoginAPI(obj);
|
|
|
+ randCode: code
|
|
|
+ }
|
|
|
+ const res: any = await userLoginAPI(obj)
|
|
|
if (res.code === 0) {
|
|
|
- MessageFu.success("登录成功");
|
|
|
+ MessageFu.success('登录成功')
|
|
|
|
|
|
// 检查密码是不是默认密码,是的话给提示
|
|
|
- if (passWord === "123456") {
|
|
|
+ if (passWord === 'Aa147852') {
|
|
|
window.setTimeout(() => {
|
|
|
- MessageFu.warning("您的密码还是默认密码,请尽快修改!");
|
|
|
- }, 1000);
|
|
|
+ MessageFu.warning('您的密码还是默认密码,请尽快修改!')
|
|
|
+ }, 1000)
|
|
|
}
|
|
|
|
|
|
// 用户信息存到本地
|
|
|
- setTokenInfo(res.data);
|
|
|
- history.push("/");
|
|
|
+ setTokenInfo(res.data)
|
|
|
+ history.push('/')
|
|
|
+ } else if (res.code === -1 && res.msg === '验证码有误') {
|
|
|
+ LoginGetCodeFu()
|
|
|
} else if (res.code === 3014) {
|
|
|
- MessageFu.warning("账号不存在或密码错误,请联系管理员!");
|
|
|
- } else if (res.code === -1 && res.msg === "验证码有误") {
|
|
|
- LoginGetCodeFu();
|
|
|
+ MessageFu.warning('账号不存在或密码错误,请联系管理员!')
|
|
|
}
|
|
|
- }, [LoginGetCodeFu, code, passWord, userName]);
|
|
|
+ }, [LoginGetCodeFu, code, passWord, userName])
|
|
|
|
|
|
return (
|
|
|
<div className={styles.Login}>
|
|
|
- <div className="mainRight">
|
|
|
-
|
|
|
+ <div className='mainRight'>
|
|
|
{/* logg */}
|
|
|
- <div className="LogoImg">
|
|
|
- <img src={LogoImg} alt="" />
|
|
|
+ <div className='LogoImg'>
|
|
|
+ <img src={LogoImg} alt='' />
|
|
|
</div>
|
|
|
|
|
|
- {/* 账号密码输入框 */}
|
|
|
- <div className="inputBox">
|
|
|
- <div className="inputBoxRow">
|
|
|
- <Input
|
|
|
- onKeyUp={(e) => keyUpEntFu(e)}
|
|
|
- value={userName}
|
|
|
- onChange={(e) => setUserName(e.target.value.trim())}
|
|
|
- prefix={<UserOutlined rev={undefined} />}
|
|
|
- placeholder="请输入账号"
|
|
|
- maxLength={15}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="inputBoxRow">
|
|
|
- <Input.Password
|
|
|
- onKeyUp={(e) => keyUpEntFu(e)}
|
|
|
- value={passWord}
|
|
|
- onChange={(e) => setPassWord(e.target.value.trim())}
|
|
|
- prefix={<LockOutlined rev={undefined} />}
|
|
|
- placeholder="请输入密码"
|
|
|
- maxLength={20}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="inputBoxRow inputBoxRow2">
|
|
|
- <Input
|
|
|
- onKeyUp={(e) => keyUpEntFu(e)}
|
|
|
- value={code}
|
|
|
- onChange={(e) => setCode(e.target.value.trim())}
|
|
|
- prefix={<NumberOutlined rev={undefined} />}
|
|
|
- placeholder="请输入验证码"
|
|
|
- maxLength={5}
|
|
|
- />
|
|
|
- {codeImg ? (
|
|
|
- <img
|
|
|
- onClick={LoginGetCodeFu}
|
|
|
- className="loginCode"
|
|
|
- src={codeImg}
|
|
|
- alt=""
|
|
|
- />
|
|
|
- ) : null}
|
|
|
- </div>
|
|
|
+ {/* 账号密码输入框 */}
|
|
|
+ <div className='inputBox'>
|
|
|
+ <div className='inputBoxRow'>
|
|
|
+ <Input
|
|
|
+ onKeyUp={e => keyUpEntFu(e)}
|
|
|
+ value={userName}
|
|
|
+ onChange={e => setUserName(e.target.value.trim())}
|
|
|
+ prefix={<UserOutlined rev={undefined} />}
|
|
|
+ placeholder='请输入账号'
|
|
|
+ maxLength={15}
|
|
|
+ />
|
|
|
</div>
|
|
|
-
|
|
|
- {/* 登录按钮 */}
|
|
|
- <div className="loginBtn">
|
|
|
- <Button type="primary" size="large" onClick={loginClickFu}>
|
|
|
- 登 录
|
|
|
- </Button>
|
|
|
+ <div className='inputBoxRow'>
|
|
|
+ <Input.Password
|
|
|
+ onKeyUp={e => keyUpEntFu(e)}
|
|
|
+ value={passWord}
|
|
|
+ onChange={e => setPassWord(e.target.value.trim())}
|
|
|
+ prefix={<LockOutlined rev={undefined} />}
|
|
|
+ placeholder='请输入密码'
|
|
|
+ maxLength={20}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className='inputBoxRow inputBoxRow2'>
|
|
|
+ <Input
|
|
|
+ onKeyUp={e => keyUpEntFu(e)}
|
|
|
+ value={code}
|
|
|
+ onChange={e => setCode(e.target.value.trim())}
|
|
|
+ prefix={<NumberOutlined rev={undefined} />}
|
|
|
+ placeholder='请输入验证码'
|
|
|
+ maxLength={5}
|
|
|
+ />
|
|
|
+ {codeImg ? (
|
|
|
+ <img onClick={LoginGetCodeFu} className='loginCode' src={codeImg} alt='' />
|
|
|
+ ) : null}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 登录按钮 */}
|
|
|
+ <div className='loginBtn'>
|
|
|
+ <Button type='primary' size='large' onClick={loginClickFu}>
|
|
|
+ 登 录
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- );
|
|
|
+ )
|
|
|
}
|