Merge branch 'feat/passphrase-generator' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -184,6 +184,7 @@
     "sshpk": "^1.18.0",
     "turndown": "^7.1.2",
     "roboto-base64": "^0.1.2",
+    "silly-password-generator": "^1.0.28",
     "sql-formatter": "^13.0.0",
     "svg2png-wasm": "^1.4.1",
     "svg-to-url": "^4.0.0",

pnpm-lock.yaml

@@ -29,6 +29,7 @@ import { tool as maliciousLinksTester } from './malicious-links-tester';
 import { tool as mathFormatsConverter } from './math-formats-converter';
 import { tool as mathOcr } from './math-ocr';
 import { tool as markdownTocGenerator } from './markdown-toc-generator';
+import { tool as passphraseGenerator } from './passphrase-generator';
 
 import { tool as cssXpathConverter } from './css-xpath-converter';
 import { tool as cssSelectorsMemo } from './css-selectors-memo';
@@ -157,6 +158,8 @@ export const toolsByCategory: ToolCategory[] = [
       hashText,
       crcCalculator,
       fileHasher,
+      passphraseGenerator,
+      hashText,
       bcrypt,
       uuidGenerator,
       ulidGenerator,

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>