safer password generator

pnpm-lock.yaml

@@ -171,6 +171,9 @@ importers:
       cropperjs:
         specifier: 1.6.2
         version: 1.6.2
+      crypto-random-string:
+        specifier: ^5
+        version: 5.0.0
       debounce-promise:
         specifier: ^3.1.2
         version: 3.1.2
@@ -1283,6 +1286,10 @@ packages:
   cropperjs@1.6.2:
     resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==}
 
+  crypto-random-string@5.0.0:
+    resolution: {integrity: sha512-KWjTXWwxFd6a94m5CdRGW/t82Tr8DoBc9dNnPCAbFI1EBweN6v1tv8y4Y1m7ndkp/nkIBRxUxAzpaBnR2k3bcQ==}
+    engines: {node: '>=14.16'}
+
   css-functions-list@3.3.3:
     resolution: {integrity: sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==}
     engines: {node: '>=12'}
@@ -2194,6 +2201,10 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -2868,6 +2879,10 @@ snapshots:
 
   cropperjs@1.6.2: {}
 
+  crypto-random-string@5.0.0:
+    dependencies:
+      type-fest: 2.19.0
+
   css-functions-list@3.3.3: {}
 
   css-select@5.2.2:
@@ -3796,6 +3811,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  type-fest@2.19.0: {}
+
   typescript@5.9.3: {}
 
   undate@0.3.0: {}

ui/bits/package.json

@@ -28,7 +28,8 @@
     "prosemirror-view": "1.41.3",
     "qrcode": "^1.5.4",
     "shepherd.js": "11.2.0",
-    "zxcvbn": "^4.4.2"
+    "zxcvbn": "^4.4.2",
+    "crypto-random-string": "^5"
   },
   "build": {
     "bundle": [

ui/bits/src/bits.login.ts

@@ -118,7 +118,7 @@ function signupStart() {
   });
 
   $form.find('.password-generator button').on('click', () => {
-    $password.val(randomPassword()).trigger('input');
+    site.asset.loadEsm('bits.passwordGenerator', { init: 'form3-password' });
     return false;
   });
   const showPasswordTools = () => {
@@ -131,15 +131,6 @@ function signupStart() {
   site.asset.loadEsm('bits.passwordComplexity', { init: 'form3-password' });
 }
 
-function randomPassword() {
-  const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.,;@#!?*/-_=()[]';
-  const length = 20;
-  const password = Array.from(window.crypto.getRandomValues(new Uint32Array(length))).map(
-    n => chars[n % chars.length],
-  );
-  return password.join('');
-}
-
 function initTextClear(form: HTMLFormElement) {
   for (const wrapper of form.querySelectorAll<HTMLElement>('.text-wrapper')) {
     const input = wrapper.querySelector<HTMLInputElement>('input');

ui/bits/src/bits.passwordGenerator.ts

@@ -0,0 +1,8 @@
+import cryptoRandomString from 'crypto-random-string';
+
+export function initModule(id: string = 'form3-newPasswd1'): void {
+  const password = cryptoRandomString({ length: 20, type: 'ascii-printable' });
+  $('#' + id)
+    .val(password)
+    .trigger('input');
+}