Merge branch 'develop' into server2server_tls

25 files changed, 773 insertions, 408 deletions

diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 80474bb8df..172770f82f 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -37,6 +37,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         mPresence.start();
     }
     
+    $scope.user_id = matrixService.config().user_id;
+    
     /**
      * Open a given page.
      * @param {String} url url of the page
@@ -45,6 +47,16 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         $location.url(url);
     };
     
+    // Open the given user profile page
+    $scope.goToUserPage = function(user_id) {
+        if (user_id === $scope.user_id) {
+            $location.url("/settings");
+        }
+        else {
+            $location.url("/user/" + user_id);
+        }
+    };
+    
     // Logs the user out 
     $scope.logout = function() {
         
@@ -69,11 +81,8 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         $scope.logout();
     });
     
-    $scope.requestNotifications = function() {
-        if (window.Notification) {
-            console.log("Notification.permission: " + window.Notification.permission);
-            window.Notification.requestPermission(function(){});
-        }
+    $scope.updateHeader = function() {
+        $scope.user_id = matrixService.config().user_id;
     };
     
 }]);
diff --git a/webclient/app-directive.js b/webclient/app-directive.js
index 01f60fdadf..eee0d3842f 100644
--- a/webclient/app-directive.js
+++ b/webclient/app-directive.js
@@ -32,7 +32,12 @@ angular.module('matrixWebClient')
 .directive('ngFocus', ['$timeout', function($timeout) {
     return {
         link: function(scope, element, attr) {
-            $timeout(function() { element[0].focus(); }, 0);
+            // XXX: slightly evil hack to disable autofocus on iOS, as in general
+            // it causes more problems than it fixes, by bouncing the page
+            // around
+            if (!/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) {
+                $timeout(function() { element[0].focus(); }, 0);
+            }            
         }
     };
 }]);
\ No newline at end of file
diff --git a/webclient/app.css b/webclient/app.css
index 16f9dd72b7..cd1820e155 100644..100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -1,121 +1,194 @@
-/*** Mobile voodoo ***/
-@media all and (max-device-width: 640px) {
-            
-    #messageTableWrapper {
-        margin-right: 0px ! important;
-    }
-    
-    .leftBlock {
-        width: 8em ! important;
-        font-size: 8px ! important;
-    }
-    
-    .rightBlock {
-        width: 0px ! important;
-        display: none ! important;
-    }
-    
-    .avatar {
-        width: 36px ! important;
-    }
-    
-    #header,
-    #messageTable,
-    #wrapper,
-    #roomName,
-    #controls {
-        max-width: 640px ! important;
-    }    
-    
-    #userIdCell,
-    #usersTableWrapper,
-    #extraControls {
-        display: none;
-    }
-    
-    #buttonsCell {
-        width: 60px ! important;
-        padding-left: 20px ! important;
-    }
-    
-    #roomLogo {
-        display: none;
-    }
-    
-    #roomName {
-        text-align: left ! important;
-        top: -35px ! important;
-    }
-    
-    .bubble {
-        font-size: 12px ! important;
-        min-height: 20px ! important;
-    }
-    
-    #page {
-        top: 35px ! important;
-        bottom: 70px ! important;
-    }
-    
-    #header,
-    #page {
-        margin: 5px ! important;
-    }
-    
-    #header {
-        padding: 5px ! important;
-    }
-        
-    /* stop zoom on select */
-    select:focus,
-    textarea,
-    input
-    {
-        font-size: 16px ! important;
-    }
-    
+/** Common layout **/
+
+html {
+    height: 100%;
 }
 
 body {
+    height: 100%;
     font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif;
     font-size: 12pt;
     margin: 0px;
 }
 
 h1 {
-    font-family: Helvetica, Arial, sans-serif;
+    font-size: 20pt;
 }
 
-/*** Overall page layout ***/
+a:link    { color: #666; }
+a:visited { color: #666; }
+a:hover   { color: #000; }
+a:active  { color: #000; }
 
 #page {
-    position: absolute;
-    top: 80px;
-    bottom: 100px;
-    left: 0px;
-    right: 0px;
-    margin: 20px;
+    min-height: 100%;
+    margin-bottom: -32px; /* to make room for the footer */
 }
 
 #wrapper {
     margin: auto;
     max-width: 1280px;
-    height: 100%;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
-#roomName {
+#header
+{
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    background-color: #333;
+    height: 32px;
+}
+
+#headerContent {
+    color: #ccc;
     max-width: 1280px;
+    margin: auto;
+    text-align: right;
+    height: 32px;
+    line-height: 32px;
+}
+
+#headerContent a:link,
+#headerContent a:visited,
+#headerContent a:hover,
+#headerContent a:active {
+    color: #fff;
+}
+
+#footer
+{
     width: 100%;
+    border-top: #666 1px solid;
+    background-color: #aaa;
+    height: 32px;
+}
+
+#footerContent
+{
+    font-size: 8pt;
+    color: #fff;
+    max-width: 1280px;
+    margin: auto;
+    text-align: center;
+    height: 32px;
+    line-height: 32px;
+}
+
+#genericHeading
+{
+    margin-top: 13px;
+}
+
+#feedback {
+    color: #800;
+}
+
+.mouse-pointer {
+    cursor: pointer;
+}
+
+.invited {
+    opacity: 0.2;
+}
+
+/*** Login Pages ***/
+
+.loginWrapper {
+    text-align: center;
+}
+
+#loginForm {
+    text-align: left;
+    padding: 1em;
+    margin-bottom: 40px;
+    display: inline-block;
+    
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    
+    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
+    
+    background-color: #f8f8f8;
+    border: 1px #ccc solid;
+}
+
+#loginForm input[type='radio'] {
+    margin-right: 1em;
+}
+
+#serverConfig {
+    text-align: center;
+}
+
+#serverConfig,
+#serverConfig input,
+#serverConfig button
+{
+    font-size: 10pt ! important;
+}
+
+.smallPrint {
+    color: #888;
+    font-size: 9pt ! important;
+    font-style: italic ! important;
+}
+
+#serverConfig label {
+    display: inline-block;
     text-align: right;
-    top: -40px;
+    margin-right: 0.5em;
+    width: 7em;   
+}
+
+#loginForm,
+#loginForm input,
+#loginForm button,
+#loginForm select {
+    font-size: 18px;
+}
+
+/*** Room page ***/
+
+#roomPage {
     position: absolute;
+    top: 120px;
+    bottom: 120px;
+    left: 20px;
+    right: 20px;
+}
+
+#roomWrapper {
+    margin: auto;
+    max-width: 1280px;
+    height: 100%;
+}
+
+#roomName {
+    float: right;
     font-size: 16px;
