🆕 Preview - Visualize a aplicação no link abaixo:
Com essa aplicação você consegue gerar senhas seguras tendo o controle do conjunto de caracteres que vai ser utilizado. Como bônus o sistema ainda pode criptografar/gerar o hash da sua senha em md5, sha1 ou bcrypt.
A aplicação disponível neste repositório é a minha resolução do desafio proposto na comunidade da Ballerini.
O design do software não é de minha autoria (mesmo tendo pequenas alterações). Todos os assets utilizados (incluindo o próprio protótipo) foram fornecidos pela equipe da Ballerini durante o desafio.
Créditos adicionais no final do readme
Essa aplicação é de cunho educativo, e mesmo não oferecendo nenhum risco aos usuários não me responsabilizo por falhas, bugs ou qualquer outro problema relacionado a software, toda via fique a vontade para criar issues ou pull-requests.
Como se trata de uma aplicação com fim educativo nada aqui deve ser levado como boa prática ou algo do gênero. Várias das soluções apresentadas aqui podem ser uma versão/visão funcional, porém essas podem não ser boas recomendações para uma aplicação real em produção...
Na minha resolução optei por não utilizar um framework como React, Vue ou Angular - E também elas não estão no meu domínio (por enquanto).
- Tailwind CSS - Para agilizar a estilização do projeto (indiretamente o protótipo recomendava)
- AlpineJS - Essa aplicação em JS puro iria ser bem complicada... Mas que bom que temos o Alpine para ter a reatividade e uma interação simplificada com os eventos da página.
- HTML, CSS e Js/Node - A explicação se dispensa acredito...
- Vite - O nosso bundler/transpilador para juntar tudo isso em uma aplicação web.
- Laravel - A aplicação é um monólito, e além de fornecer o front-end, o Laravel, também fornece a nossa API que será abordada abaixo:
Mesmo sendo uma aplicação simples foi possível implementar uma api, e como a primeira tentativa com o Livewire não ficou muito... "apresentável", a versão 2 (a atual) controla o estado via o AlpineJS e faz requisições para a api que gera a senha (e as criptografa).
⚠ Se lembre de adicionar os headers
Content-Type: application/jsoneAccept: application/json
O "front-end" não fica prefixado com as opções de criptografia ou conjunto de caracteres. Inicialmente o que ocorre é uma requisição para consultar as opções disponíveis, e uma vez tendo isso em mãos são renderizados os badges:
OPTIONS: /api/generator
Resposta esperada:
{
"hashing_algos": {
"md5": "MD5",
"sha1": "SHA-1",
"bcrypt": "Bcrypt"
},
"characteristics": {
"capital_letters": "ABC",
"small_letters": "abc",
"numbers": "123",
"symbols": "!#@"
}
}
Existe uma rotina de cache para que essa requisição não seja feita a todo o momento
Uma vez que tenha as opções de geração basta enviar elas via POST:
POST: /api/generator
Corpo da requisição:
{
"characteristics": ["capital_letters", "small_letters", "numbers", "symbols"],
"hashing_algo": "md5",
"size": 8 // o tamanho da senha (min. 4, max. 64)
}
Resposta esperada:
{
"password": "********",
"hash": "*******************"
}
Se você já tem a senha e só quer o hash dela basta realizar um POST:
POST: /api/generator/hash
Corpo da requisição:
{
"hashing_algo": "md5",
"password": "********" // min. 4, max. 64
}
Resposta esperada:
{
"hash": "*****************"
}