Que más todo bien hoy hablaremos sobre Generador de Contraseñas, esta es una app para generar contraseñas (hecha por mí) que te permite crear claves que puede variar en su longitud, así como también qué caracteres debe tener la clave, aunque no tiene un backend para poder guardar las contraseñas generadas.

Esta app está basada en el generador de contraseñas que tiene la extensión/app de bitwarden, se me ocurrió como podría hacer un clon del generador de contraseñas, lo analice un poco y tome varios puntos en cuenta:

• Los caracteres alfabético.
• Los caracteres numéricos.
• Los caracteres especiales.

Teniendo en cuenta esos puntos lo siguiente fue idear la lógica para generar la contraseña con esos puntos, sumado a eso el hecho de las diferentes posibilidades o combinaciones de claves en las que una contraseña sea solo letras y números o letras y caracteres especiales.

Para ello se me ocurrió separar letras, números y caracteres especiales en arreglos.

   const lettersUpper = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

  const lettersLower = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

  const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  const characters = ['!', '@', '#', '$', '%', '^', '&', '*']

Ahora que están separados en arreglos ¿cómo selecciono uno de los index de esos arreglos?, me pareció conveniente utilizar un for.

 for (let i = 0; i < passwordLenght; i++) {
      // Rango de acuerdo al lenght del paramsToGenerate
      const randSelector = Math.ceil(Math.random() * paramsToGenerate.length - 1)

      // Seleccionar un index del paramsToGenerate
      const selectedParam = paramsToGenerate[randSelector]

      // Seleccionar un index del array obtenido anteriormente selectedParam
      const randSelector2 = Math.ceil(Math.random() * selectedParam.length - 1)

      // Seleccion un index del array con el randnumer obtenido anteriormente randSelector2
      const selectedParam2 = selectedParam[randSelector2]

      passwordString += `${selectedParam2}`
    }

  }

Explicacion general

El for tiene como condicional un passwordLenght que simboliza la longitud que debe tener la contraseña, con esto el bucle iterara ese número de veces, en su segunda línea tiene una variable que hará referencia a un número random que servirá de index, este se obtiene multiplicando el paramsToGenerate.length - 1 que es otro arreglo que guarda la combinación de caracteres que tendrá la contraseña a generar, la siguiente línea es una variable que obtiene de esta otra variable un index tomando en cuenta el randSelector generado anteriormente, la tercera variable hace lo mismo que la primera y la cuarta hace lo mismo que la segunda la quinta lo que hará es ir concatenando o sumando lo que se obtiene de esta cuarta variable.

Codigo completo de la logica

  const generatePassword = () => {

    let paramsToGenerate = []
    if ($doc("#lettersupper").checked)
      paramsToGenerate.push(lettersUpper)
    if ($doc("#letterslower").checked)
      paramsToGenerate.push(lettersLower)
    if ($doc("#numbers").checked)
      paramsToGenerate.push(numbers)
    if ($doc("#characters").checked)
      paramsToGenerate.push(characters)

    let passwordString = ""

    const passwordLenght = $doc("#rageninp").value

    for (let i = 0; i < passwordLenght; i++) {
      // Rango de acuerdo al lenght del paramsToGenerate
      const randSelector = Math.ceil(Math.random() * paramsToGenerate.length - 1)

      // Seleccionar un index del paramsToGenerate
      const selectedParam = paramsToGenerate[randSelector]

      // Seleccionar un index del array obtenido anteriormente selectedParam
      const randSelector2 = Math.ceil(Math.random() * selectedParam.length - 1)

      // Seleccion un index del array con el randnumer obtenido anteriormente randSelector2
      const selectedParam2 = selectedParam[randSelector2]

      passwordString += `${selectedParam2}`
    }


    $doc("#passwordinp").value = passwordString

  }

Esto no es lo único de lo que está compuesta la app, pero a nivel de lógica es lo “más” importante, en mi github está el proyecto con el código completo.