mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-24 00:36:14 -04:00
feat: urlencoder + file in base64
This commit is contained in:
CorentinTh
Corentin THOMASSET
parent
ee4eb30ca2
commit
d9f6c55a79
13 changed files with 260 additions and 21 deletions
|
|
@ -1,158 +0,0 @@
|
|||
<template>
|
||||
<v-row justify="center" align="center">
|
||||
<v-col xl="4" lg="6" md="12">
|
||||
<v-card class="mb-5">
|
||||
<v-card-title>Input</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="text-center">
|
||||
<v-switch v-model="useCurrentDate" label="Use current date"/>
|
||||
</div>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<br>
|
||||
|
||||
<v-row>
|
||||
<v-col md="6" sm="12" class="pt-0 pb-0">
|
||||
<v-select
|
||||
:items="formats.filter(f => !f.title.toLowerCase().includes('locale'))"
|
||||
item-value="dateFromFormat"
|
||||
item-text="title"
|
||||
outlined
|
||||
label="Your date format"
|
||||
placeholder="Input format"
|
||||
v-model="inputFormater"
|
||||
@input="userInputChanged()"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col md="6" sm="12" class="pt-0 pb-0">
|
||||
<v-text-field
|
||||
outlined
|
||||
v-model="inputString"
|
||||
label="Your date string"
|
||||
@input="userInputChanged()"
|
||||
:error="invalidInput"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col xl="4" lg="6" md="12" >
|
||||
<v-card>
|
||||
<v-card-title>Dates formats</v-card-title>
|
||||
<v-card-text>
|
||||
|
||||
<v-text-field
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
v-for="format of formats"
|
||||
v-bind:key="format.title"
|
||||
:label="format.title"
|
||||
:value="format.getDate()"
|
||||
append-icon="fa-clipboard"
|
||||
@click:append="copyDate(format.getDate())"
|
||||
/>
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {copyToClipboard} from "../utils/helpers";
|
||||
|
||||
export default {
|
||||
name: "DateConverter",
|
||||
created() {
|
||||
setInterval(this.refreshCurrentDate.bind(this), 1000);
|
||||
this.inputFormater = this.formats[1].dateFromFormat;
|
||||
},
|
||||
data() {
|
||||
const vm = this;
|
||||
|
||||
return {
|
||||
inputString: '',
|
||||
inputFormater: undefined,
|
||||
useCurrentDate: true,
|
||||
displayedDate: new Date(),
|
||||
invalidInput: false,
|
||||
formats: [
|
||||
{
|
||||
title: 'Locale datetime',
|
||||
getDate() {
|
||||
return vm.displayedDate.toLocaleString();
|
||||
},
|
||||
dateFromFormat(dateString){
|
||||
return dateString
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'ISO 8601',
|
||||
getDate() {
|
||||
return vm.displayedDate.toISOString();
|
||||
},
|
||||
dateFromFormat(dateString){
|
||||
return new Date(dateString)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'UTC format',
|
||||
getDate() {
|
||||
return vm.displayedDate.toUTCString();
|
||||
},
|
||||
dateFromFormat(dateString){
|
||||
return new Date(dateString)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'UNIX Timestamp (ms)',
|
||||
getDate() {
|
||||
return vm.displayedDate.getTime();
|
||||
},
|
||||
dateFromFormat(dateString){
|
||||
return new Date(parseInt(dateString))
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Complete',
|
||||
getDate() {
|
||||
return vm.displayedDate.toString();
|
||||
},
|
||||
dateFromFormat(dateString){
|
||||
return new Date(dateString)
|
||||
}
|
||||
}
|
||||
],
|
||||
refreshCurrentDate() {
|
||||
if (this.useCurrentDate) {
|
||||
this.displayedDate = new Date();
|
||||
}
|
||||
},
|
||||
copyDate(date) {
|
||||
copyToClipboard(date);
|
||||
this.$toast.success('Copied to clipboard.')
|
||||
},
|
||||
userInputChanged(){
|
||||
try{
|
||||
this.invalidInput = false;
|
||||
const newDate = this.inputFormater(this.inputString);
|
||||
|
||||
if(newDate && !isNaN(newDate.getTime())){
|
||||
this.useCurrentDate = false;
|
||||
this.displayedDate = newDate;
|
||||
}else if(this.inputString.length > 0) {
|
||||
this.invalidInput = true;
|
||||
}
|
||||
} catch (ignored) {
|
||||
//
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
77
src/components/FileUploader.vue
Normal file
77
src/components/FileUploader.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div
|
||||
class="drop-area pa-4 text-center"
|
||||
:class="{'drag-over':dragging }"
|
||||
@dragover.prevent
|
||||
@drop.prevent="imageDropped"
|
||||
@dragenter="dragEnter()"
|
||||
@dragend="dragEnd()"
|
||||
@dragleave="dragLeave()"
|
||||
@dragexit="dragExit()"
|
||||
>
|
||||
<p>Drag & drop a file here</p>
|
||||
<p class="or">or</p>
|
||||
<v-btn depressed>upload manually</v-btn>
|
||||
<p class="or">or</p>
|
||||
<v-text-field outlined dense label="Paste an url to the file" hide-details></v-text-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FileUploader",
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
dragging: false,
|
||||
dragEnterCounter: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
imageDropped(e) {
|
||||
this.dragging = false;
|
||||
const droppedFiles = [...e.dataTransfer.files];
|
||||
|
||||
if (!droppedFiles || droppedFiles.length === 0) return;
|
||||
|
||||
this.$emit('input', droppedFiles[0])
|
||||
},
|
||||
dragEnter() {
|
||||
this.dragEnterCounter++;
|
||||
this.dragging = true;
|
||||
},
|
||||
dragLeave() {
|
||||
if(--this.dragEnterCounter <= 0){
|
||||
this.dragging = false;
|
||||
}
|
||||
},
|
||||
dragEnd() {
|
||||
this.dragging = false;
|
||||
},
|
||||
dragExit() {
|
||||
this.dragging = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.drop-area {
|
||||
border: 2px dashed #363636;
|
||||
border-radius: 10px;
|
||||
|
||||
& > *, .v-btn {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.or {
|
||||
opacity: 0.7;
|
||||
margin: 5px 0 !important;
|
||||
}
|
||||
|
||||
&.drag-over {
|
||||
border-color: #4CAF50;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<v-card class="single-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,82 +0,0 @@
|
|||
<template>
|
||||
<v-card class="single-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...)"/>
|
||||
<v-switch v-model="withUppercase" label="Uppercase (ABC...)"/>
|
||||
|
||||
</v-col>
|
||||
<v-col lg="6" md="12">
|
||||
<v-switch v-model="withNumbers" label="Numbers (123...)"/>
|
||||
<v-switch v-model="withSpecials" label="Specials (#]-...)"/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-slider :label="`Length (${length})`" v-model="length" min="1" max="256"></v-slider>
|
||||
|
||||
<v-textarea outlined v-model="token"></v-textarea>
|
||||
|
||||
<div class="text-center">
|
||||
<v-btn @click="refreshToken()" depressed class="mr-4">Refresh</v-btn>
|
||||
<v-btn @click="copyToken()" depressed>Copy token</v-btn>
|
||||
</div>
|
||||
</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 >
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue