Release note - v1.6.1

Objetivo da Versão

Esta versão tem como principal objetivo corrigir a forma de armazenamento do token JWT, utilizado para autenticação de usuários. A mudança visa melhorar a segurança e a usabilidade do sistema de autenticação ao modificar o método de armazenamento do token, garantindo um melhor controle e mitigando possíveis riscos de segurança.

Principais Alterações

1. Mudança no Método de Armazenamento do Token JWT

   • Antes: O token JWT era armazenado nos cookies do navegador. Isso poderia potencialmente expor o token a ataques de Cross-Site Scripting (XSS) e dificultar o controle granular de acesso ao token.
   • Depois: O token JWT agora é armazenado no localStorage do navegador. Essa abordagem permite que o token seja menos suscetível a ataques de XSS, pois o localStorage não é enviado automaticamente em requisições HTTP como os cookies. Além disso, essa mudança facilita a manipulação do token no lado do cliente.

2. Atualizações na Função de Exibição de Modais (showModal)

   • A função showModal foi otimizada para simplificar o controle da exibição do modal de alerta. Antes, o código gerenciava manualmente a largura da barra de progresso com vários cálculos e intervalos.
   • Melhorias:
     • Redução de complexidade ao eliminar o controle manual da barra de progresso.
     • Uso de setTimeout para ocultar o modal de forma mais direta, melhorando a legibilidade e manutenção do código.

3. Refatoração de Código

   • Remoção de Código Redundante: Funções duplicadas, como as que realizavam requisições e manipulavam modais, foram unificadas e simplificadas.
   • Aprimoramento da Estrutura de Código: A função makeRequest foi ajustada para utilizar axios com async/await, proporcionando uma maneira mais moderna e eficiente de lidar com requisições HTTP, incluindo melhor tratamento de erros.
   • Código Mais Limpo e Eficiente: Com a remoção de código redundante e não utilizado, o código não só ficou mais legível, mas também mais performático, reduzindo o número total de linhas em 34.

Impacto das Mudanças

• Segurança Melhorada: Ao armazenar o token JWT no localStorage em vez de cookies, o sistema de autenticação se torna menos vulnerável a ataques de XSS, já que o localStorage não é automaticamente enviado com requisições HTTP. Além disso, o controle do token é mantido inteiramente no lado do cliente.
• Usabilidade e Experiência do Usuário: A melhoria no gerenciamento de modais oferece uma experiência mais suave para o usuário, sem delays ou comportamentos inesperados.
• Manutenção Simplificada: A refatoração do código torna o arquivo JavaScript mais fácil de entender e modificar, facilitando futuras manutenções e introduções de novos recursos.

Instruções de Atualização

1. Atualizar Dependências: Certifique-se de que o axios está corretamente instalado e configurado no seu projeto, caso não esteja, adicione-o usando npm install axios.
2. Testar a Nova Implementação de Login: Verifique se, após o login bem-sucedido, o token JWT é armazenado corretamente no localStorage e não em cookies.
3. Verificação de Modais: Teste a funcionalidade dos modais para garantir que eles exibem corretamente as mensagens de erro e sucesso, e que se comportam conforme esperado ao ocultar após o tempo especificado.

Próximos Passos e Melhorias Futuras

• Monitoramento Contínuo da Segurança: Considerar a implementação de medidas adicionais para proteger o localStorage contra possíveis acessos não autorizados, especialmente em ambientes de alto risco.
• Implementação de Tokens de Atualização: Introduzir um sistema de refresh tokens para melhorar ainda mais a segurança e experiência de usuário, permitindo sessões persistentes sem a necessidade de re-autenticação constante.
• Testes Automatizados: Adicionar testes automatizados para validar o comportamento do login e armazenamento de tokens, garantindo que futuras mudanças no código não introduzam regressões.

Agradecimentos

Agradeço a @matteusmoreno por sua contribuição significativa para esta versão e por ajudar a melhorar a segurança e usabilidade do nosso sistema de autenticação.

Release note - v1.6.0

Novas Funcionalidades

