密码重置功能：前端

// 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>
    )