From 4df3af488845f1571758fe89688f5ee5cde62f6a Mon Sep 17 00:00:00 2001
From: Evo Stamatov <aviolito@gmail.com>
Date: Wed, 11 May 2022 10:13:15 +1000
Subject: [PATCH] compute all hashes at the same time instead of using a select

---
 src/tools/hash-text/hash-text.vue | 43 +++++++++++--------------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue
index 10f22b79..2b44b54d 100644
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -2,34 +2,21 @@
   <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 list" :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="hashedText(algo, clearText)" readonly />
+        </n-input-group>
+      </div>
     </n-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useCopy } from '@/composable/copy';
+import InputCopyable from '../../components/InputCopyable.vue';
 import { ref, computed } from 'vue';
 import { MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3, RIPEMD160 } from 'crypto-js';
 
@@ -44,11 +31,11 @@ const algos = {
   RIPEMD160,
 } as const;
 
-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());
+type Algo = keyof typeof algos;
+const list = Object.keys(algos) as Algo[];
 
-const { copy } = useCopy({ source: hashedText, text: 'Hash copied to the clipboard' });
+const clearText = ref(
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus metus blandit dolor lacus natoque ad fusce aliquam velit.'
+);
+const hashedText = (algo: Algo, value: string) => (value ? algos[algo](value).toString() : '');
 </script>