feat: first tool base

pages/crypto/TokenGenerator.vue

@@ -0,0 +1,79 @@
+<template>
+  <ToolWrapper :config="config">
+    <v-row no-gutters>
+      <v-col lg="6" md="12">
+        <v-switch v-model="withLowercase" label="Lowercase (abc...)" />
+        <v-switch v-model="withUppercase" label="Uppercase (ABC...)" />
+      </v-col>
+      <v-col lg="6" md="12">
+        <v-switch v-model="withNumbers" label="Numbers (123...)" />
+        <v-switch v-model="withSpecials" label="Specials (#]-...)" />
+      </v-col>
+    </v-row>
+
+    <v-slider v-model="length" :label="`Length (${length})`" min="1" max="256" />
+
+    <v-textarea v-model="token" outlined />
+
+    <div class="text-center">
+      <v-btn depressed class="mr-4" @click="refreshToken()">
+        Refresh
+      </v-btn>
+      <!--      <v-btn @click="copyToken()" depressed>Copy token</v-btn>-->
+    </div>
+  </ToolWrapper>
+</template>
+
+<script lang="ts">
+import {Component} from 'nuxt-property-decorator'
+import Tool, {ToolConfig} from '~/components/Tool.vue'
+
+const shuffle = (s: string) => s.split('').sort(() => 0.5 - Math.random()).join('')
+const lowercase = 'abcdefghijklmopqrstuvwxyz'
+const uppercase = 'ABCDEFGHIJKLMOPQRSTUVWXYZ'
+const numbers = '0123456789'
+const specials = '.,;:!?./-"\'#{([-|\\@)]=}*+'
+
+@Component
+export default class TokenGenerator extends Tool {
+  config: ToolConfig = {
+    title: 'Token generator',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.'
+  }
+
+  withNumbers = true;
+  withLowercase = true;
+  withUppercase = true;
+  withSpecials = false;
+  length = 64;
+  refreshBool = true;
+
+  refreshToken() {
+    this.refreshBool = !this.refreshBool
+  }
+
+  get token() {
+    if (this.refreshBool) { (() => {})() } // To force recomputation
+
+    let result = ''
+    if (this.withLowercase) {
+      result += lowercase
+    }
+    if (this.withUppercase) {
+      result += uppercase
+    }
+    if (this.withNumbers) {
+      result += numbers
+    }
+    if (this.withSpecials) {
+      result += specials
+    }
+
+    return shuffle(result.repeat(this.length)).substring(0, this.length)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -1,78 +1,7 @@
 <template>
   <v-row justify="center" align="center">
-    <v-col cols="12" sm="8" md="6">
-      <div class="text-center"/>
-      <v-card>
-        <v-card-title class="headline">
-          Welcome to the Vuetify + Nuxt.js template
-        </v-card-title>
-        <v-card-text>
-
-          <p>
-            Vuetify is a progressive Material Design component framework for
-            Vue.js. It was designed to empower developers to create amazing
-            applications.
-          </p>
-          <p>
-            For more information on Vuetify, check out the
-            <a
-              href="https://vuetifyjs.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              documentation </a>.
-          </p>
-          <p>
-            If you have questions, please join the official
-            <a
-              href="https://chat.vuetifyjs.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              title="chat"
-            >
-              discord </a>.
-          </p>
-          <p>
-            Find a bug? Report it on the github
-            <a
-              href="https://github.com/vuetifyjs/vuetify/issues"
-              target="_blank"
-              rel="noopener noreferrer"
-              title="contribute"
-            >
-              issue board </a>.
-          </p>
-          <p>
-            Thank you for developing with Vuetify and I look forward to bringing
-            more exciting features in the future.
-          </p>
-          <div class="text-xs-right">
-            <em><small>&mdash; John Leider</small></em>
-          </div>
-          <hr class="my-3">
-          <a
-            href="https://nuxtjs.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Nuxt Documentation
-          </a>
-          <br>
-          <a
-            href="https://github.com/nuxt/nuxt.js"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Nuxt GitHub
-          </a>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer/>
-          <v-btn color="primary" nuxt to="/inspire">
-            Continue
-          </v-btn>
-        </v-card-actions>
-      </v-card>
+    <v-col cols="12" sm="12" md="8">
+      <h1>Yolo</h1>
     </v-col>
   </v-row>
 </template>

pages/inspire.vue

@@ -1,15 +0,0 @@
-<template>
-  <v-row>
-    <v-col class="text-center">
-      <img src="/v.png" alt="Vuetify.js" class="mb-5">
-      <blockquote class="blockquote">
-        &#8220;First, solve the problem. Then, write the code.&#8221;
-        <footer>
-          <small>
-            <em>&mdash;John Johnson</em>
-          </small>
-        </footer>
-      </blockquote>
-    </v-col>
-  </v-row>
-</template>