|
|
@@ -3,30 +3,29 @@ import { getFindPwdApi, getSendCodeApi } from "@/api/user";
|
|
|
import ButtonOwn from "@/components/ButtonOwn";
|
|
|
import DomainFooter from "@/components/DomainFooter";
|
|
|
import HeaderBack from "@/components/HeaderBack";
|
|
|
-import { Link, useRouter } from "@/i18n";
|
|
|
+import { useRouter } from "@/i18n";
|
|
|
import { useUserInfoStore } from "@/stores/useUserInfoStore";
|
|
|
-import { Toast } from "antd-mobile";
|
|
|
+import { Form, Input, Toast } from "antd-mobile";
|
|
|
+import { FormInstance } from "antd-mobile/es/components/form";
|
|
|
+import clsx from "clsx";
|
|
|
import { useTranslations } from "next-intl";
|
|
|
import { useSearchParams } from "next/navigation";
|
|
|
-import { FC, useEffect, useMemo, useState } from "react";
|
|
|
+import { FC, useEffect, useRef, useState } from "react";
|
|
|
+import { Simulate } from "react-dom/test-utils";
|
|
|
import "./page.scss";
|
|
|
+import change = Simulate.change;
|
|
|
|
|
|
interface Props {}
|
|
|
|
|
|
const ResetPhone: FC<Props> = () => {
|
|
|
const router: any = useRouter();
|
|
|
-
|
|
|
- const t = useTranslations("LoginPage");
|
|
|
+ // confirmPasswordPage
|
|
|
+ const t = useTranslations();
|
|
|
|
|
|
let searchParams = useSearchParams();
|
|
|
let user_phone = searchParams.get("userPhone");
|
|
|
let code = searchParams.get("code");
|
|
|
|
|
|
- let [fromParam, setFromParam] = useState({
|
|
|
- pwd: "",
|
|
|
- againPwd: "",
|
|
|
- });
|
|
|
-
|
|
|
let alter = searchParams.get("alter");
|
|
|
const sendCodeRequest = () => {
|
|
|
if (!user_phone) return;
|
|
|
@@ -34,7 +33,6 @@ const ResetPhone: FC<Props> = () => {
|
|
|
if (res.code == 200) {
|
|
|
return;
|
|
|
}
|
|
|
- setMsgError(res.msg);
|
|
|
});
|
|
|
};
|
|
|
useEffect(() => {
|
|
|
@@ -42,88 +40,102 @@ const ResetPhone: FC<Props> = () => {
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
}, [alter]);
|
|
|
|
|
|
- const setInputVal = (e: { target: { name: any; value: any } }) => {
|
|
|
- const { name, value } = e.target;
|
|
|
- setFromParam({
|
|
|
- ...fromParam,
|
|
|
- [name]: value,
|
|
|
- });
|
|
|
- };
|
|
|
+ const { setUserInfo } = useUserInfoStore();
|
|
|
|
|
|
- const verifyPwd = (e: any) => {
|
|
|
- let pwd = e.target.value || "";
|
|
|
- pwd.replaceAll(/[^a-zA-Z0-9_-]/g, "");
|
|
|
- setFromParam({ ...fromParam, pwd });
|
|
|
+ const findPwdRequest = ({ pwd }: { pwd: string }) => {
|
|
|
+ getFindPwdApi({ user_phone, code, pwd })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
|
|
|
+ setUserInfo("");
|
|
|
+ setTimeout(() => {
|
|
|
+ router.replace("/login");
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ Toast.show(error.data.msg);
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
- const activeCls = useMemo(() => {
|
|
|
- let { pwd, againPwd } = fromParam;
|
|
|
- if (pwd && againPwd && pwd.length == againPwd.length) {
|
|
|
- return true;
|
|
|
+ /**
|
|
|
+ * @description
|
|
|
+ */
|
|
|
+ const [visible, setVisible] = useState(false);
|
|
|
+ const spanClassName = clsx("iconfont", {
|
|
|
+ "icon-kejian": visible,
|
|
|
+ "icon-bukejian": !visible,
|
|
|
+ });
|
|
|
+ const formRef = useRef<FormInstance>(null);
|
|
|
+ const onFinish = (values: { pwd: string; checkPwd: string }) => {
|
|
|
+ findPwdRequest(values);
|
|
|
+ };
|
|
|
+ const onValuesChange = (changeValue: { pwd: string }) => {
|
|
|
+ if (changeValue.pwd) {
|
|
|
+ formRef.current?.setFieldValue("pwd", changeValue.pwd.replace(/[^\w\.\/]/gi, ""));
|
|
|
}
|
|
|
- return false;
|
|
|
- }, [fromParam]);
|
|
|
-
|
|
|
- const { setUserInfo } = useUserInfoStore();
|
|
|
- let [msgError, setMsgError] = useState("");
|
|
|
- const findPwdRequest = () => {
|
|
|
- let { pwd, againPwd } = fromParam;
|
|
|
- if (pwd && againPwd && pwd != againPwd) {
|
|
|
- setMsgError("两次输入的密码不相同");
|
|
|
- return true;
|
|
|
+ };
|
|
|
+ const checkValidator = (rules: any, value: string) => {
|
|
|
+ const password = formRef.current?.getFieldValue("pwd");
|
|
|
+ if (value !== password) {
|
|
|
+ return Promise.reject(new Error(t("form.checkPwdReg")));
|
|
|
}
|
|
|
- getFindPwdApi({ user_phone, code, pwd }).then((res) => {
|
|
|
- if (res.code == 200) {
|
|
|
- Toast.show({ icon: "success", content: "修改成功", maskClickable: false });
|
|
|
- setUserInfo("");
|
|
|
- setTimeout(() => {
|
|
|
- router.replace("/login");
|
|
|
- }, 1000);
|
|
|
- setMsgError(res.msg && res.msg != "ok" ? res.msg : "");
|
|
|
- }
|
|
|
- });
|
|
|
+ return Promise.resolve();
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="confirmPassword-box">
|
|
|
<HeaderBack />
|
|
|
- <div className="main">
|
|
|
+ <div className="main custom-form">
|
|
|
<div className="title">
|
|
|
- <h2>Mudar a Contrasinha</h2>
|
|
|
+ <h2>{t("confirmPwdPage.title")}</h2>
|
|
|
{/* <div>修改密码 {user_phone}</div> */}
|
|
|
</div>
|
|
|
- <div className="phoneInput">
|
|
|
- <input
|
|
|
+ <Form
|
|
|
+ style={{
|
|
|
+ "--border-bottom": "none",
|
|
|
+ "--border-top": "none",
|
|
|
+ "--border-inner": "none",
|
|
|
+ }}
|
|
|
+ onFinish={onFinish}
|
|
|
+ ref={formRef}
|
|
|
+ onValuesChange={onValuesChange}
|
|
|
+ footer={<ButtonOwn active>{t("confirmPwdPage.complete")}</ButtonOwn>}
|
|
|
+ >
|
|
|
+ <Form.Item
|
|
|
name="pwd"
|
|
|
- type="password"
|
|
|
- value={fromParam.pwd}
|
|
|
- onChange={setInputVal}
|
|
|
- onInput={verifyPwd}
|
|
|
- placeholder="Por favor, introduz uma nova senha"
|
|
|
- maxLength={12}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div className="phoneInput">
|
|
|
- <input
|
|
|
- name="againPwd"
|
|
|
- type="password"
|
|
|
- value={fromParam.againPwd}
|
|
|
- onChange={setInputVal}
|
|
|
- placeholder="Por favor, introduz a nova senha novamente"
|
|
|
- maxLength={12}
|
|
|
- />
|
|
|
- </div>
|
|
|
- {msgError && <div className="tips"> {msgError} </div>}
|
|
|
- <div className="btnContent">
|
|
|
- <ButtonOwn active={activeCls} callbackFun={findPwdRequest}>
|
|
|
- Completar
|
|
|
- </ButtonOwn>
|
|
|
- </div>
|
|
|
- <div className={"text-right"}>
|
|
|
- <Link className={"text-right text-[16px] text-[#fff]"} href={"/resetPhone"}>
|
|
|
- {t("forgetPwd")}
|
|
|
- </Link>
|
|
|
- </div>
|
|
|
+ label=""
|
|
|
+ extra={
|
|
|
+ <span
|
|
|
+ className={spanClassName}
|
|
|
+ onClick={() => setVisible(!visible)}
|
|
|
+ ></span>
|
|
|
+ }
|
|
|
+ rules={[
|
|
|
+ { required: true, message: t("form.passwordReg") },
|
|
|
+ { min: 6, max: 20, message: t("form.passwordMinReg") },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input
|
|
|
+ placeholder={t("form.newPwd")}
|
|
|
+ maxLength={20}
|
|
|
+ type={visible ? "text" : "password"}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ name="checkPwd"
|
|
|
+ label=""
|
|
|
+ rules={[
|
|
|
+ {
|
|
|
+ min: 6,
|
|
|
+ max: 20,
|
|
|
+ validator: checkValidator,
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input placeholder={t("form.checkPwd")} maxLength={20} type={"password"} />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
</div>
|
|
|
<DomainFooter />
|
|
|
</div>
|
Before