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

This commit is contained in:
Evo Stamatov 2022-05-11 10:13:15 +10:00
parent 34bc6a57a7
commit 4df3af4888

View file

@ -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>