Fill user page with avatar, display name and matrix id

webclient/app.css

@@ -259,6 +259,14 @@ h1 {
     max-height: 100%;
 }
 
+/*** User profile page ***/
+#user-ids {
+    padding-left: 1em;
+}
+
+#user-displayname {
+    font-size: 16pt;
+}
 /******************************/
 
 #header {

webclient/user/user-controller.js

@@ -17,9 +17,22 @@ limitations under the License.
 'use strict';
 
 angular.module('UserController', ['matrixService'])
-.controller('UserController', ['$scope', '$routeParams',
+.controller('UserController', ['$scope', '$routeParams', 'matrixService',
-                              function($scope, $routeParams) {                 
+                              function($scope, $routeParams, matrixService) {                 
     $scope.user = {
-        id: $routeParams.user_matrix_id
+        id: $routeParams.user_matrix_id,
+        displayname: "",
+        avatar_url: undefined
     };
+    
+    matrixService.getDisplayName($scope.user.id).then(
+        function(response) {
+            $scope.user.displayname = response.data.displayname;
+        }
+    ); 
+    matrixService.getProfilePictureUrl($scope.user.id).then(
+        function(response) {
+            $scope.user.avatar_url = response.data.avatar_url;
+        }
+    );
 }]);

webclient/user/user.html

@@ -3,8 +3,26 @@
     <div id="page">
     <div id="wrapper">
         
-        <div> {{ user.id }}</div>
+        <div>
-    
+            <form>
+                <table>
+                    <tr>
+                        <td>
+                            <div class="profile-avatar">
+                                <img ng-src="{{ user.avatar_url || 'img/default-profile.jpg' }}"/>
+                            </div>
+                        </td>
+                        <td>
+                            <div id="user-ids">
+                                <div id="user-displayname">{{ user.displayname }}</div>
+                                <div>{{ user.id }}</div>                        
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            </form>
+        </div>
+
         {{ feedback }}
 
     </div>