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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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