• Verificação de Status Code HTTP: O sistema agora verifica detalhadamente o código de status das respostas HTTP durante o processo de autenticação. As mudanças incluem:
  • Status 401 (Não Autorizado): Se a resposta indicar que o acesso foi negado (status 401), será exibido um modal com a mensagem "Acesso não autorizado".
  • Status 200 (Sucesso): Quando a resposta indicar sucesso (status 200), o token de autenticação será armazenado no cookie do navegador, permitindo o gerenciamento seguro de sessões de usuário.
  • Status 5xx (Erro no Servidor): Caso ocorra um erro de servidor (status 5xx), o modal exibirá a mensagem "Erro no servidor" junto com o código do erro.

Melhorias

• Exibição de Modais com Barra de Progresso: A interface do usuário foi aprimorada para incluir uma barra de progresso que diminui continuamente durante 5 segundos quando um erro ou sucesso é mostrado. Este feedback visual melhora a experiência do usuário ao indicar o progresso da operação.
  • Tempo de Diminuição da Barra de Progresso: A barra agora diminui a largura a cada 100 milissegundos, garantindo uma transição suave e visível.
  • Fechamento Automático do Modal: O modal é automaticamente fechado após a barra de progresso completar sua animação.

Alterações Detalhadas

• Arquivo alert.js:

  • Refatoração e Otimização: Reduzido e otimizado o código para manipulação de eventos de alerta e progresso. O script agora é mais eficiente em termos de desempenho e manutenção.
  • Modais e Barras de Progresso: Implementação de uma função showModal que controla a exibição e o fechamento de modais, além de gerenciar a barra de progresso.

• Novo Arquivo login.js:

  • Função de Envio de Formulário: Implementação de lógica para coleta de dados do formulário, conversão em JSON e envio de requisição HTTP usando Axios.
  • Tratamento de Respostas: Implementação da função makeRequest para enviar requisições e tratar as respostas com base nos códigos de status, exibindo mensagens apropriadas através do modal.

• Arquivo index.html:

  • Integração com Novos Scripts: Atualização dos scripts incluídos e ajustes na estrutura do HTML para compatibilidade com os novos recursos.
  • Elementos de UI: Correção e atualização dos elementos de interface do usuário para suportar a nova lógica de modais e exibição de erros.

Impacto

Esta atualização melhora significativamente a robustez e a usabilidade do sistema de autenticação, garantindo que os usuários recebam feedback claro e imediato sobre o sucesso ou falha de suas tentativas de login.

Release note - v1.5.0

Nesta versão, foi introduzido um novo recurso: o Modal de Alerta. Esse modal visa melhorar a interação do usuário, fornecendo mensagens de alerta visuais com uma interface atraente e funcional.

Novidades

• Modal de Alerta:
  • Estrutura e Design: Adicionado um modal estilizado com uma caixa de alerta centralizada. A caixa é visualmente atraente, com bordas arredondadas e uma sombra sutil para destacar o alerta.
  • Transições e Animações: Implementada uma animação suave para a exibição do modal, aumentando a opacidade de 0 a 1, para uma transição mais fluida e agradável.
  • Barra de Progresso: Incluída uma barra de progresso na parte inferior do modal para indicar visualmente o tempo restante ou o progresso do alerta.

Alterações Detalhadas

CSS (assets/css/index.css):

• Modal:

  • Adicionados estilos para o modal, incluindo background-color, padding, border-radius, width, text-align, e box-shadow.
  • Implementada a classe .modal com propriedades de opacidade e transição para animação suave.

• Barra de Progresso:

  • Criada uma progress-bar com altura definida e cor de fundo. Incluída uma progress interna para indicar o progresso.

• Outras Alterações:

  • Atualizado o design geral da página de login, incluindo alterações nas cores e espaçamentos para harmonizar com o novo modal.

HTML (index.html):

• Estrutura do Modal:
  • Adicionado um novo bloco div com a classe modal para a estrutura do modal de alerta.
  • Inserido um elemento p com a id alert-message para exibir o texto do alerta.
• Scripts Adicionais:
  • Incluído um novo script alert.js para gerenciar a lógica de exibição e controle do modal.

JavaScript (assets/js/alert.js):

