Get user display name and avatar from the server rather than storing them in the local storage

2 files changed, 30 insertions, 3 deletions

diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js
index 547a5c5603..7ae13f12e8 100644
--- a/webclient/home/home-controller.js
+++ b/webclient/home/home-controller.js
@@ -37,6 +37,11 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen
     $scope.joinAlias = {
         room_alias: ""
     };
+    
+    $scope.profile = {
+        displayName: "",
+        avatarUrl: ""
+    };
 
     var refresh = function() {
         
@@ -108,6 +113,28 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen
     };
  
     $scope.onInit = function() {
+        // Load profile data
+        // Display name
+        matrixService.getDisplayName($scope.config.user_id).then(
+            function(response) {
+                $scope.profile.displayName = response.data.displayname;
+                $scope.profileOnServer.displayName = response.data.displayname;
+            },
+            function(error) {
+                $scope.feedback = "Can't load display name";
+            } 
+        );
+        // Avatar
+        matrixService.getProfilePictureUrl($scope.config.user_id).then(
+            function(response) {
+                $scope.profile.avatarUrl = response.data.avatar_url;
+                $scope.profileOnServer.avatarUrl = response.data.avatar_url;
+            },
+            function(error) {
+                $scope.feedback = "Can't load avatar URL";
+            } 
+        );
+
         refresh();
     };
 }]);
diff --git a/webclient/home/home.html b/webclient/home/home.html
index d38b843d83..1b1c21d9d2 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -9,13 +9,13 @@
                 <tr>
                     <td>
                         <div class="profile-avatar">
-                            <img ng-src="{{ config.avatarUrl || 'img/default-profile.jpg' }}"/>
+                            <img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.jpg' }}"/>
                         </div>
                     </td>
                     <td>
                         <div id="user-ids">
-                            <div id="user-displayname">{{ config.displayName }}</div>
-                            <div>{{ config.user_id }}</div>                        
+                            <div id="user-displayname">{{ profile.displayName }}</div>
+                            <div>{{ config.user_id }}</div>
                         </div>
                     </td>
                 </tr>