Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Transição aula 1 para aula 2

Boa tarde Vinicios!

Como alguns colegas já relataram em outros tópicos, seria interessante criar uma aula explicando sobre a criação da função aoSubmeterFormular. Eu consegui entender o código mas o conteúdo ficou bastante perdido.

2 respostas
solução!

Fala, Jose!

Enquanto a gente ainda não tem uma solução definitiva, vem comigo mergulhar mais fundo nessa funcionalide de login e em como essa função se conecta com o formulário. Vamos explorar o que acontece por trás dos panos quando clicamos no botão "Fazer login".

const aoSubmeterFormular = (evento: React.FormEvent<HTMLFormElement>) => {
    // 1. Pare tudo!
    evento.preventDefault()
    // Isso aqui evita que o formulário siga o comportamento padrão, ou seja, ele não vai recarregar a página ao ser enviado!

    // 2. Criando a nossa cápsula de dados!
    const usuario = {
        email,    // o endereço eletrônico do nosso astronauta!
        senha,    // a chave secreta que só o nosso astronauta sabe!
    }
    // Estamos preparando a informação que será enviada ao nosso posto espacial (servidor) para o login.

    // 3. Lançando a cápsula em direção ao espaço sideral!
    axios.post('http://localhost:8000/public/login', usuario)
        .then(reposta => {
            // 4. Festa no espaço! O login foi bem-sucedido.
            sessionStorage.setItem('token', reposta.data.access_token)
            // Guardamos o token secreto, um tipo de passe VIP, para que nossa nave possa se comunicar livremente com o posto espacial.

            // 5. Limpeza pós-festa.
            setEmail('') // Resetando o campo e-mail.
            setSenha('') // Resetando o campo senha.
            aoEfetuarLogin() // Avisa ao restante da nave que o login foi efetuado com sucesso!
        })
        .catch(erro => {
            // 6. Alerta Vermelho! O login falhou.
            if (erro?.response?.data?.message) {
                alert(erro.response.data.message)
                // Se nosso posto espacial nos enviou uma mensagem de erro específica, a mostramos para o astronauta.
            } else {
                alert('Aconteceu um erro inesperado ao efetuar o seu login! Entre em contato com o suporte!')
                // Se algo estranho aconteceu e não entendemos o quê, avisamos o astronauta para procurar ajuda.
            }
        })
}

O método aoSubmeterFormular (aqui eu digitei errado sem querer, o nome deveria ser aoSubmeterFormulario) é como o cérebro da nossa operação de login. Quando o formulário de login é enviado, esta função entra em ação, comunica-se com o nosso posto espacial (ou servidor) e lida tanto com os cenários de sucesso quanto com os inesperados imprevistos espaciais (erros)!

Obrigado Vinicius pelo retorno