feat: TokenGenerator + Hash

package-lock.json

@@ -3195,6 +3195,17 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -3640,6 +3651,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "crypto-js": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
+      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5246,6 +5262,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -6665,6 +6686,12 @@
         }
       }
     },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
+      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -10050,6 +10077,15 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -10386,6 +10422,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
+    },
     "run-async": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
@@ -10440,6 +10481,36 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.26.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.3.tgz",
+      "integrity": "sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -10660,6 +10731,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -10681,6 +10761,17 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz",
+      "integrity": "sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -12013,6 +12104,37 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-async-computed": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.8.2.tgz",
+      "integrity": "sha512-If5roOhp/x0WWd0TWRD77YsuFoiIw3MbkcRlIB/FE3TqQCPje52eQp5CV5NN/7B0VAyPuGX5JQa+rc9AOcGAYw=="
+    },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz",
+      "integrity": "sha512-jtxcidjLT5f1H9QLYKLFjo/ZG42ud4pI9bK3WNO5DXyhiMDMTwSZ7b3NcJVRH7tKYbv5/ty0VPdDGlf4w22AMA==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.2.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.2.1.tgz",
+          "integrity": "sha512-aHhm1pD02jXXkyIpq25qBZjr3CQgg8KST8uX0OWXch3xE6jw+1bfbWnCjzMwojsTquroUmKFHNzU6x26mEiRxw==",
+          "dev": true
+        }
+      }
+    },
+    "vue-cryptojs": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vue-cryptojs/-/vue-cryptojs-2.1.4.tgz",
+      "integrity": "sha512-AmJ5HAbvW81X4DLzq5Q3YlFbFIr1vSAmjXcr5SxyJCJeoH/2R+HHuU6D21pI2pAv4LCqfRpakWMWs6Cl8XvtAA==",
+      "requires": {
+        "crypto-js": "^3.3.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
@@ -12105,6 +12227,25 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.2.20",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.20.tgz",
+      "integrity": "sha512-tiij3ammBiG7QrdwRBJxW917AyDLcMekRtLosdyVshDKHA5CpKrru8Ljn1gAmeUyhYZyUw4gz3XbrrIJ++TP7w=="
+    },
+    "vuetify-loader": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.4.3.tgz",
+      "integrity": "sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
+    "vuetify-toast-snackbar": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/vuetify-toast-snackbar/-/vuetify-toast-snackbar-0.6.1.tgz",
+      "integrity": "sha512-F2bLPMXiw7qQgX68adSu0zQrMTKODN5JAzCP8AP/HGhz/Bz1z24QbvYcX0fyHnG/yP6PAPkpMCXsLQSq6HV0Ag=="
+    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",

package.json

@@ -9,9 +9,15 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "font-awesome": "^4.7.0",
     "register-service-worker": "^1.7.1",
+    "roboto-fontface": "*",
     "vue": "^2.6.11",
-    "vue-router": "^3.1.6"
+    "vue-async-computed": "^3.8.2",
+    "vue-cryptojs": "^2.1.4",
+    "vue-router": "^3.1.6",
+    "vuetify": "^2.2.11",
+    "vuetify-toast-snackbar": "^0.6.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
@@ -25,7 +31,11 @@
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "lint-staged": "^9.5.0",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "~2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

src/App.vue

@@ -1,32 +1,172 @@
 <template>
