From a4aad3240187577409d229cf612d1457b62aa7f6 Mon Sep 17 00:00:00 2001
From: LinkinStars <linkinstar@foxmail.com>
Date: Thu, 20 Apr 2023 12:30:41 +0800
Subject: [PATCH 1/2] feat(aes): specify the initialization vector in AES
 encryption

---
 src/tools/encryption/encryption.vue | 44 +++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index 84c3ce88..11ec2e63 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -19,6 +19,13 @@
             :options="Object.keys(algos).map((label) => ({ label, value: label }))"
           />
         </n-form-item>
+        <n-form-item
+          v-if="cypherAlgo === 'AES' || cypherAlgo === 'TripleDES'"
+          label="Initialization vector:"
+          :show-feedback="false"
+        >
+          <n-input v-model:value="cypherInitializationVector" />
+        </n-form-item>
       </n-space>
     </n-space>
     <br />
@@ -56,6 +63,13 @@
             :options="Object.keys(algos).map((label) => ({ label, value: label }))"
           />
         </n-form-item>
+        <n-form-item
+          v-if="decryptAlgo === 'AES' || decryptAlgo === 'TripleDES'"
+          label="Initialization vector:"
+          :show-feedback="false"
+        >
+          <n-input v-model:value="decryptInitializationVector" />
+        </n-form-item>
       </n-space>
     </n-space>
     <br />
@@ -81,15 +95,29 @@ import { AES, TripleDES, Rabbit, RC4, enc } from 'crypto-js';
 
 const algos = { AES, TripleDES, Rabbit, RC4 };
 
-const cypherInput = ref('Lorem ipsum dolor sit amet');
+const cypherInput = ref('Hello World!');
 const cypherAlgo = ref<keyof typeof algos>('AES');
-const cypherSecret = ref('my secret key');
-const cypherOutput = computed(() => algos[cypherAlgo.value].encrypt(cypherInput.value, cypherSecret.value).toString());
+const cypherSecret = ref('16bit secret key');
+const cypherInitializationVector = ref('1234567812345678');
+const cypherOutput = computed(() => {
+  var cfg = {};
+  if (cypherAlgo.value === 'AES' || cypherAlgo.value === 'TripleDES') {
+    cfg = { iv: enc.Utf8.parse(cypherInitializationVector.value) };
+  }
+  return algos[cypherAlgo.value].encrypt(cypherInput.value, enc.Utf8.parse(cypherSecret.value), cfg).toString();
+});
 
-const decryptInput = ref('U2FsdGVkX1/EC3+6P5dbbkZ3e1kQ5o2yzuU0NHTjmrKnLBEwreV489Kr0DIB+uBs');
+const decryptInput = ref('DX+W8WBHbt08XoJNV8bcoQ==');
 const decryptAlgo = ref<keyof typeof algos>('AES');
-const decryptSecret = ref('my secret key');
-const decryptOutput = computed(() =>
-  algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8),
-);
+const decryptSecret = ref('16bit secret key');
+const decryptInitializationVector = ref('1234567812345678');
+const decryptOutput = computed(() => {
+  var cfg = {};
+  if (decryptAlgo.value === 'AES' || decryptAlgo.value === 'TripleDES') {
+    cfg = { iv: enc.Utf8.parse(decryptInitializationVector.value) };
+  }
+  return algos[decryptAlgo.value]
+    .decrypt(decryptInput.value, enc.Utf8.parse(decryptSecret.value), cfg)
+    .toString(enc.Utf8);
+});
 </script>

From 5744d6ae21aa58c652ac6465922351662fa53114 Mon Sep 17 00:00:00 2001
From: sunnydanu <mail@sunnydanu.com>
Date: Sat, 2 Nov 2024 17:40:06 +0530
Subject: [PATCH 2/2] fix(aes): missing error message

