与后端部分相比，前端部分非常简单。我需要做的就是创建一个模式，并使用它发送数据两次。
为了创建模式，我从我早期项目 Chat-Nat 的 MessageModal 组件中复制了一些代码，即用于封装模式的类名。
我将添加“忘记密码？”登录页面上的按钮，并设置 onClick 处理程序以打开模态
在请求之前，我需要使用布尔状态来表示 OTP 是否已发送到用户的电子邮件。我将状态命名为 OTPSent
以下是我从该项目的现有前端重用的一些组件和挂钩：
这是模态的完整代码：
// src/components/PasswordResetModal.tsx
import React, { useState } from "react"
import AuthForm from "./AuthForm";
import FormInput from "./FormInput";
import Box from "./Box";
import { useAxios } from "../hooks/useAxios";
interface FormData {
email: string,
new_password: string,
otp: string,
}
interface Props {
isVisible: boolean,
onClose: () => void,
}
const PasswordResetModal: React.FC<Props> = ({ isVisible, onClose }) => {
const [formData, setFormData] = useState<FormData>({
email: "",
new_password: "",
otp: ""
});
const [isLoading, setLoading] = useState<boolean>(false);
const [isOTPSent, setOTPSent] = useState<boolean>(false);
const { apiReq } = useAxios();
const handleClose = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if ((e.target as HTMLElement).id === "wrapper") {
onClose();
// could have setOTPSent(false), but avoiding it in case user misclicks outside
}
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
if (!isOTPSent) { // first request for sending otp,
const response = await apiReq<unknown, FormData>("post", "/api/reset-password", formData)
if (response) {
alert("OTP has been sent to your email");
setOTPSent(true);
}
} else { // then using otp to change password
const response = await apiReq<unknown, FormData>("put", "/api/reset-password", formData)
if (response) {
alert("Password has been successfully reset\nPlease log in again");
// clear the form
setFormData({
email: "",
otp: "",
new_password: "",
})
// close modal
onClose();
}
}
setLoading(false);
};
if (!isVisible) return null;
return (
<div
id="wrapper"
className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center"
onClick={handleClose}>
<Box title="Password Reset">
<AuthForm
submitHandler={handleSubmit}
isLoading={isLoading}
buttonText={isOTPSent ? "Change Password" : "Send OTP"}>
<FormInput
id="email"
label="Your email"
type="email"
value={formData.email}
changeHandler={handleChange}
isRequired />
{isOTPSent && (<>
<FormInput
id="otp"
label="OTP"
type="text"
value={formData.otp}
changeHandler={handleChange}
isRequired />
<FormInput
id="new_password"
label="New Password"
type="password"
value={formData.new_password}
changeHandler={handleChange}
isRequired />
</>)}
</AuthForm>
</Box>
</div>
)
}
export default PasswordResetModal
这是在登录表单中处理模式的条件渲染的方式
// src/pages/auth/Login.tsx
import PasswordResetModal from "../../components/PasswordResetModal";
const Login: React.FC = () => {
const [showModal, setShowModal] = useState<boolean>(false);
return (
<Section>
<Box title="Login">
<div className="grid grid-flow-col">
{/* link to the register page here */}
<button
type="button"
onClick={() => setShowModal(true)}
className="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800">
Forgot Password?
</button>
<PasswordResetModal isVisible={showModal} onClose={() => setShowModal(false)} />
</div>
</Box>
</Section>
)
我们完成了！至少我是这么想的。
在我的开发环境中运行该应用程序时，我发现了一个错误，如果后端已经运行很长时间，则电子邮件将无法通过。
我们将在下一篇文章中修复此错误
以上是密码重置功能：前端的详细内容。更多信息请关注PHP中文网其他相关文章！
