From bfb24728626e827abfa69a68109071e91c5853da Mon Sep 17 00:00:00 2001
From: Ylian Saint-Hilaire <ysainthilaire@hotmail.com>
Date: Fri, 19 Mar 2021 04:12:45 -0700
Subject: [PATCH] Started work on account pictures.

---
 agents/meshcore.js       |  2 +-
 meshuser.js              | 32 +++++++++++++++++++++++++++
 views/default.handlebars | 47 ++++++++++++++++++++++++++++++++++++++--
 webserver.js             | 30 +++++++++++++++++++++----
 4 files changed, 104 insertions(+), 7 deletions(-)

diff --git a/agents/meshcore.js b/agents/meshcore.js
index 6ec1a5e2..91696200 100644
--- a/agents/meshcore.js
+++ b/agents/meshcore.js
@@ -854,7 +854,7 @@ function handleServerCommand(data) {
                         // Display a message box
                         if (data.title && data.msg) {
                             MeshServerLogEx(18, [data.title, data.msg], "Displaying message box, title=" + data.title + ", message=" + data.msg, data);
-                            try { require('message-box').create(data.title, data.msg, 120); } catch (e) { }
+                            try { require('message-box').create(data.title, data.msg, 120).then(function () { }).catch(function () { }); } catch (e) { }
                         }
                         break;
                     }
