feat(tool): encryption

1 files changed, 102 insertions, 0 deletions

diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
new file mode 100644
index 0000000..5f39b4a
--- /dev/null
+++ b/src/tools/encryption/encryption.vue
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <n-card title="Encrypt">
+            <n-space item-style="flex: 1 1 0">
+                <n-form-item label="Your text:" :show-feedback="false">
+                    <n-input
+                        v-model:value="cypherInput"
+                        type="textarea"
+                        placeholder="The string to cypher"
+                        :autosize="{ minRows: 4 }"
+                    />
+                </n-form-item>
+                <n-space vertical>
+                    <n-form-item label="Your secret key:" :show-feedback="false">
+                        <n-input v-model:value="cypherSecret" />
+                    </n-form-item>
+                    <n-form-item label="Encryption algorithm:" :show-feedback="false">
+                        <n-select
+                            v-model:value="cypherAlgo"
+                            :options="Object.keys(algos).map(label => ({ label, value: label }))"
+                        />
+                    </n-form-item>
+                </n-space>
+            </n-space>
+            <br />
+            <n-form-item label="Yout text encrypted:" :show-feedback="false">
+                <n-input
+                    :value="cypherOutput"
+                    type="textarea"
+                    placeholder="Your string hash"
+                    :autosize="{ minRows: 2 }"
+                    readonly
+                    autocomplete="off"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                />
+            </n-form-item>
+        </n-card>
+        <br />
+        <n-card title="Decrypt">
+            <n-space item-style="flex: 1 1 0">
+                <n-form-item label="Your encrypted text:" :show-feedback="false">
+                    <n-input
+                        v-model:value="decryptInput"
+                        type="textarea"
+                        placeholder="The string to cypher"
+                        :autosize="{ minRows: 4 }"
+                    />
+                </n-form-item>
+                <n-space vertical>
+                    <n-form-item label="Your secret key:" :show-feedback="false">
+                        <n-input v-model:value="decryptSecret" />
+                    </n-form-item>
+                    <n-form-item label="Encryption algorithm:" :show-feedback="false">
+                        <n-select
+                            v-model:value="decryptAlgo"
+                            :options="Object.keys(algos).map(label => ({ label, value: label }))"
+                        />
+                    </n-form-item>
+                </n-space>
+            </n-space>
+            <br />
+            <n-form-item label="Yout decrypted text:" :show-feedback="false">
+                <n-input
+                    :value="decryptOutput"
+                    type="textarea"
+                    placeholder="Your string hash"
+                    :autosize="{ minRows: 2 }"
+                    readonly
+                    autocomplete="off"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                />
+            </n-form-item>
+        </n-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { AES, TripleDES, Rabbit, RC4, enc } from 'crypto-js'
+
+const algos = { AES, TripleDES, Rabbit, RC4 }
+
+const cypherInput = ref('Lorem ipsum dolor sit amet')
+const cypherAlgo = ref<keyof typeof algos>('AES')
+const cypherSecret = ref('my secret key')
+const cypherOutput = computed(() => algos[cypherAlgo.value].encrypt(cypherInput.value, cypherSecret.value).toString())
+
+
+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))
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file