fix(aes): missing error message

sunnydanu · Nov 2, 2024 · 5744d6a · 5744d6a
1 parent 5fe8d19
commit 5744d6a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 98 deletions.
diff --git 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
@@ -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>