Bahagian frontend sangat mudah berbanding dengan bahagian backend. Apa yang perlu saya lakukan ialah mencipta modal, dan menggunakannya untuk menghantar data dua kali.
Untuk mencipta modal, saya menyalin beberapa kod, classNames untuk enkapsulasi modal, daripada komponen MessageModal dalam projek saya yang terdahulu Chat-Nat.
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
Berikut ialah beberapa komponen dan cangkuk yang saya gunakan semula daripada bahagian hadapan projek ini yang sedia ada:
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!