From e9cc499ed87ba926086323223c7eca4f6658b3f0 Mon Sep 17 00:00:00 2001
From: Evo Stamatov <aviolito@gmail.com>
Date: Thu, 12 May 2022 00:29:55 +1000
Subject: [PATCH] feat(hash-text): compute all hashes at the same time (#242)

* compute all hashes at the same time instead of using a select

* add prettier config

* Revert "add prettier config"

This reverts commit fd374ff6fdd1c91500791e18c5cce0414b08b1c9.

Prettier config is in `.eslintrc.cjs`. Should run the lint script or
should use ESLint's VS Code extension.

* fix: address requested changes

 - rename hashedText to hashText since it's a function and no longer a variable
 - rename to list to algoNames
 - rename to type to AlgoName

removed unused import

* revert back to allow empty value to be hashed; lint
---
 src/tools/hash-text/hash-text.vue | 41 +++++++++++--------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue
index 10f22b79..9d9332fb 100644
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -2,35 +2,22 @@
   <div>
     <n-card>
       <n-input v-model:value="clearText" type="textarea" placeholder="Your string..." :autosize="{ minRows: 3 }" />
-      <br />
-      <br />
-      <n-select v-model:value="algo" :options="Object.keys(algos).map((label) => ({ label, value: label }))" />
 
-      <br />
-      <n-input
-        style="text-align: center"
-        :value="hashedText"
-        type="textarea"
-        placeholder="Your string hash"
-        :autosize="{ minRows: 1 }"
-        readonly
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-      <br />
-      <br />
-      <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-      </n-space>
+      <n-divider />
+
+      <div v-for="algo in algoNames" :key="algo" style="margin: 5px 0">
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px"> {{ algo }} </n-input-group-label>
+          <input-copyable :value="hashText(algo, clearText)" readonly />
+        </n-input-group>
+      </div>
     </n-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useCopy } from '@/composable/copy';
-import { ref, computed } from 'vue';
+import InputCopyable from '../../components/InputCopyable.vue';
+import { ref } from 'vue';
 import { MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3, RIPEMD160 } from 'crypto-js';
 
 const algos = {
@@ -44,11 +31,11 @@ const algos = {
   RIPEMD160,
 } as const;
 
+type AlgoNames = keyof typeof algos;
+const algoNames = Object.keys(algos) as AlgoNames[];
+
 const clearText = ref(
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus metus blandit dolor lacus natoque ad fusce aliquam velit.',
 );
-const algo = ref<keyof typeof algos>('SHA256');
-const hashedText = computed(() => algos[algo.value](clearText.value).toString());
-
-const { copy } = useCopy({ source: hashedText, text: 'Hash copied to the clipboard' });
+const hashText = (algo: AlgoNames, value: string) => algos[algo](value).toString();
 </script>