-  <div id="app">
+    <v-app id="inspire">
-    <div id="nav">
+        <v-navigation-drawer v-model="drawer" app clipped>
-      <router-link to="/">Home</router-link> |
+            <v-list dense>
-      <router-link to="/about">About</router-link>
+
-    </div>
+                <div v-for="section in items" :key="section.title">
-    <router-view/>
+                    <v-subheader class="mt-4 pl-4">{{section.title}}</v-subheader>
-  </div>
+
+                    <v-list-item v-for="item in section.child" :key="item.text" :to="item.link">
+                        <v-list-item-action>
+                            <v-icon>{{ item.icon }}</v-icon>
+                        </v-list-item-action>
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                {{ item.text }}
+                            </v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </div>
+
+            </v-list>
+
+            <template v-slot:append>
+                <v-divider></v-divider>
+
+                <div class="pa-5">
+                    <div>
+                        IT-Tools <a v-bind:href="'https://github.com/CorentinTh/it-tools/tree/'+appVersion"
+                                    target="_blank">{{appVersion}}</a>
+
+                    </div>
+                    <div>&copy; {{new Date().getFullYear()}} <a href="//corentin-thomasset.fr" class="footer-link">Corentin
+                        Thomasset</a></div>
+
+                </div>
+
+
+            </template>
+        </v-navigation-drawer>
+
+        <v-app-bar app clipped-left color="green">
+            <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
+            <v-toolbar-title class="mr-12 align-center">
+                <router-link to="/" class="title">IT Tools</router-link>
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+
+            <div class="right-links">
+                <router-link to="/about">About</router-link>
+
+                <a href="https://github.com/CorentinTh/it-tools" target="_blank" class="navbar-link">
+                    <v-icon>fa-github</v-icon>
+                </a>
+            </div>
+        </v-app-bar>
+
+        <v-content>
+            <v-container class="fill-height">
+                <v-row justify="center" align="center">
+                    <router-view></router-view>
+                </v-row>
+            </v-container>
+        </v-content>
+
+<!--        <v-footer app>-->
+<!--            <span>&copy; {{new Date().getFullYear()}} <a href="//corentin-thomasset.fr" class="footer-link">Corentin Thomasset</a></span>-->
+<!--            <span>A bug ? A feature request ? Stuff happens <a href="https://github.com/CorentinTh/it-tools/issues"-->
+<!--                                                               target="_blank" class="footer-link">here</a>.</span>-->
+<!--        </v-footer>-->
+    </v-app>
 </template>
 
-<style lang="less">
+<script>
-#app {
+    export default {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+        props: {
-  -webkit-font-smoothing: antialiased;
+            source: String,
-  -moz-osx-font-smoothing: grayscale;
+        },
-  text-align: center;
+        data: () => ({
-  color: #2c3e50;
+            appVersion: 'v' + process.env.APPLICATION_VERSION,
-}
+            drawer: null,
+            items: [
 
-#nav {
+                {
-  padding: 30px;
+                    title: 'Crypto',
+                    child: [
+                        {icon: 'fa-key', text: 'Token generator', link: '/token-generator'},
+                        {icon: 'fa-key', text: 'Hash text', link: '/hash'},
+                    ]
+                }
 
-  a {
+            ],
-    font-weight: bold;
+        }),
-    color: #2c3e50;
+        created() {
-
+            this.$vuetify.theme.dark = true
-    &.router-link-exact-active {
+        },
-      color: #42b983;
     }
-  }
+</script>
-}
+
-</style>
+<style lang="less">
+
+/*    footer {*/
+/*        display: flex;*/
+/*        flex-direction: row;*/
+/*        justify-content: space-between;*/
+/*        color: rgba(255, 255, 255, 0.52) !important;*/
+
+/*        .footer-link {*/
+/*            text-decoration: none;*/
+/*            color: rgba(255, 255, 255, 0.52) !important;*/
+/*            border-bottom: 1px dashed;*/
+
+/*            &:hover {*/
+/*                color: #4CAF50 !important;*/
+/*                border-bottom: 1px solid;*/
+/*            }*/
+/*        }*/
+/*    }*/
+
+    .title {
+        text-decoration: none;
+        color: #fff !important;
+
+        &:hover {
+            border-bottom: 1px dashed;
+        }
+    }
+
+    .right-links {
+        align-items: center;
+        display: flex;
+
+        a:not(:last-child) {
+            margin-right: 20px;
+            text-decoration: none;
+            color: #fff;
+
+            &:hover {
+                border-bottom: 1px dashed;
+            }
+        }
+
+
+        .navbar-link {
+            text-decoration: none;
+
+            .v-icon {
+                font-size: 37px !important;
+
+                &:hover {
+                    color: #363636;
+                }
+            }
+        }
+    }
+
+    .v-navigation-drawer__append {
+        text-align: center;
+        color: rgba(255, 255, 255, 0.52) !important;
+
+        a {
+            border-bottom: 1px dashed;
+            text-decoration: none;
+            color: rgba(255, 255, 255, 0.52) !important;
+
+            &:hover {
+                color: #4CAF50 !important;
+                border-bottom: 1px solid;
+            }
+        }
+
+    }
+</style>

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

