key generation

package.json

@@ -45,6 +45,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "crypto-random-string": "^5.0.0",
     "immer": "^10.1.1",
     "lucide-react": "^0.363.0",
     "mapbox-gl": "npm:empty-npm-package@^1.0.0",

pnpm-lock.yaml

@@ -80,6 +80,9 @@ importers:
       cmdk:
         specifier: ^1.0.0
         version: 1.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      crypto-random-string:
+        specifier: ^5.0.0
+        version: 5.0.0
       immer:
         specifier: ^10.1.1
         version: 10.1.1
@@ -1901,6 +1904,10 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  crypto-random-string@5.0.0:
+    resolution: {integrity: sha512-KWjTXWwxFd6a94m5CdRGW/t82Tr8DoBc9dNnPCAbFI1EBweN6v1tv8y4Y1m7ndkp/nkIBRxUxAzpaBnR2k3bcQ==}
+    engines: {node: '>=14.16'}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2929,6 +2936,10 @@ packages:
   turf-jsts@1.2.3:
     resolution: {integrity: sha512-Ja03QIJlPuHt4IQ2FfGex4F4JAr8m3jpaHbFbQrgwr7s7L6U8ocrHiF3J1+wf9jzhGKxvDeaCAnGDot8OjGFyA==}
 
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
   typescript@5.5.2:
     resolution: {integrity: sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==}
     engines: {node: '>=14.17'}
@@ -5293,6 +5304,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-random-string@5.0.0:
+    dependencies:
+      type-fest: 2.19.0
+
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}
@@ -6365,6 +6380,8 @@ snapshots:
 
   turf-jsts@1.2.3: {}
 
+  type-fest@2.19.0: {}
+
   typescript@5.5.2: {}
 
   typewise-core@1.2.0: {}

src/components/UI/Generator.tsx

@@ -12,6 +12,7 @@ import {
   SelectValue, 
 } from "@components/UI/Select.js";
 import { useState } from "react";
+import cryptoRandomString from 'crypto-random-string';
 
 const generatorVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2",
@@ -61,13 +62,13 @@ const Generator = React.forwardRef<HTMLButtonElement, GeneratorProps>(
     const generate = () => {
       let generated = "thisisapass";
       if (bitCount == "bit8") {
-        generated = "8bitpassword"
+        generated = btoa(cryptoRandomString({length: 1, type: 'alphanumeric'}));
       }
       if (bitCount == "bit128") {
-        generated = "128bitpassword"
+        generated = btoa(cryptoRandomString({length: 16, type: 'alphanumeric'}));
       }
       if (bitCount == "bit256") {
-        generated = "256bitpassword"
+        generated = btoa(cryptoRandomString({length: 32, type: 'alphanumeric'}));
       }
       return generated;
     };