Mot de passe

LE HTML

<output id="mdp"></output>
<input id="longueur" type="range" min="8" max="64" value="20">
<label><input type="checkbox" id="chiffres" checked> Chiffres</label>
<label><input type="checkbox" id="symboles" checked> Symboles</label>
<button id="generer">Générer</button>
<button id="copier">Copier</button>

LES ALPHABETS

On retire l, I, O, 0 et 1 : impossibles à distinguer dans certaines polices.

const LETTRES = 'abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';
const CHIFFRES = '23456789';
const SYMBOLES = '!@#$%&*?-_+=';

UN TIRAGE SANS BIAIS

crypto.getRandomValues donne des nombres imprévisibles. On rejette les valeurs trop hautes pour que chaque caractère ait exactement la même chance.

function tirer(max) {
  const limite = Math.floor(4294967296 / max) * max;
  const n = new Uint32Array(1);
  do crypto.getRandomValues(n); while (n[0] >= limite);
  return n[0] % max;
}

GÉNÉRER

function generer() {
  let alphabet = LETTRES;
  if (document.getElementById('chiffres').checked) alphabet += CHIFFRES;
  if (document.getElementById('symboles').checked) alphabet += SYMBOLES;
  const longueur = Number(document.getElementById('longueur').value);
  let mdp = '';
  for (let i = 0; i < longueur; i++) mdp += alphabet[tirer(alphabet.length)];
  document.getElementById('mdp').textContent = mdp;
}

COPIER

L'API Clipboard est asynchrone : elle renvoie une promesse.

document.getElementById('copier').addEventListener('click', async () => {
  await navigator.clipboard.writeText(document.getElementById('mdp').textContent);
});
document.getElementById('generer').addEventListener('click', generer);
generer();