---
 components.d.ts                     |   1 +
 src/tools/encryption/encryption.vue | 127 +++++++---------------------
 2 files changed, 30 insertions(+), 98 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 1ad1112c..8da37178 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -176,6 +176,7 @@ declare module '@vue/runtime-core' {
     NMenu: typeof import('naive-ui')['NMenu']
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
     NStatistic: typeof import('naive-ui')['NStatistic']
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index 25f6aece..5a587ae7 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,95 +1,5 @@
-<template>
-  <n-card title="Encrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your text:" :show-feedback="false">
-        <n-input
-          v-model:value="cypherInput"
-          type="textarea"
-          placeholder="The string to cypher"
-          :autosize="{ minRows: 4 }"
-        />
-      </n-form-item>
-      <n-space vertical>
-        <n-form-item label="Your secret key:" :show-feedback="false">
-          <n-input v-model:value="cypherSecret" />
-        </n-form-item>
-        <n-form-item label="Encryption algorithm:" :show-feedback="false">
-          <n-select
-            v-model:value="cypherAlgo"
-            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
-        <n-form-item
-          v-if="cypherAlgo === 'AES' || cypherAlgo === 'TripleDES'"
-          label="Initialization vector:"
-          :show-feedback="false"
-        >
-          <n-input v-model:value="cypherInitializationVector" />
-        </n-form-item>
-      </n-space>
-    </n-space>
-    <br />
-    <n-form-item label="Your text encrypted:" :show-feedback="false">
-      <n-input
-        :value="cypherOutput"
-        type="textarea"
-        placeholder="Your string hash"
-        :autosize="{ minRows: 2 }"
-        readonly
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-    </n-form-item>
-  </n-card>
-  <n-card title="Decrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your encrypted text:" :show-feedback="false">
-        <n-input
-          v-model:value="decryptInput"
-          type="textarea"
-          placeholder="The string to cypher"
-          :autosize="{ minRows: 4 }"
-        />
-      </n-form-item>
-      <n-space vertical>
-        <n-form-item label="Your secret key:" :show-feedback="false">
-          <n-input v-model:value="decryptSecret" />
-        </n-form-item>
-        <n-form-item label="Encryption algorithm:" :show-feedback="false">
-          <n-select
-            v-model:value="decryptAlgo"
-            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
-        <n-form-item
-          v-if="decryptAlgo === 'AES' || decryptAlgo === 'TripleDES'"
-          label="Initialization vector:"
-          :show-feedback="false"
-        >
-          <n-input v-model:value="decryptInitializationVector" />
-        </n-form-item>
-      </n-space>
-    </n-space>
-    <br />
-    <n-form-item label="Your decrypted text:" :show-feedback="false">
-      <n-input
-        :value="decryptOutput"
-        type="textarea"
-        placeholder="Your string hash"
-        :autosize="{ minRows: 2 }"
-        readonly
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-    </n-form-item>
-  </n-card>
-</template>
-
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import { AES, RC4, Rabbit, TripleDES, enc } from 'crypto-js';
 import { computedCatch } from '@/composable/computed/catchedComputed';
 
@@ -99,8 +9,10 @@ const cypherInput = ref('Hello World!');
 const cypherAlgo = ref<keyof typeof algos>('AES');
 const cypherSecret = ref('16bit secret key');
 const cypherInitializationVector = ref('1234567812345678');
+
 const cypherOutput = computed(() => {
-  var cfg = {};
+  let cfg = {};
+
   if (cypherAlgo.value === 'AES' || cypherAlgo.value === 'TripleDES') {
     cfg = { iv: enc.Utf8.parse(cypherInitializationVector.value) };
   }
@@ -111,14 +23,17 @@ const decryptInput = ref('DX+W8WBHbt08XoJNV8bcoQ==');
 const decryptAlgo = ref<keyof typeof algos>('AES');
 const decryptSecret = ref('16bit secret key');
 const decryptInitializationVector = ref('1234567812345678');
-const decryptOutput = computed(() => {
-  var cfg = {};
+const [decryptOutput, decryptError] = computedCatch(() => {
+  let cfg = {};
   if (decryptAlgo.value === 'AES' || decryptAlgo.value === 'TripleDES') {
     cfg = { iv: enc.Utf8.parse(decryptInitializationVector.value) };
   }
   return algos[decryptAlgo.value]
     .decrypt(decryptInput.value, enc.Utf8.parse(decryptSecret.value), cfg)
     .toString(enc.Utf8);
+}, {
+  defaultValue: '',
+  defaultErrorMessage: 'Unable to decrypt your text',
 });
 </script>
 
@@ -130,7 +45,11 @@ const decryptOutput = computed(() => {
         label="Your text:"
         placeholder="The string to cypher"
         rows="4"
-        multiline raw-text monospace autosize flex-1
+        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 />
@@ -147,7 +66,11 @@ const decryptOutput = computed(() => {
       :value="cypherOutput"
       rows="3"
       placeholder="Your string hash"
-      multiline monospace readonly autosize mt-5
+      multiline
+      monospace
+      readonly
+      autosize
+      mt-5
     />
   </c-card>
   <c-card title="Decrypt">
@@ -157,7 +80,11 @@ const decryptOutput = computed(() => {
         label="Your encrypted text:"
         placeholder="The string to cypher"
         rows="4"
-        multiline raw-text monospace autosize flex-1
+        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 />
@@ -178,7 +105,11 @@ const decryptOutput = computed(() => {
       :value="decryptOutput"
       placeholder="Your string hash"
       rows="3"
-      multiline monospace readonly autosize mt-5
+      multiline
+      monospace
+      readonly
+      autosize
+      mt-5
     />
   </c-card>
 </template>