journal-intime/resources/js/app.js

131 lines
4.5 KiB
JavaScript
Raw Normal View History

2019-09-18 16:50:01 +02:00
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
2019-09-18 16:50:01 +02:00
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
import Vue from 'vue';
import Autocomplete from './components/Autocomplete.vue';
import {Endcrypt} from 'endcrypt';
import {Vue2Storage} from 'vue2-storage';
const e = new Endcrypt();
// You can specify the plug-in configuration when connecting, passing the second object to Vue.use
Vue.use(Vue2Storage, {
prefix: 'journal_',
driver: 'session',
ttl: 60 * 60 * 24 * 1000
});
Vue.config.productionTip = false;
let storeId = 'store';
let storeElement = document.getElementById(storeId);
Vue.component(
'messageform', {
name: 'MessageForm',
props: {
'imageLabel': {
type: String,
default: "Choisir une image"
},
'uploadClass': {
type: String,
default: "fe fe-upload"
},
'mustencrypt': {
type: Boolean,
default: true
},
'possible': {
type: Boolean,
default: false
}
},
methods: {
encrypt: function(evt) {
evt.preventDefault();
if (this.mustencrypt) {
// https://www.npmjs.com/package/endcrypt
let plain = document.querySelector("[name=message]").value;
document.querySelector("[name=message]").value = JSON.stringify(e.encryptWithKey(plain, this.$storage.get('passphrase')));
}
document.getElementById('messageForm').submit();
return false;
},
fileNameChanged: function(inputName, inputFiles) {
let file = inputFiles[0];
let imageName = file["name"];
if (imageName !== "") {
imageName = imageName.split('\\').pop();
}
if (imageName !== "") {
this.uploadClass = "fe fe-check";
this.imageLabel = imageName;
} else {
this.uploadClass = "fe fe-upload";
this.imageLabel = "Choisir une image";
}
}
},
beforeMount: function() {
let passphrase = this.$storage.get('passphrase', '');
if (passphrase === '') {
passphrase = prompt('Merci d\'entrer votre phrase de passe');
this.$storage.set('passphrase', passphrase);
}
/** Function for collapse and decrypt cards */
let $this = this;
document.querySelectorAll('[data-toggle="card-collapse"]').forEach(function(card){
let cardBody = card.parentElement.parentElement.parentElement.querySelector("[data-encrypt]");
try {
let cardBodyDecrypted = JSON.parse(cardBody.innerHTML.trim());
cardBody.innerHTML = e.decryptWithKey(cardBodyDecrypted, $this.$storage.get('passphrase'));
} catch (e) {
console.log('can\'t decode '+ cardBody.innerHTML);
}
card.addEventListener('click', function(evt) {
let $card = this.parentElement.parentElement.parentElement;
$card.classList.toggle('card-collapsed');
evt.preventDefault();
return false;
});
});
},
components: {
Autocomplete
}
}
);
if (document.getElementById("store")) {
new Vue({
el: '#store'
});
}