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.
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.
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