+    margin-top: 15px;
+}
+
+#roomHeader {
+    margin: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 53px;
+    max-width: 1280px;
 }
 
 #controlPanel {
     position: absolute;
     bottom: 0px;
     width: 100%;
+    height: 100px;
     background-color: #f8f8f8;
     border-top: #aaa 1px solid;
 }
@@ -146,10 +219,6 @@ h1 {
     background-color: #faa;
 }
 
-.mouse-pointer {
-    cursor: pointer;
-}
-
 /*** Participant list ***/
 
 #usersTableWrapper {
@@ -300,7 +369,7 @@ h1 {
     display: inline-block;
     margin-bottom: -1px;
     max-width: 90%;
-    font-size: 16px;
+    font-size: 14px;
     word-wrap: break-word;
     padding-top: 7px;
     padding-bottom: 5px;
@@ -310,6 +379,11 @@ h1 {
     -webkit-text-size-adjust:100%
 }
 
+.bubble img {
+    max-width: 100%;
+    max-height: auto;
+}
+
 .differentUser td {
     padding-bottom: 5px ! important;
 }
@@ -341,8 +415,8 @@ h1 {
 }
 
 #room-fullscreen-image img {
-    max-width: 100%;
-    max-height: 100%;
+    max-width: 90%;
+    max-height: 90%;
     bottom: 0;
     left: 0;
     margin: auto;
@@ -350,9 +424,14 @@ h1 {
     position: fixed;
     right: 0;
     top: 0;
+
+    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);    
 }
 
 /*** Recents ***/
+
 .recentsTable {
     max-width: 480px;
     width: 100%;
@@ -402,11 +481,14 @@ h1 {
 }
 
 /*** Recents in the room page ***/
+
 #roomRecentsTableWrapper {
     float: left;
     max-width: 320px;
-    margin-right: 20px;
+    padding-right: 10px;
+    margin-right: 10px;
     height: 100%;
+    border-right: 1px solid #ddd;
     overflow-y: auto;
 }
 
@@ -421,55 +503,14 @@ h1 {
 }
 
 .profile-avatar img {
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;    
 }
 
 /*** User profile page ***/
-#user-ids {
-    padding-left: 1em;
-}
 
 #user-displayname {
     font-size: 24px;
 }
-/******************************/
 
-#header
-{
-    padding: 20px;
-    max-width: 1280px;
-    margin: auto;
-}
-
-#logo,
-#roomLogo {
-    max-width: 1280px;
-    margin: auto;
-}
-
-#header-buttons {
-    float: right;
-}
-
-.text_entry_section {
-    position: fixed;
-    bottom: 0;
-    z-index: 100;
-    left: 0;
-    right: 10em;
-    width: 100%;
-    background: #e0e0e0;
-}
-
-.member_invited {
-    color: blue;
-}
-
-.member_joined {
-
-}
-
-.member_left {
-    color: gray;
-}
diff --git a/webclient/app.js b/webclient/app.js
index 02695c3ae6..9663ddf967 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -18,6 +18,7 @@ var matrixWebClient = angular.module('matrixWebClient', [
     'ngRoute',
     'MatrixWebClientController',
     'LoginController',
+    'RegisterController',
     'RoomController',
     'HomeController',
     'RecentsController',
@@ -38,6 +39,10 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',
                 templateUrl: 'login/login.html',
                 controller: 'LoginController'
             }).