src/components/Hash.vue

@@ -0,0 +1,73 @@
+<template>
+    <v-card>
+        <v-card-title>Hash text</v-card-title>
+        <v-card-text>
+            <v-textarea
+                    outlined
+                    v-model="inputText"
+                    label="Text to hash"
+            ></v-textarea>
+
+            <v-select
+                    :items="Object.keys(algorithms)"
+                    label="Algorithm"
+                    outlined
+                    v-model="algorithm"
+            ></v-select>
+
+            <v-textarea
+                    outlined
+                    readonly
+                    v-model="hashed"
+                    label="Hashed text"
+            ></v-textarea>
+            <div class="text-center">
+                <v-btn depressed @click="copyHash()">Copy hash</v-btn>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    import Vue from 'vue'
+    import {copyToClipboard} from "../utils/helpers";
+
+    export default {
+        name: "Hash",
+        data() {
+            return {
+                inputText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
+                algorithm: 'SHA256',
+                algorithms:{
+                    'MD5': Vue.CryptoJS.MD5,
+                    'SHA1': Vue.CryptoJS.SHA1,
+                    'SHA256': Vue.CryptoJS.SHA256,
+                    'SHA224': Vue.CryptoJS.SHA224,
+                    'SHA512': Vue.CryptoJS.SHA512,
+                    'SHA384': Vue.CryptoJS.SHA384,
+                    'SHA3': Vue.CryptoJS.SHA3,
+                    'RIPEMD160': Vue.CryptoJS.RIPEMD160
+                },
+                copyHash(){
+                    copyToClipboard(this.hashed)
+                    this.$toast.success('Copied to clipboard.')
+                }
+            }
+        },
+        computed: {
+            hashed() {
+                if(!this.algorithms[this.algorithm]){
+                    this.$toast.error('Invalid algorithm.')
+                    return '';
+                }else{
+                    return this.algorithms[this.algorithm](this.inputText).toString();
+                }
+            }
+        }
+    }
+</script>
+
+<style>
+
+</style>
+

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/TokenGenerator.vue