• Controle do Modal:
  • Implementada a lógica para mostrar e esconder o modal com base em eventos ou condições específicas.
  • Gerenciado o comportamento da barra de progresso para refletir o tempo ou progresso do alerta.

Notas de Implementação

• Testes: Recomenda-se testar o modal em diferentes navegadores e dispositivos para garantir que a animação e a exibição funcionem conforme o esperado.
• Customização: A barra de progresso e o estilo do modal são facilmente personalizáveis através do arquivo CSS. Ajuste as propriedades conforme necessário para se adequar à sua marca ou necessidades específicas.

Observações

• Esta versão pode incluir algumas alterações no layout e no estilo que podem impactar a aparência geral da página de login. Certifique-se de revisar e ajustar conforme necessário para manter a consistência visual com o restante do aplicativo.

Release note - v1.4.1

Manutenções

• Ajustes no Modal de Alerta:
  • Pequenas modificações de estilo e ajustes no layout do modal de alerta para melhorar a aparência e a usabilidade.
  • Correções em arquivos CSS para padronizar a interface do usuário.
  • Inclusão de novas fontes e ajustes na estrutura HTML para melhor apresentação visual.

Arquivos Alterados

• assets/css/index.css
• assets/js/script.js
• index.html

Release note - v1.4.0

Novidades

• Manipulação do Evento de Envio do Formulário de Login:

  • Adicionada uma nova funcionalidade ao formulário de login que intercepta o evento de envio e previne o comportamento padrão.
  • Os valores dos campos de nome de usuário e senha são coletados e enviados via uma requisição POST para o servidor.

• Feedback de Autenticação:

  • Implementação de um sistema de alerta que exibe mensagens personalizadas com base na resposta do servidor:
    • Erro 401 (Unauthorized): Mostra uma mensagem de "Acesso não permitido" e uma barra de progresso que diminui continuamente por 5 segundos.
    • Sucesso (200): Exibe a mensagem de retorno do servidor.

• Barra de Progresso Animada:

  • Uma barra de progresso é agora incluída no modal de alerta, mostrando visualmente o tempo restante da exibição do alerta em casos de erro de autenticação.

• Melhorias na Interface do Usuário:

  • Adição de uma funcionalidade que permite fechar o modal manualmente com um botão de fechar. A barra de progresso é removida junto ao fechamento do modal, garantindo uma experiência de usuário mais limpa e intuitiva.

Arquivos Alterados

• assets/js/alert.js (79 adições)

Release note - v1.3.1

Descrição

Este release implementa uma correção no comportamento do ícone de visibilidade da senha na página de login. Agora, ao recarregar ou retornar à página, o ícone é automaticamente redefinido para o estado "ocultar senha". Além disso, todos os campos de entrada são limpos e os rótulos (labels) são reposicionados corretamente.

Alterações Principais

• Função clearInputs aprimorada:
  • Agora, a função redefine o ícone de visibilidade da senha (eye-off-outline) ao carregar a página.
  • O campo de senha é automaticamente configurado como tipo password, garantindo que a senha continue oculta ao recarregar a página.

Arquivo Modificado

• assets/js/script.js:
  • 14 linhas adicionadas
  • 1 linha removida

Commit

• Hash: 32b7308
• Autor: @ericshantos
• Branch: main
• Parent Commit: 841ca23

Instruções de Uso

Nenhuma ação adicional é necessária por parte dos usuários. A funcionalidade será aplicada automaticamente ao recarregar a página ou ao navegar de volta para ela.

Release note - 1.3.0

Novas Funcionalidades

• Verificação de Conteúdo nos Inputs:

  • Implementação da função withContent(), que verifica se os campos de entrada (inputs) possuem conteúdo e ajusta a posição do rótulo (label) automaticamente.

• Alternância de Visibilidade da Senha:

  • Agora, o usuário pode alternar entre mostrar e ocultar a senha clicando no ícone de olho ao lado do campo de senha.

• Limpeza Automática dos Campos de Entrada:

  • Adição de uma funcionalidade que limpa automaticamente os campos de entrada ao carregar a página ou ao retornar a ela, garantindo que todos os campos do formulário estejam vazios.

Melhorias na Estrutura