+            when('/register', {
+                templateUrl: 'login/register.html',
+                controller: 'RegisterController'
+            }).
             when('/room/:room_id_or_alias', {
                 templateUrl: 'room/room.html',
                 controller: 'RoomController'
@@ -84,7 +89,10 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',
 matrixWebClient.run(['$location', 'matrixService', function($location, matrixService) {
 
     // If user auth details are not in cache, go to the login page
-    if (!matrixService.isUserLoggedIn()) {
+    if (!matrixService.isUserLoggedIn() &&
+        $location.path() !== "/login" &&
+        $location.path() !== "/register")
+    {
         $location.path("login");
     }
 
diff --git a/webclient/components/fileUpload/file-upload-service.js b/webclient/components/fileUpload/file-upload-service.js
index 5f01478fd1..699a3cbffc 100644
--- a/webclient/components/fileUpload/file-upload-service.js
+++ b/webclient/components/fileUpload/file-upload-service.js
@@ -30,7 +30,7 @@ angular.module('mFileUpload', ['matrixService', 'mUtilities'])
      */
     this.uploadFile = function(file) {
         var deferred = $q.defer();
-        console.log("Uploading " + file.name + "... to /matrix/content");
+        console.log("Uploading " + file.name + "... to /_matrix/content");
         matrixService.uploadContent(file).then(
             function(response) {
                 var content_url = response.data.content_token;
diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index c0a7735a7c..47b63d7f2f 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -36,7 +36,7 @@ var forAllTracksOnStream = function(s, f) {
 }
 
 angular.module('MatrixCall', [])
-.factory('MatrixCall', ['matrixService', 'matrixPhoneService', function MatrixCallFactory(matrixService, matrixPhoneService) {
+.factory('MatrixCall', ['matrixService', 'matrixPhoneService', '$rootScope', function MatrixCallFactory(matrixService, matrixPhoneService, $rootScope) {
     var MatrixCall = function(room_id) {
         this.room_id = room_id;
         this.call_id = "c" + new Date().getTime();
@@ -208,6 +208,7 @@ angular.module('MatrixCall', [])
         // ideally we'd consider the call to be connected when we get media but chrome doesn't implement nay of the 'onstarted' events yet
         if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') {
             this.state = 'connected';
+            $rootScope.$apply();
         }
     };
 
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index 8543491dca..d509c20b0f 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -38,7 +38,7 @@ angular.module('matrixService', [])
     
     // Current version of permanent storage
     var configVersion = 0;
-    var prefixPath = "/matrix/client/api/v1";
+    var prefixPath = "/_matrix/client/api/v1";
     var MAPPING_PREFIX = "alias_for_";
 
     var doRequest = function(method, path, params, data, $httpParams) {
@@ -95,14 +95,18 @@ angular.module('matrixService', [])
         },
 
         // Create a room
-        create: function(room_id, visibility) {
+        create: function(room_alias, visibility) {
             // The REST path spec
             var path = "/createRoom";
 
-            return doRequest("POST", path, undefined, {
-                visibility: visibility,
-                room_alias_name: room_id
-            });
+            var req = {
+                "visibility": visibility
+            };
+            if (room_alias) {
+                req.room_alias_name = room_alias;
+            }
+            
+            return doRequest("POST", path, undefined, req);
         },
 
         // List all rooms joined or been invited to
@@ -164,7 +168,7 @@ angular.module('matrixService', [])
 
         // Retrieves the room ID corresponding to a room alias
         resolveRoomAlias:function(room_alias) {
-            var path = "/matrix/client/api/v1/directory/room/$room_alias";
+            var path = "/_matrix/client/api/v1/directory/room/$room_alias";
             room_alias = encodeURIComponent(room_alias);
 
             path = path.replace("$room_alias", room_alias);
@@ -304,7 +308,7 @@ angular.module('matrixService', [])
 
         // hit the Identity Server for a 3PID request.
         linkEmail: function(email, clientSecret, sendAttempt) {
-            var path = "/matrix/identity/api/v1/validate/email/requestToken"
+            var path = "/_matrix/identity/api/v1/validate/email/requestToken"
             var data = "clientSecret="+clientSecret+"&email=" + encodeURIComponent(email)+"&sendAttempt="+sendAttempt;
             var headers = {};
             headers["Content-Type"] = "application/x-www-form-urlencoded";
@@ -312,7 +316,7 @@ angular.module('matrixService', [])
         },
 
         authEmail: function(clientSecret, tokenId, code) {
-            var path = "/matrix/identity/api/v1/validate/email/submitToken";
+            var path = "/_matrix/identity/api/v1/validate/email/submitToken";
             var data = "token="+code+"&sid="+tokenId+"&clientSecret="+clientSecret;
             var headers = {};
             headers["Content-Type"] = "application/x-www-form-urlencoded";
@@ -320,7 +324,7 @@ angular.module('matrixService', [])
         },
 
         bindEmail: function(userId, tokenId, clientSecret) {
-            var path = "/matrix/identity/api/v1/3pid/bind";
+            var path = "/_matrix/identity/api/v1/3pid/bind";
             var data = "mxid="+encodeURIComponent(userId)+"&sid="+tokenId+"&clientSecret="+clientSecret;
             var headers = {};
             headers["Content-Type"] = "application/x-www-form-urlencoded";
@@ -328,7 +332,7 @@ angular.module('matrixService', [])
         },
         
         uploadContent: function(file) {
-            var path = "/matrix/content";
+            var path = "/_matrix/content";
             var headers = {
                 "Content-Type": undefined // undefined means angular will figure it out
             };
diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js
index 547a5c5603..847918d5dc 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() {
         
@@ -53,14 +58,14 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen
         );
     };
     
-    $scope.createNewRoom = function(room_id, isPrivate) {
+    $scope.createNewRoom = function(room_alias, isPrivate) {
         
         var visibility = "public";
         if (isPrivate) {
             visibility = "private";
         }
         
-        matrixService.create(room_id, visibility).then(
+        matrixService.create(room_alias, visibility).then(
             function(response) { 
                 // This room has been created. Refresh the rooms list
                 console.log("Created room " + response.data.room_alias + " with id: "+
@@ -108,6 +113,26 @@ 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;
+            },
+            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;
+            },
+            function(error) {
+                $scope.feedback = "Can't load avatar URL";
+            } 
+        );
+
         refresh();
     };
 }]);
diff --git a/webclient/home/home.html b/webclient/home/home.html
index d38b843d83..c1f9643839 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -1,29 +1,24 @@
 <div ng-controller="HomeController" data-ng-init="onInit()">
 
-    <div id="page">
     <div id="wrapper">
-        
+    
+    <div id="genericHeading">
+        <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
+    </div>
+    
+    <h1>Welcome to homeserver {{ config.homeserver }}</h1>
+    
     <div>
-        <form>
-            <table>
-                <tr>
-                    <td>
-                        <div class="profile-avatar">
-                            <img ng-src="{{ config.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>
-                    </td>
-                </tr>
-            </table>
-        </form>
+        <div class="profile-avatar">
+            <img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.png' }}"/>
+        </div>
+        <div id="user-ids">
+            <div id="user-displayname">{{ profile.displayName }}</div>
+            <div>{{ config.user_id }}</div>
+        </div>
     </div>
     
-    <h3>Recents</h3>
+    <h3>Recent conversations</h3>
         <div ng-include="'recents/recents.html'"></div>
     <br/>
 
@@ -38,9 +33,9 @@
     
     <div>
         <form>
-            <input size="40" ng-model="newRoom.room_id" ng-enter="createNewRoom(newRoom.room_id, newRoom.private)" placeholder="(e.g. foo_channel)"/>
+            <input size="40" ng-model="newRoom.room_alias" ng-enter="createNewRoom(newRoom.room_alias, newRoom.private)" placeholder="(e.g. foo_channel)"/>
             <input type="checkbox" ng-model="newRoom.private">private
-            <button ng-disabled="!newRoom.room_id" ng-click="createNewRoom(newRoom.room_id, newRoom.private)">Create room</button>    
+            <button ng-disabled="!newRoom.room_alias" ng-click="createNewRoom(newRoom.room_alias, newRoom.private)">Create room</button>    
         </form>
     </div>
     <div>
@@ -54,5 +49,4 @@
     {{ feedback }}
 
     </div>    
-    </div>
 </div>
diff --git a/webclient/img/default-profile.jpg b/webclient/img/default-profile.jpg
deleted file mode 100644
index 20f2a2b085..0000000000
--- a/webclient/img/default-profile.jpg
+++ /dev/null
Binary files differdiff --git a/webclient/img/default-profile.png b/webclient/img/default-profile.png
new file mode 100644
index 0000000000..6f81a3c417
--- /dev/null
+++ b/webclient/img/default-profile.png
Binary files differdiff --git a/webclient/img/logo-small.png b/webclient/img/logo-small.png
new file mode 100644
index 0000000000..411206dcdc
--- /dev/null
+++ b/webclient/img/logo-small.png
Binary files differdiff --git a/webclient/img/logo.png b/webclient/img/logo.png
new file mode 100644
index 0000000000..c4b53a8487
--- /dev/null
+++ b/webclient/img/logo.png
Binary files differdiff --git a/webclient/index.html b/webclient/index.html
index 5faf165626..3c31a8a051 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -4,6 +4,8 @@
     <title>[matrix]</title>
         
     <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="mobile.css">
+    
     <link rel="icon" href="favicon.ico">
    
     <meta name="viewport" content="width=device-width">
@@ -19,6 +21,7 @@
     <script src="app-filter.js"></script>
     <script src="home/home-controller.js"></script>
     <script src="login/login-controller.js"></script>
+    <script src="login/register-controller.js"></script>
     <script src="recents/recents-controller.js"></script>
     <script src="recents/recents-filter.js"></script>
     <script src="room/room-controller.js"></script>
@@ -38,15 +41,23 @@
 
 <body>
 
-    <header id="header">
+    <div id="header">
         <!-- Do not show buttons on the login page -->
-        <div id="header-buttons" ng-hide="'/login' == location ">
+        <div id="headerContent" ng-hide="'/login' == location || '/register' == location">
+            <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
+            &nbsp;
+            <button ng-click='goToPage("/")'>Home</button>
             <button ng-click='goToPage("settings")'>Settings</button>
             <button ng-click="logout()">Log out</button>
         </div>
-    </header>
+    </div>
 
-    <div ng-view></div>
+    <div id="page" ng-view></div>
 
+    <div id="footer" ng-hide="location.indexOf('/room') == 0">
+        <div id="footerContent">
+            &copy 2014 Matrix.org
+        </div>
+    </div>
 </body>
 </html>
diff --git a/webclient/login/login-controller.js b/webclient/login/login-controller.js
index 51f9a3bdf4..7369a28ef0 100644
--- a/webclient/login/login-controller.js
+++ b/webclient/login/login-controller.js
@@ -1,3 +1,19 @@
+/*
+ Copyright 2014 matrix.org
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+ 
 angular.module('LoginController', ['matrixService'])
 .controller('LoginController', ['$scope', '$location', 'matrixService', 'eventStreamService',
                                     function($scope, $location, matrixService, eventStreamService) {
@@ -7,7 +23,10 @@ angular.module('LoginController', ['matrixService'])
     // Assume that this is hosted on the home server, in which case the URL
     // contains the home server.
     var hs_url = $location.protocol() + "://" + $location.host();
-    if ($location.port()) {
+    if ($location.port() &&
+        !($location.protocol() === "http" && $location.port() === 80) &&
+        !($location.protocol() === "https" && $location.port() === 443))
+    {
         hs_url += ":" + $location.port();
     }
     
@@ -16,57 +35,18 @@ angular.module('LoginController', ['matrixService'])
         desired_user_name: "",
         user_id: "",
         password: "",
-        identityServer: "",
+        identityServer: "http://matrix.org:8090",
         pwd1: "",
-        pwd2: ""
+        pwd2: "",
     };
-
-    $scope.register = function() {
-
-        // Set the urls
-        matrixService.setConfig({
-            homeserver: $scope.account.homeserver,
-            identityServer: $scope.account.identityServer
-        });
-        
-        if ($scope.account.pwd1 !== $scope.account.pwd2) {
-            $scope.feedback = "Passwords don't match.";
-            return;
-        }
-        else if ($scope.account.pwd1.length < 6) {
-            $scope.feedback = "Password must be at least 6 characters.";
-            return;
-        }
-
-        matrixService.register($scope.account.desired_user_name, $scope.account.pwd1).then(
-            function(response) {
-                $scope.feedback = "Success";
-                // Update the current config 
-                var config = matrixService.config();
-                angular.extend(config, {
-                    access_token: response.data.access_token,
-                    user_id: response.data.user_id
-                });
-                matrixService.setConfig(config);
-
-                // And permanently save it
-                matrixService.saveConfig();
-                eventStreamService.resume();
-                 // Go to the user's rooms list page
-                $location.url("home");
-            },
-            function(error) {
-                if (error.data) {
-                    if (error.data.errcode === "M_USER_IN_USE") {
-                        $scope.feedback = "Username already taken.";
-                    }
-                }
-                else if (error.status === 0) {
-                    $scope.feedback = "Unable to talk to the server.";
-                }
-            });
+    
+    $scope.login_types = [ "email", "mxid" ];
+    $scope.login_type_label = {
+        "email": "Email address",
+        "mxid": "Matrix ID (e.g. @bob:matrix.org or bob)",
     };
-
+    $scope.login_type = 'mxid'; // TODO: remember the user's preferred login_type
+    
     $scope.login = function() {
         matrixService.setConfig({
             homeserver: $scope.account.homeserver,
diff --git a/webclient/login/login.html b/webclient/login/login.html
index 4b2ea60928..18e7a02815 100644
--- a/webclient/login/login.html
+++ b/webclient/login/login.html
@@ -1,55 +1,49 @@
 <div ng-controller="LoginController" class="login">    
-    <h1 id="logo">[matrix]</h1>
-
-    <div id="page">
-    <div id="wrapper">
-
-    {{ feedback }}
+    <div id="wrapper" class="loginWrapper">
         
-    <h3>Register for an account:</h3>
-    <form novalidate>
-        <input id="desired_user_name" size="70" type="text" auto-focus ng-model="account.desired_user_name" placeholder="User name (ex:bob)"/>
-        <br/>
-        <input id="pwd1" size="70" type="password" auto-focus ng-model="account.pwd1" placeholder="Type a password"/>
-        <br/>
-        <input id="pwd2" size="70" type="password" auto-focus ng-model="account.pwd2" placeholder="Re-type your password"/>
+        <a href ng-click="goToPage('/')">
+        <img src="img/logo.png" width="240" height="102" alt="[matrix]" style="padding: 50px"/>
+        </a>
+    
         <br/>
-        <!-- New user registration -->
-        <div>
-            <br/>
-            <button ng-click="register()" ng-disabled="!account.desired_user_name || !account.homeserver || !account.pwd1 || !account.pwd2 || account.pwd1 !== account.pwd2">Register</button>
-        </div>
-    </form>
 
-    <h3>Got an account?</h3>
-    <form novalidate>
-        <!-- Login with an registered user -->
-        <div>{{ login_error_msg }} </div>
-        <div>
-            <input id="user_id" size="70" type="text" auto-focus ng-model="account.user_id" placeholder="User ID (ex:@bob:localhost or bob)"/>
-            <br />
-            <input id="password" size="70" type="password" ng-model="account.password" placeholder="Password"/><br />
-            <br/>
-            <button ng-click="login()" ng-disabled="!account.user_id || !account.password || !account.homeserver">Login</button>
-        </div>
-       
-    </form>
+        <form id="loginForm" novalidate>
+            <!-- Login with an registered user -->
+            <div>
+                Log in using:<br/>
+                
+                <div ng-repeat="type in login_types">
+                <input type="radio" ng-model="$parent.login_type" value="{{ type }}" id="radio_{{ type }}"/>
+                <label for="radio_{{ type }}">{{ login_type_label[type] }}</label>
+                </div>
+                    
+                <div style="text-align: center">
+                    <br/>
+                    <input id="user_id" size="32" type="text" ng-focus="true" ng-model="account.user_id" placeholder="{{ login_type_label[login_type] }}"/>
+                    <br/>
+                    <input id="password" size="32" type="password" ng-model="account.password" placeholder="Password"/>
+                    <br/><br/>
+                    <button ng-click="login()" ng-disabled="!account.user_id || !account.password || !account.homeserver">Login</button>
+                    <br/><br/>
+                </div>
 
-    <h3>Servers</h3>
-    <form novalidate>
-        <div>
-        Home Server: 
-        <input id="homeserver" size="57" type="text" ng-model="account.homeserver" placeholder="Home server URL (ex: http://localhost:8080)"/>
-        </div>
-        <br />
-        <div>
-        Identity Server: 
-        <input id="identityServer" size="56" type="text" ng-model="account.identityServer" placeholder="Identity server URL (ex: http://localhost:8090)"/>
-        </div>
-        <br />
-    </form>
-    <br/>
-    
+                <div class="feedback">{{ feedback }} {{ login_error_msg }}</div>
+                
+                <div id="serverConfig">
+                    <label for="homeserver">Home Server:</label> 
+                    <input id="homeserver" size="32" type="text" ng-model="account.homeserver" placeholder="URL (e.g. http://matrix.org:8080)"/>
+                    <div class="smallPrint">Your home server stores all your conversation and account data.</div>
+                    <label for="identityServer">Identity Server:</label>
+                    <input id="identityServer" size="32" type="text" ng-model="account.identityServer" placeholder="URL (e.g. http://matrix.org:8090)"/>
+                    <div class="smallPrint">Matrix provides identity servers to track which emails etc. belong to which Matrix IDs.<br/>
+                        Only http://matrix.org:8090 currently exists.</div>
+                    <br/>
+                    <br/>
+                    <a href="#/register" style="padding-right: 3em">Create account</a>
+                    <a href="#/reset_password">Forgotten password?</a>
+                </div>
+            </div>
+        </form>
 
     </div>
     </div>
diff --git a/webclient/login/register-controller.js b/webclient/login/register-controller.js
new file mode 100644
index 0000000000..0ece57502b
--- /dev/null
+++ b/webclient/login/register-controller.js
@@ -0,0 +1,102 @@
+/*
+ Copyright 2014 matrix.org
+ 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+ 
+angular.module('RegisterController', ['matrixService'])
+.controller('RegisterController', ['$scope', '$location', 'matrixService', 'eventStreamService',
+                                    function($scope, $location, matrixService, eventStreamService) {
+    'use strict';
+    
+    // FIXME: factor out duplication with login-controller.js
+    
+    // Assume that this is hosted on the home server, in which case the URL
+    // contains the home server.
+    var hs_url = $location.protocol() + "://" + $location.host();
+    if ($location.port() &&
+        !($location.protocol() === "http" && $location.port() === 80) &&
+        !($location.protocol() === "https" && $location.port() === 443))
+    {
+        hs_url += ":" + $location.port();
+    }
+    
+    $scope.account = {
+        homeserver: hs_url,
+        desired_user_id: "",
+        desired_user_name: "",
+        password: "",
+        identityServer: "http://matrix.org:8090",
+        pwd1: "",
+        pwd2: "",
+        displayName : ""
+    };
+    
+    $scope.register = function() {
+
+        // Set the urls
+        matrixService.setConfig({
+            homeserver: $scope.account.homeserver,
+            identityServer: $scope.account.identityServer
+        });
+        
+        if ($scope.account.pwd1 !== $scope.account.pwd2) {
+            $scope.feedback = "Passwords don't match.";
+            return;
+        }
+        else if ($scope.account.pwd1.length < 6) {
+            $scope.feedback = "Password must be at least 6 characters.";
+            return;
+        }
+
+        matrixService.register($scope.account.desired_user_id, $scope.account.pwd1).then(
+            function(response) {
+                $scope.feedback = "Success";
+                // Update the current config 
+                var config = matrixService.config();
+                angular.extend(config, {
+                    access_token: response.data.access_token,
+                    user_id: response.data.user_id
+                });
+                matrixService.setConfig(config);
+
+                // And permanently save it
+                matrixService.saveConfig();
+                
+                // Update the global scoped used_id var (used in the app header)
+                $scope.updateHeader();
+                
+                eventStreamService.resume();
+                
+                if ($scope.account.displayName) {
+                    // FIXME: handle errors setting displayName
+                    matrixService.setDisplayName($scope.account.displayName);
+                }
+                
+                 // Go to the user's rooms list page
+                $location.url("home");
+            },
+            function(error) {
+                if (error.data) {
+                    if (error.data.errcode === "M_USER_IN_USE") {
+                        $scope.feedback = "Username already taken.";
+                    }
+                }
+                else if (error.status === 0) {
+                    $scope.feedback = "Unable to talk to the server.";
+                }
+            });
+    };
+
+}]);
+
diff --git a/webclient/login/register.html b/webclient/login/register.html
new file mode 100644
index 0000000000..1b470e4554
--- /dev/null
+++ b/webclient/login/register.html
@@ -0,0 +1,48 @@
+<div ng-controller="RegisterController" class="register">
+    <div id="wrapper" class="loginWrapper">
+
+        <a href ng-click="goToPage('/')">
+            <img src="img/logo.png" width="240" height="102" alt="[matrix]" style="padding: 50px"/>
+        </a>
+        <br/>
+
+        <form id="loginForm" novalidate>
+            <div>
+                Create account:<br/>
+                
+                <div style="text-align: center">
+                    <br/>
+                    <input id="email" size="32" type="text" ng-focus="true" ng-model="account.email" placeholder="Email address (optional)"/>
+                    <div class="smallPrint">Specifying an email address lets other users find you on Matrix more easily,<br/>
+                        and gives you a way to reset your password</div>
+                    <input id="desired_user_id" size="32" type="text" ng-model="account.desired_user_id" placeholder="Matrix ID (e.g. bob)"/>
+                    <br/>
+                    <input id="pwd1" size="32" type="password" ng-model="account.pwd1" placeholder="Type a password"/>
+                    <br/>
+                    <input id="pwd2" size="32" type="password" ng-model="account.pwd2" placeholder="Confirm your password"/>
+                    <br/>
+                    <input id="displayName" size="32" type="text" ng-model="account.displayName" placeholder="Display name (e.g. Bob Obson)"/>
+                    <br/>
+                    <br/>
+                    
+                    <button ng-click="register()" ng-disabled="!account.desired_user_id || !account.homeserver || !account.pwd1 || !account.pwd2 || account.pwd1 !== account.pwd2">Sign up</button>
+                    <br/><br/>
+                </div>
+
+                <div class="feedback">{{ feedback }} {{ login_error_msg }}</div>
+                
+                <div id="serverConfig">
+                    <label for="homeserver">Home Server:</label> 
+                    <input id="homeserver" size="32" type="text" ng-model="account.homeserver" placeholder="URL (e.g. http://matrix.org:8080)"/>
+                    <div class="smallPrint">Your home server stores all your conversation and account data.</div>
+                    <label for="identityServer">Identity Server:</label>
+                    <input id="identityServer" size="32" type="text" ng-model="account.identityServer" placeholder="URL (e.g. http://matrix.org:8090)"/>
+                    <div class="smallPrint">Matrix provides identity servers to track which emails etc. belong to which Matrix IDs.<br/>
+                        Only http://matrix.org:8090 currently exists.</div>
+                </div>
+            </div>
+        </form>
+
+    </div>
+    </div>
+</div>
diff --git a/webclient/mobile.css b/webclient/mobile.css
new file mode 100644
index 0000000000..7c62a072d5
--- /dev/null
+++ b/webclient/mobile.css
@@ -0,0 +1,92 @@
+/*** Mobile voodoo ***/
+@media all and (max-device-width: 640px) {
+            
+    #messageTableWrapper {
+        margin-right: 0px ! important;
+    }
+    
+    .leftBlock {
+        width: 8em ! important;
+        font-size: 8px ! important;
+    }
+    
+    .rightBlock {
+        width: 0px ! important;
+        display: none ! important;
+    }
+    
+    .avatar {
+        width: 36px ! important;
+    }
+    
+    #header {
+        background-color: transparent;
+    }
+    
+    #headerContent {
+        padding-right: 5px;
+    }
+    
+    #headerContent button {
+        font-size: 8px;
+    }
+    
+    #messageTable,
+    #wrapper,
+    #controls {
+        max-width: 640px ! important;
+    }    
+    
+    #headerUserId,
+    #roomHeader img,
+    #userIdCell,
+    #roomRecentsTableWrapper,
+    #usersTableWrapper,
+    .extraControls {
+        display: none;
+    }
+    
+    #buttonsCell {
+        width: 60px ! important;
+        padding-left: 20px ! important;
+    }
+    
+    #roomLogo {
+        display: none;
+    }
+        
+    .bubble {
+        font-size: 12px ! important;
+        min-height: 20px ! important;
+    }
+
+    #roomHeader {
+        padding-top: 10px;
+    }
+    
+    #roomName {
+        float: left;
+        font-size: 14px ! important;
+        margin-top: 0px ! important;
+    }
+        
+    #roomPage {
+        top: 35px ! important;
+        left: 5px ! important;
+        right: 5px ! important;
+        bottom: 70px ! important;
+    }
+    
+    #controlPanel {
+        height: 70px;
+    }
+        
+    /* stop zoom on select */
+    select:focus,
+    textarea,
+    input
+    {
+        font-size: 16px ! important;
+    }
+    
+}
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 09dac85d26..c6028f874e 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -88,7 +88,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         call.onHangup = $scope.onCallHangup;
         $scope.currentCall = call;
     });
-
+    
     $scope.memberCount = function() {
         return Object.keys($scope.members).length;
     };
@@ -175,6 +175,8 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
 
         // set target_user_id to keep things clear
         var target_user_id = chunk.state_key;
+        
+        var now = new Date().getTime();
 
         var isNewMember = !(target_user_id in $scope.members);
         if (isNewMember) {
@@ -185,44 +187,14 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
             if ("mtime_age" in chunk.content) {
                 chunk.mtime_age = chunk.content.mtime_age;
             }
-            // Once the HS reliably returns the displaynames & avatar_urls for both
-            // local and remote users, we should use this rather than the evalAsync block
-            // below
             if ("displayname" in chunk.content) {
                 chunk.displayname = chunk.content.displayname;
             }
             if ("avatar_url" in chunk.content) {
                 chunk.avatar_url = chunk.content.avatar_url;
             }
-            $scope.members[target_user_id] = chunk;
-
-/*
-            // Stale code for explicitly hammering the homeserver for every displayname & avatar_url
-            
-            // get their display name and profile picture and set it to their
-            // member entry in $scope.members. We HAVE to use $timeout with 0 delay 
-            // to make this function run AFTER the current digest cycle, else the 
-            // response may update a STALE VERSION of the member list (manifesting
-            // as no member names appearing, or appearing sporadically).
-            $scope.$evalAsync(function() {
-                matrixService.getDisplayName(chunk.target_user_id).then(
-                    function(response) {
-                        var member = $scope.members[chunk.target_user_id];
-                        if (member !== undefined) {
-                            member.displayname = response.data.displayname;
-                        }
-                    }
-                ); 
-                matrixService.getProfilePictureUrl(chunk.target_user_id).then(
-                    function(response) {
-                         var member = $scope.members[chunk.target_user_id];
-                         if (member !== undefined) {
-                            member.avatar_url = response.data.avatar_url;
-                         }
-                    }
-                );
-            });
-*/            
+            chunk.last_updated = now;
+            $scope.members[target_user_id] = chunk;   
 
             if (target_user_id in $rootScope.presence) {
                 updatePresence($rootScope.presence[target_user_id]);
@@ -234,6 +206,12 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
             member.content.membership = chunk.content.membership;
         }
     };
+    
+    var updateMemberListPresenceAge = function() {
+        $scope.now = new Date().getTime();
+        // TODO: don't bother polling every 5s if we know none of our counters are younger than 1 minute
+        $timeout(updateMemberListPresenceAge, 5 * 1000);
+    };
 
     var updatePresence = function(chunk) {
         if (!(chunk.content.user_id in $scope.members)) {
@@ -275,6 +253,10 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         if ($scope.textInput.indexOf("/me") === 0) {
             promise = matrixService.sendEmoteMessage($scope.room_id, $scope.textInput.substr(4));
         }
+        else if ($scope.textInput.indexOf("/nick ") === 0) {
+            // Change user display name
+            promise = matrixService.setDisplayName($scope.textInput.substr(6));
+        }
         else {
             promise = matrixService.sendTextMessage($scope.room_id, $scope.textInput);
         }
@@ -395,8 +377,10 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
 
         // Make recents highlight the current room
         $scope.recentsSelectedRoomID = $scope.room_id;
-        
+                
         paginate(MESSAGES_PER_PAGINATION);
+        
+        updateMemberListPresenceAge();
     }; 
     
     $scope.inviteUser = function(user_id) {
@@ -404,18 +388,13 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         matrixService.invite($scope.room_id, user_id).then(
             function() {
                 console.log("Invited.");
-                $scope.feedback = "Request for invitation succeeds";
+                $scope.feedback = "Invite sent successfully";
             },
             function(reason) {
                 $scope.feedback = "Failure: " + reason;
             });
     };
 
-    // Open the user profile page
-    $scope.goToUserPage = function(user_id) {
-        $location.url("/user/" + user_id);
-    };
-
     $scope.leaveRoom = function() {
         
         matrixService.leave($scope.room_id).then(
@@ -487,7 +466,5 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
     }
 
     $scope.onCallHangup = function() {
-        $scope.feedback = "Call ended";
-        $scope.currentCall = undefined;
     }
 }]);
diff --git a/webclient/room/room.html b/webclient/room/room.html
index a3514c3a91..e5e454864b 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -1,13 +1,15 @@
-<div ng-controller="RoomController" data-ng-init="onInit()" class="room">
-    <h1 id="roomLogo">[matrix]</h1>
+<div ng-controller="RoomController" data-ng-init="onInit()" class="room" style="height: 100%;">
 
-    <div id="page">
-    <div id="wrapper">
-
-    <div id="roomName">
-        {{ room_alias || room_id }}
+    <div id="roomHeader">
+        <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
+        <div id="roomName">
+            {{ room_alias || room_id }}
+        </div>
     </div>
 
+    <div id="roomPage">
+    <div id="roomWrapper">
+        
     <div id="roomRecentsTableWrapper">
         <div ng-include="'recents/recents.html'"></div>
     </div>
@@ -15,17 +17,17 @@
     <div id="usersTableWrapper">
         <table id="usersTable">
             <tr ng-repeat="member in members | orderMembersList">
-                <td class="userAvatar mouse-pointer" ng-click="goToUserPage(member.id)">
+                <td class="userAvatar mouse-pointer" ng-click="$parent.goToUserPage(member.id)" ng-class="member.membership == 'invite' ? 'invited' : ''">
                     <img class="userAvatarImage" 
-                         ng-src="{{member.avatar_url || 'img/default-profile.jpg'}}" 
+                         ng-src="{{member.avatar_url || 'img/default-profile.png'}}" 
                          alt="{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}"
                          title="{{ member.id }}"
                          width="80" height="80"/>
                     <img class="userAvatarGradient" src="img/gradient.png" title="{{ member.id }}" width="80" height="24"/>
                     <div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<br/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div>
                 </td>
-                <td class="userPresence" ng-class="member.presenceState === 'online' ? 'online' : (member.presenceState === 'unavailable' ? 'unavailable' : '')">
-                    {{ member.mtime_age | duration }}<br/>{{ member.mtime_age ? "ago" : "" }}
+                <td class="userPresence" ng-class="(member.presenceState === 'online' ? 'online' : (member.presenceState === 'unavailable' ? 'unavailable' : '')) + ' ' + (member.membership == 'invite' ? 'invited' : '')">
+                    <span ng-show="member.mtime_age">{{ member.mtime_age + (now - member.last_updated) | duration }}<br/>ago</span>
                 </td>
         </table>
     </div>
@@ -40,7 +42,7 @@
                     <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div>
                 </td>
                 <td class="avatar">
-                    <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
+                    <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.png' }}" width="32" height="32"
                          ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
                 </td>
                 <td ng-class="!msg.content.membership ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
@@ -64,7 +66,7 @@
                     </div>
                 </td>
                 <td class="rightBlock">
-                    <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
+                    <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.png' }}" width="32" height="32"
                          ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
                 </td>
             </tr>
@@ -86,12 +88,12 @@
                     </td>
                     <td id="buttonsCell">
                         <button ng-click="send()">Send</button>
-                        <button m-file-input="imageFileToSend">Image</button>
+                        <button m-file-input="imageFileToSend" class="extraControls">Image</button>
                     </td>
                 </tr>
             </table>
 
-            <div id="extraControls">
+            <div class="extraControls">
                 <span>
                    Invite a user: 
                         <input ng-model="userIDToInvite" size="32" type="text" placeholder="User ID (ex:@user:homeserver)"/>     
@@ -105,6 +107,10 @@
                 <button ng-click="hangupCall()">Reject</button>
                 </div>
                 <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing'">Hang up</button>
+                <span ng-show="currentCall.state == 'invite_sent'">Calling...</span>
+                <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span>
+                <span ng-show="currentCall.state == 'connected'">Call Connected</span>
+                <span ng-show="currentCall.state == 'ended'">Call Ended</span>
                 <span style="display: none; ">{{ currentCall.state }}</span>
             </div>
         
diff --git a/webclient/settings/settings-controller.js b/webclient/settings/settings-controller.js
index f7d5e8eb75..dc680ef075 100644
--- a/webclient/settings/settings-controller.js
+++ b/webclient/settings/settings-controller.js
@@ -22,8 +22,38 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
     $scope.config = matrixService.config();
 
     $scope.profile = {
-        displayName: $scope.config.displayName,
-        avatarUrl: $scope.config.avatarUrl
+        displayName: "",
+        avatarUrl: ""
+    };
+
+    // The profile as stored on the server
+    $scope.profileOnServer = {
+        displayName: "",
+        avatarUrl: ""
+    };
+
+    $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";
+            } 
+        );
     };
 
     $scope.$watch("profile.avatarFile", function(newValue, oldValue) {
@@ -41,10 +71,10 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
     });
     
     $scope.saveProfile = function() {
-        if ($scope.profile.displayName !== $scope.config.displayName) {
+        if ($scope.profile.displayName !== $scope.profileOnServer.displayName) {
             setDisplayName($scope.profile.displayName);
         }
-        if ($scope.profile.avatarUrl !== $scope.config.avatarUrl) {
+        if ($scope.profile.avatarUrl !== $scope.profileOnServer.avatarUrl) {
             setAvatar($scope.profile.avatarUrl);
         }
     };
@@ -53,11 +83,6 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
         matrixService.setDisplayName(displayName).then(
             function(response) {
                 $scope.feedback = "Updated display name.";
-                
-                var config = matrixService.config();
-                config.displayName = displayName;
-                matrixService.setConfig(config);
-                matrixService.saveConfig();
             },
             function(error) {
                 $scope.feedback = "Can't update display name: " + error.data;
@@ -71,11 +96,6 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
             function(response) {
                 console.log("Updated avatar");
                 $scope.feedback = "Updated avatar.";
-                
-                var config = matrixService.config();
-                config.avatarUrl = avatarURL;
-                matrixService.setConfig(config);
-                matrixService.saveConfig();
             },
             function(error) {
                 $scope.feedback = "Can't update avatar: " + error.data;
@@ -143,4 +163,23 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
             }
         );
     };
+    
+    
+    /*** Desktop notifications section ***/
+    $scope.settings = {
+        notifications: undefined
+    };
+
+    // If the browser supports it, check the desktop notification state
+    if ("Notification" in window) {
+        $scope.settings.notifications = window.Notification.permission;
+    }
+
+    $scope.requestNotifications = function() {
+        console.log("requestNotifications");
+        window.Notification.requestPermission(function (permission) {
+            console.log("   -> User decision: " + permission);
+            $scope.settings.notifications = permission;
+        });
+    };
 }]);
