Mostrar mensajes de error con alerts, no es lo mejor, por que por ej si el usuario los tiene deshabilitados nunca se podrán ver y por que no son personalizables y el navegador decide que mostrar.
Por lo cual hoy actualicé el código para reemplazar dichos mensajes por un modal que indica el error en si.
Anteriormente también se agregaron los metatags de OpenGraph para que pudiera mostrarse una mejor previsualización del enlace al compartirlo.
Anteriormente ya había programado un simple generador de contraseñas y desde el principio la idea es no abandonarlo e ir agregando mejoras a medida que pasa el tiempo, de acuerdo a las posibilidades.
Por lo que hoy se agregaron las siguientes actualizaciones:
Mejora en presentación de botones y texto informativo: Ahora se usan los botones propios de Bootstrap y se le asignan colores de forma que sean más fáciles de identificar.
Se agrega posibilidad de modificar los símbolos, números y letras utilizados en la generación de contraseñas.
Se agrega enlace de sistema de reporte de errores: El enlace redirige a un sistema propio de Greenborn en el cual se sistematizan los diferentes bugs detectados por los usuarios.
Posibles mejoras a futuro
Algo que estoy pensando agregar en un futuro cercano, es la posibilidad de generar contraseñas a partir de palabras concatenadas.
De forma que se podría generar una contraseña que ademas de ser larga, pueda ser fácil de recordar.
Por ej. es claro que una contraseña al estilo: “RUYI6Bw41}e#X6W8p2&s33l6w@jG64Bs/26~” es mucho más difícil de recordar que otra al estilo: “CEIBO.GUAYMALLEN.PILI.BARCO.TAMIKÉN.PARLA”.
¿Que tan segura son las contraseñas basadas en palabras?
En este caso, la combinatoria estaría de nuestro lado si las palabras se eligen desde una gran base de datos.
Por ej. si se tuvieran registradas 10.000 palabras, y se quisieran saber todas las posibles contraseñas a generar con:
1: 10.000 posibilidades.
2: 100.000.000 posibilidades.
3: 1.000.000.000.000 posibilidades.
5: 100.000.000.000.000.000.000 posibilidades.
Básicamente la cantidad de combinaciones se calcula de la forma:
#pass = #palabras_elegibles ^ cantidad_palabras
Siendo #pass la cantidad máxima de combinaciones, #palabras_elegibles la cantidad de palabras disponible en la base de datos elevado a la longitud de la contraseña expresada en cantidad_palabras.
Adicionalmente se podría definir la posibilidad de crear una contraseña mixta, es decir una en la cual se puedan intercalar palabras con las opciones anteriores ya definidas.
No se trata de ningún invento
Las contraseñas basadas en palabras, se usan mucho por ej. en las billeteras de cripto monedas (Wallets) como una de las opciones de recuperación de la cuenta, ya que si de diera el caso de que se borrara la configuración del wallet se pudiera recuperar su acceso a partir de dicha clave.
Y también es claro que se pueden usar en otros sistemas que requieran el uso de contraseñas, aunque tal vez su mayor limitante sea la longitud del texto generado, ya que existen páginas que limitan la longitud de las claves, y en otras ocasiones el límite no siempre es explicito.
Una de las tareas que siempre se presenta es la generación de contraseñas seguras para todos los sistemas tanto en producción como en desarrollo, y usaré esa necesidad propia como escusa para crear un pequeño proyecto angular de generación de contraseñas, y al mismo tiempo ofrecer un servicio más en la web Greenborn.
Manos a la obra
Repo en GitHub
Lo primero que necesitaremos es un repositorio de Github, claramente no es estrictamente necesario pero es una buena practica mantener el código versionado y en este caso está bueno para a quien le interese chusmear el proyecto, si recién comienza a trabajar con dicho Framework.
Angular-cli para el desarrollo del proyecto Angular, al proporcionar el comando ng
Git (opcional) para la gestión del repositorio.
Creación de proyecto base
El proyecto Angular base se deberá crear utilizado el comando ng de la siguiente manera:
$ ng new GeneraPass
Dicho comando preguntará si se desea utilizar el Router del Framework, a lo cual responderemos que si, ya que si bien puede que no lo necesitemos en un principio, luego puede ser que se necesite si se agregan varias páginas a la navegación.
Luego nos preguntará si deseamos usar CSS, SCSS, SASS o LESS, aquí no me complicaría mucho y elegiría CSS, igualmente cualquiera de las opciones anteriores son muy buenas.
Creación de proyecto angular satisfactoria
Bien, ya tenemos el proyecto generado, ahora solo resta probarlo, para lo cual es esencial ir al directorio del proyecto y ejecutar ng serve:
$ cd GeneraPass $ ng serve
Si todo va bien, ya debería abrirse una nueva pestaña en el navegador predeterminado con el proyecto funcionando, si no es así hay que mirar en la terminal en que ubicación se sirve el proyecto, en general por defecto es: http://localhost:4200
Proyecto base funcionando correctamente
El comando ng serve se usa para montar un servidor de desarrollo el cual se encarga de actualizar el proyecto automáticamente, cada vez que se detectan cambios, de forma que siempre veremos la versión actualizada del proyecto.
Primeras modificaciones
Bien, ahora ya podremos modificar el proyecto a nuestra conveniencia
Lo primero que podremos hacer es cambiar el favicon, por el que utilizaríamos en el proyecto, para lo que hay que reemplazar el archivo:
src/favicon.ico
El siguiente paso es la eliminación del código del template base, osea la vista que vemos al iniciar el proyecto.
Para eso deberemos editar el archivo: src/app/app.component.html
En este caso borramos todo su contenido, por lo cual obtendremos una vista en blanco.
Elección de Framework de estilos
En este punto uno puede o no utilizar un Framework como Bootstrap, para el maquetado de las vistas, en este caso, la decisión es de utilizarlo, por lo cual lo agregaremos al proyecto con el siguiente comando:
$ ng add @ng-bootstrap/ng-bootstrap
Dicho comando ya nos instala todas las librerías necesarias, y nos deja todo listo para ya poder utilizar Bootstrap en las vistas!
En dicho Módulo, también se puede ver que se importan los módulos FormsModule, ReactiveFormsModule que son necesarios para poder bindear los inputs con el modelo.
Creación del componente PasswordGenerator
Los componentes son la base de cualquier proyecto Angular, y lo ideal sería separar lo mejor posible cada una de las funcionalidades del proyecto en componente que luego se puedan reutilizar.
En este caso por motivos de simplicidad y por que el proyecto en si no es muy complejo, se creará un solo componente.
Para crear nuevos componentes, lo mejor es usar el comando especifico para dicha función:
$ ng g c components/GeneratePassword
En dicho comando el argumento “g” indica que se debe generar un nuevo elemento, “c” indica que dicho elemento es un componente y components/GeneraPassword es la ruta en la cual se debe generar el mismo.
Componente generado correctamente, puede verse que también se especifica la modificación del archivo src/app/app.module.ts
Ahora ya podremos incluir dicho componente en cualquier vista, en el nuevo archivo src/app/components/generate-password/generate-password.component.ts se especifica el selector “app-generate-password“.
Lo que significa que podremos incluir dicho componente en cualquier vista referenciandolo de la siguiente manera:
<app-generate-password></app-generate-password>
Por ej lo incluiremos en src/app/app.component.html
Que es el archivo en el cual anteriormente borramos todo su contenido, por lo que ahora solo debería contener:
Sobre el HTML, resaltaría los [(ngModel)] que definen el binding entre los valores de los inputs y el modelo (a definir) en donde se almacenarían los valores del formulario.
Y los (click) que definen la llamada a la función definida en el mismo, que será ejecutada al producirse el evento onClick.
Definición de modelo
La configuración usada para la generación de la contraseña se almacenará en un nuevo modelo que crearemos a tal propósito.
Para lo cual, dentro del directorio del componente, se creará un directorio models y dentro del mismo un archivo: password.options.ts
Dentro del cual se agregaría el siguiente contenido:
export class PasswordOptions {
public long:number = 8;
public mayus:boolean = true;
public minus:boolean = true;
public symbol:boolean = true;
public numbers:boolean = true;
}
Programación del componente
Luego deberemos editar el archivo correspondiente al código del componente: src/app/components/generate-password/generate-password.component.ts
Dicho archivo nos quedaría de la siguiente manera:
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { PasswordOptions } from './models/password.options';
@Component({
selector: 'app-generate-password',
templateUrl: './generate-password.component.html',
styleUrls: ['./generate-password.component.css']
})
export class GeneratePasswordComponent implements OnInit {
constructor() { }
public password:string = '';
public passwordOptions:PasswordOptions = new PasswordOptions();
private passCont!: HTMLInputElement;
ngOnInit(): void {
}
copyToClipboard(){
if (this.password == '') {
alert('Para poder copiar una contraseña primero es necesario generar una nueva');
return false;
}
this.passCont = document.getElementById("passCont") as HTMLInputElement;
this.passCont.select();
document.execCommand('copy');
alert("¡Contraseña copiada al portapapeles!");
return true;
}
generatePassword(){
if (this.passwordOptions.long < 0){
alert('La longitud de la contraseña debe ser mayor a 0');
return false;
}
if (!(this.passwordOptions.minus || this.passwordOptions.mayus || this.passwordOptions.numbers || this.passwordOptions.symbol)){
alert('Es necesario elegir al menos una opcion de tipo de contraseña');
return false;
}
if (this.passwordOptions.long >= 10000){
alert('La cantidad de caracteres ingresada es demasiado grande!');
return false;
}
this.password = '';
for (let c=0; c < this.passwordOptions.long; c++){
this.password += this.getPasswordChar();
}
return true;
}
getPasswordChar():string{
//se genera un numero al azar entre 1 y 4, dicho numero representa el tipo de caracter a insertar
let option:number = Math.round( Math.random() * (4 - 1) + 1 );
let ch:string = '';
switch (option){
case 1:
if (!this.passwordOptions.mayus) { //si no se seleccionaron las mayusculas
return this.getPasswordChar();
}
return this.getCaracter(this.letras).toUpperCase();
break;
case 2:
if (!this.passwordOptions.minus) { //si no se seleccionaron las minusculas
return this.getPasswordChar();
}
return this.getCaracter(this.letras);
break;
case 3:
if (!this.passwordOptions.numbers) { //si no se seleccionaron numeros
return this.getPasswordChar();
}
return this.getNumero();
break;
case 4:
if (!this.passwordOptions.symbol) { //si no se seleccionaron simbolos
return this.getPasswordChar();
}
return this.getCaracter(this.simbolos);
break;
}
return ch;
}
private letras:string = 'abcdefghijklmnñopqrstuvwxyz';
private simbolos:string= '!$%&/()=?^_-:;@*º|#~{[]}';
getCaracter(chs:string):string{
let chsCount = chs.length -1;
let chsSelect = Math.round( Math.random() * (chsCount - 0) + 0 );
return chs[chsSelect];
}
private getNumero():string{
return String(Math.round( Math.random() * (9 - 0) + 0 ));
}
}
Sobre el código, podría resaltar algunas cuestiones, como por ej el prestar atención al ámbito de las variables, es decir si son de tipo private, solo podran ser accedidas desde dentro del componente y no se podrá hacer binding con la vista, puede funcionar mientras se realizan pruebas con ng serve, pero al hacer el ng build va a saltar un error indicando la situación.
Definicón de estilos
Y el archivo CSS de nuestro componente (src/app/components/generate-password/generate-password.component.css):
Hay que tener en cuenta que los estilos definidos en este archivo solo se aplicarán al componente en cuestión, lo ideal es que en el mismo no haya nada que aplique a varios componentes, en esa situación los estilos que pudieran repetirse deberìan definirse el style.css.
En el archivo CSS de estilos global del template (src/styles.css) deberemos agregar:
La clase app-btn se define en el archivo de estilos globales, por que se prevee que pueda ser utilizada en caualquier sección del código de la APP, y se utiliza para definir el comportamiento mínimo del botón en cuanto a lo visual, definiendo su borde, el cursor y el mouse hover.
Probando
Si no hay ningún error, deberíamos ver la siguiente pantalla en el navegador:
Y bien, ya estaría terminado nuestro generador de contraseñas con Angular!
Generando el build
El último paso sería hacer el build del proyecto, para tener lista la versión optimizada para producción, por lo cual bastará con ejecutar el comando:
$ ng build
El cual generá dicha versión dentro del directorio: dist