• Código Otimizado: Foram realizadas otimizações no JavaScript para melhorar a interatividade do formulário, garantindo uma melhor experiência do usuário.
• Atualizações no HTML:
  • Alteração na estrutura do formulário para integrar as novas funcionalidades do JavaScript.
  • Inclusão dos scripts necessários para o funcionamento da alternância de visibilidade da senha.

Release Note - v1.1.1

Correções

• Correção no Efeito de Floating Label: Foi ajustado o comportamento do rótulo flutuante (floating label) nos campos de formulário. As melhorias incluem:
  • Ajuste no posicionamento e escala do rótulo quando o campo está em foco ou contém conteúdo.
  • A correção de cores para melhorar a visibilidade do rótulo quando o campo é focado.
  • Alterações no estilo do botão de visibilidade da senha, que agora aparece corretamente ao focar ou inserir conteúdo no campo de senha.

Detalhes Técnicos

• Arquivo Modificado: assets/css/index.css
• Linhas Alteradas: 59 mudanças (51 adições e 8 deleções)

Este patch visa melhorar a usabilidade e a experiência do usuário ao interagir com os campos de formulário, garantindo que os rótulos se comportem de maneira consistente e previsível.

Release Note - v1.1.0

Novidades

• Melhoria na estilização dos campos de entrada com a técnica de "floating label" para uma melhor experiência de usuário.

Alterações

1. Estilo e Layout:

• Adicionada a classe .input-container para melhorar a disposição dos campos de entrada e labels.
• Atualizado o estilo das labels e inputs para implementar o efeito de flutuação quando o campo é focado.

2. Estrutura HTML:

• Atualizada a estrutura do formulário para incluir a classe .input-container ao redor dos campos de entrada e labels.
• Melhorado o posicionamento das labels para que se movam quando o campo é focado, melhorando a clareza e a usabilidade do formulário.

Detalhes das Alterações

CSS (assets/css/index.css):

• .input-container:
  • Adicionada para envolver inputs e labels, com margem inferior ajustada.
• Labels (label):
  • Estilizadas para flutuar sobre os campos de entrada quando em foco, com transições suaves e mudanças de cor.
• Inputs (input):
  • Ajustada a largura e o padding para uma melhor aparência e funcionalidade.
  • Estilo modificado para alinhamento com o design dos labels.

HTML (index.html):

• Estrutura do formulário agora inclui div com a classe .input-container ao redor dos campos de entrada e labels, permitindo o efeito de flutuação.

Notas

• As alterações visam melhorar a experiência do usuário com uma interface mais interativa e visualmente atraente.
• Testado em diferentes tamanhos de tela para garantir a responsividade.

Release Note - v1.0.0

Novidades

• Introdução da tela de login com design e funcionalidade básicos.
• Implementação do layout e estilo do formulário de login.

Alterações

1. Estilo e Layout:

• Adição do CSS para:
  • Centralizar o conteúdo da página com flexbox.
  • Aplicar um gradiente de fundo ao corpo da página.
  • Estilizar o container do formulário (.login-container) com bordas arredondadas, sombra e centralização.
  • Estilizar os elementos do formulário (label, input, button) para melhorar a usabilidade e estética.
  • Adicionar efeitos de hover ao botão de submissão.

2. Estrutura HTML:

• Inclusão da estrutura básica HTML para a tela de login:
  • Formulário com campos para nome de usuário e senha.
  • Botão de submissão para enviar os dados do formulário.

Detalhes das Alterações

CSS (assets/css/index.css):

• body:
  • Uso de flexbox para centralizar o conteúdo vertical e horizontalmente.
  • Gradiente de fundo.
• .login-container:
  • Estilo moderno com padding, bordas arredondadas e sombra.
• Elementos do formulário (form, label, input, button):
  • Estilização para melhorar a experiência do usuário.
  • Efeito de hover no botão de submissão.

HTML (index.html):

• Estrutura do formulário de login:
  • Campos para nome de usuário e senha.
  • Botão de submissão configurado para enviar uma solicitação POST para /login.

Notas

• O design é responsivo e testado em diferentes tamanhos de tela.
• Futuras versões podem incluir mais funcionalidades e ajustes baseados no feedback dos usuários.