mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-24 16:56: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
158
src/routes/tools/DateConverter.vue
Normal file
158
src/routes/tools/DateConverter.vue
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<v-row justify="center" align="center">
|
||||
<v-col cols="12" 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 cols="12" 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>
|
||||
70
src/routes/tools/FileToBase64.vue
Normal file
70
src/routes/tools/FileToBase64.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<v-row justify="center" align="center">
|
||||
<v-col cols="12" lg="4" md="6" sm="12">
|
||||
<v-card>
|
||||
<v-card-title>File to Base64</v-card-title>
|
||||
<v-card-text>
|
||||
<FileUploader v-model="imageFile"/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="4" md="6" sm="12" v-if="base64">
|
||||
<v-card>
|
||||
<v-card-title>Result</v-card-title>
|
||||
<v-card-text>
|
||||
<v-img :src="base64" class="mb-4" v-if="isImage"/>
|
||||
<v-textarea
|
||||
label="File in base 64"
|
||||
outlined
|
||||
readonly
|
||||
v-model="base64"
|
||||
hide-details
|
||||
/>
|
||||
<div class="text-center mt-4">
|
||||
<v-btn @click="copyBase64()" depressed>Copy base64</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileUploader from '../../components/FileUploader'
|
||||
import {copyToClipboard, fileIsImage} from "../../utils/helpers";
|
||||
|
||||
export default {
|
||||
name: "FileToBase64",
|
||||
components: {FileUploader},
|
||||
data() {
|
||||
return {
|
||||
imageFile: undefined,
|
||||
base64: '',
|
||||
isImage: false,
|
||||
copyBase64(){
|
||||
copyToClipboard(this.base64)
|
||||
this.$toast.success('Copied to clipboard.')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
imageFile() {
|
||||
this.isImage = fileIsImage(this.imageFile);
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(this.imageFile);
|
||||
reader.onload = () => {
|
||||
this.base64 = reader.result;
|
||||
}
|
||||
reader.onerror = () => {
|
||||
this.base64 = '[An error as occurred]';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
73
src/routes/tools/Hash.vue
Normal file
73
src/routes/tools/Hash.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<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>
|
||||
|
||||
82
src/routes/tools/TokenGenerator.vue
Normal file
82
src/routes/tools/TokenGenerator.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<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>
|
||||
81
src/routes/tools/UrlEncoder.vue
Normal file
81
src/routes/tools/UrlEncoder.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<v-row justify="center" align="center">
|
||||
<v-col cols="12" lg="4" md="6" sm="12">
|
||||
<v-card>
|
||||
<v-card-title>URL Encode</v-card-title>
|
||||
<v-card-text>
|
||||
<v-textarea
|
||||
outlined
|
||||
label="String to encode"
|
||||
v-model="encodeInput"
|
||||
/>
|
||||
<v-textarea
|
||||
readonly
|
||||
outlined
|
||||
label="URL encoded string"
|
||||
v-model="encodeOutput"
|
||||
/>
|
||||
|
||||
<div class="text-center">
|
||||
<v-btn @click="copyText(encodeOutput)" depressed>Copy result</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" lg="4" md="6" sm="12">
|
||||
<v-card>
|
||||
<v-card-title>URL Decode</v-card-title>
|
||||
<v-card-text>
|
||||
<v-textarea
|
||||
outlined
|
||||
label="String to decode"
|
||||
v-model="decodeInput"
|
||||
/>
|
||||
<v-textarea
|
||||
readonly
|
||||
outlined
|
||||
label="URL decoded string"
|
||||
v-model="decodeOutput"
|
||||
/>
|
||||
|
||||
<div class="text-center">
|
||||
<v-btn @click="copyText(decodeOutput)" depressed>Copy result</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {copyToClipboard} from "../../utils/helpers";
|
||||
|
||||
export default {
|
||||
name: "UrlEncoder",
|
||||
data(){
|
||||
return {
|
||||
encodeInput: 'Hello world :)',
|
||||
decodeInput: 'Hello%20world%20%3A)',
|
||||
copyText(text){
|
||||
copyToClipboard(text)
|
||||
this.$toast.success('Copied to clipboard.')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
encodeOutput(){
|
||||
return encodeURIComponent(this.encodeInput)
|
||||
},
|
||||
decodeOutput(){
|
||||
return decodeURIComponent(this.encodeInput)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue