feat(new tool): argon2 password hashing and verification

package.json

@@ -2,7 +2,6 @@
   "name": "it-tools",
   "version": "2023.4.14-dbad773",
   "description": "Collection of handy online tools for developers, with great UX. ",
-  "type": "module",
   "keywords": [
     "productivity",
     "converter",
@@ -55,6 +54,7 @@
     "date-fns": "^2.29.3",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
+    "hash-wasm": "^4.9.0",
     "highlight.js": "^11.7.0",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
@@ -83,7 +83,7 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
     "@types/jsdom": "^16.2.15",
-    "@types/lodash": "^4.14.194",
+    "@types/lodash": "^4.14.192",
     "@types/mime-types": "^2.1.1",
     "@types/netmask": "^2.0.0",
     "@types/node": "^16.18.23",
@@ -95,7 +95,7 @@
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/parser": "^5.58.0",
     "@unocss/eslint-config": "^0.50.8",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^2.3.4",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
@@ -114,14 +114,14 @@
     "start-server-and-test": "^1.15.4",
     "typescript": "~4.5.5",
     "unocss": "^0.50.8",
-    "unplugin-auto-import": "^0.15.3",
+    "unplugin-auto-import": "^0.15.2",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.2.1",
-    "vite-plugin-md": "^0.21.5",
-    "vite-plugin-pwa": "^0.14.7",
+    "vite": "^2.9.15",
+    "vite-plugin-md": "^0.12.4",
+    "vite-plugin-pwa": "^0.11.13",
     "vite-svg-loader": "^3.6.0",
-    "vitest": "^0.30.1",
-    "vue-tsc": "^1.2.0",
+    "vitest": "^0.13.1",
+    "vue-tsc": "^0.31.4",
     "workbox-window": "^6.5.4",
     "zx": "^7.2.1"
   }

src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Argon2 hash generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/argon2-hash-generator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Argon2 hash generator - IT Tools');
+  });
+
+  test('hash a string a verify that the result match', async ({ page }) => {
+    await page.getByTestId('input').fill('azerty');
+
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    const hash = await page.getByTestId('hash').inputValue();
+
+    await page.getByTestId('compare-string').fill('azerty');
+    await page.getByTestId('compare-hash').fill(hash);
+
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    const doTheyMatch = await page.getByTestId('do-they-match').innerText();
+
+    expect(doTheyMatch.trim()).toEqual('Yes');
+  });
+
+  test('hash a string a verify that the does not result match another string', async ({ page }) => {
+    await page.getByTestId('input').fill('azerty');
+    const hash = await page.getByTestId('hash').inputValue();
+
+    await page.getByTestId('compare-string').fill('NOT AZERTY');
+    await page.getByTestId('compare-hash').fill(hash);
+    const doTheyMatch = await page.getByTestId('do-they-match').innerText();
+
+    expect(doTheyMatch.trim()).toEqual('No');
+  });
+});

src/tools/argon2-hash-generator/argon2-hash-generator.vue

