前端

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

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

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

规划

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

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

• 如果 !isOTPSent -> 只需询问电子邮件地址，发送 api 请求，然后如果成功 setOTPSent(true)
• 如果 isOTPSent -> 现在还要求输入 OTP 和新密码，如果成功，则关闭模式

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

• 盒子 -> 它整齐地将我的登录和注册页面包装到一张卡片中，位于页面中央，在这里重用，标题为“密码重置”
• AuthForm -> 只是一个表单，但我对其进行了编码以在我们等待服务器响应时禁用提交按钮并将按钮文本设置为“正在加载...”
• FormInput -> 带有自己标签的输入字段，带有值设置器和 onChange 处理程序，可选带有 isRequired 布尔值
• useAxios -> 自定义挂钩来处理来自需要令牌刷新的服务器的响应。 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 = ({ isVisible, onClose }) => {
    const [formData, setFormData] = useState({
        email: "",
        new_password: "",
        otp: ""
    });
    const [isLoading, setLoading] = useState(false);
    const [isOTPSent, setOTPSent] = useState(false);
    const { apiReq } = useAxios();

    const handleClose = (e: React.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) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);

        if (!isOTPSent) { // first request for sending otp,
            const response = await apiReq("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("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 (
        

            

                    {isOTPSent && (
                        >)}
                
    )
}

export default PasswordResetModal

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

// src/pages/auth/Login.tsx
import PasswordResetModal from "../../components/PasswordResetModal";

const Login: React.FC = () => {
    const [showModal, setShowModal] = useState(false);

    return (
        

                    {/* link to the register page here */}
                     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?
                    

                     setShowModal(false)} />
                
            
    )

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

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

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