feat(new tool): Passphrase Generator

Fix CorentinTh#1242 and CorentinTh#1228

Author: sharevb

components.d.ts

@@ -144,9 +144,11 @@ declare module '@vue/runtime-core' {
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
+    PassphraseGenerator: typeof import('./src/tools/passphrase-generator/passphrase-generator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']
     PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default']

package.json

@@ -82,6 +82,7 @@
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
+    "silly-password-generator": "^1.0.28",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",

pnpm-lock.yaml

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -16,6 +17,12 @@ const transformers = {
     fromQuery: (value: string) => value.toLowerCase() === 'true',
     toQuery: (value: boolean) => (value ? 'true' : 'false'),
   },
+  object: {
+    fromQuery: (value: string) => {
+      return JSON.parse(value);
+    },
+    toQuery: (value: object) => JSON.stringify(value),
+  },
 };
 
 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
+
+  const r = ref(defaultValue);
+
+  watch(r,
+    (value) => {
+      proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
+    },
+    { deep: true });
+
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
+
+  return r;
+}

src/composable/queryParams.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as passphraseGenerator } from './passphrase-generator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -88,7 +89,20 @@ import { tool as yamlViewer } from './yaml-viewer';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      passphraseGenerator,
+      hashText,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Passphrase Generator',
+  path: '/passphrase-generator',
+  description: 'Generate random memoizable Passphrases',
+  keywords: ['passphrase', 'random', 'password', 'generator'],
+  component: () => import('./passphrase-generator.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/passphrase-generator/index.ts

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { generateSillyPassword } from 'silly-password-generator';
+import { useCopy } from '@/composable/copy';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+import { computedRefreshable } from '@/composable/computedRefreshable';
+
+const count = useQueryParamOrStorage({ name: 'count', storageName: 'pass-generator:count', defaultValue: 1 });
+const words = useQueryParamOrStorage({ name: 'words', storageName: 'pass-generator:words', defaultValue: 5 });
+const capitalize = useQueryParamOrStorage({ name: 'capitalize', storageName: 'pass-generator:capitalize', defaultValue: false });
+const saltChars = useQueryParamOrStorage({ name: 'salt', storageName: 'pass-generator:salt', defaultValue: '' });
+const separator = useQueryParamOrStorage({ name: 'sep', storageName: 'pass-generator:sep', defaultValue: '-' });
+
+const [passphrases, refreshPassphrases] = computedRefreshable(() =>
+  Array.from({ length: count.value },
+    () => generateSillyPassword({
+      capitalize: capitalize.value,
+      wordCount: words.value,
+      salt: saltChars.value,
+    }).replace(/\s+/g, separator.value)).join('\n'),
+);
+
+const { copy } = useCopy({ source: passphrases, text: 'Passphrase(s) copied to clipboard!' });
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <n-form-item :label="`Words (${words})`" label-placement="left">
+        <n-slider v-model:value="words" :step="1" :min="1" :max="512" mr-2 />
+        <n-input-number v-model:value="words" size="small" />
+      </n-form-item>
+
+      <n-space>
+        <n-form-item label="Capitalize" label-placement="left">
+          <n-switch v-model:value="capitalize" />
+        </n-form-item>
+        <n-form-item label="Separator" label-placement="left">
+          <c-input-text
+            v-model:value="separator"
+            placeholder="Put separator char"
+          />
+        </n-form-item>
+      </n-space>
+
+      <n-form-item label="Ending Salt Chars" label-placement="left">
+        <c-input-text
+          v-model:value="saltChars"
+          placeholder="Put characters to appended to end of passphrase"
+        />
+      </n-form-item>
+
+      <n-form-item label="Number of passphrase to generate" label-placement="left">
+        <n-input-number v-model:value="count" size="small" />
+      </n-form-item>
+
+      <c-input-text
+        v-model:value="passphrases"
+        multiline
+        placeholder="Passphrase..."
+        readonly
+        rows="3"
+        autosize
+        class="passphrase-display"
+        word-wrap
+      />
+
+      <div mt-5 flex justify-center gap-3>
+        <c-button @click="copy()">
+          Copy
+        </c-button>
+        <c-button @click="refreshPassphrases">
+          Refresh
+        </c-button>
+      </div>
+    </c-card>
+  </div>
+</template>
+
+<style scoped lang="less">
+::v-deep(.passphrase-display) {
+  textarea {
+    text-align: center;
+  }
+}
+</style>