diff --git a/src/api/user/index.ts b/src/api/user/index.ts index 1afb191..826d980 100644 --- a/src/api/user/index.ts +++ b/src/api/user/index.ts @@ -24,12 +24,16 @@ export const oauthLogin = (type: string) => { /** * 获取短信验证码 - * @param phone + * @param data */ -export const getSms = (phone: string) => { +export const getSms = (data: any) => { return web.request({ - url: "/sms/sendByTemplate/" + phone, + url: "/sms/sendByTemplate/", method: "post", + headers: { + "Content-Type": "application/json;charset=UTF-8", + }, + data: data, }); }; @@ -44,3 +48,16 @@ export const register = (data: API.PhoneRegisterRequest) => { data: data, }); }; + +/** + * 注册 + * @param data + */ +export const login = (data: API.LoginRequest) => { + return web.request({ + url: "/auth/user/login", + method: "post", + data: data, + }); +}; + diff --git a/src/types/user/user.d.ts b/src/types/user/user.d.ts index 83fe1ff..8946b50 100644 --- a/src/types/user/user.d.ts +++ b/src/types/user/user.d.ts @@ -9,6 +9,12 @@ declare namespace API { confirmPassword?: string; activeCode?: string; }; + type LoginRequest = { + userName?: string; + password?: string; + token: string; + deg: number; + }; // type ApiResponse = { // success?: boolean; // code?: number; diff --git a/src/utils/axios/request.ts b/src/utils/axios/request.ts index 7596353..fe7a50a 100644 --- a/src/utils/axios/request.ts +++ b/src/utils/axios/request.ts @@ -14,7 +14,7 @@ class Request { (config) => { const token: string | null = getStorageFromKey("token"); if (token) { - config.headers.Authorization = `schisandra ${token}`; + config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${token}`; } // if (config.method == "post") { diff --git a/src/views/User/Login/index.tsx b/src/views/User/Login/index.tsx index 8e90143..eba27cb 100644 --- a/src/views/User/Login/index.tsx +++ b/src/views/User/Login/index.tsx @@ -36,8 +36,7 @@ import { observer } from "mobx-react"; import FooterComponent from "@/components/Footer"; import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha"; import { get, load } from "@/api/captcha/index.ts"; -import { getSms, oauthLogin } from "@/api/user"; -import { VerfiyCaptcha } from "@/api/captcha/api.ts"; +import { getSms, login, oauthLogin } from "@/api/user"; import { TinyColor } from "@ctrl/tinycolor"; type LoginType = "account" | "phone"; @@ -51,7 +50,8 @@ const iconStyles: CSSProperties = { export default observer(() => { const [form] = Form.useForm(); - const captcha = useRef(null); + const smsCaptcha = useRef(null); + const loginCaptcha = useRef(null); const captchaRef = useRef(); const colors = ["#40e495", "#30dd8a", "#2bb673"]; const getHoverColors = (colors: string[]) => @@ -59,12 +59,53 @@ export default observer(() => { const getActiveColors = (colors: string[]) => colors.map((color) => new TinyColor(color).darken(5).toString()); - async function verify(token: string, deg: number): Promise { + async function smsVerify(token: string, deg: number): Promise { + const phone = form.getFieldValue("mobile"); const data: any = { token: token, deg: deg, + phone: phone, }; - const res = await VerfiyCaptcha(data); + 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 loginVerify(token: string, deg: number): Promise { + const userName = form.getFieldValue("username"); + const password = form.getFieldValue("password"); + const data: any = { + token: token, + deg: deg, + userName: userName, + password: password, + }; + const res: any = await login(data); + if (res && res.success && res.code === 0) { + message.open({ + content: "登录成功！", + type: "success", + duration: 5, + }); + } else if (res.code === 0 && !res.success) { + message.open({ + content: "登录失败！用户名或密码错误！", + type: "error", + duration: 5, + }); + } return res; } @@ -96,322 +137,317 @@ export default observer(() => { const [loginType, setLoginType] = useState("account"); - async function openCaptcha() { - captcha.current!.open(); + async function openSmsCaptcha() { + smsCaptcha.current!.open(); + } + + async function openLoginCaptcha() { + loginCaptcha.current!.open(); } - const onSubmit = async (formData: object) => { - openCaptcha().then(() => { - console.log("formData", formData); - }); - }; return ( - -
-
- - - - - 微信扫码登录 - - 微信扫码关注公众号)} - description={ -
- - 微信扫码 - - 关注公众号 - - -
- 登录更快更安全 -
- } - // type="success" - showIcon={true} - className={styles.alert} - icon={} - /> - +
+ + +
+ + + + + 微信扫码登录 + + 微信扫码关注公众号)} + description={ +
+ + 微信扫码 + 关注公众号 + +
+ 登录更快更安全 +
+ } + // type="success" + showIcon={true} + className={styles.alert} + icon={} + /> -
- - - logo - 五味子云存储 - -
随时随地分享你的美好瞬间
- - - - setLoginType(activeKey as LoginType) - }> - - {loginType === "account" && ( - <> - , - }} - placeholder={"请输入邮箱或电话号码"} - rules={[ - { - required: true, - message: "请输入用户名!", - }, - ]} - /> - , - }} - placeholder={"请输入密码"} - rules={[ - { - required: true, - message: "请输入密码！", - }, - { - pattern: - /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/, - message: - "密码长度需在6~18位字符，且必须包含字母和数字！", - }, - ]} - /> - - )} - {loginType === "phone" && ( - <> - , - autoComplete: "off", - }} - name="mobile" - placeholder={"请输入手机号"} - rules={[ - { - required: true, - message: "请输入手机号！", - }, - { - pattern: /^1\d{10}$/, - message: "手机号格式错误！", - }, - ]} - /> - , - }} - captchaProps={{ - size: "large", - }} - placeholder={"请输入验证码"} - captchaTextRender={(timing: boolean) => { - if (timing) { - // return `${count} ${"获取验证码"}`; - return `${"获取验证码"}`; - } - return "获取验证码"; - }} - name="captcha" - phoneName={"mobile"} - rules={[ - { - required: true, - message: "请输入验证码！", - }, - ]} - fieldRef={captchaRef} - countDown={300} - onGetCaptcha={async (mobile: string) => { - const res: any = getSms(mobile); - if (res && res.success) { - message.success(res.data, 3); - } else { - message.warning(res.data, 3); - } - }} - /> - - )} -
- - 自动登录 - - - 忘记密码 - -
- - - - -
- - - 其他登录方式 - - - -
- - - -
-
- - - -
-
- - { - oAuthLogin("github").then(); - }} - style={{ ...iconStyles, color: "#333333" }} - /> - -
-
- - { - oAuthLogin("gitee").then(); - }} - style={{ ...iconStyles, color: "#FF6A10" }} - /> - -
- -
- - - 注册 -
+
+ + + logo + 五味子云存储 + +
随时随地分享你的美好瞬间
+ + + + setLoginType(activeKey as LoginType) + }> + + {loginType === "account" && ( + <> + , + }} + placeholder={"请输入邮箱或电话号码"} + rules={[ + { + required: true, + message: "请输入用户名!", + }, + ]} + /> + , + }} + placeholder={"请输入密码"} + rules={[ + { + required: true, + message: "请输入密码！", + }, + { + pattern: + /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/, + message: + "密码长度需在6~18位字符，且必须包含字母和数字！", + }, + ]} + /> + + )} + {loginType === "phone" && ( + <> + , + autoComplete: "off", + }} + name="mobile" + placeholder={"请输入手机号"} + rules={[ + { + required: true, + message: "请输入手机号！", + }, + { + pattern: /^1\d{10}$/, + message: "手机号格式错误！", + }, + ]} + /> + , + }} + captchaProps={{ + size: "large", + }} + placeholder={"请输入验证码"} + captchaTextRender={(timing: boolean) => { + if (timing) { + // return `${count} ${"获取验证码"}`; + return `${"获取验证码"}`; + } + return "获取验证码"; + }} + name="captcha" + phoneName={"mobile"} + rules={[ + { + required: true, + message: "请输入验证码！", + }, + ]} + fieldRef={captchaRef} + countDown={300} + onGetCaptcha={async () => { + await openSmsCaptcha(); + }} + /> + + )} +
+ + 自动登录 + + + 忘记密码 + +
+ + + + +
+ + + 其他登录方式 + + + +
+ + + +
+
+ + + +
+
+ + { + oAuthLogin("github").then(); + }} + style={{ ...iconStyles, color: "#333333" }} + /> + +
+
+ + { + oAuthLogin("gitee").then(); + }} + style={{ ...iconStyles, color: "#FF6A10" }} + /> + +
+ +
+ + + 注册 +
-
- +
- + +
); }); diff --git a/src/views/User/Register/index.tsx b/src/views/User/Register/index.tsx index 86cf8ce..b0843bc 100644 --- a/src/views/User/Register/index.tsx +++ b/src/views/User/Register/index.tsx @@ -18,11 +18,15 @@ import { observer } from "mobx-react"; import FooterComponent from "@/components/Footer"; import { getSms, register } from "@/api/user"; import { TinyColor } from "@ctrl/tinycolor"; +import { get, load } from "@/api/captcha"; +import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha"; // import useStore from '@/utils/store/useStore.tsx' type LoginType = "phone"; export default observer(() => { const [form] = Form.useForm(); + const registerCaptcha = useRef(null); + const smsCaptcha = useRef(null); const captchaRef = useRef(); const colors = ["#6253E1", "#04BEFE"]; const getHoverColors = (colors: string[]) => @@ -43,16 +47,72 @@ export default observer(() => { ]; const [loginType, setLoginType] = useState("phone"); - const onSubmit = async (formData: object) => { - const res: any = await register(formData); - if (res && res.success) { - message.success(res.data); + 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.error(res.data); + message.open({ + content: res.data, + type: "warning", + duration: 5, + }); } - }; + return res; + } + + async function openRegisterCaptcha() { + registerCaptcha.current!.open(); + } + + async function openSmsCaptcha() { + smsCaptcha.current!.open(); + } + + async function registerVerify(token: string, deg: number): Promise { + const userName = form.getFieldValue("username"); + const password = form.getFieldValue("password"); + const phone = form.getFieldValue("phone"); + const activeCode = form.getFieldValue("activeCode"); + const data: any = { + token: token, + deg: deg, + userName: userName, + password: password, + phone: phone, + activeCode: activeCode, + }; + const res: any = await register(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; + } + return (
+ +
@@ -119,7 +179,7 @@ export default observer(() => { prefix: , autoComplete: "off", }} - name="userName" + name="username" placeholder="请输入用户名" rules={[ { @@ -179,13 +239,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(); }} /> @@ -261,8 +316,8 @@ export default observer(() => { ]; await form .validateFields(validateFields) - .then(async (values) => { - await onSubmit(values as API.PhoneRegisterRequest); + .then(async () => { + await openRegisterCaptcha(); }) .catch((error) => { console.error(error);