Este é um projeto de um Gerenciador de Senhas desenvolvido com React e TypeScript, no qual uma pessoa usuária pode cadastrar senhas para serviços que ela utiliza na internet, visualizar as senhas cadastradas e as informações do serviço, esconder as senhas salvas e remover os dados armazenado.
Os usuários podem adicionar senhas para serviços online, fornecendo o nome do serviço, login, senha e URL correspondente. Para habilitar o botão de cadastro, a senha deve seguir as seguintes regras: ter no mínimo 8 e no máximo 16 caracteres e conter letras, números e algum caractere especial.
Ao cadastrar um novo serviço corretamente, é exibido um alerta da biblioteca SweetAlert informando à pessoa usuária que um novo serviço foi cadastrado com sucesso.
As senhas cadastradas podem ser visualizadas ou ocultadas usando um checkbox específico. Ao marcar o checkbox "Esconder senhas", as senhas serão ocultadas.
Os usuários podem remover senhas cadastradas individualmente, utilizando o botão "Remover" associado a cada serviço.
Header.ts
- Elemento de cabeçalho que contém informações sobre a aplicação.
Form.ts
- Componente que permite aos usuários cadastrar novas senhas.
- Inicialmente, exibe um botão "Cadastrar nova senha".
- Ao clicar no botão, o formulário para cadastrar a senha é exibido, e o botão desaparece.
- Verifica se os campos estão preenchidos corretamente antes de permitir o cadastro.
- Mensagens de validação são exibidas ao lado dos campos.
Services.ts
- Lista os serviços cadastrados.
- Ao cadastrar um novo serviço, exibe o nome do serviço como um link para a URL cadastrada, o login e a senha.
- Possui um botão de "Remover" para cada serviço cadastrado.
Acesse a página aqui: geovannaotoni-password-manager.surge.sh
- Clone o repositório.
- Instale as dependências utilizando
npm install. - Execute o projeto com
npm start. - Interaja com a aplicação para cadastrar, visualizar, ocultar e remover senhas.
Este projeto é apenas para fins educacionais. Qualquer dúvida ou sugestão, sinta-se à vontade para entrar em contato.