WIP(translate): translate token-generator, hash-text, bcrypt and uuid-generator tools

src/tools/bcrypt/bcrypt.vue

@@ -4,11 +4,12 @@ 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('');
@@ -16,41 +17,51 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
 </script>
 
 <template>
-  <c-card title="Hash">
+  <c-card :title="t('tools.bcrypt.hash.title')">
     <c-input-text
       v-model:value="input"
-      placeholder="Your string to bcrypt..."
+      :placeholder="t('tools.bcrypt.hash.placeholder')"
       raw-text
-      label="Your string: "
+      :label="t('tools.bcrypt.hash.label')"
       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="10" :min="0" w-full />
+    <n-form-item :label="t('tools.bcrypt.hash.saltCount')" label-placement="left" label-width="120">
+      <n-input-number
+        v-model:value="saltCount"
+        :placeholder="t('tools.bcrypt.hash.saltCountPlaceholder')"
+        :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.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">
-        <c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
+      <n-form-item :label="t('tools.bcrypt.compare.stringLabel')" label-placement="left">
+        <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">
-        <c-input-text v-model:value="compareHash" placeholder="Your hash to compare..." raw-text />
+      <n-form-item :label="t('tools.bcrypt.compare.hashLabel')" label-placement="left">
+        <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.match')" label-placement="left" :show-feedback="false">
         <div class="compare-result" :class="{ positive: compareMatch }">
-          {{ compareMatch ? 'Yes' : 'No' }}
+          {{ compareMatch ? t('tools.bcrypt.compare.yes') : t('tools.bcrypt.compare.no') }}
         </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:
-    'Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.',
+  description: translate('tools.bcrypt.description'),
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
   icon: LockSquare,

src/tools/bcrypt/locales/en.yml

@@ -0,0 +1,22 @@
+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:
+      title: Hash
+      placeholder: Your string to bcrypt...
+      label: 'Your string: '
+      saltCount: 'Salt count: '
+      saltCountPlaceholder: Salt rounds...
+      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...
+      match: Do they match ?
+      yes: Yes
+      no: No

src/tools/bcrypt/locales/zh.yml

@@ -0,0 +1,22 @@
+tools:
+  bcrypt:
+    title: Bcrypt 加密
+    description: 使用 bcrypt 对文本字符串进行哈希计算和比较。Bcrypt 是基于 Blowfish 密码算法的密码哈希函数。
+
+    copied: 哈希字符串已复制到剪贴板
+    hash:
+      title: 哈希
+      placeholder: 要加密的字符串...
+      label: '您的字符串：'
+      saltCount: '盐计数：'
+      saltCountPlaceholder: 盐轮数...
+      copy: 复制哈希
+    compare:
+      title: 与哈希值比较字符串
+      stringLabel: '您的字符串：'
+      stringPlaceholder: 要比较的字符串...
+      hashLabel: '您的哈希值：'
+      hashPlaceholder: 要比较的哈希值...
+      match: 它们是否匹配？
+      yes: 是
+      no: 否

src/tools/hash-text/hash-text.vue

@@ -22,6 +22,7 @@ type Encoding = keyof typeof enc | 'Bin';
 const algoNames = Object.keys(algos) as AlgoNames[];
 const encoding = useQueryParam<Encoding>({ defaultValue: 'Hex', name: 'encoding' });
 const clearText = ref('');
