feat(i18n): bcrypt

src/tools/bcrypt/bcrypt.vue

@@ -4,11 +4,11 @@ import { useThemeVars } from 'naive-ui';
 import { useCopy } from '@/composable/copy';
 
 const themeVars = useThemeVars();
-
+const { t } = useI18n();
 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 { copy } = useCopy({ source: hashed, text: t('tools.bcrypt.copied') });
 
 const compareString = ref('');
 const compareHash = ref('');
@@ -19,37 +19,37 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
   <c-card title="Hash">
     <c-input-text
       v-model:value="input"
-      placeholder="Your string to bcrypt..."
+      :placeholder="t('tools.bcrypt.hash.stringPlaceholder')"
       raw-text
-      label="Your string: "
+      :label="`${t('tools.bcrypt.hash.stringLabel')}: `"
       label-position="left"
       label-width="120px"
       mb-2
     />
-    <n-form-item label="Salt count: " label-placement="left" label-width="120">
+    <n-form-item :label="`${t('tools.bcrypt.hash.saltLabel')}: `" label-placement="left" label-width="120">
-      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
+      <n-input-number v-model:value="saltCount" :placeholder="t('tools.bcrypt.hash.saltPlaceholder')" :max="10" :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()">
-        Copy hash
+        {{ t('tools.bcrypt.hash.button.copy') }}
       </c-button>
     </div>
   </c-card>
 
-  <c-card title="Compare string with hash">
+  <c-card :title="t('tools.bcrypt.compare.title')">
     <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
+      <n-form-item :label="`${t('tools.bcrypt.compare.stringLabel')}: `" label-placement="left">
-        <c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
+        <c-input-text v-model:value="compareString" :placeholder="t('tools.bcrypt.compare.stringPlaceholder')" raw-text />
       </n-form-item>
-      <n-form-item label="Your hash: " label-placement="left">
+      <n-form-item :label="`${t('tools.bcrypt.compare.hashLabel')}: `" label-placement="left">
-        <c-input-text v-model:value="compareHash" placeholder="Your hash to compare..." raw-text />
+        <c-input-text v-model:value="compareHash" :placeholder="t('tools.bcrypt.compare.hashPlaceholder')" raw-text />
       </n-form-item>
-      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
+      <n-form-item :label="`${t('tools.bcrypt.compare.matchLabel')}? `" label-placement="left" :show-feedback="false">
         <div class="compare-result" :class="{ positive: compareMatch }">
-          {{ compareMatch ? 'Yes' : 'No' }}
+          {{ compareMatch ? t('tools.bcrypt.compare.matchY') : t('tools.bcrypt.compare.matchN') }}
         </div>
       </n-form-item>
     </n-form>

src/tools/bcrypt/index.ts

@@ -1,11 +1,11 @@
 import { LockSquare } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Bcrypt',
+  name: translate('tools.bcrypt.title'),
   path: '/bcrypt',
-  description:
+  description: translate('tools.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/bcrypt/locales/en.yml

@@ -0,0 +1,26 @@
+tools:
+  bcrypt:
+    title: 'Bcrypt'
+    description: 'Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.'
+
+    copied: 'Hashed string copied to the clipboard'
+    hash:
+      stringLabel: 'Your string'
+      stringPlaceholder: 'Your string to bcrypt...'
+      saltLabel: 'Salt count'
+      saltPlaceholder: 'Salt rounds...'
+      button:
+        copy: 'Copy hash'
+    compare:
+      title: 'Compare string with hash'
+      stringLabel: 'Your string'
+      stringPlaceholder: 'Your string to compare...'
+      hashLabel: 'Your hash'
+      hashPlaceholder: 'Your hash to compare...'
+      matchLabel: 'Do they match'
+      matchY: 'Yes'
+      matchN: 'No'
+
+
+
+