diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts | 37 | ||||
| -rw-r--r-- | src/tools/argon2-hash-generator/argon2-hash-generator.vue | 107 | ||||
| -rw-r--r-- | src/tools/argon2-hash-generator/index.ts | 12 | ||||
| -rw-r--r-- | src/tools/bcrypt/bcrypt.vue | 20 | ||||
| -rw-r--r-- | src/tools/index.ts | 13 |
5 files changed, 171 insertions, 18 deletions
diff --git a/src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts b/src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts new file mode 100644 index 0000000..4492c1e --- /dev/null +++ b/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'); + }); +}); diff --git a/src/tools/argon2-hash-generator/argon2-hash-generator.vue b/src/tools/argon2-hash-generator/argon2-hash-generator.vue new file mode 100644 index 0000000..3f21020 --- /dev/null +++ b/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> diff --git a/src/tools/argon2-hash-generator/index.ts b/src/tools/argon2-hash-generator/index.ts new file mode 100644 index 0000000..26b1232 --- /dev/null +++ b/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'), +}); diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue index 4104c74..b0df627 100644 --- a/src/tools/bcrypt/bcrypt.vue +++ b/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> diff --git a/src/tools/index.ts b/src/tools/index.ts index ad6167e..dcd2fe3 100644 --- a/src/tools/index.ts +++ b/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', |