diff --git a/meshuser.js b/meshuser.js
index 46d0cc5c..c0e2cdf1 100644
--- a/meshuser.js
+++ b/meshuser.js
@@ -1784,6 +1784,7 @@ module.exports.CreateMeshUser = function (parent, db, ws, req, args, domain, use
 
                     db.Remove('ws' + deluser._id); // Remove user web state
                     db.Remove('nt' + deluser._id); // Remove notes for this user
+                    db.Remove('im' + deluser._id); // Remove image for this user
 
                     // Delete all files on the server for this account
                     try {
@@ -2195,6 +2196,37 @@ module.exports.CreateMeshUser = function (parent, db, ws, req, args, domain, use
 
                     // OK Response
                     if (command.responseid != null) { try { ws.send(JSON.stringify({ action: 'edituser', responseid: command.responseid, result: 'ok' })); } catch (ex) { } }
+                    break;
+                }
+            case 'updateUserImage':
+                {
+                    var chguser = parent.users[user._id], flags = 0, change = 0;
+                    if (chguser == null) break;
+                    if (typeof chguser.flags == 'number') { flags = chguser.flags; }
+
+                    if (command.image == 0) {
+                        // Delete the image
+                        db.Remove('im' + user._id);
+                        if ((flags & 1) != 0) { flags -= 1; change = 1; }
+                    } else if ((typeof command.image == 'string') && (command.image.length < 600000) && ((command.image.startsWith('data:image/png;base64,') || (command.image.startsWith('data:image/jpeg;base64,'))))) {
+                        // Save the new image
+                        db.Set({ _id: 'im' + user._id, image: command.image });
+                        if ((flags & 1) == 0) { flags += 1; change = 1; }
+                    }
+
+                    // Update the user if needed
+                    if (change == 1) {
+                        chguser.flags = flags;
+                        db.SetUser(chguser);
+
+                        // Event the change
+                        var targets = ['*', 'server-users', user._id, chguser._id];
+                        if (allTargetGroups) { for (var i in allTargetGroups) { targets.push('server-users:' + i); } }
+                        var event = { etype: 'user', userid: user._id, username: user.name, account: parent.CloneSafeUser(chguser), action: 'accountchange', msgid: 66, msgArgs: [chguser.name], msg: 'Account changed: ' + chguser.name, domain: domain.id };
+                        if (db.changeStream) { event.noact = 1; } // If DB change stream is active, don't use this event to change the user. Another event will come.
+                        parent.parent.DispatchEvent(targets, obj, event);
+                    }
+
                     break;
                 }
             case 'usergroups':
diff --git a/views/default.handlebars b/views/default.handlebars
index 164c5097..eaffafd0 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -12,7 +12,7 @@
     <link type="text/css" href="styles/ol.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/ol3-contextmenu.min.css" media="screen" rel="stylesheet" title="CSS" />
     <link type="text/css" href="styles/xterm.css" media="screen" rel="stylesheet" title="CSS" />
-    <link type="text/css" href="styles/flatpickr.min.css" media="screen" rel="stylesheet" title="CSS" >
+    <link type="text/css" href="styles/flatpickr.min.css" media="screen" rel="stylesheet" title="CSS">
     <link rel="apple-touch-icon" href="/favicon-303x303.png" />
     <script type="text/javascript" src="scripts/common-0.0.1{{{min}}}.js"></script>
     <script type="text/javascript" src="scripts/meshcentral{{{min}}}.js"></script>
@@ -342,7 +342,8 @@
             <div id=p2 style="display:none">
                 <div id="p2title"><h1>My Account</h1></div>
                 <div id="p2info" style="overflow-y:auto">
-                    <img id="p2AccountImage" alt="" loading="lazy" width="128" height="128" src="images/clipboard-128.png" />
+                    <!--<img id="p2AccountImage" alt="" loading="lazy" width="128" height="128" onclick="account_manageImage()" src="images/clipboard-128.png" />-->
+                    <img id="p2AccountImage" alt="" loading="lazy" width="128" height="128" style="border-radius:8px;cursor:pointer;box-shadow: 0px 0px 7px #000;margin-top:7px" onclick="account_manageImage()" src="userimage.ashx" />
                     <div id="p2AccountSecurity" style="display:none">
                         <p><strong>Account security</strong></p>
                         <div style="margin-left:25px">
@@ -9675,6 +9676,48 @@
             meshserver.send({ action: 'previousLogins' });
         }
 
+        function account_manageImage() {
+            if (xxdialogMode) return;
+            var x = '<input id=p2file type=file style=width:100% accept="image/*" onchange=account_manageImageEx()><div style=width:100%><canvas id=p2canvas width=256 height=256 style="width:256px;height:256px;margin-left:60px;margin-top:8px;border-radius:16px;box-shadow: 0px 0px 15px #000" onclick=account_canvasClick() /></div>';
+            setDialogMode(2, "Manage Account Image", 7, account_manageImageEx2, x);
+            var ctx = Q('p2canvas').getContext("2d");
+            if ((userinfo.flags != null) && (userinfo.flags & 1)) {
+                var myImg = new Image();
+                myImg.onload = function() { ctx.drawImage(myImg, 0, 0); };
+                myImg.src = 'userimage.ashx';
+            } else {
+                ctx.fillStyle = "#CCC";
+                ctx.fillRect(0, 0, 256, 256);
+            }
+            QE('idx_dlgDeleteButton', (userinfo.flags != null) && (userinfo.flags & 1));
+            QE('idx_dlgOkButton', false);
+        }
+
+        function account_canvasClick() { Q('p2file').click(); }
+
+        function account_manageImageEx() {
+            var file = Q('p2file').files[0];
+            var img = new Image;
+            img.onload = function() {
+                var cx  = 0, cy = 0, min = Math.min(img.width, img.height);
+                if (img.width > min) { cx = (img.width - min) / 2; }
+                if (img.height > min) { cy = (img.height - min) / 2; }
+                var ctx = Q('p2canvas').getContext("2d");
+                ctx.imageSmoothingEnabled = true;
+                ctx.webkitImageSmoothingEnabled = true;
+                ctx.mozImageSmoothingEnabled = true;
+                ctx.drawImage(img, cx, cy, min, min, 0, 0, 256, 256);
+                QE('idx_dlgOkButton', true);
+            }
+            img.src = URL.createObjectURL(file);
+        }
+
+        function account_manageImageEx2(b, t) {
+            // Send updated image, or 0 if we pressed the delete button
+            meshserver.send({ action: 'updateUserImage', image: (b == 2)?0:Q('p2canvas').toDataURL('image/jpeg', 0.8) });
+            //meshserver.send({ action: 'updateUserImage', image: (b == 2)?0:Q('p2canvas').toDataURL('image/png', 0.8) });
+        }
+
         function account_managePhone() {
             if (xxdialogMode || ((features & 0x02000000) == 0)) return;
             var x;
diff --git a/webserver.js b/webserver.js
index a323f89f..f7ae0f15 100644
--- a/webserver.js
+++ b/webserver.js
@@ -1871,6 +1871,26 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
         }
     }
 
