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

package.json

@@ -24,7 +24,9 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "endcrypt": "^1.2.3",
         "tabler-ui": "^0.0.34",
-        "textarea-caret": "^3.1.0"
+        "textarea-caret": "^3.1.0",
+        "vue2-storage": "^4.0.5"
     }
 }

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 */
+let storeId = 'store';
-document.querySelectorAll('[data-toggle="card-collapse"]').forEach(function(card){
+let storeElement = document.getElementById(storeId);
-    card.addEventListener('click', function(evt) {
-        let $card = this.parentElement.parentElement.parentElement;
 
-        $card.classList.toggle('card-collapsed');
+Vue.component(
-        evt.preventDefault();
+    'messageform', {
-        return false;
+        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;
             }

resources/views/home.blade.php

@@ -70,6 +70,15 @@
         <div class="col-md-12">
             @if($already)
                 <div class="alert alert-primary">L'activité du jour a déjà été entrée.</div>
+                <div id="store">
+                    @component('components/app', [
+                        'route' => url('store'),
+                        'crsf' => csrf_field(),
+                        'mustencrypt' => $must_encrypt,
+                        'possible' => false,
+                    ])
+                    @endcomponent
+                </div>
             @else
                 <div class="row">
                     <div class="col-sm-12">
@@ -78,24 +87,15 @@
                                 <h3 class="card-title">{{ strftime('%B %G', $today->format('U')) }}</h3>
                             </div>
                             <div class="card-body">
-                                <form action="{{ url('store') }}" method="post" accept-charset="utf-8">
+                                <div id="store">
-                                    @csrf
+                                @component('components/app', [
-                                    <div class="contact-form">
+                                    'route' => url('store'),
-                                        <div class="form-group">
+                                    'crsf' => csrf_field(),
-                                            <label class="control-label col-sm-5" for="message">Quoi de neuf aujourd'hui ?</label>
+                                    'mustencrypt' => $must_encrypt,
-                                            <div class="col-sm-10">
+                                    'possible' => !$already,
-                                                <div id="app">
+                                ])
-                                                </div>
+                                @endcomponent
-                                                <span class="text-danger">{{ $errors->first('message') }}</span>
+                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="form-group">
-                                            <div class="col-sm-offset-2 col-sm-10">
-                                                <button type="submit" class="btn btn-primary ml-auto">J'enregistre ma journée</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </form>
                             </div>
                         </div>
                     </div>
@@ -113,7 +113,7 @@
                             <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                         </div>
                     </div>
-                    <div class="card-body">
+                    <div class="card-body" data-encrypt>
                         {!! $tag_detector->linkTagFrom($post->content) !!}
                     </div>
                     <div class="card-footer">