Javascript
Para começar, obtemos todos os elementos de que precisamos para trabalhar usando JavaScript: o formulário de login, o botão de login e a mensagem de erro de login. Fazemos isso chamando o método document.getElementById, passando a id do elemento que estamos procurando. Além disso, como os valores dessas três variáveis não mudarão, ou seja, as variáveis sempre farão referência aos mesmos elementos exatos, então declaramos todas as três como const.
Depois disso, criamos um listener de eventos para o botão de login, do tipo click. Ou seja, toda vez que o botão de login for clicado, a função definida após o “clique” será executada. A função recebe um parâmetro que chamamos de e, que é um evento do mouse que representa o clique do botão (nomear e é apenas uma convenção de tipos, chame-o como preferir).
Dentro da função, começamos evitando o comportamento padrão de clicar no botão de login (que é para enviar os dados do formulário). Nesta demonstração, não queremos enviar os dados, queremos apenas validá-los usando JavaScript, daí o e.preventDefault () para evitar o envio.
Em seguida, pegamos os valores inseridos pelo usuário nos campos de formulário de nome de usuário e senha, respectivamente. Podemos aproveitar a sintaxe do JavaScript para selecionar um campo do formulário loginForm como formElement.nameOfField, onde formElement é seu HTML
e nameOfField é o valor dado ao atributo name do elemento
que você está procurando. Para obter o valor do campo selecionado, basta adicionar .value. Por exemplo, se o usuário digitou “user01” no campo de nome de usuário, obteremos esse valor com loginForm.username.value. Muito legal, certo?
Agora, os toques finais. Sempre que o usuário clica no botão de login, recuperamos todos os valores digitados nos campos do formulário. Mas precisamos fazer algo com essas credenciais. Em seguida, escreveremos um bloco if / else para executar um trecho de código se as credenciais de login forem válidas ou outro bloco se forem inválidas. Também precisamos de uma condição, certo? Vamos fazer dessa condição a validação real das credenciais. Para simplificar, essa validação verificará se o nome de usuário digitado é “usuário” e a senha é “web_dev”. Na sintaxe JavaScript, isso se traduz em:
username === "john" && password === "johndev"
onde && é o operador AND que especifica que precisamos que o username seja igual a “john” e o password seja igual a “johndev”.
Se as credenciais forem realmente válidas, exibiremos uma caixa de diálogo de alerta com a mensagem de que o usuário se conectou com sucesso e, em seguida, recarregar a página (novamente, apenas para simplificar). Mas se o nome de usuário ou a senha não forem válidos, alteramos a propriedade opacity da mensagem de erro de login (loginErrorMsg) para torná-la visível e informar ao usuário que suas credenciais são inválidas. Podemos fazer essa alteração CSS no JavaScript acessando os estilos de loginErrorMsg (loginErroMsg.styles) e, em seguida, a propriedade opacity (loginErrorMsg.styles.opacity) para defini-lo com o valor que desejamos. Definir como 1 significa que a mensagem de erro será totalmente opaca.
E é isso. Chegamos ao final desta explicação e agora você tem uma página de login totalmente funcional criada com HTML, CSS e JavaScript. Acho que é uma ótima ideia para os estágios iniciais de aprendizagem de desenvolvimento web front-end, pois pode ser facilmente aprimorada adicionando animações, alterando o design da página ou tornando a validação do lado do servidor quando você aprende uma linguagem de back-end como Node.js, Java, PHP, etc.
Continue lendo Primeira página de login com HTML, CSS e JavaScript – Parte 2
Continue lendo Primeira página de login com HTML, CSS e JavaScript – Parte 1
Espero que este artigo tenha sido útil para você e, por todos os meios, deixe-me saber seu feedback 🙂
Se você deseja brincar com uma demonstração ao vivo, pode encontrar o código completo no GitHub aqui.