Front-end

A parte de frontend é muito fácil em comparação com a parte de backend. Tudo que preciso fazer é criar um modal e usá-lo para enviar dados duas vezes.

• Em primeiro lugar, envie um e-mail para enviar OTP para
• Em seguida, envie o OTP e a nova senha para alterá-la

Para criar o modal, copiei alguns códigos, os classNames para o encapsulamento de um modal, do componente MessageModal em meu projeto anterior Chat-Nat.

Planejamento

Adicionarei uma mensagem "Esqueceu a senha?" botão na página de login e defina o manipulador onClick para abrir o modal

Preciso usar um estado booleano para indicar se o OTP foi enviado para o e-mail do usuário antes de solicitá-lo. Estou nomeando o estado como isOTPSent

• Se !isOTPSent -> apenas peça o endereço de e-mail, envie a solicitação de API e, se for bem-sucedido, setOTPSent(true)
• Se isOTPSent -> agora peça também o OTP e a nova senha, então se tiver sucesso, feche o modal

Aqui estão alguns componentes e ganchos que estou reutilizando do frontend existente deste projeto:

• Caixa -> Embrulhou cuidadosamente minhas páginas de login e cadastro em um cartão, centralizado na página, reutilizando aqui com o título "Redefinição de senha"
• AuthForm -> Apenas um formulário, mas codifiquei-o para desativar o botão enviar e definir o texto do botão como "Carregando..." quando estivermos aguardando uma resposta do servidor
• FormInput -> Campo de entrada com rótulo próprio, com setter de valor e manipulador onChange, opcionalmente com um booleano isRequired
• useAxios -> Gancho personalizado para lidar com as respostas do servidor que precisa de uma atualização de token. Função apiReq para o envio normal de solicitação, algum tratamento de erro personalizado para exibir um alert() e token de atualização, função refrescanteReq para atualizar o token de autenticação e tentar a solicitação inicial novamente.

Aqui está o código completo do 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

E aqui está como a renderização condicional do modal é tratada no formulário de Login

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

Terminamos! Ou foi o que pensei.

Ao executar o aplicativo em meu ambiente de desenvolvimento, descobri um bug em que os e-mails não seriam enviados se o back-end estivesse em execução há muito tempo.

Corrigiremos esse bug na próxima postagem