mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-24 00:36:14 -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 • committed by Corentin THOMASSET
parent 1fba5c42e1
commit d1db2c8601
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>