Ensure the avatar is always updated in all places

Fixes #549

webadmin/src/index.html

@@ -121,7 +121,7 @@
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a class="navbar-brand navbar-brand-icon" href="#/"><img ng-src="{{ cloudronAvatar }}" width="40" height="40"/></a>
+                    <a class="navbar-brand navbar-brand-icon" href="#/"><img ng-src="{{ client.avatar }}" width="40" height="40"/></a>
                     <a class="navbar-brand" href="#/">Cloudron</a>
                 </div>
                 <!-- /.navbar-header -->

webadmin/src/js/client.js

@@ -86,6 +86,7 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         this._clientId = '<%= oauth.clientId %>';
         this._clientSecret = '<%= oauth.clientSecret %>';
         this.apiOrigin = '<%= oauth.apiOrigin %>';
+        this.avatar = this.apiOrigin + '/api/v1/cloudron/avatar?' + String(Math.random()).slice(2);
 
         this.setToken(localStorage.token);
     }

webadmin/src/js/main.js

@@ -4,8 +4,8 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
     $scope.initialized = false;
     $scope.user = Client.getUserInfo();
     $scope.installedApps = Client.getInstalledApps();
-    $scope.cloudronAvatar = Client.apiOrigin + '/api/v1/cloudron/avatar';
     $scope.config = {};
+    $scope.client = Client;
 
     $scope.update = {
         busy: false,

webadmin/src/views/settings.html

@@ -40,7 +40,7 @@
                 <h4 class="modal-title">Change your Cloudron Avatar</h4>
             </div>
             <div class="modal-body settings-avatar-selector">
-                <img id="previewAvatar" width="128" height="128" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url || avatar.data || avatar.url}}"/>
+                <img id="previewAvatar" width="128" height="128" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url || client.avatar}}"/>
                 <input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
 
                 <br/>
@@ -94,7 +94,7 @@
 <div class="card" style="margin-bottom: 15px;" ng-show="user.admin">
     <div class="row">
         <div class="col-xs-4" style="min-width: 150px;">
-            <div class="settings-avatar" ng-click="showChangeAvatar()" style="background-image: url('{{avatar.data || avatar.url}}');">
+            <div class="settings-avatar" ng-click="showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
                 <div class="overlay"></div>
             </div>
         </div>

webadmin/src/views/settings.js

@@ -1,18 +1,15 @@
 'use strict';
 
-angular.module('Application').controller('SettingsController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
+angular.module('Application').controller('SettingsController', ['$scope', '$location', '$rootScope', 'Client', function ($scope, $location, $rootScope, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
 
+    $scope.client = Client;
     $scope.user = Client.getUserInfo();
     $scope.config = Client.getConfig();
     $scope.dnsConfig = {};
 
     $scope.lastBackup = null;
     $scope.backups = [];
-    $scope.avatar = {
-        data: null,
-        url: null
-    };
 
     $scope.developerModeChange = {
         busy: false,
@@ -188,11 +185,12 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
                 if (error) {
                     console.error('Unable to change developer mode.', error);
                 } else {
-                    // Do soft reload, since the browser will not update the avatar URLs in the UI
-                    window.location.reload();
+                    Client.avatar = Client.apiOrigin + '/api/v1/cloudron/avatar?' + String(Math.random()).slice(2);
+                    console.log('set new avatar', Client.avatar)
                 }
 
-                $scope.avatarChange.busy = false;
+                $('#avatarChangeModal').modal('hide');
+                avatarChangeReset();
             });
         });
     };
@@ -263,7 +261,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     Client.onReady(function () {
         fetchBackups();
 
-        $scope.avatar.url = ($scope.config.isCustomDomain ? '//my.' : '//my-') + $scope.config.fqdn + '/api/v1/cloudron/avatar';
+        // $scope.avatar.url = ($scope.config.isCustomDomain ? '//my.' : '//my-') + $scope.config.fqdn + '/api/v1/cloudron/avatar';
     });
 
     // setup all the dialog focus handling