compute all hashes at the same time instead of using a select
This commit is contained in:
		
							parent
							
								
									34bc6a57a7
								
							
						
					
					
						commit
						4df3af4888
					
				| @ -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> | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user