الواجهة الأمامية

جزء الواجهة الأمامية سهل جدًا مقارنة بالجزء الخلفي. كل ما علي فعله هو إنشاء نموذج واستخدامه لإرسال البيانات مرتين.

• أرسل أولاً بريدًا إلكترونيًا لإرسال OTP إليه
• ثم أرسل كلمة المرور المؤقتة وكلمة المرور الجديدة لتغييرها

لإنشاء النموذج، قمت بنسخ بعض التعليمات البرمجية، وهي classNames لتغليف النموذج، من مكون messageModal في مشروعي السابق Chat-Nat.

تخطيط

سأضيف "هل نسيت كلمة المرور؟" الموجود في صفحة تسجيل الدخول، وقم بتعيين معالج onClick لفتح الوضع المشروط

أحتاج إلى استخدام حالة منطقية للإشارة إلى ما إذا كان قد تم إرسال OTP إلى البريد الإلكتروني للمستخدم قبل طلبه. أقوم بتسمية الحالة isOTPSent

• إذا!isOTPSent -> فقط اطلب عنوان البريد الإلكتروني، وأرسل طلب API، ثم إذا نجح setOTPSent(true)
• إذا كان isOTPSent -> فاطلب الآن أيضًا كلمة المرور الجديدة وكلمة المرور الجديدة، ثم إذا نجحت، فأغلق النموذج

إليك بعض المكونات والخطافات التي أعيد استخدامها من الواجهة الأمامية الحالية لهذا المشروع:

• Box -> لقد قام بتغليف صفحات تسجيل الدخول والتسجيل بدقة في بطاقة، تتمحور حول الصفحة، ويُعاد استخدامها هنا بعنوان "إعادة تعيين كلمة المرور"
• AuthForm -> مجرد نموذج ولكني قمت بترميزه لتعطيل زر الإرسال وتعيين نص الزر على "جارٍ التحميل..." عندما ننتظر استجابة من الخادم
• FormInput -> حقل الإدخال مع تسمية خاصة به، مع أداة ضبط القيمة ومعالج onChange، اختياريًا باستخدام قيمة منطقية isRequired
• useAxios -> ربط مخصص للتعامل مع الاستجابات من الخادم الذي يحتاج إلى تحديث الرمز المميز. وظيفة apiReq لإرسال الطلب العادي، وبعض معالجة الأخطاء المخصصة لعرض التنبيه () ورمز التحديث، ووظيفة 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)} />
                
            
    )

لقد انتهينا! أو هكذا اعتقدت.

أثناء تشغيل التطبيق في بيئة التطوير الخاصة بي، اكتشفت خطأ حيث لن تمر رسائل البريد الإلكتروني إذا كانت الواجهة الخلفية تعمل منذ فترة طويلة.

سنصلح هذا الخلل في المشاركة القادمة