feat: added file-to-base64

pages/index.vue

@@ -1,29 +1,38 @@
 <template>
   <v-row justify="center" align="center">
-    <v-col cols="12" sm="12" md="8">
+    <v-col cols="12" sm="12" md="12">
       <h1>Yolo</h1>
 
-      <v-card v-for="(items, section) in toolRoutesSections" :key="section">
-        <v-card-title>{{ section }}</v-card-title>
-        <v-card-text>
-          <v-list>
-            <v-list-item
-              v-for="(item, i) in items"
-              :key="i"
-              :to="item.path"
-              router
-              exact
-            >
-              <v-list-item-action>
-                <v-icon>{{ item.config.icon }}</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title v-text="item.config.title" />
-              </v-list-item-content>
-            </v-list-item>
-          </v-list>
-        </v-card-text>
-      </v-card>
+      <v-row justify="center" >
+        <v-col
+          cols="12"
+          sm="12"
+          md="6"
+          v-for="(items, section) in toolRoutesSections" :key="section"
+        >
+          <v-card>
+            <v-card-title>{{ section }}</v-card-title>
+            <v-card-text>
+              <v-list>
+                <v-list-item
+                  v-for="(item, i) in items"
+                  :key="i"
+                  :to="item.path"
+                  router
+                  exact
+                >
+                  <v-list-item-action>
+                    <v-icon>{{ item.config.icon }}</v-icon>
+                  </v-list-item-action>
+                  <v-list-item-content>
+                    <v-list-item-title v-text="item.config.title"/>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
     </v-col>
   </v-row>
 </template>
@@ -37,22 +46,22 @@ export default class Index extends mixins(ToolRoutesMixin) {
 }
 </script>
 
-<style scopedlang="less">
-  .v-list{
-    background: transparent !important;
-  }
+<style scoped lang="less">
+.v-list {
+  background: transparent !important;
+}
 
-  .v-card__title{
-    background: var(--v-primary-base) !important;
-    background: linear-gradient(90deg, rgba(37,99,108,1) 0%, rgba(59,149,111,1) 60%, rgba(71,177,113,1) 100%) !important;
-    padding-left: 33px;
-  }
+.v-card__title {
+  background: var(--v-primary-base) !important;
+  background: linear-gradient(90deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(71, 177, 113, 1) 100%) !important;
+  padding-left: 33px;
+}
 
-  .v-list-item{
-    padding-left: 31px;
-  }
+.v-list-item {
+  padding-left: 31px;
+}
 
-  .v-card__text{
-    padding: 0;
-  }
+.v-card__text {
+  padding: 0;
+}
 </style>

pages/tools/Web/file-to-base64.vue

@@ -0,0 +1,105 @@
+<template>
+  <ToolWrapper :config="config()" noCard="true">
+
+    <FileUploader v-model="file"/>
+
+    <div v-if="base64 || loading" class="mt-10">
+      <v-card>
+        <v-card-title>Result</v-card-title>
+        <v-card-text>
+          <v-textarea
+            v-model="base64"
+            label="File in base 64"
+            outlined
+            readonly
+            hide-details
+            :loading="loading"
+          />
+          <div class="text-center mt-4">
+            <v-btn depressed @click="copy(base64)">
+              Copy base64
+            </v-btn>
+          </div>
+        </v-card-text>
+      </v-card>
+    </div>
+
+  </ToolWrapper>
+</template>
+
+<script lang="ts">
+import {Component, Watch} from 'nuxt-property-decorator'
+import {CopyableMixin} from '@/mixins/copyable.mixin'
+import Tool from '@/components/Tool'
+import {ToolConfig} from '@/types/ToolConfig'
+import FileUploader from '~/components/FileUploader'
+
+@Component({
+  mixins: [CopyableMixin],
+  components: {FileUploader}
+})
+export default class FileToBase64 extends Tool {
+  config(): ToolConfig {
+    return {
+      title: 'File to base64',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.',
+      icon: 'mdi-key-chain-variant',
+      keywords: ['file', 'base64']
+    }
+  }
+
+  file = null
+  loading = false
+  base64= ''
+
+  handleBase64(base64) {
+    this.base64 = base64
+    this.loading = false
+  }
+
+  @Watch('file')
+  onFile() {
+    this.loading = true
+    this.base64 = ''
+    const reader = new FileReader()
+    reader.onload = () => this.handleBase64(reader.result)
+    reader.onerror = () => this.handleBase64('[An error as occurred]')
+    reader.readAsDataURL(this.file)
+  }
+}
+
+// export default {
+//   name: 'FileToBase64',
+//   components: {FileUploader},
+//   data() {
+//     return {
+//       file: undefined,
+//       loading: false,
+//       base64: '',
+//       copyBase64() {
+//         copyToClipboard(this.base64)
+//         this.$toast.success('Copied to clipboard.')
+//       }
+//     }
+//   },
+//   watch: {
+//     file() {
+//       this.loading = true
+//       this.base64 = ''
+//       const reader = new FileReader()
+//       reader.onload = () => this.handleBase64(reader.result)
+//       reader.onerror = () => this.handleBase64('[An error as occurred]')
+//       reader.readAsDataURL(this.file)
+//     }
+//   },
+//   methods: {
+//     handleBase64(base64) {
+//       this.base64 = base64
+//       this.loading = false
+//     }
+//   }
+// }
+</script>
+
+<style scoped>
+</style>

pages/tools/crypto/cypher-uncyfer-text.vue

@@ -45,7 +45,7 @@
 <script lang="ts">
 import {Component} from 'nuxt-property-decorator'
 import {CopyableMixin} from '@/mixins/copyable.mixin'
-import Tool from '@/components/Tool'
+import Tool from '@/components/Tool.vue'
 import {ToolConfig} from '@/types/ToolConfig'
 import CryptoJS from 'crypto-js'