feat: 手机号登录/重置密码

src/views/User/Login/index.tsx

@@ -37,7 +37,7 @@ import useStore from "@/utils/store/useStore.tsx";
 import FooterComponent from "@/components/Footer";
 import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
 import { get, load } from "@/api/captcha/index.ts";
-import { getSms, login, oauthLogin } from "@/api/user";
+import { getSms, login, loginByPhone, oauthLogin } from "@/api/user";
 import { TinyColor } from "@ctrl/tinycolor";
 import { useNavigate } from "react-router-dom";
 import { setStorage } from "@/utils/localStorage/config.ts";
@@ -55,6 +55,7 @@ export default observer(() => {
 	const [form] = Form.useForm();
 	const smsCaptcha = useRef<CaptchaInstance>(null);
 	const loginCaptcha = useRef<CaptchaInstance>(null);
+	const loginByPhoneCaptcha = useRef<CaptchaInstance>(null);
 	const captchaRef = useRef<CaptFieldRef | null | undefined>();
 	const navigate = useNavigate();
 	const store = useStore("user");
@@ -91,7 +92,7 @@ export default observer(() => {
 	async function loginVerify(token: string, deg: number): Promise<TicketInfoType> {
 		const userName = form.getFieldValue("username");
 		const password = form.getFieldValue("password");
-		const data: any = {
+		const data: API.LoginRequest = {
 			token: token,
 			deg: deg,
 			userName: userName,
@@ -122,6 +123,40 @@ export default observer(() => {
 		return res;
 	}
 
+	async function loginByPhoneVerify(token: string, deg: number): Promise<TicketInfoType> {
+		const mobile = form.getFieldValue("mobile");
+		const captcha = form.getFieldValue("captcha");
+		const data: API.LoginByPhoneRequest = {
+			token: token,
+			deg: deg,
+			phone: mobile,
+			activeCode: captcha,
+		};
+		const res: any = await loginByPhone(data);
+		if (res && res.success && res.code === 0) {
+			store.setToken(res.data.token);
+			store.setUserId(res.data.user.id);
+			setStorage("token", res.data.token, 24 * 60 * 30);
+			if (store.getToken() !== null || store.getUserId() !== null) {
+				setTimeout(() => {
+					navigate("/main");
+				}, 3000);
+			}
+			message.open({
+				content: "登录成功！",
+				type: "success",
+				duration: 5,
+			});
+		} else if (res.code === 0 && !res.success) {
+			message.open({
+				content: "登录失败！",
+				type: "error",
+				duration: 5,
+			});
+		}
+		return res;
+	}
+
 	const items = [
 		{
 			label: (
@@ -158,10 +193,27 @@ export default observer(() => {
 		loginCaptcha.current!.open();
 	}
 
+	async function openLoginByPhoneCaptcha() {
+		loginByPhoneCaptcha.current!.open();
+	}
+
 	return (
 		<div className={styles.container}>
 			<RotateCaptcha get={get} load={load} verify={smsVerify} limit={2} ref={smsCaptcha} />
-			<RotateCaptcha get={get} load={load} verify={loginVerify} ref={loginCaptcha} />
+			<RotateCaptcha
+				get={get}
+				load={load}
+				verify={loginVerify}
+				limit={2}
+				ref={loginCaptcha}
+			/>
+			<RotateCaptcha
+				get={get}
+				load={load}
+				limit={2}
+				verify={loginByPhoneVerify}
+				ref={loginByPhoneCaptcha}
+			/>
 			<div className={styles.content}>
 				<Space className={styles.content_content}>
 					<Space className={styles.login_content}>
@@ -206,7 +258,7 @@ export default observer(() => {
 									<img
 										alt="logo"
 										src={logo}
-										style={{ width: "44px", height: "44px"}}
+										style={{ width: "44px", height: "44px" }}
 									/>
 									<span>五味子云存储</span>
 								</Space>
@@ -346,9 +398,10 @@ export default observer(() => {
 										await form
 											.validateFields(validateFields)
 											.then(async () => {
-												// await onSubmit(values);
 												if (loginType === "account") {
 													await openLoginCaptcha();
+												} else {
+													await openLoginByPhoneCaptcha();
 												}
 											})
 											.catch((error) => {