131 lines
4.5 KiB
JavaScript
131 lines
4.5 KiB
JavaScript
/**
|
|
* 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);
|
|
|
|
/**
|
|
* 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'
|
|
});
|
|
}
|