Esse projeto é o frontend dessa API RESTful que eu também desenvolvi. O frontend vai consumir a API de lista de tarefas e organizar as informações para o usuário. O sistema está responsivo para mobile com a utilização do Bootstrap 5. O DOM foi manipulado manualmente com JavaScript Vanilla sem nenhum framework para isso.
O que há no projeto:
- Tela de login
- Tela de cadastro
- Tela de lista de tarefas
- HTML
- CSS
- JavaScript
- Bootstrap 5
- Biblioteca Axios
- Biblioteca Highcharts
- Servidor Web Apache (SOMENTE ao utilizar com Docker)
- Docker
git clone https://github.com/Matysys/todo-system-frontend.git
Tenha a porta 80 liberada no seu servidor ou localhost e tenha certeza que você tem o Docker e Docker Compose instalados, após isso execute o comando abaixo:
docker-compose up -d
Assim a página vai ficar disponível para ser acessada na porta 80 do IP público do seu servidor.
Um campo para email, um para senha, um botão de Login e um link para a tela de cadastro.
Quando um login não é encontrado no banco de dados ou está incorreto.
Similar à interface de login, aqui exige um nome e confirmação de senha duas vezes antes de cadastrar um usuário. O e-mail precisa ser único no banco de dados, mas o nome não.
SERÁ CORRIGIDO POSTERIORMENTE
Quando um usuário já existe no banco de dados.
Como pode ser visto, há um gráfico de colunas feito utilizando a biblioteca Highcharts que mostra a quantidade de tarefas de acordo com a categoria.
Cada tarefa também tem uma cor diferente de acordo com a prioridade.
- Vermelho: ALTA
- Amarelo: MÉDIA
- Verde: BAIXA
Quando a tarefa é concluída, a cor é cinza.
Vou simular uma lista nova, criar uma tarefa, alterar e depois deletar.
Há um botão embaixo do nome de usuário escrito Criar uma nova tarefa. Ao clicar nele, um formulário vai aparecer embaixo:
- Nome da tarefa
- Descrição da tarefa
- Prioridade da tarefa
- Data prevista de conclusão da tarefa
É necessário preencher tudo sem deixar nenhum espaço em branco. Coloquei somente validação via HTML nesse projeto, mas uma no servidor pra validar a data, como no caso abaixo de uma data inválida:
A data foi 17/05/2022, uma data do passado. Agora com uma data correta:
A nova tarefa vai aparecer e o gráfico será gerado.
Em cada tarefa há uma imagem que serve como um botão:
- Lápis serve para alterar.
- A borracha serve para apagar.
- O sinal verde serve para concluir.
Clicando em cima do lápis amarelo, o formulário de alteração vai aparecer abaixo do gráfico:
Altere de acordo com o necessário, nesse caso vou mudar a prioridade de MÉDIA para BAIXA, a data de 20/05/2023 para 25/06/2023 e apertar no botão de alterar. Não se esqueça de respeitar a data válida como no exemplo de criação de tarefa.
A tarefa foi alterada e o gráfico foi atualizado!
Vou criar outra tarefa, e logo em seguida apertar no botão para concluir a tarefa em questão.
É necessário a confirmação.
Acima está o resultado, e observe como é interessante a mudança do gráfico de colunas.
Agora vou apagar a Tarefa 1, veja abaixo:
É necessário confirmação.
Esse é o resultado. Eu optei por deixar as tarefas concluídas como histórico, então não podem ser deletadas.
Há um botão no topo escrito Finalizar sessão, ao clicar nele, o token será apagado do seu navegador e você voltará para o index.hmtl.
Note que não é possível acessar a página de login enquanto estiver logado, porque eu implementei uma condição pra checar se o token já existe no navegador.
O método usado foi com o localStorage, o JWT Token vai vir do servidor e será guardado no navegador no momento do login. Esse não é um método muito seguro, mas foi o método que optei por ser mais simples.
Ao logar, você consegue verificar o token pelo console digitando o seguinte:
console.log(token)Nesse token vai estar o id, nome e e-mail do usuário para identificação na hora de realizar as requisições.
Utilizei a biblioteca Axios para facilitar nas requisições.
É um frontend super simples somente para consumir a API e servir como aprendizado.