feat(new tool): WPA PSK Raw Key Generator

Fix #1236

src/tools/index.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 wpaPskGenerator } from './wpa-psk-generator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -88,7 +89,22 @@ 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,
+      pinCodeGenerator,
+      passphraseGenerator,
+      hashText,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+      wpaPskGenerator,
+    ],
   },
   {
     name: 'Converter',

src/tools/wpa-psk-generator/index.ts

@@ -0,0 +1,12 @@
+import { Wifi } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'WPA PSK generator',
+  path: '/wpa-psk-generator',
+  description: 'WPA Pre-shared Key Generator to convert a WPA passphrase and SSID to the 256-bit pre-shared ("raw") key',
+  keywords: ['wpa', 'psk', 'pre', 'shared', 'key', 'ssid', 'passphrase', 'generator'],
+  component: () => import('./wpa-psk-generator.vue'),
+  icon: Wifi,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/wpa-psk-generator/wpa-psk-generator.service.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+import { generateWpaPskRawKey } from './wpa-psk-generator.service';
+
+describe('wpa-psk-generator', () => {
+  it('generateWpaPskRawKey should generate raw key', () => {
+    expect(generateWpaPskRawKey('test', 'test')).to.deep.eq({
+      passphrase: 'test',
+      psk: 'd630c5513becfd3952432bd7fcf098b7a40907f3214cf43551f1b8cfda873eccd55e2e0c6b8fed55feecdd7f21db4fb6b31c602fe3f5e58e7edd462b12e4acc4632aa41c4755646b8a52826cb76f3a984571c4cfc73a1a2684f55790fac9e1f6c6002faedcb6c2d47a3678139027b95641efbcecd934b712bf48db71a76d8915',
+      ssid: 'test',
+    });
+  });
+});

src/tools/wpa-psk-generator/wpa-psk-generator.service.ts

@@ -0,0 +1,15 @@
+import CryptoJS from 'crypto-js';
+import pbkdf2 from 'crypto-js/pbkdf2';
+
+export function generateWpaPskRawKey(ssid: string, passphrase: string) {
+  const psk = pbkdf2(passphrase, ssid, {
+    keySize: 32,
+    iterations: 4096,
+    hasher: CryptoJS.algo.SHA1,
+  }).toString(CryptoJS.enc.Hex);
+  return {
+    ssid,
+    passphrase,
+    psk,
+  };
+}

src/tools/wpa-psk-generator/wpa-psk-generator.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { generateWpaPskRawKey } from './wpa-psk-generator.service';
+import { useValidation } from '@/composable/validation';
+
+const ssid = ref('');
+const passphrase = ref('');
+
+const wpaPSKRawKey = computed(() => {
+  try {
+    return generateWpaPskRawKey(ssid.value, passphrase.value);
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const ssidValidation = useValidation({
+  source: ssid,
+  rules: [
+    {
+      validator: v => v !== '',
+      message: 'SSID must not be empty.',
+    },
+  ],
+});
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Wifi Infos" mb-2>
+      <c-input-text
+        v-model:value="ssid"
+        label="SSID"
+        placeholder="Put your SSID here..."
+        :validation="ssidValidation"
+        mb-2
+      />
+
+      <c-input-text
+        v-model:value="passphrase"
+        label="Passphrase"
+        placeholder="Put your Passphrase here..."
+        mb-2
+      />
+    </c-card>
+
+    <c-card title="WPA PSK Raw Key (256 bits)">
+      <TextareaCopyable :value="wpaPSKRawKey" />
+    </c-card>
+  </div>
+</template>