feat: TokenGenerator + Hash
This commit is contained in:
CorentinTh
parent
335e626400
commit
e1ebeefdc4
141
package-lock.json
generated
141
package-lock.json
generated
@ -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",
|
||||
|
||||
14
package.json
14
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"
|
||||
|
||||
190
src/App.vue
190
src/App.vue
@ -1,32 +1,172 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
<v-app id="inspire">
|
||||
<v-navigation-drawer v-model="drawer" app clipped>
|
||||
<v-list dense>
|
||||
|
||||
<div v-for="section in items" :key="section.title">
|
||||
<v-subheader class="mt-4 pl-4">{{section.title}}</v-subheader>
|
||||
|
||||
<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>© {{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>© {{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">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
source: String,
|
||||
},
|
||||
data: () => ({
|
||||
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'},
|
||||
]
|
||||
}
|
||||
|
||||
],
|
||||
}),
|
||||
created() {
|
||||
this.$vuetify.theme.dark = true
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 539 B |
73
src/components/Hash.vue
Normal file
73
src/components/Hash.vue
Normal file
@ -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>
|
||||
|
||||
@ -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>
|
||||
90
src/components/TokenGenerator.vue
Normal file
90
src/components/TokenGenerator.vue
Normal file
@ -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>
|
||||
@ -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')
|
||||
|
||||
4
src/plugins/async-computed.js
Normal file
4
src/plugins/async-computed.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from 'vue';
|
||||
import AsyncComputed from 'vue-async-computed'
|
||||
|
||||
Vue.use(AsyncComputed)
|
||||
4
src/plugins/crypto-js.js
Normal file
4
src/plugins/crypto-js.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import VueCryptojs from 'vue-cryptojs'
|
||||
|
||||
Vue.use(VueCryptojs)
|
||||
4
src/plugins/toast-snackbar.js
Normal file
4
src/plugins/toast-snackbar.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import VuetifyToast from 'vuetify-toast-snackbar'
|
||||
|
||||
Vue.use(VuetifyToast)
|
||||
28
src/plugins/vuetify.js
Normal file
28
src/plugins/vuetify.js
Normal file
@ -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',
|
||||
},
|
||||
});
|
||||
35
src/router.js
Normal file
35
src/router.js
Normal file
@ -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
|
||||
@ -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
|
||||
14
src/routes/Home.vue
Normal file
14
src/routes/Home.vue
Normal file
@ -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>
|
||||
13
src/utils/helpers.js
Normal file
13
src/utils/helpers.js
Normal file
@ -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
|
||||
}
|
||||
@ -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>
|
||||
18
vue.config.js
Normal file
18
vue.config.js
Normal file
@ -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),
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user