From d292d5d419596d99dcc4aeb1128f4a9d5d0cac02 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 7 Jul 2021 14:39:17 +0200
Subject: [PATCH] Have 3 explicit avatar options

custom image, gravatar or none
---
 src/img/avatar-default-symbolic.svg | 133 ++++++++++++++++++++++++++++
 src/js/client.js                    |  41 ++++-----
 src/views/profile.html              |  35 +++++---
 src/views/profile.js                |  28 +++---
 4 files changed, 192 insertions(+), 45 deletions(-)
 create mode 100644 src/img/avatar-default-symbolic.svg

diff --git a/src/img/avatar-default-symbolic.svg b/src/img/avatar-default-symbolic.svg
new file mode 100644
index 000000000..ee7e8c6b0
--- /dev/null
+++ b/src/img/avatar-default-symbolic.svg
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r13725"
+   version="1.0"
+   sodipodi:docname="avatar-default-symbolic.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#e7e7e7"
+     borderopacity="1"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.964497"
+     inkscape:cx="6.5536056"
+     inkscape:cy="-0.025360958"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:showpageshadow="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1030"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="true">
+    <sodipodi:guide
+       orientation="1,0"
+       position="0,112"
+       id="guide2383" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="78.156291,0"
+       id="guide2389" />
+    <inkscape:grid
+       type="xygrid"
+       id="grid3672"
+       visible="true"
+       enabled="true" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="22.008699,4.1542523"
+       id="guide2950" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="11.22532,22.008699"
+       id="guide2952" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccsccccc"
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       id="path3935"
+       d="m -13.771529,5.9050966 c 0.181174,0.8569201 0.2823,1.5051186 0.135325,2.3620387 -1.145861,0.9506717 -4.076448,1.3778558 -4.072056,2.3620387 l -0.393673,2.558875 c 0,0.978388 2.731928,1.771529 6.101933,1.771529 3.370005,0 6.101933,-0.793141 6.101933,-1.771529 L -6.29174,10.629174 c -0.0047,-0.8423279 -2.952548,-1.377856 -4.084358,-2.3620387 -0.09668,-0.7953524 -0.01972,-1.5666863 0.147627,-2.3620387 l -3.543058,0 z" />
+    <path
+       transform="matrix(0.34209356,0,0,0.34209356,-8.638748,-12.26548)"
+       d="m -9.75,73.09375 c -3.766412,0.121068 -7.468069,1.386362 -11.40625,3.25 a 1.25331,1.25331 0 0 0 -0.6875,1.4375 l 0.625,2.53125 a 1.25331,1.25331 0 0 0 0.78125,0.84375 c 0.161757,0.06256 0.275429,0.183794 0.71875,0.3125 2.335298,0.677989 5.907957,1.15625 9.90625,1.15625 3.9982931,0 7.5709518,-0.478261 9.90625,-1.15625 0.44332111,-0.128707 0.55699247,-0.24994 0.71875,-0.3125 a 1.25331,1.25331 0 0 0 0.78125,-0.8125 L 2.25,78.03125 a 1.25331,1.25331 0 0 0 -0.53125,-1.375 C -2.2051532,74.042333 -5.9835879,72.972682 -9.75,73.09375 z"
+       id="path3937"
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       inkscape:original="M -9.71875 74.34375 C -13.230599 74.456635 -16.76467 75.641953 -20.625 77.46875 L -20 80 C -19.731211 80.103955 -19.729288 80.147142 -19.375 80.25 C -17.218663 80.876033 -13.703662 81.375 -9.8125 81.375 C -5.9213382 81.375 -2.4063369 80.876033 -0.25 80.25 C 0.10428761 80.147142 0.10621054 80.103955 0.375 80 L 1.03125 77.6875 C -2.7172738 75.190412 -6.2069011 74.230865 -9.71875 74.34375 z "
+       inkscape:radius="1.2531847"
+       sodipodi:type="inkscape:offset" />
+    <rect
+       transform="matrix(0.9205234,-0.39068744,0.39068744,0.9205234,0,0)"
+       ry="1.1810193"
+       rx="1.1810193"
+       y="-2.754653"
+       x="-15.569602"
+       height="2.1871843"
+       width="1.0935922"
+       id="rect3939"
+       style="fill:#000000;fill-opacity:1;stroke:none" />
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       id="rect3941"
+       width="1.0935922"
+       height="2.1871843"
+       x="6.5567312"
+       y="6.6361833"
+       rx="1.1810193"
+       ry="1.1810193"
+       transform="matrix(-0.9205234,-0.39068744,-0.39068744,0.9205234,0,0)" />
+    <path
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc"
+       style="fill:#000000;fill-opacity:1;stroke:none"
+       id="path3943"
+       d="m -12,0 c -1.630647,0 -2.952548,1.2337743 -2.952548,2.7557118 0.01278,0.5632387 0.06085,1.232346 0.393673,2.7557117 0.196837,0.5905097 1.558851,2.1652021 1.574692,2.3620387 0.381733,0.1968365 1.771529,0.1968365 2.165203,0 0,-0.1968366 1.181019,-1.771529 1.377855,-2.3620387 C -9.066594,3.9281919 -9.06754,3.3462214 -9.047452,2.7557118 -9.047452,1.2337743 -10.369352,0 -12,0 z" />
+    <path
+       id="path3157"
+       d="m 38,0 c -1.630647,0 -2.9375,1.2280625 -2.9375,2.75 0.0037,0.1620664 0.01579,0.3963239 0.03125,0.59375 -0.27885,0.118349 -0.299198,0.6610508 -0.0625,1.21875 0.09386,0.2211566 0.213411,0.3909677 0.34375,0.53125 0.03167,0.1567366 0.02336,0.2271022 0.0625,0.40625 0.196837,0.5905097 1.577909,2.1781634 1.59375,2.375 0.381733,0.1968365 1.762576,0.1968365 2.15625,0 0,-0.1968366 1.178164,-1.7844903 1.375,-2.375 C 40.60622,5.3151913 40.62213,5.1903792 40.65625,5.03125 40.764832,4.8997227 40.857512,4.7509639 40.9375,4.5625 41.162363,4.0326858 41.147829,3.5269131 40.90625,3.375 40.920493,3.1615298 40.931227,2.9343906 40.9375,2.75 40.9375,1.2280625 39.630648,0 38,0 z m -1.78125,8.40625 c -1.233461,0.8706787 -3.941711,1.2750309 -3.9375,2.21875 l -0.375,2.5625 c 0,0.519013 0.775005,0.988493 2,1.3125 l 0.1875,0.71875 A 0.42874928,0.42874928 0 0 0 34.375,15.5 c 0.05534,0.0214 0.09834,0.04972 0.25,0.09375 C 35.42389,15.825686 36.63221,16 38,16 39.36779,16 40.60736,15.825686 41.40625,15.59375 41.557907,15.54972 41.569664,15.5214 41.625,15.5 a 0.42874928,0.42874928 0 0 0 0.28125,-0.28125 L 42.125,14.5 c 1.208619,-0.323691 1.96875,-0.797472 1.96875,-1.3125 l -0.375,-2.5625 C 43.714419,9.848863 41.21753,9.3437322 39.9375,8.5 A 0.97584188,0.97584188 0 0 1 39.625,8.75 C 39.020006,9.0524961 38.608286,9 38.09375,9 37.836482,9 37.587947,9.0004922 37.34375,8.96875 37.099553,8.937008 36.902156,8.909026 36.59375,8.75 a 0.97584188,0.97584188 0 0 1 -0.375,-0.34375 z"
+       style="fill:#bebebe;fill-opacity:1;stroke:none"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#bebebe;fill-opacity:1;stroke:none"
+       d="m 8,0.7783785 c -2.256463,0 -4.0648649,1.699373 -4.0648649,3.8054054 0.00509,0.2242649 0.021845,0.5484266 0.043244,0.8216216 -0.3858679,0.1637694 -0.4140257,0.9147514 -0.086487,1.6864865 0.1298861,0.3060329 0.295314,0.5410147 0.4756757,0.7351351 0.043823,0.2168896 0.032325,0.3142604 0.086486,0.5621622 0.1511376,0.4534118 0.7470076,1.3420395 1.2972972,2.0756757 0.05396,0.563421 0.109936,1.132004 0,1.772973 -1.5856236,1.315524 -5.67094212,1.881347 -5.66486451,3.243243 L 0,16 16,16 15.91351,15.481081 c -0.0065,-1.1656 -4.098682,-1.881347 -5.664862,-3.243243 -0.06337,-0.521335 -0.07545,-1.043272 -0.04324,-1.556757 0.501434,-0.7738141 1.172201,-1.7868737 1.34054,-2.2918917 0.0605,-0.2557354 0.08252,-0.4284482 0.129729,-0.6486487 0.150255,-0.1820053 0.278504,-0.3878554 0.38919,-0.6486486 0.311162,-0.7331483 0.291049,-1.4330284 -0.04324,-1.6432432 0.01971,-0.2953966 0.03456,-0.6097082 0.04324,-0.8648649 0,-2.1060324 -1.8084,-3.8054054 -4.064865,-3.8054054 z"
+       id="path3159"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/src/js/client.js b/src/js/client.js
index 40f9723a1..2440839c0 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -1805,28 +1805,29 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
-    Client.prototype.clearAvatar = function (callback) {
-        del('/api/v1/profile/avatar', {}, function (error, data, status) {
-            if (error) return callback(error);
-            if (status !== 202) return callback(new ClientError(status, data));
-            callback(null);
-        });
-    };
+    Client.prototype.changeAvatar = function (avatarFileOrType, callback) {
+        // Blob type if object
+        if (typeof avatarFileOrType === 'object') {
+            var fd = new FormData();
+            fd.append('avatar', avatarFileOrType);
 
-    Client.prototype.changeAvatar = function (avatarFile, callback) {
-        var fd = new FormData();
-        fd.append('avatar', avatarFile);
+            var config = {
+                headers: { 'Content-Type': undefined },
+                transformRequest: angular.identity
+            };
 
-        var config = {
-            headers: { 'Content-Type': undefined },
-            transformRequest: angular.identity
-        };
-
-        post('/api/v1/profile/avatar', fd, config, function (error, data, status) {
-            if (error) return callback(error);
-            if (status !== 202) return callback(new ClientError(status, data));
-            callback(null);
-        });
+            post('/api/v1/profile/avatar', fd, config, function (error, data, status) {
+                if (error) return callback(error);
+                if (status !== 202) return callback(new ClientError(status, data));
+                callback(null);
+            });
+        } else {
+            post('/api/v1/profile/avatar', { avatar: avatarFileOrType === 'gravatar' ? 'gravatar' : '' }, null, function (error, data, status) {
+                if (error) return callback(error);
+                if (status !== 202) return callback(new ClientError(status, data));
+                callback(null);
+            });
+        }
     };
 
     Client.prototype.changePassword = function (currentPassword, newPassword, callback) {
diff --git a/src/views/profile.html b/src/views/profile.html
index b09e6b0c8..66bc77343 100644
--- a/src/views/profile.html
+++ b/src/views/profile.html
@@ -7,32 +7,39 @@
         <h4 class="modal-title">{{ 'profile.changeAvatar.title' | tr }}</h4>
       </div>
       <div class="modal-body settings-avatar-selector">
-        <div class="radio">
-          <label>
-            <input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="true_string">
-            <span ng-bind-html="'profile.changeAvatar.useGravatar' | tr:{ gravatarLink: 'https://gravatar.com/' }"></span>
-          </label>
+        <div style="margin: auto; text-align: left">
+          <div class="radio">
+            <label>
+              <input type="radio" name="avatarType" ng-model="avatarChange.type" value="">
+              {{ 'profile.changeAvatar.noAvatar' | tr }}
+            </label>
+          </div>
+          <div class="radio">
+            <label>
+              <input type="radio" name="avatarType" ng-model="avatarChange.type" value="gravatar">
+              <span ng-bind-html="'profile.changeAvatar.useGravatar' | tr:{ gravatarLink: 'https://gravatar.com/' }"></span>
+            </label>
+          </div>
+          <div class="radio">
+            <label>
+              <input type="radio" name="avatarType" ng-model="avatarChange.type" value="custom">
+              {{ 'profile.changeAvatar.useCustomPicture' | tr }}
+            </label>
+          </div>
         </div>
-        <div class="radio">
-          <label>
-            <input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="">
-            {{ 'profile.changeAvatar.useCustomPicture' | tr }}
-          </label>
-        </div>
-        <div ng-hide="avatarChange.useGravatar" class="preview-avatar">
+        <div ng-show="avatarChange.type === 'custom'" class="preview-avatar">
           <img id="previewAvatar" width="128" height="128" class="copy" ng-click="avatarChange.showCustomAvatarSelector()"/>
           <input type="file" id="avatarFileInput" style="display: none" accept="image/*"/>
         </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
-        <button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy || (avatarChange.useGravatarOrig === avatarChange.useGravatar && avatarChange.useGravatar) || (!avatarChange.useGravatar && !avatarChange.pictureChanged)"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> {{ 'main.dialog.save' | tr }}</button>
+        <button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy || (avatarChange.typeOrig === avatarChange.type && !avatarChange.pictureChanged) || (avatarChange.type === 'custom' && !avatarChange.pictureChanged)"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> {{ 'main.dialog.save' | tr }}</button>
       </div>
     </div>
   </div>
 </div>
 
-
 <!-- Modal change password -->
 <div class="modal fade" id="passwordChangeModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
diff --git a/src/views/profile.js b/src/views/profile.js
index 0159aef7b..32ab81533 100644
--- a/src/views/profile.js
+++ b/src/views/profile.js
@@ -122,8 +122,8 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
         busy: false,
         error: {},
         avatar: null,
-        useGravatar: '',
-        useGravatarOrig: '',
+        type: '',
+        typeOrig: '',
         pictureChanged: false,
 
         getBlobFromImg: function (img, callback) {
@@ -176,13 +176,13 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
                 });
             }
 
