前端

與後端部分相比，前端部分非常簡單。我需要做的就是創建一個模式，並使用它發送資料兩次。

• 首先發送電子郵件將 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)} />
                
            
    )

我們完成了！至少我是這麼想的。

在我的開發環境中運行該應用程式時，我發現了一個錯誤，如果後端運行了很長時間，則電子郵件將無法通過。

我們將在下一篇文章中修復此錯誤