fix(encryption): alert on decryption error (#711)

* update(c-alert): Add variant 'error'

* fix(encryption): Alert decryption error (#652)

* feat(c-alert): added title

* refactor(composable): mutualized computedCatch

---------

Co-authored-by: code2933 <code2933@outlook.com>

1 files changed, 9 insertions, 3 deletions

diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index 4a348f8..2ad47b5 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AES, RC4, Rabbit, TripleDES, enc } from 'crypto-js';
+import { computedCatch } from '@/composable/computed/catchedComputed';
 
 const algos = { AES, TripleDES, Rabbit, RC4 };
 
@@ -11,9 +12,10 @@ const cypherOutput = computed(() => algos[cypherAlgo.value].encrypt(cypherInput.
 const decryptInput = ref('U2FsdGVkX1/EC3+6P5dbbkZ3e1kQ5o2yzuU0NHTjmrKnLBEwreV489Kr0DIB+uBs');
 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 [decryptOutput, decryptError] = computedCatch(() => algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8), {
+  defaultValue: '',
+  defaultErrorMessage: 'Unable to decrypt your text',
+});
 </script>
 
 <template>
@@ -63,7 +65,11 @@ const decryptOutput = computed(() =>
         />
       </div>
     </div>
+    <c-alert v-if="decryptError" type="error" mt-12 title="Error while decrypting">
+      {{ decryptError }}
+    </c-alert>
     <c-input-text
+      v-else
       label="Your decrypted text:"
       :value="decryptOutput"
       placeholder="Your string hash"