-            if ($scope.avatarChange.useGravatar) {
-                Client.clearAvatar(done);
-            } else {
+            if ($scope.avatarChange.type === 'custom') {
                 var img = document.getElementById('previewAvatar');
                 $scope.avatarChange.getBlobFromImg(img, function (blob) {
                     Client.changeAvatar(blob, done);
                 });
+            } else {
+                Client.changeAvatar($scope.avatarChange.type, done);
             }
         },
 
@@ -194,13 +194,19 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
 
         avatarChangeReset: function () {
             $scope.avatarChange.error.avatar = null;
-            $scope.avatarChange.useGravatar = $scope.user.avatarUrl.indexOf('https://www.gravatar.com') === 0 ? 'true_string' : '';
-            $scope.avatarChange.useGravatarOrig = $scope.avatarChange.useGravatar;
+
+            if ($scope.user.avatarUrl.indexOf('/api/v1/profile/avatar') !== -1) {
+                $scope.avatarChange.type = 'custom';
+            } else if ($scope.user.avatarUrl.indexOf('https://www.gravatar.com') === 0) {
+                $scope.avatarChange.type = 'gravatar';
+            } else {
+                $scope.avatarChange.type = '';
+            }
+
+            $scope.avatarChange.typeOrig = $scope.avatarChange.type;
+            document.getElementById('previewAvatar').src = $scope.avatarChange.type === 'custom' ? $scope.user.avatarUrl : '';
             $scope.avatarChange.pictureChanged = false;
-            document.getElementById('previewAvatar').src = $scope.avatarChange.useGravatar ? '' : $scope.user.avatarUrl;
-            $scope.avatarChange.avatar = $scope.avatarChange.useGravatar ? {} : {
-                url: $scope.user.avatarUrl
-            };
+            $scope.avatarChange.avatar = null;
             $scope.avatarChange.busy = false;
         },