feat(new-tool): bcrypt

package-lock.json

@@ -13,6 +13,7 @@
         "@vicons/tabler": "^0.12.0",
         "@vueuse/core": "^8.2.1",
         "@vueuse/head": "^0.7.5",
+        "bcryptjs": "^2.4.3",
         "change-case": "^4.1.2",
         "colord": "^2.9.2",
         "cron-validator": "^1.3.1",
@@ -31,6 +32,7 @@
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.0",
+        "@types/bcryptjs": "^2.4.2",
         "@types/crypto-js": "^4.1.1",
         "@types/jsdom": "^16.2.14",
         "@types/node": "^16.11.25",
@@ -2112,6 +2114,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.2.tgz",
+      "integrity": "sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==",
+      "dev": true
+    },
     "node_modules/@types/chai": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
@@ -3173,6 +3181,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms="
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -12690,6 +12703,12 @@
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
       "dev": true
     },
+    "@types/bcryptjs": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.2.tgz",
+      "integrity": "sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==",
+      "dev": true
+    },
     "@types/chai": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
@@ -13526,6 +13545,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms="
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^8.2.1",
     "@vueuse/head": "^0.7.5",
+    "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.2",
     "cron-validator": "^1.3.1",
@@ -36,6 +37,7 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",
+    "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.25",

src/tools/bcrypt/bcrypt.vue

@@ -0,0 +1,118 @@
+<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"
+        />
+      </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"
+          style="width: 100%;"
+        />
+      </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
+      </n-button>
+    </n-space>
+  </n-card>
+
+  <br>
+  <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"
+        />
+      </n-form-item>
+      <n-form-item
+        label="Your hash: "
+        label-placement="left"
+      >
+        <n-input
+          v-model:value="compareHash"
+          placeholder="Your hahs 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-form-item>
+    </n-form>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+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)
+const hashed = computed(() => hashSync(input.value, saltCount.value))
+const {copy} = useCopy({source: hashed, text:'Hashed string copied to the clipboard'})
+
+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/bcrypt/index.ts

@@ -0,0 +1,11 @@
+import { LockSquare } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Bcrypt',
+  path: '/bcrypt',
+  description: 'Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.',
+  keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
+  component: () => import('./bcrypt.vue'),
+  icon: LockSquare,
+};

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as bcrypt } from './bcrypt';
 import { tool as caseConverter } from './case-converter';
 import { tool as colorConverter } from './color-converter';
 import { tool as qrCodeGenerator } from './qr-code-generator';
@@ -24,7 +25,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
     icon: LockOpen,
-    components: [tokenGenerator, hashText, uuidGenerator, cypher, bip39],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39],
   },
   {
     name: 'Converter',