@@ -0,0 +1,107 @@
+<template>
+  <n-card title="Hash">
+    <n-form label-width="120">
+      <n-form-item label="Your string: " label-placement="left">
+        <n-input
+          v-model:value="input"
+          placeholder="Your string to bcrypt..."
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          :input-props="{
+            'data-test-id': 'input',
+          }"
+        />
+      </n-form-item>
+      <n-form-item label="Iteration: " label-placement="left">
+        <n-input-number v-model:value="iterations" placeholder="Iterations..." min="0" w-full />
+      </n-form-item>
+      <n-form-item label="Memory size: " label-placement="left">
+        <n-input-number v-model:value="memorySize" placeholder="Memory size..." min="0" w-full />
+      </n-form-item>
+      <n-input
+        :value="hashed"
+        readonly
+        style="text-align: center"
+        placeholder="Set a string to hash above..."
+        :input-props="{
+          'data-test-id': 'hash',
+        }"
+      />
+    </n-form>
+    <br />
+    <n-space justify="center">
+      <n-button secondary @click="copy"> Copy hash </n-button>
+    </n-space>
+  </n-card>
+
+  <n-card title="Compare string with hash">
+    <n-form label-width="120">
+      <n-form-item label="Your string: " label-placement="left">
+        <n-input
+          v-model:value="compareString"
+          placeholder="Your string to compare..."
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          :input-props="{
+            'data-test-id': 'compare-string',
+          }"
+        />
+      </n-form-item>
+      <n-form-item label="Your hash: " label-placement="left">
+        <n-input
+          v-model:value="compareHash"
+          placeholder="Your hash to compare..."
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          :input-props="{
+            'data-test-id': 'compare-hash',
+          }"
+        />
+      </n-form-item>
+      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
+        <span data-test-id="do-they-match">
+          <n-tag v-if="compareMatch" :bordered="false" type="success" round>Yes</n-tag>
+          <n-tag v-else :bordered="false" type="error" round>No</n-tag>
+        </span>
+      </n-form-item>
+    </n-form>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { argon2id, argon2Verify } from 'hash-wasm';
+
+const input = ref('');
+const iterations = ref(32);
+const memorySize = ref(512);
+const hashLength = ref(32);
+
+const hashed = computedAsync(
+  async () =>
+    argon2id({
+      password: input.value,
+      salt: window.crypto.getRandomValues(new Uint8Array(16)),
+      parallelism: 1,
+      iterations: iterations.value,
+      memorySize: memorySize.value,
+      hashLength: hashLength.value,
+      outputType: 'encoded',
+    }),
+  '',
+);
+const { copy } = useCopy({ source: hashed, text: 'Hashed string copied to the clipboard' });
+
+const compareString = ref('');
+const compareHash = ref('');
+const compareMatch = computedAsync(
+  () => argon2Verify({ password: compareString.value, hash: compareHash.value }),
+  false,
+);
+</script>

src/tools/argon2-hash-generator/index.ts

@@ -0,0 +1,12 @@
+import { Lock } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Argon2 hash generator',
+  path: '/argon2-hash-generator',
+  description: 'Hash and compare string (password) using Argon2',
+  keywords: ['argon2', 'hash', 'generator', 'password', 'salt', 'crypto', 'security'],
+  component: () => import('./argon2-hash-generator.vue'),
+  icon: Lock,
+  createdAt: new Date('2023-04-16'),
+});

src/tools/bcrypt/bcrypt.vue

@@ -37,7 +37,7 @@
       <n-form-item label="Your hash: " label-placement="left">
         <n-input
           v-model:value="compareHash"
-          placeholder="Your hahs to compare..."
+          placeholder="Your hash to compare..."
           autocomplete="off"
           autocorrect="off"
           autocapitalize="off"
@@ -45,9 +45,8 @@
         />
       </n-form-item>
       <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
-        <div class="compare-result" :class="{ positive: compareMatch }">
-          {{ compareMatch ? 'Yes' : 'No' }}
-        </div>
+        <n-tag v-if="compareMatch" :bordered="false" type="success" round>Yes</n-tag>
+        <n-tag v-else :bordered="false" type="error" round>No</n-tag>
       </n-form-item>
     </n-form>
   </n-card>
@@ -57,9 +56,6 @@
 import { computed, ref } from 'vue';
 import { hashSync, compareSync } from 'bcryptjs';
 import { useCopy } from '@/composable/copy';
-import { useThemeVars } from 'naive-ui';
-
-const themeVars = useThemeVars();
 
 const input = ref('');
 const saltCount = ref(10);
@@ -70,13 +66,3 @@ const compareString = ref('');
 const compareHash = ref('');
 const compareMatch = computed(() => compareSync(compareString.value, compareHash.value));
 </script>
-
-<style lang="less" scoped>
-.compare-result {
-  color: v-bind('themeVars.errorColor');
-
-  &.positive {
-    color: v-bind('themeVars.successColor');
-  }
-}
-</style>

src/tools/index.ts

@@ -1,6 +1,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 argon2HashGenerator } from './argon2-hash-generator';
 import { tool as httpStatusCodes } from './http-status-codes';
 import { tool as yamlToJson } from './yaml-to-json-converter';
 import { tool as jsonToYaml } from './json-to-yaml-converter';
@@ -56,7 +57,17 @@ import { tool as macAddressLookup } from './mac-address-lookup';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator],
+    components: [
+      tokenGenerator,
+      hashText,
+      bcrypt,
+      argon2HashGenerator,
+      uuidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+    ],
   },
   {
     name: 'Converter',