\ No newline at end of file
diff --git a/webclient/settings/settings.html b/webclient/settings/settings.html
index 453a4fc35f..a69a8de300 100644
--- a/webclient/settings/settings.html
+++ b/webclient/settings/settings.html
@@ -1,35 +1,29 @@
-<div ng-controller="SettingsController" class="user">
+<div ng-controller="SettingsController" class="user" data-ng-init="onInit()">
 
-    <div id="page">
     <div id="wrapper">
-        
-        <h3>Me</h3>
-        <div>
+
+        <div id="genericHeading">
+            <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
+        </div>
+
+        <h1>Settings</h1>
+        <div class="section">
             <form>
-                <table>
-                    <tr>
-                        <td>
-                            <div class="profile-avatar">
-                                <img ng-src="{{ profile.avatarUrl || 'img/default-profile.jpg' }}" m-file-input="profile.avatarFile"/>
-                            </div>
-                        </td>
-                        <td>
-                            <div id="user-ids">
-                                <input size="40" ng-model="profile.displayName" placeholder="Your name"/>            
-                            </div>
-                        </td>
-                        <td>
-                            <button ng-disabled="(profile.displayName == config.displayName) && (profile.avatarUrl == config.avatarUrl)"
-                                    ng-click="saveProfile()">Save</button>    
-                        </td>
-                    </tr>
-                </table>
+                <div class="profile-avatar">
+                    <img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.png' }}" m-file-input="profile.avatarFile"/>
+                </div>
+                <div id="user-ids">
+                    <input size="40" ng-model="profile.displayName" placeholder="Your display name"/>
+                    <br/>
+                    <button ng-disabled="(profile.displayName == profileOnServer.displayName) && (profile.avatarUrl == profileOnServer.avatarUrl)"
+                            ng-click="saveProfile()">Save</button>    
+                </div>
             </form>
         </div>
         <br/>
 
         <h3>Linked emails</h3>
