Interfaz

La parte del frontend es muy sencilla en comparación con la parte del backend. Todo lo que necesito hacer es crear un modal y usarlo para enviar datos dos veces.

• En primer lugar, envíe un correo electrónico para enviar OTP a
• Luego envía la OTP y la nueva contraseña para cambiarla

Para crear el modal, copié algo de código, los nombres de clase para la encapsulación de un modal, del componente MessageModal en mi proyecto anterior Chat-Nat.

Planificación

Agregaré el mensaje "¿Olvidaste tu contraseña?" en la página de inicio de sesión y configure el controlador onClick para abrir el modal

Necesito usar un estado booleano para indicar si la OTP se envió al correo electrónico del usuario antes de solicitarla. Estoy nombrando el estado isOTPSent

• Si !isOTPSent -> simplemente solicite la dirección de correo electrónico, envíe la solicitud de API y, si tiene éxito, setOTPSent(true)
• Si isOTPSent -> ahora también solicite la OTP y la nueva contraseña, luego, si tiene éxito, cierre el modal

Aquí hay algunos componentes y ganchos que estoy reutilizando de la interfaz existente de este proyecto:

• Cuadro -> Envolvió cuidadosamente mis páginas de inicio de sesión y registro en una tarjeta, centrada en la página, reutilizándola aquí con el título "Restablecer contraseña"
• AuthForm -> Solo un formulario, pero lo codifiqué para deshabilitar el botón de envío y configuré el texto del botón en "Cargando..." cuando estamos esperando una respuesta del servidor.
• FormInput -> Campo de entrada con una etiqueta propia, con definidor de valores y controlador onChange, opcionalmente con un booleano isRequired
• useAxios -> Gancho personalizado para manejar las respuestas del servidor que necesita una actualización del token. Función apiReq para el envío de solicitudes normales, algún manejo de errores personalizado para mostrar una alerta () y un token de actualización, función de actualizaciónReq para actualizar el token de autenticación e intentar la solicitud inicial nuevamente.

Aquí está el código completo del 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 = ({ 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

Y así es como se maneja la representación condicional del modal en el formulario de inicio de sesión

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

¡Hemos terminado! O eso pensé.

Mientras ejecutaba la aplicación en mi entorno de desarrollo, descubrí un error por el cual los correos electrónicos no se enviaban si el backend había estado ejecutándose durante mucho tiempo.

Arreglaremos este error en la próxima publicación