Added avatar preview and optimized avatar saving

5 files changed, 28 insertions, 14 deletions

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 3c056ef..16d3a12 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -7,4 +7,5 @@
 window.openpgp = require('openpgp');
 window.Vue = require('vue');
 require('./bootstrap');
+require('./profile');
 require('./chat');
diff --git a/resources/assets/js/chat.js b/resources/assets/js/chat.js
index f2a8cb2..60563aa 100644
--- a/resources/assets/js/chat.js
+++ b/resources/assets/js/chat.js
@@ -1,18 +1,18 @@
-var openpgp = window.openpgp;
+// var openpgp = window.openpgp;
 
-var options = {
-    userIds: [{ name:'Marvin Borner', email:'test@test.de' }], // multiple user IDs
-    numBits: 4096,                                            // RSA key size
-    passphrase: 'cool password of private key'
-};
+// var options = {
+//     userIds: [{ name:'Marvin Borner', email:'test@test.de' }], // multiple user IDs
+//     numBits: 4096,                                            // RSA key size
+//     passphrase: 'cool password of private key'
+// };
 
-openpgp.generateKey(options).then(function(key) {
-    var privateKey = key.privateKeyArmored; // '-----BEGIN PGP PRIVATE KEY BLOCK ... '
-    var publicKey = key.publicKeyArmored;   // '-----BEGIN PGP PUBLIC KEY BLOCK ... '
+// openpgp.generateKey(options).then(function(key) {
+//     var privateKey = key.privateKeyArmored; // '-----BEGIN PGP PRIVATE KEY BLOCK ... '
+//     var publicKey = key.publicKeyArmored;   // '-----BEGIN PGP PUBLIC KEY BLOCK ... '
 
-    console.log(publicKey);
-    console.log(privateKey);
-});
+//     console.log(publicKey);
+//     console.log(privateKey);
+// });
 
 
 
diff --git a/resources/assets/js/profile.js b/resources/assets/js/profile.js
new file mode 100644
index 0000000..bce94da
--- /dev/null
+++ b/resources/assets/js/profile.js
@@ -0,0 +1,13 @@
+$("#avatarFile").on("change", () => {
+    var preview = document.querySelector('#image-preview');
+    var file = document.querySelector("#avatarFile").files[0];
+    var reader = new FileReader();
+
+    reader.addEventListener("load", () => {
+        preview.src = reader.result;
+    }, false);
+
+    if (file) {
+        reader.readAsDataURL(file);
+    }
+});
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d64fe27..3204af3 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -9,7 +9,7 @@
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name', 'BEAM-Messenger') }}</title>
 
     <!-- Scripts -->
     <script src="{{ asset('js/app.js') }}" defer></script>
diff --git a/resources/views/profile.blade.php b/resources/views/profile.blade.php
index adbae95..3d1eee2 100644
--- a/resources/views/profile.blade.php
+++ b/resources/views/profile.blade.php
@@ -28,7 +28,7 @@
 
         <div class="profile-header-container">
             <div class="profile-header-img">
-                <img height="100px" width="100px" class="rounded-circle" src="/avatar/{{ $user->id }}" />
+                <img id="image-preview" height="100px" width="100px" class="rounded-circle" src="/avatar/{{ $user->id }}" />
                 <!-- badge -->
                 <div class="rank-label-container">
                     <span class="label label-default rank-label">{{$user->name}}</span>