294 lines
8.8 KiB
JavaScript
294 lines
8.8 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Button, Input, Divider, Toast } from "antd-mobile";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { get } from "@/utils/storeInfo";
|
|
import { handleVerification } from "@/api/public";
|
|
import { JSEncrypt } from "jsencrypt";
|
|
import { cryptoPassword } from "@/utils/crypto";
|
|
import requireAPI from "@/utils/requireAPI";
|
|
import { signOut } from "@/utils/auth";
|
|
export default function EditPassword() {
|
|
const [regionCode, setRegionCode] = useState("86");
|
|
const [mobilePhone, setMobilePhone] = useState("");
|
|
const [veriCode, setVeriCode] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [isCounting, setIsCounting] = useState(false);
|
|
const [seconds, setSeconds] = useState(60);
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
// useEffect(() => {
|
|
// const mobile_phone = get("mobile_phone");
|
|
// console.log("mobile_phone",mobile_phone)
|
|
// setMobilePhone(mobile_phone);
|
|
// }, []);
|
|
//获取之前缓存的用户的手机号
|
|
useEffect(() => {
|
|
const mobile_phone = get("mobile_phone");
|
|
const region_code = get("region_code");
|
|
if (mobile_phone && region_code) {
|
|
setMobilePhone(mobile_phone);
|
|
// setRegionCode(region_code);
|
|
}
|
|
}, []);
|
|
useEffect(() => {
|
|
let interval;
|
|
if (isCounting && seconds > 0) {
|
|
interval = setInterval(() => {
|
|
setSeconds(seconds - 1);
|
|
}, 1000);
|
|
} else {
|
|
setIsCounting(false);
|
|
setSeconds(60);
|
|
clearInterval(interval);
|
|
}
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, [isCounting, seconds]);
|
|
const getVerification = async () => {
|
|
//开始倒计时
|
|
setIsCounting(true);
|
|
handleVerification(mobilePhone, regionCode);
|
|
};
|
|
//点击修改密码
|
|
const handleUpdatePassword = async () => {
|
|
//验证数据格式
|
|
if (!mobilePhone.match(/^1[3456789]\d{9}$/)) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "手机号码格式错误",
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
if (!veriCode && searchParams.get("is_enabled") != "0") {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "请输入验证码",
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
if (!confirmPassword) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "请再次输入您的密码",
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
if (newPassword != confirmPassword) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "两次输入密码不一致",
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
if (newPassword.length < 8) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "新密码不得小于8位",
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
if (newPassword.length > 15) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "新密码不得大于15位",
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
//对手机号进行RSA加密
|
|
const encrypt = new JSEncrypt();
|
|
encrypt.setPublicKey(process.env.NEXT_PUBLIC_RSA_KEY);
|
|
const mobile_phone = encrypt.encrypt(mobilePhone);
|
|
//MD5加密新旧密码
|
|
const encryptedNewPassword = cryptoPassword(newPassword);
|
|
//发送修改密码请求
|
|
const body = {
|
|
mobile_phone: mobile_phone,
|
|
region_code: regionCode,
|
|
new_password: encryptedNewPassword,
|
|
};
|
|
if (searchParams.get("is_enabled") != "0") {
|
|
body.veri_code = veriCode;
|
|
}
|
|
try {
|
|
const data = await requireAPI(
|
|
"POST",
|
|
`/api/login/${
|
|
searchParams.get("is_enabled") == "0"
|
|
? "set_password"
|
|
: "reset_password"
|
|
}`,
|
|
{
|
|
body,
|
|
}
|
|
);
|
|
if (data.ret === -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: data.msg,
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
Toast.show({
|
|
icon: "success",
|
|
content:
|
|
searchParams.get("is_enabled") == "0"
|
|
? "密码设置成功"
|
|
: "密码修改成功",
|
|
position: "top",
|
|
});
|
|
if (searchParams.get("is_enabled") == "0") {
|
|
router.push("/");
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="p-4 fixed top-0 z-10 w-full">
|
|
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
|
|
<FontAwesomeIcon
|
|
icon={faAngleLeft}
|
|
style={{ maxWidth: "12px" }}
|
|
size="xl"
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-base text-center leading-9"></p>
|
|
</div>
|
|
{/* 内容 */}
|
|
<div className="pt-32 px-4">
|
|
<p className="text-3xl text-white font-medium">
|
|
{/* {console.log(mobilePhone, "cccc")} */}
|
|
{searchParams.get("is_enabled") == "0"
|
|
? "设置密码"
|
|
: mobilePhone
|
|
? "修改密码"
|
|
: "重置密码"}
|
|
</p>
|
|
<p className="text-base text-white mb-10">请牢记密码</p>
|
|
<div className="border-2 border-[#2c2b2f] rounded-2xl p-4">
|
|
<div className="flex flex-row flex-nowrap items-center mb-4">
|
|
<p className="text-base text-white mr-4">+{regionCode}</p>
|
|
<Input
|
|
placeholder="请输入手机号"
|
|
disabled={!searchParams.get("forgetPassword")}
|
|
type="number"
|
|
maxLength={11}
|
|
onChange={(value) => {
|
|
// console.log("value", value);
|
|
setMobilePhone(value);
|
|
}}
|
|
value={mobilePhone}
|
|
style={{
|
|
"--font-size": "16px",
|
|
"--placeholder-color": "#FFFFFF80",
|
|
}}
|
|
/>
|
|
</div>
|
|
{searchParams.get("is_enabled") == "0" ? null : (
|
|
<>
|
|
<Divider />
|
|
<div className="flex flex-row flex-nowrap items-center my-4">
|
|
<p className="text-base text-white mr-4 whitespace-nowrap">
|
|
验证码
|
|
</p>
|
|
<Input
|
|
placeholder="请输入验证码"
|
|
onChange={(value) => setVeriCode(value)}
|
|
value={veriCode}
|
|
type="number"
|
|
style={{
|
|
"--placeholder-color": "#FFFFFF80",
|
|
"--font-size": "16px",
|
|
}}
|
|
/>
|
|
<Button
|
|
shape="rounded"
|
|
size="mini"
|
|
disabled={isCounting}
|
|
onClick={getVerification}
|
|
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
|
className="whitespace-nowrap"
|
|
>
|
|
{isCounting ? `(${seconds})重新发送` : "获取验证码"}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<Divider />
|
|
<div className="flex flex-row flex-nowrap items-center my-4">
|
|
<p className="text-base text-white mr-4 whitespace-nowrap">
|
|
新密码
|
|
</p>
|
|
<Input
|
|
placeholder="请输入8-15位新密码"
|
|
onChange={(value) => setNewPassword(value)}
|
|
value={newPassword}
|
|
type="password"
|
|
autoComplete="off"
|
|
style={{
|
|
"--placeholder-color": "#FFFFFF80",
|
|
"--font-size": "16px",
|
|
}}
|
|
/>
|
|
</div>
|
|
<Divider />
|
|
<div className="flex flex-row flex-nowrap items-center mt-4">
|
|
<p className="text-base text-white mr-4 whitespace-nowrap">
|
|
确认密码
|
|
</p>
|
|
<Input
|
|
placeholder="请再次输入新密码"
|
|
onChange={(value) => setConfirmPassword(value)}
|
|
value={confirmPassword}
|
|
type="password"
|
|
autoComplete="off"
|
|
style={{
|
|
"--placeholder-color": "#FFFFFF80",
|
|
"--font-size": "16px",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mt-16">
|
|
<Button
|
|
shape="rounded"
|
|
size="middle"
|
|
block
|
|
onClick={handleUpdatePassword}
|
|
style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
|
|
>
|
|
确认修改
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{searchParams.get("is_enabled") == "0" && (
|
|
<div
|
|
onClick={() => router.push(`/`)}
|
|
className="mt-4 w-full text-[#FFFFFF80] text-xs text-center"
|
|
>
|
|
跳过
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|