From 0cba84266a064717119d7dbf288ed7a0209a7d60 Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Sun, 9 Jun 2024 13:23:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=8B=E6=9C=BA=E5=8F=B7=E7=99=BB?= =?UTF-8?q?=E5=BD=95/=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/user/index.ts | 25 ++++++++- src/types/user/user.d.ts | 14 +++++ src/views/User/Forget/index.tsx | 98 +++++++++++++++++++++++++++------ src/views/User/Login/index.tsx | 63 +++++++++++++++++++-- 4 files changed, 176 insertions(+), 24 deletions(-) diff --git a/src/api/user/index.ts b/src/api/user/index.ts index 34e405c..e6bf573 100644 --- a/src/api/user/index.ts +++ b/src/api/user/index.ts @@ -50,7 +50,7 @@ export const register = (data: API.PhoneRegisterRequest) => { }; /** - * 注册 + * 登录 * @param data */ export const login = (data: API.LoginRequest) => { @@ -60,3 +60,26 @@ export const login = (data: API.LoginRequest) => { data: data, }); }; + +/** + * 手机号登录 + * @param data + */ +export const loginByPhone = (data: API.LoginByPhoneRequest) => { + return web.request({ + url: "/auth/user/loginByPhone", + method: "post", + data: data, + }); +}; +/** + * 找回密码 + * @param data + */ +export const findPassword = (data: API.findPasswordRequest) => { + return web.request({ + url: "/auth/user/findPassword", + method: "post", + data: data, + }); +}; diff --git a/src/types/user/user.d.ts b/src/types/user/user.d.ts index 8946b50..3736b20 100644 --- a/src/types/user/user.d.ts +++ b/src/types/user/user.d.ts @@ -15,6 +15,20 @@ declare namespace API { token: string; deg: number; }; + type LoginByPhoneRequest = { + phone?: string; + activeCode?: string; + token: string; + deg: number; + }; + type findPasswordRequest = { + phone?: string; + password?: string; + confirmPassword?: string; + activeCode?: string; + token: string; + deg: number; + }; // type ApiResponse = { // success?: boolean; // code?: number; diff --git a/src/views/User/Forget/index.tsx b/src/views/User/Forget/index.tsx index cc36102..ba8c329 100644 --- a/src/views/User/Forget/index.tsx +++ b/src/views/User/Forget/index.tsx @@ -11,13 +11,17 @@ import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg"; import styles from "./index.module.less"; import { observer } from "mobx-react"; import FooterComponent from "@/components/Footer"; -import { getSms, register } from "@/api/user"; +import { findPassword, getSms } from "@/api/user"; +import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha"; +import { get, load } from "@/api/captcha"; // import useStore from '@/utils/store/useStore.tsx' type LoginType = "phone"; export default observer(() => { const [form] = Form.useForm(); const captchaRef = useRef(); + const smsCaptcha = useRef(null); + const findPasswordCaptcha = useRef(null); const [loginType, setLoginType] = useState("phone"); const colors = ["#fc6076", "#ff9a44", "#ef9d43", "#e75516"]; const getHoverColors = (colors: string[]) => @@ -25,6 +29,69 @@ export default observer(() => { const getActiveColors = (colors: string[]) => colors.map((color) => new TinyColor(color).darken(5).toString()); + async function smsVerify(token: string, deg: number): Promise { + const phone = form.getFieldValue("phone"); + const data: any = { + token: token, + deg: deg, + phone: phone, + }; + const res: any = await getSms(data); + if (res && res.code === 0) { + message.open({ + content: res.data, + type: "success", + duration: 5, + }); + } else { + message.open({ + content: res.data, + type: "warning", + duration: 5, + }); + } + return res; + } + + async function findPasswordVerify(token: string, deg: number): Promise { + const mobile = form.getFieldValue("phone"); + const captcha = form.getFieldValue("activeCode"); + const password = form.getFieldValue("password"); + const confirmPassword = form.getFieldValue("confirmPassword"); + + const data: API.findPasswordRequest = { + token: token, + deg: deg, + phone: mobile, + activeCode: captcha, + password: password, + confirmPassword: confirmPassword, + }; + const res: any = await findPassword(data); + if (res && res.success && res.code === 0) { + message.open({ + content: res.data, + type: "success", + duration: 5, + }); + } else if (res.code === 0 && !res.success) { + message.open({ + content: res.data, + type: "error", + duration: 5, + }); + } + return res; + } + + async function openSmsCaptcha() { + smsCaptcha.current!.open(); + } + + async function fopenFindPasswordCaptcha() { + findPasswordCaptcha.current!.open(); + } + const items = [ { key: "phone", @@ -37,16 +104,16 @@ export default observer(() => { }, ]; - const onSubmit = async (formData: object) => { - const res: any = await register(formData); - if (res && res.success) { - message.success(res.data); - } else { - message.error(res.data); - } - }; return (
+ +
@@ -152,13 +219,8 @@ export default observer(() => { }, ]} fieldRef={captchaRef} - onGetCaptcha={async (phone: string) => { - const res: any = await getSms(phone); - if (res && res.success) { - message.success(res.data, 3); - } else { - message.warning(res.data, 3); - } + onGetCaptcha={async () => { + await openSmsCaptcha(); }} /> @@ -233,8 +295,8 @@ export default observer(() => { ]; await form .validateFields(validateFields) - .then(async (values) => { - await onSubmit(values as API.PhoneRegisterRequest); + .then(async () => { + await fopenFindPasswordCaptcha(); }) .catch((error) => { console.error(error); diff --git a/src/views/User/Login/index.tsx b/src/views/User/Login/index.tsx index dc2b50f..aaa6e06 100644 --- a/src/views/User/Login/index.tsx +++ b/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(null); const loginCaptcha = useRef(null); + const loginByPhoneCaptcha = useRef(null); const captchaRef = useRef(); const navigate = useNavigate(); const store = useStore("user"); @@ -91,7 +92,7 @@ export default observer(() => { async function loginVerify(token: string, deg: number): Promise { 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 { + 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 (
- + +
@@ -206,7 +258,7 @@ export default observer(() => { logo 五味子云存储 @@ -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) => {