journal-intime/resources/js/app.js

/**
 * 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'
    });
}