feat: 登录因验证码错误失败时,验证码输入框自动聚焦
This commit is contained in:
parent
717644ef5f
commit
5d43558c2c
|
@ -74,7 +74,7 @@ function Experiment() {
|
||||||
page: pageOption.current.page - 1,
|
page: pageOption.current.page - 1,
|
||||||
size: pageOption.current.size,
|
size: pageOption.current.size,
|
||||||
};
|
};
|
||||||
const [res, _] = await to(getExperiment(params));
|
const [res] = await to(getExperiment(params));
|
||||||
if (res && res.data && Array.isArray(res.data.content)) {
|
if (res && res.data && Array.isArray(res.data.content)) {
|
||||||
setExperimentList(
|
setExperimentList(
|
||||||
res.data.content.map((item) => {
|
res.data.content.map((item) => {
|
||||||
|
@ -88,7 +88,7 @@ function Experiment() {
|
||||||
|
|
||||||
// 获取流水线列表
|
// 获取流水线列表
|
||||||
const getWorkflowList = async () => {
|
const getWorkflowList = async () => {
|
||||||
const [res, _] = await to(getWorkflow(queryFlow));
|
const [res] = await to(getWorkflow(queryFlow));
|
||||||
if (res && res.data && res.data.content) {
|
if (res && res.data && res.data.content) {
|
||||||
setWorkflowList(res.data.content);
|
setWorkflowList(res.data.content);
|
||||||
}
|
}
|
||||||
|
@ -236,7 +236,7 @@ function Experiment() {
|
||||||
...values,
|
...values,
|
||||||
global_param,
|
global_param,
|
||||||
};
|
};
|
||||||
const [res, _] = await to(postExperiment(params));
|
const [res] = await to(postExperiment(params));
|
||||||
if (res) {
|
if (res) {
|
||||||
message.success('新建实验成功');
|
message.success('新建实验成功');
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
|
@ -244,7 +244,7 @@ function Experiment() {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const params = { ...values, global_param, id: experimentId };
|
const params = { ...values, global_param, id: experimentId };
|
||||||
const [res, _] = await to(putExperiment(params));
|
const [res] = await to(putExperiment(params));
|
||||||
if (res) {
|
if (res) {
|
||||||
message.success('编辑实验成功');
|
message.success('编辑实验成功');
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
|
|
|
@ -3,8 +3,8 @@ import { getCaptchaImg, login } from '@/services/system/auth';
|
||||||
import { loginPasswordKey, loginUserKey, rememberPasswordKey } from '@/utils/localStorage';
|
import { loginPasswordKey, loginUserKey, rememberPasswordKey } from '@/utils/localStorage';
|
||||||
import { to } from '@/utils/promise';
|
import { to } from '@/utils/promise';
|
||||||
import { history, useModel } from '@umijs/max';
|
import { history, useModel } from '@umijs/max';
|
||||||
import { Button, Checkbox, Flex, Form, Image, Input, message } from 'antd';
|
import { Button, Checkbox, Flex, Form, Image, Input, message, type InputRef } from 'antd';
|
||||||
import React, { useEffect, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { flushSync } from 'react-dom';
|
import { flushSync } from 'react-dom';
|
||||||
import styles from './login.less';
|
import styles from './login.less';
|
||||||
|
|
||||||
|
@ -17,12 +17,13 @@ const LoginInputPrefix = ({ icon }: { icon: string }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Login: React.FC = () => {
|
const Login = () => {
|
||||||
const { initialState, setInitialState } = useModel('@@initialState');
|
const { initialState, setInitialState } = useModel('@@initialState');
|
||||||
const [captchaCode, setCaptchaCode] = useState<string>('');
|
const [captchaCode, setCaptchaCode] = useState<string>('');
|
||||||
const [uuid, setUuid] = useState<string>('');
|
const [uuid, setUuid] = useState<string>('');
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const [usernameReadOnly, setUsernameReadOnly] = useState<boolean>(true);
|
const [usernameReadOnly, setUsernameReadOnly] = useState<boolean>(true);
|
||||||
|
const captchaInputRef = useRef<InputRef>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getCaptchaCode();
|
getCaptchaCode();
|
||||||
|
@ -59,11 +60,11 @@ const Login: React.FC = () => {
|
||||||
|
|
||||||
// 登录
|
// 登录
|
||||||
const handleSubmit = async (values: API.LoginParams) => {
|
const handleSubmit = async (values: API.LoginParams) => {
|
||||||
const [response] = await to(login({ ...values, uuid }));
|
const [res, error] = await to(login({ ...values, uuid }));
|
||||||
if (response && response.data) {
|
if (res && res.data) {
|
||||||
const current = new Date();
|
const current = new Date();
|
||||||
const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
|
const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
|
||||||
const { access_token } = response.data;
|
const { access_token } = res.data;
|
||||||
setSessionToken(access_token, access_token, expireTime);
|
setSessionToken(access_token, access_token, expireTime);
|
||||||
message.success('登录成功!');
|
message.success('登录成功!');
|
||||||
|
|
||||||
|
@ -80,6 +81,10 @@ const Login: React.FC = () => {
|
||||||
const urlParams = new URL(window.location.href).searchParams;
|
const urlParams = new URL(window.location.href).searchParams;
|
||||||
history.push(urlParams.get('redirect') || '/');
|
history.push(urlParams.get('redirect') || '/');
|
||||||
} else {
|
} else {
|
||||||
|
if (error?.data?.code === 500 && error?.data?.msg === '验证码错误') {
|
||||||
|
captchaInputRef.current?.focus();
|
||||||
|
}
|
||||||
|
|
||||||
clearSessionToken();
|
clearSessionToken();
|
||||||
getCaptchaCode();
|
getCaptchaCode();
|
||||||
}
|
}
|
||||||
|
@ -156,6 +161,7 @@ const Login: React.FC = () => {
|
||||||
prefix={
|
prefix={
|
||||||
<LoginInputPrefix icon={require('@/assets/img/login-captcha.png')} />
|
<LoginInputPrefix icon={require('@/assets/img/login-captcha.png')} />
|
||||||
}
|
}
|
||||||
|
ref={captchaInputRef}
|
||||||
allowClear
|
allowClear
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { setRemoteMenu } from './services/session';
|
||||||
import { gotoLoginPage } from './utils/ui';
|
import { gotoLoginPage } from './utils/ui';
|
||||||
|
|
||||||
// [antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.
|
// [antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.
|
||||||
const popupError = (error: string, skipErrorHandler?: boolean = false) => {
|
const popupError = (error: string, skipErrorHandler: boolean | undefined = false) => {
|
||||||
if (skipErrorHandler) {
|
if (skipErrorHandler) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* @param { Promise } promise
|
* @param { Promise } promise
|
||||||
* @return { Promise }
|
* @return { Promise }
|
||||||
*/
|
*/
|
||||||
export async function to<T, U = Error>(promise: Promise<T>): Promise<[T, null] | [null, U]> {
|
export async function to<T, U = any>(promise: Promise<T>): Promise<[T, null] | [null, U]> {
|
||||||
try {
|
try {
|
||||||
const data = await promise;
|
const data = await promise;
|
||||||
return [data, null];
|
return [data, null];
|
||||||
|
|
Loading…
Reference in New Issue