+    // Called to process an agent invite request
+    function handleUserImageRequest(req, res) {
+        const domain = getDomain(req);
+        if (domain == null) { parent.debug('web', 'handleUserImageRequest: failed checks.'); res.sendStatus(404); return; }
+        if ((req.session == null) || (req.session.userid == null)) { parent.debug('web', 'handleUserImageRequest: failed checks 2.'); res.sendStatus(404); return; }
+        obj.db.Get('im' + req.session.userid, function (err, docs) {
+            if ((err != null) || (docs == null) || (docs.length != 1) || (typeof docs[0].image != 'string')) { res.sendStatus(404); return; }
+            var imagebase64 = docs[0].image;
+            if (imagebase64.startsWith('data:image/png;base64,')) {
+                res.set('Content-Type', 'image/png');
+                res.send(Buffer.from(imagebase64.substring(22), 'base64'));
+            } else if (imagebase64.startsWith('data:image/jpeg;base64,')) {
+                res.set('Content-Type', 'image/jpeg');
+                res.send(Buffer.from(imagebase64.substring(23), 'base64'));
+            } else {
+                res.sendStatus(404);
+            }
+        });
+    }
+
     function handleDeleteAccountRequest(req, res, direct) {
         parent.debug('web', 'handleDeleteAccountRequest()');
         const domain = checkUserIpAddress(req, res);
@@ -1948,8 +1968,9 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
                     }
                 }
 
-                // Remove notes for this user
-                obj.db.Remove('nt' + deluser._id);
+                obj.db.Remove('ws' + deluser._id); // Remove user web state
+                obj.db.Remove('nt' + deluser._id); // Remove notes for this user
+                obj.db.Remove('im' + deluser._id); // Remove image for this user
 
                 // Remove the user
                 obj.db.Remove(deluser._id);
@@ -5061,8 +5082,8 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
                 const headers = {
                     'Referrer-Policy': 'no-referrer',
                     'X-XSS-Protection': '1; mode=block',
-                    'X-Content-Type-Options': 'nosniff',
-                    'Content-Security-Policy': "default-src 'none'; font-src 'self'; script-src 'self' 'unsafe-inline'" + extraScriptSrc + "; connect-src 'self'" + geourl + selfurl + "; img-src 'self'" + geourl + " data:; style-src 'self' 'unsafe-inline'; frame-src 'self' https://*.youtube.com mcrouter:; media-src 'self'; form-action 'self'"
+                    'X-Content-Type-Options': 'nosniff'
+                    //'Content-Security-Policy': "default-src 'none'; font-src 'self'; script-src 'self' 'unsafe-inline'" + extraScriptSrc + "; connect-src 'self'" + geourl + selfurl + "; img-src 'self'" + geourl + " data:; style-src 'self' 'unsafe-inline'; frame-src 'self' https://*.youtube.com mcrouter:; media-src 'self'; form-action 'self'"
                 };
                 if ((parent.config.settings.allowframing !== true) && (typeof parent.config.settings.allowframing !== 'string')) { headers['X-Frame-Options'] = 'sameorigin'; }
                 res.set(headers);
@@ -5167,6 +5188,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates) {
             obj.app.post(url + 'resetaccount', handleResetAccountRequest);
             obj.app.get(url + 'checkmail', handleCheckMailRequest);
             obj.app.get(url + 'agentinvite', handleAgentInviteRequest);
+            obj.app.get(url + 'userimage.ashx', handleUserImageRequest);
             obj.app.post(url + 'amtevents.ashx', obj.handleAmtEventRequest);
             obj.app.get(url + 'meshagents', obj.handleMeshAgentRequest);
             obj.app.get(url + 'messenger', handleMessengerRequest);