-        <div>
+        <div class="section">
             <form>
                 <input size="40" ng-model="linkedEmails.linkNewEmail" ng-enter="linkEmail(linkedEmails.linkNewEmail)" />
                 <button ng-disabled="!linkedEmails.linkNewEmail" ng-click="linkEmail(linkedEmails.linkNewEmail)">
@@ -52,22 +46,35 @@
             </table>
         </div>
         <br/>
-
+        
+        <h3>Desktop notifications</h3>
+        <div class="section" ng-switch="settings.notifications">
+            <div ng-switch-when="granted">
+                Notifications are enabled.
+            </div>
+            <div ng-switch-when="denied">
+                You have denied permission for notifications.<br/>
+                To enable it, reset the notification setting for this web site into your browser settings.
+            </div>
+            <div ng-switch-when="default">
+                <button ng-click="requestNotifications()" style="font-size: 14pt">Enable desktop notifications</button>
+            </div>
+            <div ng-switch-default="">
+                Sorry, your browser does not support notifications.
+            </div>
+        </div>
+        <br/>
+        
         <h3>Configuration</h3>
-        <div>
+        <div class="section">
             <div>Home server: {{ config.homeserver }} </div>
+            <div>Identity server: {{ config.identityServer }} </div>
             <div>User ID: {{ config.user_id }} </div>
             <div>Access token: {{ config.access_token }} </div>
         </div>
         <br/>
