mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 16:26:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: TokenGenerator + Hash

Browse source
This commit is contained in:
CorentinTh 2020-04-25 18:43:17 +02:00
parent 335e626400
commit e1ebeefdc4
No known key found for this signature in database
GPG key ID: 44C26D9F091CEFC7
19 changed files with 610 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/components/Hash.vue Normal file
View 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>

60
src/components/HelloWorld.vue
View file

@ -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
View 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>