@@ -0,0 +1,90 @@
+<template>
+    <v-card>
+        <v-card-title>Token generator</v-card-title>
+
+        <v-card-text>
+            <v-row no-gutters>
+                <v-col lg="6" md="12">
+                    <v-switch v-model="withLowercase" label="Lowercase (abc...)" color="#4CAF50"/>
+                    <v-switch v-model="withUppercase" label="Uppercase (ABC...)" color="#4CAF50"/>
+
+                </v-col>
+                <v-col lg="6" md="12">
+                    <v-switch v-model="withNumbers" label="Numbers (123...)" color="#4CAF50"/>
+                    <v-switch v-model="withSpecials" label="Specials (#]-...)" color="#4CAF50"/>
+                </v-col>
+            </v-row>
+
+
+            <v-slider :label="`Length (${length})`" v-model="length" color="#4CAF50"></v-slider>
+
+            <v-text-field
+                    outlined
+                    :value="token"
+                    append-icon="fa-refresh"
+                    @click:append="refreshToken()"
+                    append-outer-icon="fa-clipboard"
+                    @click:append-outer="copyToken()"
+            >
+
+            </v-text-field>
+
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    import {copyToClipboard} from "../utils/helpers";
+
+    const shuffle = (str) => str.split('').sort(() => 0.5 - Math.random()).join('');
+    const noop = () => {
+    };
+
+    const lowercase = 'abcdefghijklmopqrstuvwxyz';
+    const uppercase = 'ABCDEFGHIJKLMOPQRSTUVWXYZ';
+    const numbers = '0123456789';
+    const specials = '.,;:!?./-"\'#{([-|\\@)]=}*+';
+
+
+    export default {
+        name: 'TokenGenerator',
+        data() {
+            return {
+                withNumbers: true,
+                withLowercase: true,
+                withUppercase: true,
+                withSpecials: false,
+                length: 32,
+                refreshBool: true,
+                refreshToken() {
+                    this.refreshBool = !this.refreshBool;
+                },
+                copyToken(){
+                    copyToClipboard(this.token);
+                    this.$toast.success('Copied to clipboard.')
+                }
+            }
+        },
+        computed: {
+            token() {
+                if (this.refreshBool) noop(); // 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>
+    .v-card {
+        max-width: 600px;
+        width: 500px;
+    }
+</style>

src/main.js

@@ -2,10 +2,17 @@ import Vue from 'vue'
 import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
+import vuetify from './plugins/vuetify'
+import 'roboto-fontface/css/roboto/roboto-fontface.css'
+import 'font-awesome/css/font-awesome.css'
+import './plugins/async-computed'
+import './plugins/crypto-js'
+import './plugins/toast-snackbar'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')

src/plugins/async-computed.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import AsyncComputed from 'vue-async-computed'
+
+Vue.use(AsyncComputed)

src/plugins/crypto-js.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueCryptojs from 'vue-cryptojs'
+
+Vue.use(VueCryptojs)

src/plugins/toast-snackbar.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VuetifyToast from 'vuetify-toast-snackbar'
+
+Vue.use(VuetifyToast)

src/plugins/vuetify.js

@@ -0,0 +1,28 @@
+import Vue from 'vue';
+import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
+
+Vue.use(Vuetify, {
+  components: {
+    VSnackbar,
+    VBtn,
+    VIcon
+  }
+})
+export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: '#4CAF50',
+        secondary: '#424242',
+        accent: '#4CAF50',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107'
+      },
+    },
+  },
+  icons: {
+    iconfont: 'fa4',
+  },
+});

src/router.js

@@ -0,0 +1,35 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from './routes/Home.vue'
+import TokenGenerator from "./components/TokenGenerator";
+import Hash from "./components/Hash";
+
+Vue.use(VueRouter)
+
+const routes = [
+    {
+        path: '/',
+        component: Home
+    },
+    {
+        path: '/token-generator',
+        component: TokenGenerator
+    },
+    {
+        path: '/hash',
+        component: Hash
+    },
+    {
+        path: '/about',
+        name: 'About',
+        component: () => import('./routes/About.vue')
+    }
+]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
+})
+
+export default router

src/router/index.js

@@ -1,29 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-
-Vue.use(VueRouter)
-
-  const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
-]
-
-const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes
-})
-
-export default router

src/routes/Home.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-card>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa dicta dolores eligendi esse harum illum iusto magnam maxime neque nisi nobis nostrum odit quia quo recusandae, saepe veniam voluptatibus?
+  </v-card>
+</template>
+
+<script>
+
+export default {
+  name: 'Home',
+  components: {
+  }
+}
+</script>

src/utils/helpers.js

@@ -0,0 +1,13 @@
+const copyToClipboard = (text) => {
+    const input = document.createElement('textarea');
+    input.innerHTML = text;
+    document.body.appendChild(input);
+    input.select();
+    const result = document.execCommand('copy');
+    document.body.removeChild(input);
+    return result;
+}
+
+export {
+    copyToClipboard
+}

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

vue.config.js

@@ -0,0 +1,18 @@
+const webpack = require('webpack');
+
+module.exports = {
+  "transpileDependencies": [
+    "vuetify"
+  ],
+  configureWebpack: () => {
+    return {
+      plugins: [
+        new webpack.DefinePlugin({
+          'process.env': {
+            'APPLICATION_VERSION': JSON.stringify(require('./package.json').version),
+          }
+        })
+      ]
+    }
+  }
+}