feat: base64 generator

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

CHANGELOG.md

@@ -5,6 +5,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Next
 - [feat] [BIP39 generator](https://it-tools.tech/bip39-generator)
+- [feat] [Base 64 converter](https://it-tools.tech/base64-string-converter)
 
 ## 1.5.2
 - [feat] [humans.txt](https://it-tools.tech/humans.txt)

src/router.js

@@ -89,6 +89,12 @@ const toolsComponents = [
                 path: '/file-to-base64',
                 component: () => import('./routes/tools/FileToBase64')
             },
+            {
+                icon: 'fa-file-alt',
+                text: 'Base64 string converter',
+                path: '/base64-string-converter',
+                component: () => import('./routes/tools/StringToBase64')
+            }
         ],
     },
     {

src/routes/tools/StringToBase64.vue

@@ -0,0 +1,66 @@
+<template>
+    <v-card class="single-card">
+        <v-card-title>Base64 string converter</v-card-title>
+        <v-card-text>
+            <v-textarea
+                    outlined
+                    v-model="clear"
+                    label="Clear text"
+            ></v-textarea>
+
+            <v-textarea
+                    outlined
+                    v-model="base64"
+                    label="Base64 text"
+                    :rules="rules.base64"
+                    ref="base64"
+            ></v-textarea>
+            <div class="text-center">
+                <v-btn class="mr-1" depressed @click="copy(clear)">Copy clear</v-btn>
+                <v-btn class="ml-1" depressed @click="copy(base64)">Copy base64</v-btn>
+            </div>
+        </v-card-text>
+    </v-card>
+
+</template>
+
+<script>
+    import {copyable} from "../../mixins/copyable.mixin";
+
+    export default {
+        name: "StringToBase64",
+        mixins: [copyable],
+        data() {
+            return {
+                clear: 'Lorem ipsum dolor sit amet.',
+                rules:{
+                    base64: [
+                        v => {
+                            try{
+                                return btoa(atob(v)) === v || 'Input is not base64.'
+                            }catch (e) {
+                                return 'Input is not base64.'
+                            }
+                        }
+                    ]
+                }
+            }
+        },
+        computed: {
+            base64: {
+                get(){
+                    return btoa(this.clear)
+                },
+                set(value){
+                    if(this.$refs.base64.validate()){
+                        this.clear = atob(value)
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>