feat(i18n): Encrypt / decrypt text

src/tools/encryption/encryption.vue

@@ -2,15 +2,15 @@
 import { AES, RC4, Rabbit, TripleDES, enc } from 'crypto-js';
 
 const algos = { AES, TripleDES, Rabbit, RC4 };
-
+const { t } = useI18n();
-const cypherInput = ref('Lorem ipsum dolor sit amet');
+const cypherInput = ref(t('tools.encryption.encrypt.text.default'));
 const cypherAlgo = ref<keyof typeof algos>('AES');
-const cypherSecret = ref('my secret key');
+const cypherSecret = ref(t('tools.encryption.encrypt.secretKey.default'));
 const cypherOutput = computed(() => algos[cypherAlgo.value].encrypt(cypherInput.value, cypherSecret.value).toString());
 
-const decryptInput = ref('U2FsdGVkX1/EC3+6P5dbbkZ3e1kQ5o2yzuU0NHTjmrKnLBEwreV489Kr0DIB+uBs');
+const decryptInput = ref(t('tools.encryption.decrypt.encrypted.default'));
 const decryptAlgo = ref<keyof typeof algos>('AES');
-const decryptSecret = ref('my secret key');
+const decryptSecret = ref(t('tools.encryption.decrypt.secretKey.default'));
 const decryptOutput = computed(() =>
   algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8),
 );
@@ -21,26 +21,26 @@ const decryptOutput = computed(() =>
     <div flex gap-3>
       <c-input-text
         v-model:value="cypherInput"
-        label="Your text:"
+        :label="`${t('tools.encryption.encrypt.text.label')}: `"
-        placeholder="The string to cypher"
+        :placeholder="t('tools.encryption.encrypt.text.placeholder')"
         rows="4"
         multiline raw-text monospace autosize flex-1
       />
       <div flex flex-1 flex-col gap-2>
-        <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
+        <c-input-text v-model:value="cypherSecret" :label="`${t('tools.encryption.encrypt.secretKey.label')}:`" clearable raw-text />
 
         <c-select
           v-model:value="cypherAlgo"
-          label="Encryption algorithm:"
+          :label="`${t('tools.encryption.encrypt.algorithm.label')}:`"
           :options="Object.keys(algos).map((label) => ({ label, value: label }))"
         />
       </div>
     </div>
     <c-input-text
-      label="Your text encrypted:"
+      :label="`${t('tools.encryption.encrypt.encrypted.label')}:`"
       :value="cypherOutput"
       rows="3"
-      placeholder="Your string hash"
+      :placeholder="t('tools.encryption.encrypt.encrypted.placeholder')"
       multiline monospace readonly autosize mt-5
     />
   </c-card>
@@ -48,25 +48,25 @@ const decryptOutput = computed(() =>
     <div flex gap-3>
       <c-input-text
         v-model:value="decryptInput"
-        label="Your encrypted text:"
+        :label="`${t('tools.encryption.decrypt.encrypted.label')}:`"
-        placeholder="The string to cypher"
+        :placeholder="t('tools.encryption.decrypt.encrypted.placeholder')"
         rows="4"
         multiline raw-text monospace autosize flex-1
       />
       <div flex flex-1 flex-col gap-2>
-        <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
+        <c-input-text v-model:value="decryptSecret" :label="`${t('tools.encryption.decrypt.secretKey.label')}:`" clearable raw-text />
 
         <c-select
           v-model:value="decryptAlgo"
-          label="Encryption algorithm:"
+          :label="`${t('tools.encryption.decrypt.algorithm.label')}:`"
           :options="Object.keys(algos).map((label) => ({ label, value: label }))"
         />
       </div>
     </div>
     <c-input-text
-      label="Your decrypted text:"
+      :label="`${t('tools.encryption.decrypt.text.label')}:`"
       :value="decryptOutput"
-      placeholder="Your string hash"
+      :placeholder="t('tools.encryption.decrypt.text.placeholder')"
       rows="3"
       multiline monospace readonly autosize mt-5
     />

src/tools/encryption/index.ts

@@ -1,10 +1,11 @@
 import { Lock } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Encrypt / decrypt text',
+  name: translate('tools.encryption.title'),
   path: '/encryption',
-  description: 'Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.',
+  description: translate('tools.encryption.description'),
   keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
   component: () => import('./encryption.vue'),
   icon: Lock,

src/tools/encryption/locales/en.yml

@@ -0,0 +1,37 @@
+tools:
+  encryption:
+    title: 'Encrypt / decrypt text'
+    description: 'Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.'
+
+    encrypt:
+      text:
+        label: 'Your text'
+        placeholder: 'The string to cypher'
+        default: 'Lorem ipsum dolor sit amet'
+      secretKey:
+        label: 'Your secret key'
+        default: 'my secret key'
+      algorithm:
+        label: 'Encryption algorithm'
+      encrypted:
+        label: 'Your text encrypted'
+        placeholder: 'Your string hash'
+    decrypt:
+      encrypted:
+        label: 'Your encrypted text'
+        placeholder: 'The string to cypher'
+        default: 'U2FsdGVkX1/EC3+6P5dbbkZ3e1kQ5o2yzuU0NHTjmrKnLBEwreV489Kr0DIB+uBs'
+      secretKey:
+        label: 'Your secret key'
+        default: 'my secret key'
+      algorithm:
+        label: 'Encryption algorithm'
+      text:
+        label: 'Your decrypted text'
+        placeholder: 'Your string hash'
+
+
+
+
+
+