फ़्रंट एंड

फ्रंटएंड भाग बैकएंड भाग की तुलना में बहुत आसान है। मुझे बस एक मोडल बनाना है और दो बार डेटा भेजने के लिए इसका उपयोग करना है।

• ओटीपी भेजने के लिए सबसे पहले ईमेल भेजें
• फिर इसे बदलने के लिए ओटीपी और नया पासवर्ड भेजें

मोडल बनाने के लिए, मैंने अपने पिछले प्रोजेक्ट चैट-नैट में मैसेजमोडल घटक से कुछ कोड, एक मॉडल के एनकैप्सुलेशन के लिए क्लासनेम की प्रतिलिपि बनाई।

योजना

मैं एक "पासवर्ड भूल गए?" जोड़ूंगा। लॉगिन पेज पर बटन, और मोडल खोलने के लिए ऑनक्लिक हैंडलर सेट करें

मुझे यह बताने के लिए बूलियन स्थिति का उपयोग करने की आवश्यकता है कि ओटीपी मांगने से पहले उपयोगकर्ता के ईमेल पर भेजा गया है या नहीं। मैं राज्य का नाम isOTPSent रख रहा हूं

• यदि !isOTPSent -> बस ईमेल पता पूछें, एपीआई अनुरोध भेजें, फिर यदि सफल हो तो सेटOTPSent(सही)
• अगर isOTPSent -> अब ओटीपी और नया पासवर्ड भी मांगें, फिर सफल होने पर मोडल बंद करें

यहां कुछ घटक और हुक हैं जिनका मैं इस प्रोजेक्ट के मौजूदा फ्रंटएंड से पुन: उपयोग कर रहा हूं:

• बॉक्स -> इसने बड़े करीने से मेरे लॉगिन और रजिस्टर पृष्ठों को एक कार्ड में लपेट दिया, पृष्ठ के मध्य में, "पासवर्ड रीसेट" शीर्षक के साथ यहां पुन: उपयोग किया गया।
• ऑथफॉर्म -> बस एक फॉर्म लेकिन जब हम सर्वर से प्रतिक्रिया की प्रतीक्षा कर रहे होते हैं तो मैंने सबमिट बटन को अक्षम करने और बटन टेक्स्ट को "लोड हो रहा है..." पर सेट करने के लिए इसे कोडित किया है।
• फॉर्मइनपुट -> अपने स्वयं के लेबल के साथ इनपुट फ़ील्ड, वैल्यू सेटर और ऑनचेंज हैंडलर के साथ, वैकल्पिक रूप से एक आवश्यक बूलियन के साथ
• useAxios -> सर्वर से प्रतिक्रियाओं को संभालने के लिए कस्टम हुक जिसे टोकन रीफ्रेश की आवश्यकता होती है। सामान्य अनुरोध भेजने के लिए apiReq फ़ंक्शन, अलर्ट() और ताज़ा टोकन प्रदर्शित करने के लिए कुछ कस्टम त्रुटि प्रबंधन, ऑथ टोकन को ताज़ा करने और प्रारंभिक अनुरोध को फिर से आज़माने के लिए ताज़ाReq फ़ंक्शन।

यहां मॉडल के लिए संपूर्ण कोड है:

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

किए गए! या ऐसा मैंने सोचा।

अपने विकास परिवेश में ऐप चलाते समय, मुझे एक बग का पता चला जहां बैकएंड लंबे समय से चलने पर ईमेल नहीं जाएंगे।

हम अगली पोस्ट में इस बग को ठीक कर देंगे