284 lines
8.7 KiB
JavaScript
284 lines
8.7 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: "修改成功，请重新登录",
|
||
position: "top",
|
||
});
|
||
if(searchParams.get("is_enabled") == "0"){
|
||
router.push("/")
|
||
}else{
|
||
router.push("/login");signOut()
|
||
}
|
||
} 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}
|
||
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="fixed bottom-6 w-full text-[#FF669E] text-xs text-center"
|
||
>
|
||
跳过，稍后设置
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|