+const { t } = useI18n();
 
 function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
   if (encoding === 'Bin') {
@@ -37,29 +38,38 @@ const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algos[al
 <template>
   <div>
     <c-card>
-      <c-input-text v-model:value="clearText" multiline raw-text placeholder="Your string to hash..." rows="3" autosize autofocus label="Your text to hash:" />
+      <c-input-text
+        v-model:value="clearText"
+        multiline
+        raw-text
+        :placeholder="t('tools.hash-text.textPlaceholder')"
+        rows="3"
+        autosize
+        autofocus
+        :label="t('tools.hash-text.textLabel')"
+      />
 
       <n-divider />
 
       <c-select
         v-model:value="encoding"
         mb-4
-        label="Digest encoding"
+        :label="t('tools.hash-text.hashLabel')"
         :options="[
           {
-            label: 'Binary (base 2)',
+            label: t('tools.hash-text.binary'),
             value: 'Bin',
           },
           {
-            label: 'Hexadecimal (base 16)',
+            label: t('tools.hash-text.hexadecimal'),
             value: 'Hex',
           },
           {
-            label: 'Base64 (base 64)',
+            label: t('tools.hash-text.base64'),
             value: 'Base64',
           },
           {
-            label: 'Base64url (base 64 with url safe chars)',
+            label: t('tools.hash-text.base64url'),
             value: 'Base64url',
           },
         ]"

src/tools/hash-text/index.ts

@@ -1,11 +1,11 @@
 import { EyeOff } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Hash text',
+  name: translate('tools.hash-text.title'),
   path: '/hash-text',
-  description:
-    'Hash a text string using the function you need : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 or RIPEMD160',
+  description: translate('tools.hash-text.description'),
   keywords: [
     'hash',
     'digest',

src/tools/hash-text/locales/en.yml

@@ -0,0 +1,12 @@
+tools:
+  hash-text:
+    title: Hash text
+    description: 'Hash a text string using the function you need : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 or RIPEMD160'
+
+    textLabel: 'Your text to hash:'
+    textPlaceholder: 'Your string to hash...'
+    hashLabel: Digest encoding
+    binary: Binary (base 2)
+    hexadecimal: Hexadecimal (base 16)
+    base64: Base64 (base 64)
+    base64url: Base64url (base 64 with url safe chars)

src/tools/hash-text/locales/zh.yml

@@ -0,0 +1,12 @@
+tools:
+  hash-text:
+    title: 文本转哈希
+    description: 使用所需的函数对文本字符串进行哈希计算：MD5、SHA1、SHA256、SHA224、SHA512、SHA384、SHA3或RIPEMD160
+
+    textLabel: '要进行哈希的文本：'
+    textPlaceholder: '要进行哈希的字符串...'
+    hashLabel: 摘要编码
+    binary: 二进制（基数2）
+    hexadecimal: 十六进制（基数16）
+    base64: Base64（基数64）
+    base64url: Base64url（带有URL安全字符的基数64）

src/tools/token-generator/index.ts

@@ -5,8 +5,19 @@ import { translate } from '@/plugins/i18n.plugin';
 export const tool = defineTool({
   name: translate('tools.token-generator.title'),
   path: '/token-generator',
-  description: translate('tools.token-generator.description'),
-  keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase', 'password'],
+  description: translate('token-generator.description'),
+  keywords: [
+    'token',
+    'random',
+    'string',
+    'alphanumeric',
+    'symbols',
+    'number',
+    'letters',
+    'lowercase',
+    'uppercase',
+    'password',
+  ],
   component: () => import('./token-generator.tool.vue'),
   icon: ArrowsShuffle,
 });

src/tools/token-generator/locales/zh.yml

@@ -0,0 +1,15 @@
+tools:
+  token-generator:
+    title: Token 生成器
+    description: 使用您想要的字符生成随机字符串，包括大写或小写字母、数字或符号。
+
+    uppercase: 大写字母（ABC...）
+    lowercase: 小写字母（abc...）
+    numbers: 数字（123...）
+    symbols: 符号（!-;...）
+    length: 长度
+    tokenPlaceholder: '生成的 Token...'
+    copied: Token 已复制到剪贴板
+    button:
+      copy: 复制
+      refresh: 刷新

src/tools/uuid-generator/index.ts

@@ -1,11 +1,11 @@
 import { Fingerprint } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'UUIDs generator',
+  name: translate('tools.uuid-generator.title'),
   path: '/uuid-generator',
-  description:
-    'A Universally Unique Identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot!).',
+  description: translate('tools.uuid-generator.description'),
   keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique', 'v1', 'v3', 'v5', 'nil'],
   component: () => import('./uuid-generator.vue'),
   icon: Fingerprint,

src/tools/uuid-generator/locales/en.yml

@@ -0,0 +1,18 @@
+tools:
+  uuid-generator:
+    title: UUIDs generator
+    description: A Universally Unique Identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot!).
+
+    version: UUID version
+    quantity: Quantity 
+    quantityPlaceholder: UUID quantity
+    namespace: Namespace
+    name: Name
+    uuidsPlaceholder: Your uuids
+
+    invalidMessage: Invalid UUID
+    copies: UUIDs copied to the clipboard
+
+    button:
+      copy: Copy
+      refresh: Refresh

src/tools/uuid-generator/locales/zh.yml

@@ -0,0 +1,18 @@
+tools:
+  uuid-generator:
+    title: UUID 生成器
+    description: 通用唯一标识符（UUID）是用于在计算机系统中标识信息的 128 位数字。可能的 UUID 数量为 16^32，即 2^128 或约 3.4x10^38（非常多！）。
+
+    version: UUID 版本
+    quantity: 数量
+    quantityPlaceholder: UUID 数量
+    namespace: 命名空间
+    name: 名称
+    uuidsPlaceholder: 您的 UUID
+
+    invalidMessage: 无效的 UUID
+    copies: UUID 已复制到剪贴板
+
+    button:
+      copy: 复制
+      refresh: 刷新

src/tools/uuid-generator/uuid-generator.vue

@@ -9,10 +9,11 @@ const versions = ['NIL', 'v1', 'v3', 'v4', 'v5'] as const;
 const version = useStorage<typeof versions[number]>('uuid-generator:version', 'v4');
 const count = useStorage('uuid-generator:quantity', 1);
 const v35Args = ref({ namespace: '6ba7b811-9dad-11d1-80b4-00c04fd430c8', name: '' });
+const { t } = useI18n();
 
 const validUuidRules = [
   {
-    message: 'Invalid UUID',
+    message: t('tools.uuid-generator.invalidMessage'),
     validator: (value: string) => {
       if (value === nilUuid) {
         return true;
@@ -42,16 +43,16 @@ const [uuids, refreshUUIDs] = computedRefreshable(() => withDefaultOnError(() =>
     return generator(index);
   }).join('\n'), ''));
 
-const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' });
+const { copy } = useCopy({ source: uuids, text: t('tools.uuid-generator.copies') });
 </script>
 
 <template>
   <div>
-    <c-buttons-select v-model:value="version" :options="versions" label="UUID version" label-width="100px" mb-2 />
+    <c-buttons-select v-model:value="version" :options="versions" :label="t('tools.uuid-generator.version')" label-width="100px" mb-2 />
 
     <div mb-2 flex items-center>
-      <span w-100px>Quantity </span>
-      <n-input-number v-model:value="count" flex-1 :min="1" :max="50" placeholder="UUID quantity" />
+      <span w-100px>{{ t('tools.uuid-generator.quantity') }} </span>
+      <n-input-number v-model:value="count" flex-1 :min="1" :max="50" :placeholder="t('tools.uuid-generator.quantityPlaceholder')" />
     </div>
 
     <div v-if="version === 'v3' || version === 'v5'">
@@ -64,7 +65,7 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
             OID: '6ba7b812-9dad-11d1-80b4-00c04fd430c8',
             X500: '6ba7b814-9dad-11d1-80b4-00c04fd430c8',
           }"
-          label="Namespace"
+          :label="t('tools.uuid-generator.namespace')"
           label-width="100px"
           mb-2
         />
@@ -72,7 +73,7 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
       <div flex-1>
         <c-input-text
           v-model:value="v35Args.namespace"
-          placeholder="Namespace"
+          :placeholder="t('tools.uuid-generator.namespace')"
           label-width="100px"
           label-position="left"
           label=" "
@@ -83,8 +84,8 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
 
       <c-input-text
         v-model:value="v35Args.name"
-        placeholder="Name"
-        label="Name"
+        :placeholder="t('tools.uuid-generator.name')"
+        :label="t('tools.uuid-generator.name')"
         label-width="100px"
         label-position="left"
         mb-2
@@ -95,7 +96,7 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
       style="text-align: center; font-family: monospace"
       :value="uuids"
       multiline
-      placeholder="Your uuids"
+      :placeholder="t('tools.uuid-generator.uuidsPlaceholder')"
       autosize
       rows="1"
       readonly
@@ -107,10 +108,10 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
 
     <div flex justify-center gap-3>
       <c-button autofocus @click="copy()">
-        Copy
+        {{ t('tools.uuid-generator.button.copy') }}
       </c-button>
       <c-button @click="refreshUUIDs">
-        Refresh
+        {{ t('tools.uuid-generator.button.refresh') }}
       </c-button>
     </div>
   </div>