Tela de Login HTML + CSS + Javascript - Parte 2

Veja nesse artigo

Introdução

Nos artigos passados, mostrei como criar uma tela de login, caso você não tenha visto, pode acessar neste link.

Criar esse tipo de projeto é muito bom para aprender e treinar uma tecnologia.

Além de criar do zero, é interessante implementar novas funcionalidades, porque isso vai fazendo com que um projeto pequeno comece a ganhar mais complexidade, os desafios vão aumentando e você vai aprendendo mais.

Para a tela de login, desenvolvi duas novas funcionalidades bem legais para o projeto.

A primeira delas é uma barra de carregamento do site, essa barra é útil para dar um feedback ao usuário sobre o carregamento. Em ambiente local o carregamento é rápido, mas em produção pode demorar um pouco mais, e esse recurso ajuda.

A outra funcionalidade é a validação dos campos do formulário, caso os campos estejam vazios e o usuário clique para fazer o login, o formulário não será enviado, e será mostrado uma linha vermelha abaixo de cada campo, indicando que é obrigatório.

Então vamos lá, ver como implementar essas funcionalidades.

Caso você queira o código fonte do projeto, você pode clonar o projeto neste link.

Barra de progresso

Para a barra de progresso, será utilizado a biblioteca Pace.

Essa biblioteca conta com diversas barras de carregamento de página, você pode escolher a que mais gostar para utilizar em seu projeto.

Alguns exemplos de barra de progresso da biblioteca:

Na página inicial da biblioteca, na sessão “Get Started” há os scripts para serem inseridos no head do projeto, para que seja aplicado a barra de carregamento.

Então no head, adicione essas duas linhas:

<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">

Só isso já faria a biblioteca funcionar, e quando a tela fosse carregar, irá aparecer a barra de carregamento em cima.

Porém, seria interessante personalizar essa barra de carregamento.

Acho que um estilo mais legal, seria colocar a barra simples e também fazer com que a cor da barra, seja igual a da cor principal do projeto, declarada na variável --main-color

Para isso, vamos fazer mais algumas configurações.

Primeiro, vá no estilo minimal e clique em download, que ele irá baixar o arquivo CSS com o estilo.

Com esse arquivo baixado, coloque ele no diretório /css do projeto.

Depois disso, abra esse arquivo e localize o .pace .pace-progress {. Provavelmente estará na linha 14, dentro dele tem uma cor de background, troque essa cor para var(--main-color). Este bloco deve ficar dessa forma:

.pace .pace-progress {
	background: var(--main-color);
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 2px;
}

Com isso, ao atualizar a tela de login, agora ela conterá a barra de carregamento corretamente configurada no projeto.

Validação do formulário

Caso o usuário não preencha o formulário e clique no botão para fazer login, é ideal informar para ele que os campos de e-mail e senha são requeridos.

Para informar visualmente ao usuário, vamos colocar uma linha vermelha embaixo do campo que estiver vazio.

Pra isso no código, o primeiro passo é criar uma cor nova nas variáveis, que será a cor vermelha, na parte das variáveis, inclua a última linha:

:root {
  --main-color: #407bff;
  --link-color: #666666;
  --text1: #999999;
  --highligth-text: #333333;
  --input-text: #555555;
  --white-color: #FFFFFF;
  --point-list: #CCCCCC;
  --line-input: #D9D9D9;
  --invalid-field: #E74C3C;
}

A cor E74C3C; representa um vermelho, poderia ter sido usado o red, porém quis colocar assim para manter o padrão.

Agora, precisamos de uma classe, que irá configurar a cor no campo, no fim do arquivo, adicione o seguinte bloco:

.wrap-input-invalid {
  width: 100%;
  border-bottom: 2px solid var(--invalid-field);
}

Agora, já temos uma classe que adicionará a cor vermelha na linha debaixo para o campo inválido.

Precisamos realizar duas configurações no formulário, primeiramente, na tag de form, vamos colocar um id para este formulário:

<form class="login-form" id="login-form" method="post">

E no botão de envio, é necessário colocar o type submit, para informar que este botão quando clicado irá submeter o formulário:

<button class="login-form-btn" type="submit">
    Login
</button>

Tendo isso, vamos colocar essa classe dinamicamente. Para isso, vamos criar a lógica com o Javascript.

Precisamos adicionar um eventListener no formulário de submit, para quando o formulário for enviado, fazer a validação dos dados.

Quando ele for enviado, precisamos percorrer todos os campos e verificar o valor deles, se for igual a vazio, então vamos adicionar a classe wrap-input-invalid, a div que contém o campo.

Essa div que contém o campo, é a div um nível acima, a div pai do input.

O código com essa lógica fica dessa forma:

let form = document.getElementById("login-form");
	form.addEventListener("submit", function(event) {
	let inputs = document.getElementsByClassName('input-form');
	for (let input of inputs) {
	    if(input.value.trim() == ""){
		    input.parentElement.classList.add("wrap-input-invalid")
	    }
    }
	event.preventDefault();
});

Com isso, caso o usuário clique no botão login sem preencher nenhum campo, será esse o resultado: