Skip to content

Commit

Permalink
Merge pull request #257 from sunnydanu/feat(new-tool)--argon2-passwor…
Browse files Browse the repository at this point in the history
…d-hashing-and-verification

feat(new-tool):-argon2-password-hashing-and-verification
  • Loading branch information
sunnydanu authored Oct 28, 2024
2 parents fee025b + d3c850d commit c95ac78
Show file tree
Hide file tree
Showing 8 changed files with 232 additions and 43 deletions.
3 changes: 3 additions & 0 deletions components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
'404.page': typeof import('./src/pages/404.page.vue')['default']
About: typeof import('./src/pages/About.vue')['default']
App: typeof import('./src/App.vue')['default']
Argon2HashGenerator: typeof import('./src/tools/argon2-hash-generator/argon2-hash-generator.vue')['default']
AsciiTextDrawer: typeof import('./src/tools/ascii-text-drawer/ascii-text-drawer.vue')['default']
'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
Expand Down Expand Up @@ -148,6 +149,7 @@ declare module '@vue/runtime-core' {
NAlert: typeof import('naive-ui')['NAlert']
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
Expand All @@ -164,6 +166,7 @@ declare module '@vue/runtime-core' {
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
NImage: typeof import('naive-ui')['NImage']
NInput: typeof import('naive-ui')['NInput']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
"figlet": "^1.7.0",
"figue": "^1.2.0",
"fuse.js": "^6.6.2",
"hash-wasm": "^4.9.0",
"highlight.js": "^11.7.0",
"iarna-toml-esm": "^3.0.5",
"ibantools": "^4.3.3",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 37 additions & 0 deletions src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { expect, test } 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('GoDev.Run - Argon2 hash generator');
});

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');
});
});
109 changes: 109 additions & 0 deletions src/tools/argon2-hash-generator/argon2-hash-generator.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<script setup lang="ts">
import { argon2Verify, argon2id } from 'hash-wasm';
import { useCopy } from '@/composable/copy';
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>

<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>
12 changes: 12 additions & 0 deletions src/tools/argon2-hash-generator/index.ts
Original file line number Diff line number Diff line change
@@ -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'),
});
89 changes: 47 additions & 42 deletions src/tools/bcrypt/bcrypt.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
<script setup lang="ts">
import { compareSync, hashSync } from 'bcryptjs';
import { useThemeVars } from 'naive-ui';
import { useCopy } from '@/composable/copy';
const themeVars = useThemeVars();
const input = ref('');
const saltCount = ref(10);
const hashed = computed(() => hashSync(input.value, saltCount.value));
Expand All @@ -16,53 +13,61 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
</script>

<template>
<c-card title="Hash">
<c-input-text
v-model:value="input"
placeholder="Your string to bcrypt..."
raw-text
label="Your string: "
label-position="left"
label-align="right"
label-width="120px"
mb-2
/>
<n-form-item label="Salt count: " label-placement="left" label-width="120">
<n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="100" :min="0" w-full />
</n-form-item>

<c-input-text :value="hashed" readonly text-center />

<div mt-5 flex justify-center>
<c-button @click="copy()">
<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"
/>
</n-form-item>
<n-form-item label="Salt count: " label-placement="left">
<n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
</n-form-item>
<n-input :value="hashed" readonly style="text-align: center" />
</n-form>
<br>
<n-space justify="center">
<n-button secondary @click="copy">
Copy hash
</c-button>
</div>
</c-card>
</n-button>
</n-space>
</n-card>

<c-card title="Compare string with hash">
<n-card title="Compare string with hash">
<n-form label-width="120">
<n-form-item label="Your string: " label-placement="left">
<c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
<n-input
v-model:value="compareString"
placeholder="Your string to compare..."
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/>
</n-form-item>
<n-form-item label="Your hash: " label-placement="left">
<c-input-text v-model:value="compareHash" placeholder="Your hash to compare..." raw-text />
<n-input
v-model:value="compareHash"
placeholder="Your hash to compare..."
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/>
</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>
</c-card>
</n-card>
</template>

<style lang="less" scoped>
.compare-result {
color: v-bind('themeVars.errorColor');
&.positive {
color: v-bind('themeVars.successColor');
}
}
</style>
16 changes: 15 additions & 1 deletion src/tools/index.ts
Original file line number Diff line number Diff line change
@@ -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 imageResizer } from './image-resizer';
import { tool as dnsQueries } from './dns-queries';
import { tool as jsonEditor } from './json-editor';
Expand Down Expand Up @@ -95,7 +96,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,
hashText,
bcrypt,
argon2HashGenerator,
uuidGenerator,
ulidGenerator,
cypher,
bip39,
hmacGenerator,
rsaKeyPairGenerator,
passwordStrengthAnalyser,
pdfSignatureChecker,
],
},
{
name: 'Converter',
Expand Down

0 comments on commit c95ac78

Please sign in to comment.