🍱 Met à jour le js pour l'encryption de bout en bout

resources/js/app.js

@@ -27,20 +27,82 @@ window.Vue = require('vue');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-import App from './components/App.vue';
+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;
 
-/** Function for collapse card */
-document.querySelectorAll('[data-toggle="card-collapse"]').forEach(function(card){
-    card.addEventListener('click', function(evt) {
-        let $card = this.parentElement.parentElement.parentElement;
+let storeId = 'store';
+let storeElement = document.getElementById(storeId);
 
-        $card.classList.toggle('card-collapsed');
-        evt.preventDefault();
-        return false;
-    });
+Vue.component(
+    'messageform', {
+        name: 'MessageForm',
+        props: {
+            '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;
+                    let encryptedMessage = JSON.stringify(e.encryptWithKey(plain, this.$storage.get('passphrase')));
+                    document.querySelector("[name=message]").value = encryptedMessage;
+                }
+                document.getElementById('messageForm').submit();
+                return false;
+            }
+        },
+        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);
+                    console.log(e);
+                }
+                card.addEventListener('click', function(evt) {
+                    let $card = this.parentElement.parentElement.parentElement;
+
+                    $card.classList.toggle('card-collapsed');
+                    evt.preventDefault();
+                    return false;
+                });
+            });
+        },
+        components: {
+            Autocomplete
+        }
+    }
+);
+
+new Vue({
+    el: '#store'
 });
-
-const app = new Vue({
-    render: h => h(App),
-}).$mount('#app');

resources/js/components/App.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-        <Autocomplete hasLabel="false" id="message" name="message" rows="5" placeholder="Que s'est-il passé aujourd'hui ?" textarea="true" />
-    </div>
-</template>
-
-<script>
-    import Autocomplete from './Autocomplete.vue';
-    export default {
-        components: {
-            Autocomplete
-        }
-    }
-</script>
-<style scoped></style>

resources/js/components/Autocomplete.vue

@@ -28,7 +28,7 @@
         props: ["items", "placeholder", "label", "textarea", "rows", "cols", "hasLabel", "name"],
         data() {
             return {
-                id: 'input-' + parseInt(Math.random() * 1000, 10),
+                id: 'input-' + (Math.random() * 1000 | 0),
                 inputValue: "",
                 searchMatch: [],
                 selectedIndex: 0,
@@ -70,7 +70,6 @@
         watch: {
             inputValue() {
                 this.focus();
-                console.log(this.inputSplitted)
                 this.selectedIndex = 0;
                 this.wordIndex = this.inputSplitted.length - 1;
             }