From 407b7c2774f0e812bf21faf6aade5227ed8f5705 Mon Sep 17 00:00:00 2001 From: cdesmidt Date: Tue, 8 Oct 2019 17:10:11 +0200 Subject: [PATCH] =?UTF-8?q?:bento:=20Met=20=C3=A0=20jour=20le=20js=20pour?= =?UTF-8?q?=20l'encryption=20de=20bout=20en=20bout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- resources/js/app.js | 88 ++++++++++++++++++++---- resources/js/components/App.vue | 15 ---- resources/js/components/Autocomplete.vue | 3 +- resources/views/home.blade.php | 38 +++++----- 5 files changed, 98 insertions(+), 50 deletions(-) delete mode 100644 resources/js/components/App.vue diff --git a/package.json b/package.json index b5e53e4..834b6b9 100644 --- a/package.json +++ b/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" } } diff --git a/resources/js/app.js b/resources/js/app.js index 093c069..0ed8fc4 100644 --- a/resources/js/app.js +++ b/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'); diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue deleted file mode 100644 index 262db4e..0000000 --- a/resources/js/components/App.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - diff --git a/resources/js/components/Autocomplete.vue b/resources/js/components/Autocomplete.vue index 45b32c8..b89c65e 100644 --- a/resources/js/components/Autocomplete.vue +++ b/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; } diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 80aca1f..8779d97 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -70,6 +70,15 @@
@if($already)
L'activité du jour a déjà été entrée.
+
+ @component('components/app', [ + 'route' => url('store'), + 'crsf' => csrf_field(), + 'mustencrypt' => $must_encrypt, + 'possible' => false, + ]) + @endcomponent +
@else
@@ -78,24 +87,15 @@

{{ strftime('%B %G', $today->format('U')) }}

-
- @csrf -
-
- -
-
-
- {{ $errors->first('message') }} -
-
-
-
- -
-
-
-
+
+ @component('components/app', [ + 'route' => url('store'), + 'crsf' => csrf_field(), + 'mustencrypt' => $must_encrypt, + 'possible' => !$already, + ]) + @endcomponent +
@@ -113,7 +113,7 @@ -
+
{!! $tag_detector->linkTagFrom($post->content) !!}