-        
-        <div>
-            <div><button ng-click="requestNotifications()">Request notifications</button></div>
-        </div>
-        <br/>
 
         {{ feedback }}
 
     </div>    
-    </div>
 </div>
diff --git a/webclient/user/user-controller.js b/webclient/user/user-controller.js
index 620230561c..b5b2d439a2 100644
--- a/webclient/user/user-controller.js
+++ b/webclient/user/user-controller.js
@@ -25,14 +25,42 @@ angular.module('UserController', ['matrixService'])
         avatar_url: undefined
     };
     
+    $scope.user_id = matrixService.config().user_id;
+    
     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;
         }
     );
+    
+    $scope.messageUser = function() {    
+        
+        // FIXME: create a new room every time, for now
+        
+        matrixService.create(null, 'private').then(
+            function(response) { 
+                // This room has been created. Refresh the rooms list
+                var room_id = response.data.room_id;
+                console.log("Created room with id: "+ room_id);
+                
+                matrixService.invite(room_id, $scope.user.id).then(
+                    function() {
+                        $scope.feedback = "Invite sent successfully";
+                        $scope.$parent.goToPage("/room/" + room_id);
+                    },
+                    function(reason) {
+                        $scope.feedback = "Failure: " + JSON.stringify(reason);
+                    });
+            },
+            function(error) {
+                $scope.feedback = "Failure: " + JSON.stringify(error.data);
+            });                
+    };
+    
 }]);
\ No newline at end of file
diff --git a/webclient/user/user.html b/webclient/user/user.html
index 4c91c8a48a..2aa981437b 100644
--- a/webclient/user/user.html
+++ b/webclient/user/user.html
@@ -1,31 +1,25 @@
 <div ng-controller="UserController" class="user">
-    <h1 id="logo">[matrix]</h1>
 
-    <div id="page">
     <div id="wrapper">
-        
+
+        <div id="genericHeading">
+            <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
+        </div>
+
+        <h1>{{ user.displayname || user.id }}</h1>
+
         <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 class="profile-avatar">
+                <img ng-src="{{ user.avatar_url || 'img/default-profile.png' }}"/>
+            </div>
+            <div id="user-ids">
+                <div>{{ user.id }}</div>                        
+            </div>
         </div>
 
+        <button ng-hide="user.id == user_id" ng-click="messageUser()" style="font-size: 14pt; margin-top: 40px; margin-bottom: 40px">Start chat</button>
+        <br/>
         {{ feedback }}
 
-    </div>    
     </div>
 </div>