前端

与后端部分相比，前端部分非常简单。我需要做的就是创建一个模式，并使用它发送数据两次。

• 首先发送电子邮件将otp发送至
• 然后发送otp和新密码进行更改

为了创建模式，我从我早期项目 chat-nat 的 messagemodal 组件中复制了一些代码，即用于封装模式的类名。

规划

我会添加“忘记密码？”登录页面上的按钮，并设置 onclick 处理程序以打开模态

在请求之前，我需要使用布尔状态来表示 otp 是否已发送到用户的电子邮件。我将状态命名为 otpsent

立即学习“前端免费学习笔记（深入）”；

• 如果 !isotpsent -> 只是询问电子邮件地址，发送 api 请求，则如果成功 setotpsent(true)
• 如果 isotpsent -> 现在还要求输入 otp 和新密码，那么如果成功，则关闭模式

以下是我从该项目的现有前端重用的一些组件和挂钩：

• box -> 它将我的登录和注册页面整齐地包装到一张卡片中，以页面为中心，在这里重用，标题为“密码重置”
• authform -> 只是一个表单，但我对其进行编码以在我们等待服务器响应时禁用提交按钮并将按钮文本设置为“正在加载...”
• forminput -> 带有自己标签的输入字段，带有值设置器和 onchange 处理程序，可选带有 isrequired 布尔值
• 使用axios -> 自定义挂钩来处理来自需要令牌刷新的服务器的响应。 apireq 函数用于正常请求发送，一些自定义错误处理用于显示alert() 和刷新令牌，refreshreq 函数用于刷新身份验证令牌并再次尝试初始请求。

这是模态的完整代码：

// 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 }) =&gt; {
    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>) =&gt; {
        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>) =&gt; {
        const { name, value } = e.target;
        setformdata({
            ...formdata,
            [name]: value,
        });
    };

    const handlesubmit = async (e: react.formevent<htmlformelement>) =&gt; {
        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 resetnplease 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" password : otp><forminput id="email" label="your email" type="email" value="{formdata.email}" changehandler="{handlechange}" isrequired></forminput>

                    {isotpsent &amp;&amp; (
                        <forminput id="otp" label="otp" type="text" value="{formdata.otp}" changehandler="{handlechange}" isrequired></forminput><forminput id="new_password" label="new password" type="password" value="{formdata.new_password}" changehandler="{handlechange}" isrequired></forminput>&gt;)}
                </authform></box>
</div>
    )
}

export default passwordresetmodal
</unknown></unknown></htmlformelement></htmlinputelement></htmldivelement></boolean></boolean></formdata></props>

这是在登录表单中处理模式的条件渲染的方式

// 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"&gt;
                        Forgot Password?
                    </button>

                    <passwordresetmodal isvisible="{showModal}" onclose="{()"> setShowModal(false)} /&gt;
                </passwordresetmodal>
</div>
            </box></section>
    )
</boolean>

---

我们完成了！至少我是这么想的。

在我的开发环境中运行该应用程序时，我发现了一个错误，如果后端已经运行很长时间，则电子邮件将无法通过。

我们将在下一篇文章中修复此错误

以上就是密码重置功能：前端的详细内容，更多请关注php中文网其它相关文章！