Ciri Tetapan Semula Kata Laluan: Frontend

Bahagian hadapan

Bahagian frontend sangat mudah berbanding dengan bahagian backend. Apa yang perlu saya lakukan ialah mencipta modal, dan menggunakannya untuk menghantar data dua kali.

• Mula-mula hantar e-mel untuk menghantar OTP ke
• Kemudian hantar OTP dan kata laluan baharu untuk menukarnya

Untuk mencipta modal, saya menyalin beberapa kod, classNames untuk enkapsulasi modal, daripada komponen MessageModal dalam projek saya yang terdahulu Chat-Nat.

Perancangan

Saya akan menambah "Lupa Kata Laluan?" butang pada halaman log masuk, dan tetapkan pengendali onClick untuk membuka modal

Saya perlu menggunakan keadaan boolean untuk menandakan sama ada OTP telah dihantar ke e-mel pengguna sebelum memintanya. Saya menamakan negeri isOTPSent

• Jika !isOTPSent -> cuma minta alamat e-mel, hantar api req, kemudian jika berjaya setOTPSent(true)
• Jika OTPHantar -> sekarang juga minta OTP dan kata laluan baru, kemudian jika berjaya, tutup modal

Berikut ialah beberapa komponen dan cangkuk yang saya gunakan semula daripada bahagian hadapan projek ini yang sedia ada:

• Kotak -> Ia dengan kemas membungkus halaman log masuk dan daftar saya ke dalam kad, berpusat pada halaman, menggunakan semula di sini dengan tajuk "Tetapan Semula Kata Laluan"
• AuthForm -> Hanya borang tetapi saya mengekodkannya untuk melumpuhkan butang serah dan menetapkan teks butang kepada "Memuatkan..." apabila kami menunggu jawapan daripada pelayan
• FormInput -> Medan input dengan labelnya sendiri, dengan penetap nilai dan pengendali onChange, secara pilihan dengan boolean isRequired
• useAxios -> Cangkuk tersuai untuk mengendalikan respons daripada pelayan yang memerlukan penyegaran semula token. fungsi apiReq untuk penghantaran permintaan biasa, beberapa pengendalian ralat tersuai untuk memaparkan amaran() dan token muat semula, fungsi refreshReq untuk menyegarkan token pengesahan dan cuba permintaan awal sekali lagi.

Berikut ialah keseluruhan kod untuk modal:

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

Dan beginilah cara pemaparan bersyarat bagi modal dikendalikan dalam borang Log Masuk

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

---

Kami sudah selesai! Atau begitulah yang saya fikirkan.

Semasa menjalankan apl dalam persekitaran pembangunan saya, saya menemui pepijat di mana e-mel tidak akan dilalui jika bahagian belakang telah dijalankan sejak sekian lama.

Kami akan membetulkan pepijat ini dalam siaran seterusnya

Atas ialah kandungan terperinci Ciri Tetapan Semula Kata Laluan: Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!