feat: TextCypher

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

src/App.vue

@@ -97,6 +97,7 @@
                     child: [
                         {icon: 'fa-key', text: 'Token generator', link: '/token-generator'},
                         {icon: 'fa-font', text: 'Hash text', link: '/hash'},
+                        {icon: 'fa-lock', text: 'Cypher/uncypher text', link: '/cypher'},
                     ],
                 },
                 {

src/router.js

@@ -6,6 +6,7 @@ import Hash from "./routes/tools/Hash";
 import DateConverter from "./routes/tools/DateConverter";
 import UrlEncoder from "./routes/tools/UrlEncoder";
 import FileToBase64 from "./routes/tools/FileToBase64";
+import TextCypher from "./routes/tools/TextCypher";
 
 Vue.use(VueRouter)
 
@@ -29,6 +30,10 @@ const toolsRoutes = [
     {
         path: '/file-to-base64',
         component: FileToBase64
+    },
+    {
+        path: '/cypher',
+        component: TextCypher
     }
 ]
 

src/routes/tools/TextCypher.vue

@@ -0,0 +1,95 @@
+<template>
+    <v-card class="single-card">
+        <v-card-title>Cypher text</v-card-title>
+        <v-card-text>
+            <v-row justify="center" align="center">
+                <v-col cols="12" xl="4" lg="6" md="12">
+                    <v-textarea
+                            outlined
+                            v-model="key"
+                            label="Encryption key"
+                            rows="1"
+                            @input="encrypt"
+                    ></v-textarea>
+                </v-col>
+                <v-col cols="12" xl="4" lg="6" md="12">
+                    <v-select
+                            :items="Object.keys(algorithms)"
+                            label="Algorithm"
+                            outlined
+                            v-model="algorithm"
+                            @change="encrypt"
+                    ></v-select>
+                </v-col>
+            </v-row>
+
+            <v-textarea
+                    outlined
+                    v-model="decrypted"
+                    label="Clear text"
+                    @input="encrypt"
+            ></v-textarea>
+
+            <v-textarea
+                    outlined
+                    v-model="encrypted"
+                    label="Cyphered text"
+                    @input="decrypt"
+            ></v-textarea>
+            <div class="text-center">
+                <v-btn depressed @click="copy()">Copy result</v-btn>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    import Vue from 'vue'
+    import {copyToClipboard} from "../../utils/helpers";
+
+    export default {
+        name: "TextCypher",
+        data() {
+            return {
+                decrypted: 'Lorem ipsum dolor sit amet.',
+                key: 'sup3r s3cr3t k3y',
+                encrypted: '',
+                algorithm: 'AES',
+                algorithms: {
+                    'AES': Vue.CryptoJS.AES,
+                    'TripleDES': Vue.CryptoJS.TripleDES,
+                    'Rabbit': Vue.CryptoJS.Rabbit,
+                    'RabbitLegacy': Vue.CryptoJS.RabbitLegacy,
+                    'RC4': Vue.CryptoJS.RC4
+                }
+            };
+        },
+        mounted() {
+            this.encrypt();
+        },
+        methods: {
+            copy(text) {
+                copyToClipboard(text)
+                this.$toast.success('Copied to clipboard.')
+            },
+            encrypt() {
+                try {
+                    this.encrypted = this.algorithms[this.algorithm].encrypt(this.decrypted.trim(), this.key).toString()
+                } catch (ignored) {
+                    // ignored
+                }
+            },
+            decrypt() {
+                try {
+                    this.decrypted = this.algorithms[this.algorithm].decrypt(this.encrypted.trim(), this.key).toString(Vue.CryptoJS.enc.Utf8)
+                } catch (ignored) {
+                    // ignored
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="less">
+
+</style>