mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-24 08:46:15 -04:00
feat: TokenGenerator + Hash
This commit is contained in:
CorentinTh
parent
335e626400
commit
e1ebeefdc4
19 changed files with 610 additions and 135 deletions
192
src/App.vue
192
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'},
|
||||
]
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
],
|
||||
}),
|
||||
created() {
|
||||
this.$vuetify.theme.dark = true
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue