summary refs log tree commit diff
path: root/webclient
diff options
context:
space:
mode:
Diffstat (limited to 'webclient')
-rw-r--r--webclient/CAPTCHA_SETUP46
-rw-r--r--webclient/README7
-rw-r--r--webclient/app-controller.js41
-rw-r--r--webclient/app-filter.js83
-rwxr-xr-xwebclient/app.css59
-rw-r--r--webclient/components/matrix/event-handler-service.js97
-rw-r--r--webclient/components/matrix/event-stream-service.js1
-rw-r--r--webclient/components/matrix/matrix-call.js5
-rw-r--r--webclient/components/matrix/matrix-filter.js135
-rw-r--r--webclient/components/matrix/matrix-service.js77
-rw-r--r--webclient/home/home.html2
-rw-r--r--webclient/img/green_phone.pngbin0 -> 434 bytes
-rw-r--r--webclient/img/red_phone.pngbin0 -> 378 bytes
-rw-r--r--webclient/index.html36
-rw-r--r--webclient/login/login.html4
-rw-r--r--webclient/login/register-controller.js48
-rw-r--r--webclient/login/register.html6
-rw-r--r--webclient/recents/recents-controller.js11
-rw-r--r--webclient/recents/recents.html45
-rw-r--r--webclient/room/room-controller.js284
-rw-r--r--webclient/room/room-directive.js11
-rw-r--r--webclient/room/room.html20
-rw-r--r--webclient/settings/settings-controller.js75
-rw-r--r--webclient/settings/settings.html8
24 files changed, 819 insertions, 282 deletions
diff --git a/webclient/CAPTCHA_SETUP b/webclient/CAPTCHA_SETUP
new file mode 100644
index 0000000000..ebc8a5f3b0
--- /dev/null
+++ b/webclient/CAPTCHA_SETUP
@@ -0,0 +1,46 @@
+Captcha can be enabled for this web client / home server. This file explains how to do that.
+The captcha mechanism used is Google's ReCaptcha. This requires API keys from Google.
+
+Getting keys
+------------
+Requires a public/private key pair from:
+
+https://developers.google.com/recaptcha/
+
+
+Setting Private ReCaptcha Key
+-----------------------------
+The private key is a config option on the home server config. If it is not 
+visible, you can generate it via --generate-config. Set the following value:
+
+  recaptcha_private_key: YOUR_PRIVATE_KEY
+  
+In addition, you MUST enable captchas via:
+
+  enable_registration_captcha: true
+
+Setting Public ReCaptcha Key
+----------------------------
+The web client will look for the global variable webClientConfig for config 
+options. You should put your ReCaptcha public key there like so:
+
+webClientConfig = {
+    useCaptcha: true,
+    recaptcha_public_key: "YOUR_PUBLIC_KEY"
+}
+
+This should be put in webclient/config.js which is already .gitignored, rather 
+than in the web client source files. You MUST set useCaptcha to true else a
+ReCaptcha widget will not be generated.
+
+Configuring IP used for auth
+----------------------------
+The ReCaptcha API requires that the IP address of the user who solved the
+captcha is sent. If the client is connecting through a proxy or load balancer,
+it may be required to use the X-Forwarded-For (XFF) header instead of the origin
+IP address. This can be configured as an option on the home server like so:
+
+  captcha_ip_origin_is_x_forwarded: true
+
+
+
diff --git a/webclient/README b/webclient/README
index 0f893b1712..13224c3d07 100644
--- a/webclient/README
+++ b/webclient/README
@@ -1,12 +1,13 @@
 Basic Usage
 -----------
 
-The Synapse web client needs to be hosted by a basic HTTP server.
-
-You can use the Python simple HTTP server::
+The web client should automatically run when running the home server. Alternatively, you can run
+it stand-alone:
 
     $ python -m SimpleHTTPServer
 
 Then, open this URL in a WEB browser::
 
     http://127.0.0.1:8000/
+
+
diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index ea48cbb011..064bde3ab2 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -21,8 +21,8 @@ limitations under the License.
 'use strict';
 
 angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'eventStreamService'])
-.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService',
-                               function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService, matrixPhoneService) {
+.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', '$timeout', '$animate', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService',
+                               function($scope, $location, $rootScope, $timeout, $animate, matrixService, mPresence, eventStreamService, matrixPhoneService) {
          
     // Check current URL to avoid to display the logout button on the login page
     $scope.location = $location.path();
@@ -89,6 +89,23 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
         $scope.user_id = matrixService.config().user_id;
     };
 
+    $rootScope.$watch('currentCall', function(newVal, oldVal) {
+        if (!$rootScope.currentCall) return;
+
+        var roomMembers = angular.copy($rootScope.events.rooms[$rootScope.currentCall.room_id].members);
+        delete roomMembers[matrixService.config().user_id];
+
+        $rootScope.currentCall.user_id = Object.keys(roomMembers)[0];
+        matrixService.getProfile($rootScope.currentCall.user_id).then(
+            function(response) {
+                $rootScope.currentCall.userProfile = response.data;
+            },
+            function(error) {
+                $scope.feedback = "Can't load user profile";
+            }
+        );
+    });
+
     $rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) {
         console.trace("incoming call");
         call.onError = $scope.onCallError;
@@ -97,12 +114,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
     });
 
     $scope.answerCall = function() {
-        $scope.currentCall.answer();
+        $rootScope.currentCall.answer();
     };
 
     $scope.hangupCall = function() {
-        $scope.currentCall.hangup();
-        $scope.currentCall = undefined;
+        $rootScope.currentCall.hangup();
+
+        $timeout(function() {
+            var icon = angular.element('#callEndedIcon');
+            $animate.addClass(icon, 'callIconRotate');
+            $timeout(function(){
+                $rootScope.currentCall = undefined;
+            }, 2000);
+        }, 100);
     };
     
     $rootScope.onCallError = function(errStr) {
@@ -110,5 +134,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
     }
 
     $rootScope.onCallHangup = function() {
+        $timeout(function() {
+            var icon = angular.element('#callEndedIcon');
+            $animate.addClass(icon, 'callIconRotate');
+            $timeout(function(){
+                $rootScope.currentCall = undefined;
+            }, 2000);
+        }, 100);
     }
 }]);
diff --git a/webclient/app-filter.js b/webclient/app-filter.js
index 27f435674f..ee9374668b 100644
--- a/webclient/app-filter.js
+++ b/webclient/app-filter.js
@@ -79,85 +79,4 @@ angular.module('matrixWebClient')
     return function(text) {
         return $sce.trustAsHtml(text);
     };
-}])
-
-// Compute the room name according to information we have
-.filter('roomName', ['$rootScope', 'matrixService', function($rootScope, matrixService) {
-    return function(room_id) {
-        var roomName;
-
-        // If there is an alias, use it
-        // TODO: only one alias is managed for now
-        var alias = matrixService.getRoomIdToAliasMapping(room_id);
-        if (alias) {
-            roomName = alias;
-        }
-
-        if (undefined === roomName) {
-            // Else, build the name from its users
-            var room = $rootScope.events.rooms[room_id];
-            if (room) {
-                var room_name_event = room["m.room.name"];
-
-                if (room_name_event) {
-                    roomName = room_name_event.content.name;
-                }
-                else if (room.members) {
-                    // Limit the room renaming to 1:1 room
-                    if (2 === Object.keys(room.members).length) {
-                        for (var i in room.members) {
-                            var member = room.members[i];
-                            if (member.state_key !== matrixService.config().user_id) {
-
-                                if (member.state_key in $rootScope.presence) {
-                                    // If the user is available in presence, use the displayname there
-                                    // as it is the most uptodate
-                                    roomName = $rootScope.presence[member.state_key].content.displayname;
-                                }
-                                else if (member.content.displayname) {
-                                    roomName = member.content.displayname;
-                                }
-                                else {
-                                    roomName = member.state_key;
-                                }
-                            }
-                        }
-                    }
-                    else if (1 === Object.keys(room.members).length) {
-                        // The other member may be in the invite list, get all invited users
-                        var invitedUserIDs = [];
-                        for (var i in room.messages) {
-                            var message = room.messages[i];
-                            if ("m.room.member" === message.type && "invite" === message.membership) {
-                                // Make sure there is no duplicate user
-                                if (-1 === invitedUserIDs.indexOf(message.state_key)) {
-                                    invitedUserIDs.push(message.state_key);
-                                }
-                            } 
-                        }
-                        
-                        // For now, only 1:1 room needs to be renamed. It means only 1 invited user
-                        if (1 === invitedUserIDs.length) {
-                            var userID = invitedUserIDs[0];
-
-                            // Try to resolve his displayname in presence global data
-                            if (userID in $rootScope.presence) {
-                                roomName = $rootScope.presence[userID].content.displayname;
-                            }
-                            else {
-                                roomName = userID;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        if (undefined === roomName) {
-            // By default, use the room ID
-            roomName = room_id;
-        }
-
-        return roomName;
-    };
-}]);
+}]);
\ No newline at end of file
diff --git a/webclient/app.css b/webclient/app.css
index 425d5bb11a..7698cb4fda 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -44,7 +44,49 @@ a:active  { color: #000; }
 }
 
 #callBar {
-   float: left;
+    float: left;
+    height: 32px;
+    margin: auto;
+    text-align: right;
+    line-height: 16px;
+}
+
+.callIcon {
+    margin-left: 4px;
+    margin-right: 4px;
+    margin-top: 8px;
+    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+}
+
+.callIconRotate {
+    -webkit-transform: rotateZ(45deg);
+    -moz-transform: rotateZ(45deg);
+    -ms-transform: rotateZ(45deg);
+    -o-transform: rotateZ(45deg);
+    transform: rotateZ(45deg);
+}
+
+#callPeerImage {
+    width: 32px;
+    height: 32px;
+    border: none;
+    float: left;
+}
+
+#callPeerNameAndState {
+    float: left;
+    margin-left: 4px;
+}
+
+#callState {
+    font-size: 60%;
+}
+
+#callPeerName {
+    font-size: 80%;
 }
 
 #headerContent {
@@ -105,6 +147,10 @@ a:active  { color: #000; }
     text-align: center;
 }
 
+#recaptcha_area { 
+    margin: auto
+}
+
 #loginForm {
     text-align: left;
     padding: 1em;
@@ -251,12 +297,14 @@ a:active  { color: #000; }
 .userAvatar .userAvatarImage {
     position: absolute;
     top: 0px;
-    object-fit: cover;    
+    object-fit: cover;
+    width: 100%;
 }
 
 .userAvatar .userAvatarGradient {
     position: absolute;
     bottom: 20px;
+    width: 100%;
 }
 
 .userAvatar .userName {
@@ -417,6 +465,13 @@ a:active  { color: #000; }
     text-align: left ! important;
 }
 
+.bubble .messagePending {
+    opacity: 0.3
+}
+.messageUnSent {
+    color: #F00;
+}
+
 #room-fullscreen-image {
     position: absolute;
     top: 0px;
diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js
index ee478d2eb0..d2bb31053f 100644
--- a/webclient/components/matrix/event-handler-service.js
+++ b/webclient/components/matrix/event-handler-service.js
@@ -41,6 +41,11 @@ angular.module('eventHandlerService', [])
     $rootScope.events = {
         rooms: {} // will contain roomId: { messages:[], members:{userid1: event} }
     };
+    
+    // used for dedupping events - could be expanded in future...
+    // FIXME: means that we leak memory over time (along with lots of the rest
+    // of the app, given we never try to reap memory yet)
+    var eventMap = {};
 
     $rootScope.presence = {};
     
@@ -66,11 +71,22 @@ angular.module('eventHandlerService', [])
         $rootScope.$broadcast(ROOM_CREATE_EVENT, event, isLiveEvent);
     };
 
+    var handleRoomAliases = function(event, isLiveEvent) {
+        matrixService.createRoomIdToAliasMapping(event.room_id, event.content.aliases[0]);
+    };
+
     var handleMessage = function(event, isLiveEvent) {
         initRoom(event.room_id);
         
         if (isLiveEvent) {
-            $rootScope.events.rooms[event.room_id].messages.push(event);
+            if (event.user_id === matrixService.config().user_id &&
+                (event.content.msgtype === "m.text" || event.content.msgtype === "m.emote") ) {
+                // assume we've already echoed it
+                // FIXME: track events by ID and ungrey the right message to show it's been delivered
+            }
+            else {
+                $rootScope.events.rooms[event.room_id].messages.push(event);
+            }
         }
         else {
             $rootScope.events.rooms[event.room_id].messages.unshift(event);
@@ -87,6 +103,14 @@ angular.module('eventHandlerService', [])
     var handleRoomMember = function(event, isLiveEvent) {
         initRoom(event.room_id);
         
+        // if the server is stupidly re-relaying a no-op join, discard it.
+        if (event.prev_content && 
+            event.content.membership === "join" &&
+            event.content.membership === event.prev_content.membership)
+        {
+            return;
+        }
+        
         // add membership changes as if they were a room message if something interesting changed
         if (event.content.prev !== event.content.membership) {
             if (isLiveEvent) {
@@ -137,40 +161,55 @@ angular.module('eventHandlerService', [])
         POWERLEVEL_EVENT: POWERLEVEL_EVENT,
         CALL_EVENT: CALL_EVENT,
         NAME_EVENT: NAME_EVENT,
-        
     
         handleEvent: function(event, isLiveEvent) {
-            switch(event.type) {
-                case "m.room.create":
-                    handleRoomCreate(event, isLiveEvent);
-                    break;
-                case "m.room.message":
-                    handleMessage(event, isLiveEvent);
-                    break;
-                case "m.room.member":
-                    handleRoomMember(event, isLiveEvent);
-                    break;
-                case "m.presence":
-                    handlePresence(event, isLiveEvent);
-                    break;
-                case 'm.room.ops_levels':
-                case 'm.room.send_event_level':
-                case 'm.room.add_state_level':
-                case 'm.room.join_rules':
-                case 'm.room.power_levels':
-                    handlePowerLevels(event, isLiveEvent);
-                    break;
-                case 'm.room.name':
-                    handleRoomName(event, isLiveEvent);
-                    break;
-                default:
-                    console.log("Unable to handle event type " + event.type);
-                    console.log(JSON.stringify(event, undefined, 4));
-                    break;
+            // FIXME: event duplication suppression is all broken as the code currently expect to handles
+            // events multiple times to get their side-effects...
+/*            
+            if (eventMap[event.event_id]) {
+                console.log("discarding duplicate event: " + JSON.stringify(event));
+                return;
             }
+            else {
+                eventMap[event.event_id] = 1;
+            }
+*/            
             if (event.type.indexOf('m.call.') === 0) {
                 handleCallEvent(event, isLiveEvent);
             }
+            else {            
+                switch(event.type) {
+                    case "m.room.create":
+                        handleRoomCreate(event, isLiveEvent);
+                        break;
+                    case "m.room.aliases":
+                        handleRoomAliases(event, isLiveEvent);
+                        break;
+                    case "m.room.message":
+                        handleMessage(event, isLiveEvent);
+                        break;
+                    case "m.room.member":
+                        handleRoomMember(event, isLiveEvent);
+                        break;
+                    case "m.presence":
+                        handlePresence(event, isLiveEvent);
+                        break;
+                    case 'm.room.ops_levels':
+                    case 'm.room.send_event_level':
+                    case 'm.room.add_state_level':
+                    case 'm.room.join_rules':
+                    case 'm.room.power_levels':
+                        handlePowerLevels(event, isLiveEvent);
+                        break;
+                    case 'm.room.name':
+                        handleRoomName(event, isLiveEvent);
+                        break;
+                    default:
+                        console.log("Unable to handle event type " + event.type);
+                        console.log(JSON.stringify(event, undefined, 4));
+                        break;
+                }
+            }
         },
         
         // isLiveEvents determines whether notifications should be shown, whether
diff --git a/webclient/components/matrix/event-stream-service.js b/webclient/components/matrix/event-stream-service.js
index 1c0f7712b4..ed4f3b2ffc 100644
--- a/webclient/components/matrix/event-stream-service.js
+++ b/webclient/components/matrix/event-stream-service.js
@@ -110,6 +110,7 @@ angular.module('eventStreamService', [])
                 var rooms = response.data.rooms;
                 for (var i = 0; i < rooms.length; ++i) {
                     var room = rooms[i];
+                    // console.log("got room: " + room.room_id);
                     if ("state" in room) {
                         eventHandlerService.handleEvents(room.state, false);
                     }
diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js
index 3e13e4e81f..3cb5e8b693 100644
--- a/webclient/components/matrix/matrix-call.js
+++ b/webclient/components/matrix/matrix-call.js
@@ -41,6 +41,7 @@ angular.module('MatrixCall', [])
         this.room_id = room_id;
         this.call_id = "c" + new Date().getTime();
         this.state = 'fledgling';
+        this.didConnect = false;
     }
 
     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@@ -52,6 +53,7 @@ angular.module('MatrixCall', [])
         matrixPhoneService.callPlaced(this);
         navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); });
         self.state = 'wait_local_media';
+        this.direction = 'outbound';
     };
 
     MatrixCall.prototype.initWithInvite = function(msg) {
@@ -64,6 +66,7 @@ angular.module('MatrixCall', [])
         this.peerConn.onaddstream = function(s) { self.onAddStream(s); };
         this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError);
         this.state = 'ringing';
+        this.direction = 'inbound';
     };
 
     MatrixCall.prototype.answer = function() {
@@ -204,10 +207,12 @@ angular.module('MatrixCall', [])
     };
 
     MatrixCall.prototype.onIceConnectionStateChanged = function() {
+        if (this.state == 'ended') return; // because ICE can still complete as we're ending the call
         console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState);
         // 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';
+            this.didConnect = true;
             $rootScope.$apply();
         }
     };
diff --git a/webclient/components/matrix/matrix-filter.js b/webclient/components/matrix/matrix-filter.js
new file mode 100644
index 0000000000..260e0827df
--- /dev/null
+++ b/webclient/components/matrix/matrix-filter.js
@@ -0,0 +1,135 @@
+/*
+ Copyright 2014 OpenMarket Ltd
+ 
+ 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.
+ */
+
+'use strict';
+
+angular.module('matrixFilter', [])
+
+// Compute the room name according to information we have
+.filter('mRoomName', ['$rootScope', 'matrixService', function($rootScope, matrixService) {
+    return function(room_id) {
+        var roomName;
+
+        // If there is an alias, use it
+        // TODO: only one alias is managed for now
+        var alias = matrixService.getRoomIdToAliasMapping(room_id);
+        if (alias) {
+            roomName = alias;
+        }
+
+        if (undefined === roomName) {
+            // Else, build the name from its users
+            var room = $rootScope.events.rooms[room_id];
+            if (room) {
+                var room_name_event = room["m.room.name"];
+
+                if (room_name_event) {
+                    roomName = room_name_event.content.name;
+                }
+                else if (room.members) {
+                    // Limit the room renaming to 1:1 room
+                    if (2 === Object.keys(room.members).length) {
+                        for (var i in room.members) {
+                            var member = room.members[i];
+                            if (member.state_key !== matrixService.config().user_id) {
+
+                                if (member.state_key in $rootScope.presence) {
+                                    // If the user is available in presence, use the displayname there
+                                    // as it is the most uptodate
+                                    roomName = $rootScope.presence[member.state_key].content.displayname;
+                                }
+                                else if (member.content.displayname) {
+                                    roomName = member.content.displayname;
+                                }
+                                else {
+                                    roomName = member.state_key;
+                                }
+                            }
+                        }
+                    }
+                    else if (1 === Object.keys(room.members).length) {
+                        // The other member may be in the invite list, get all invited users
+                        var invitedUserIDs = [];
+                        for (var i in room.messages) {
+                            var message = room.messages[i];
+                            if ("m.room.member" === message.type && "invite" === message.membership) {
+                                // Make sure there is no duplicate user
+                                if (-1 === invitedUserIDs.indexOf(message.state_key)) {
+                                    invitedUserIDs.push(message.state_key);
+                                }
+                            } 
+                        }
+                        
+                        // For now, only 1:1 room needs to be renamed. It means only 1 invited user
+                        if (1 === invitedUserIDs.length) {
+                            var userID = invitedUserIDs[0];
+
+                            // Try to resolve his displayname in presence global data
+                            if (userID in $rootScope.presence) {
+                                roomName = $rootScope.presence[userID].content.displayname;
+                            }
+                            else {
+                                roomName = userID;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        if (undefined === roomName) {
+            // By default, use the room ID
+            roomName = room_id;
+        }
+
+        return roomName;
+    };
+}])
+
+// Compute the user display name in a room according to the data already downloaded
+.filter('mUserDisplayName', ['$rootScope', function($rootScope) {
+    return function(user_id, room_id) {
+        var displayName;
+    
+        // Try to find the user name among presence data
+        // Warning: that means we have received before a presence event for this
+        // user which cannot be guaranted.
+        // However, if we get the info by this way, we are sure this is the latest user display name
+        // See FIXME comment below
+        if (user_id in $rootScope.presence) {
+            displayName = $rootScope.presence[user_id].content.displayname;
+        }
+            
+        // FIXME: Would like to use the display name as defined in room members of the room.
+        // But this information is the display name of the user when he has joined the room.
+        // It does not take into account user display name update
+        if (room_id) {
+            var room = $rootScope.events.rooms[room_id];
+            if (room && (user_id in room.members)) {
+                var member = room.members[user_id];
+                if (member.content.displayname) {
+                    displayName = member.content.displayname;
+                }
+            }
+        }
+        
+        if (undefined === displayName) {
+            // By default, use the user ID
+            displayName = user_id;
+        }
+        return displayName;
+    };
+}]);
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index 25222a9e9e..3c28c52fbe 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -36,6 +36,9 @@ angular.module('matrixService', [])
     */    
     var config;
     
+    var roomIdToAlias = {};
+    var aliasToRoomId = {};
+    
     // Current version of permanent storage
     var configVersion = 0;
     var prefixPath = "/_matrix/client/api/v1";
@@ -84,15 +87,32 @@ angular.module('matrixService', [])
         prefix: prefixPath,
 
         // Register an user
-        register: function(user_name, password, threepidCreds) {
+        register: function(user_name, password, threepidCreds, useCaptcha) {         
             // The REST path spec
             var path = "/register";
-
-            return doRequest("POST", path, undefined, {
+            
+            var data = {
                  user_id: user_name,
                  password: password,
                  threepidCreds: threepidCreds
-            });
+            };
+            
+            if (useCaptcha) {
+                // Not all home servers will require captcha on signup, but if this flag is checked,
+                // send captcha information.
+                // TODO: Might be nice to make this a bit more flexible..
+                var challengeToken = Recaptcha.get_challenge();
+                var captchaEntry = Recaptcha.get_response();
+                var captchaType = "m.login.recaptcha";
+                
+                data.captcha = {
+                    type: captchaType,
+                    challenge: challengeToken,
+                    response: captchaEntry
+                };
+            }   
+
+            return doRequest("POST", path, undefined, data);
         },
 
         // Create a room
@@ -168,18 +188,20 @@ angular.module('matrixService', [])
         },
 
         // Change the membership of an another user
-        setMembership: function(room_id, user_id, membershipValue) {
+        setMembership: function(room_id, user_id, membershipValue, reason) {
+            
             // The REST path spec
             var path = "/rooms/$room_id/state/m.room.member/$user_id";
             path = path.replace("$room_id", encodeURIComponent(room_id));
             path = path.replace("$user_id", user_id);
 
             return doRequest("PUT", path, undefined, {
-                membership: membershipValue
+                membership : membershipValue,
+                reason: reason
             });
         },
            
-        // Bans a user from from a room
+        // Bans a user from a room
         ban: function(room_id, user_id, reason) {
             var path = "/rooms/$room_id/ban";
             path = path.replace("$room_id", encodeURIComponent(room_id));
@@ -189,7 +211,20 @@ angular.module('matrixService', [])
                 reason: reason
             });
         },
-
+        
+        // Unbans a user in a room
+        unban: function(room_id, user_id) {
+            // FIXME: To update when there will be homeserver API for unban 
+            // For now, do an unban by resetting the user membership to "leave"
+            return this.setMembership(room_id, user_id, "leave");
+        },
+        
+        // Kicks a user from a room
+        kick: function(room_id, user_id, reason) {
+            // Set the user membership to "leave" to kick him
+            return this.setMembership(room_id, user_id, "leave", reason);
+        },
+        
         // Retrieves the room ID corresponding to a room alias
         resolveRoomAlias:function(room_alias) {
             var path = "/_matrix/client/api/v1/directory/room/$room_alias";
@@ -280,6 +315,11 @@ angular.module('matrixService', [])
             return doRequest("GET", path);
         },
         
+        // get a user's profile
+        getProfile: function(userId) {
+            return this.getProfileInfo(userId);
+        },
+
         // get a display name for this user ID
         getDisplayName: function(userId) {
             return this.getProfileInfo(userId, "displayname");
@@ -313,8 +353,8 @@ angular.module('matrixService', [])
         },
 
         getProfileInfo: function(userId, info_segment) {
-            var path = "/profile/$user_id/" + info_segment;
-            path = path.replace("$user_id", userId);
+            var path = "/profile/"+userId
+            if (info_segment) path += '/' + info_segment;
             return doRequest("GET", path);
         },
         
@@ -485,18 +525,20 @@ angular.module('matrixService', [])
                 room_alias: undefined,
                 room_display_name: undefined
             };
-            
             var alias = this.getRoomIdToAliasMapping(room.room_id);
             if (alias) {
                 // use the existing alias from storage
                 result.room_alias = alias;
                 result.room_display_name = alias;
             }
+            // XXX: this only lets us learn aliases from our local HS - we should
+            // make the client stop returning this if we can trust m.room.aliases state events
             else if (room.aliases && room.aliases[0]) {
                 // save the mapping
                 // TODO: select the smarter alias from the array
                 this.createRoomIdToAliasMapping(room.room_id, room.aliases[0]);
                 result.room_display_name = room.aliases[0];
+                result.room_alias = room.aliases[0];
             }
             else if (room.membership === "invite" && "inviter" in room) {
                 result.room_display_name = room.inviter + "'s room";
@@ -509,13 +551,22 @@ angular.module('matrixService', [])
         },
         
         createRoomIdToAliasMapping: function(roomId, alias) {
-            localStorage.setItem(MAPPING_PREFIX+roomId, alias);
+            roomIdToAlias[roomId] = alias;
+            aliasToRoomId[alias] = roomId;
+            // localStorage.setItem(MAPPING_PREFIX+roomId, alias);
         },
         
         getRoomIdToAliasMapping: function(roomId) {
-            return localStorage.getItem(MAPPING_PREFIX+roomId);
+            var alias = roomIdToAlias[roomId]; // was localStorage.getItem(MAPPING_PREFIX+roomId)
+            //console.log("looking for alias for " + roomId + "; found: " + alias);
+            return alias;
         },
 
+        getAliasToRoomIdMapping: function(alias) {
+            var roomId = aliasToRoomId[alias];
+            //console.log("looking for roomId for " + alias + "; found: " + roomId);
+            return roomId;
+        },
 
         /****** Power levels management ******/
 
diff --git a/webclient/home/home.html b/webclient/home/home.html
index c1f9643839..7240e79f86 100644
--- a/webclient/home/home.html
+++ b/webclient/home/home.html
@@ -26,7 +26,7 @@
     
     <div class="public_rooms" ng-repeat="room in public_rooms">
         <div>
-            <a href="#/room/{{ room.room_alias ? room.room_alias : room.room_id }}" >{{ room.room_alias }}</a>
+            <a href="#/room/{{ room.room_alias ? room.room_alias : room.room_id }}" >{{ room.room_display_name }}</a>
         </div>
     </div>
     <br/>
diff --git a/webclient/img/green_phone.png b/webclient/img/green_phone.png
new file mode 100644
index 0000000000..28807c749b
--- /dev/null
+++ b/webclient/img/green_phone.png
Binary files differdiff --git a/webclient/img/red_phone.png b/webclient/img/red_phone.png
new file mode 100644
index 0000000000..11fc44940c
--- /dev/null
+++ b/webclient/img/red_phone.png
Binary files differdiff --git a/webclient/index.html b/webclient/index.html
index f016dbb877..81c7c7d06c 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -10,12 +10,14 @@
    
     <meta name="viewport" content="width=device-width">
    
-    <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script> 
+    <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
+    <script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> 
     <script src="js/angular.min.js"></script>
     <script src="js/angular-route.min.js"></script>
     <script src="js/angular-sanitize.min.js"></script>
     <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
     <script src="app.js"></script>
+    <script src="config.js"></script>
     <script src="app-controller.js"></script>
     <script src="app-directive.js"></script>
     <script src="app-filter.js"></script>
@@ -29,6 +31,7 @@
     <script src="settings/settings-controller.js"></script>
     <script src="user/user-controller.js"></script>
     <script src="components/matrix/matrix-service.js"></script>
+    <script src="components/matrix/matrix-filter.js"></script>
     <script src="components/matrix/matrix-call.js"></script>
     <script src="components/matrix/matrix-phone-service.js"></script>
     <script src="components/matrix/event-stream-service.js"></script>
@@ -44,18 +47,29 @@
     <div id="header">
         <!-- Do not show buttons on the login page -->
         <div id="headerContent" ng-hide="'/login' == location || '/register' == location">
-            <div id="callBar">
-                <div ng-show="currentCall.state == 'ringing'">
-                Incoming call from {{ currentCall.user_id }}
-                <button ng-click="answerCall()">Answer</button>
-                <button ng-click="hangupCall()">Reject</button>
+            <div id="callBar" ng-show="currentCall">
+                <img id="callPeerImage" ng-show="currentCall.userProfile.avatar_url" ngSrc="{{ currentCall.userProfile.avatar_url }}" />
+                <img class="callIcon" src="img/green_phone.png" ng-show="currentCall.state != 'ended'" />
+                <img class="callIcon" id="callEndedIcon" src="img/red_phone.png" ng-show="currentCall.state == 'ended'" />
+                <div id="callPeerNameAndState">
+                    <span id="callPeerName">{{ currentCall.userProfile.displayname }}</span>
+                    <br />
+                    <span id="callState">
+                        <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' && !currentCall.didConnect && currentCall.direction == 'outbound'">Call Rejected</span>
+                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span>
+                        <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span>
+                        <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span>
+                        <span ng-show="currentCall.state == 'wait_local_media'">Waiting for media permission...</span>
+                    </span>
                 </div>
+                <span ng-show="currentCall.state == 'ringing'">
+                    <button ng-click="answerCall()">Answer</button>
+                    <button ng-click="hangupCall()">Reject</button>
+                </span>
                 <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">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>
             <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a>
             &nbsp;
diff --git a/webclient/login/login.html b/webclient/login/login.html
index 18e7a02815..6297ec4d42 100644
--- a/webclient/login/login.html
+++ b/webclient/login/login.html
@@ -39,8 +39,8 @@
                         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>
+                    <a href="#/register" style="padding-right: 0em">Create account</a>
+                    <a href="#/reset_password" style="display: none; ">Forgotten password?</a>
                 </div>
             </div>
         </form>
diff --git a/webclient/login/register-controller.js b/webclient/login/register-controller.js
index 5a14964248..b3c0c21335 100644
--- a/webclient/login/register-controller.js
+++ b/webclient/login/register-controller.js
@@ -19,6 +19,12 @@ angular.module('RegisterController', ['matrixService'])
                                     function($scope, $rootScope, $location, matrixService, eventStreamService) {
     'use strict';
     
+    var config = window.webClientConfig;
+    var useCaptcha = true;
+    if (config !== undefined) {
+        useCaptcha = config.useCaptcha;
+    }
+    
     // FIXME: factor out duplication with login-controller.js
     
     // Assume that this is hosted on the home server, in which case the URL
@@ -87,9 +93,12 @@ angular.module('RegisterController', ['matrixService'])
     };
 
     $scope.registerWithMxidAndPassword = function(mxid, password, threepidCreds) {
-        matrixService.register(mxid, password, threepidCreds).then(
+        matrixService.register(mxid, password, threepidCreds, useCaptcha).then(
             function(response) {
                 $scope.feedback = "Success";
+                if (useCaptcha) {
+                    Recaptcha.destroy();
+                }
                 // Update the current config 
                 var config = matrixService.config();
                 angular.extend(config, {
@@ -116,11 +125,21 @@ angular.module('RegisterController', ['matrixService'])
             },
             function(error) {
                 console.trace("Registration error: "+error);
+                if (useCaptcha) {
+                    Recaptcha.reload();
+                }
                 if (error.data) {
                     if (error.data.errcode === "M_USER_IN_USE") {
                         $scope.feedback = "Username already taken.";
                         $scope.reenter_username = true;
                     }
+                    else if (error.data.errcode == "M_CAPTCHA_INVALID") {
+                        $scope.feedback = "Failed captcha.";
+                    }
+                    else if (error.data.errcode == "M_CAPTCHA_NEEDED") {
+                        $scope.feedback = "Captcha is required on this home " +
+                                          "server.";
+                    }
                 }
                 else if (error.status === 0) {
                     $scope.feedback = "Unable to talk to the server.";
@@ -142,6 +161,33 @@ angular.module('RegisterController', ['matrixService'])
             }
         );
     };
+	
+	var setupCaptcha = function() {
+	    console.log("Setting up ReCaptcha")
+        var config = window.webClientConfig;
+        var public_key = undefined;
+        if (config === undefined) {
+            console.error("Couldn't find webClientConfig. Cannot get public key for captcha.");
+        }
+        else {
+            public_key = webClientConfig.recaptcha_public_key;
+            if (public_key === undefined) {
+                console.error("No public key defined for captcha!")
+            }
+        }
+	    Recaptcha.create(public_key,
+	    "regcaptcha",
+	    {
+	      theme: "red",
+	      callback: Recaptcha.focus_response_field
+	    });
+	};
 
+	$scope.init = function() {
+        if (useCaptcha) {
+	        setupCaptcha();
+        }
+	};
+    
 }]);
 
diff --git a/webclient/login/register.html b/webclient/login/register.html
index 06a6526b70..a27f9ad4e8 100644
--- a/webclient/login/register.html
+++ b/webclient/login/register.html
@@ -12,7 +12,6 @@
                 
                 <div style="text-align: center">
                     <br/>
-
                     <input ng-show="!wait_3pid_code" id="email" size="32" type="text" ng-focus="true" ng-model="account.email" placeholder="Email address (optional)"/>
                     <div ng-show="!wait_3pid_code" class="smallPrint">Specifying an email address lets other users find you on Matrix more easily,<br/>
                         and will give you a way to reset your password in the future</div>
@@ -26,7 +25,10 @@
                     <input ng-show="!wait_3pid_code" id="displayName" size="32" type="text" ng-model="account.displayName" placeholder="Display name (e.g. Bob Obson)"/>
                     <br ng-show="!wait_3pid_code" />
                     <br ng-show="!wait_3pid_code" />
-                    
+
+
+                    <div id="regcaptcha" ng-init="init()" />
+
                     <button ng-show="!wait_3pid_code" ng-click="register()" ng-disabled="!account.desired_user_id || !account.homeserver || !account.pwd1 || !account.pwd2 || account.pwd1 !== account.pwd2">Sign up</button>
 
                     <div ng-show="wait_3pid_code">
diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js
index 3209f2cbdf..0f27f7a660 100644
--- a/webclient/recents/recents-controller.js
+++ b/webclient/recents/recents-controller.js
@@ -16,7 +16,7 @@
 
 'use strict';
 
-angular.module('RecentsController', ['matrixService', 'eventHandlerService'])
+angular.module('RecentsController', ['matrixService', 'matrixFilter', 'eventHandlerService'])
 .controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', 
                                function($scope,  matrixService, eventHandlerService) {
     $scope.rooms = {};
@@ -28,13 +28,8 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService'])
     var listenToEventStream = function() {
         // Refresh the list on matrix invitation and message event
         $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {
-            var config = matrixService.config();
-            if (isLive && event.state_key === config.user_id && event.content.membership === "invite") {
-                console.log("Invited to room " + event.room_id);
-                // FIXME push membership to top level key to match /im/sync
-                event.membership = event.content.membership;
-
-                $scope.rooms[event.room_id] = event;
+            if (isLive) {
+                $scope.rooms[event.room_id].lastMsg = event;
             }
         });
         $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) {
diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html
index 9978e08b13..280d0632ab 100644
--- a/webclient/recents/recents.html
+++ b/webclient/recents/recents.html
@@ -6,7 +6,7 @@
                ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID)}">
             <tr>
                 <td class="recentsRoomName">
-                    {{ room.room_id | roomName }}
+                    {{ room.room_id | mRoomName }}
                 </td>
                 <td class="recentsRoomSummaryTS">
                     {{ (room.lastMsg.ts) | date:'MMM d HH:mm' }}
@@ -16,27 +16,48 @@
             <tr>
                 <td colspan="2" class="recentsRoomSummary">
 
-                    <div ng-show="room.membership === 'invite'" >
-                        {{ room.inviter }} invited you
+                    <div ng-show="room.membership === 'invite'">
+                        {{ room.lastMsg.inviter | mUserDisplayName: room.room_id }} invited you
                     </div>
-
-                    <div ng-hide="room.membership === 'invite'" ng-switch="room.lastMsg.type" >
-                         <div ng-switch-when="m.room.member">
-                            {{ room.lastMsg.user_id }}
-                            {{ {"join": "joined", "leave": "left", "invite": "invited", "ban": "banned"}[msg.content.membership] }}
-                            {{ (msg.content.membership === "invite" || msg.content.membership === "ban") ? (msg.state_key || '') : '' }}
+                    
+                    <div ng-hide="room.membership === 'invite'" ng-switch="room.lastMsg.type">
+                        <div ng-switch-when="m.room.member">
+                            <span ng-if="'join' === room.lastMsg.content.membership">
+                                {{ room.lastMsg.state_key | mUserDisplayName: room.room_id}} joined
+                            </span>
+                            <span ng-if="'leave' === room.lastMsg.content.membership">
+                                <span ng-if="room.lastMsg.user_id === room.lastMsg.state_key">
+                                    {{room.lastMsg.state_key | mUserDisplayName: room.room_id }} left
+                                </span>
+                                <span ng-if="room.lastMsg.user_id !== room.lastMsg.state_key">
+                                    {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }}
+                                    {{ {"join": "kicked", "ban": "unbanned"}[room.lastMsg.content.prev] }}
+                                    {{ room.lastMsg.state_key | mUserDisplayName: room.room_id }}
+                                </span>
+                                <span ng-if="'join' === room.lastMsg.content.prev && room.lastMsg.content.reason">
+                                    : {{ room.lastMsg.content.reason }}
+                                </span>
+                            </span>
+                            <span ng-if="'invite' === room.lastMsg.content.membership || 'ban' === room.lastMsg.content.membership">
+                                {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }}
+                                {{ {"invite": "invited", "ban": "banned"}[room.lastMsg.content.membership] }}
+                                {{ room.lastMsg.state_key | mUserDisplayName: room.room_id }}
+                                <span ng-if="'ban' === room.lastMsg.content.prev && room.lastMsg.content.reason">
+                                    : {{ room.lastMsg.content.reason }}
+                                </span>
+                            </span>
                         </div>
 
                         <div ng-switch-when="m.room.message">
                             <div ng-switch="room.lastMsg.content.msgtype">
                                 <div ng-switch-when="m.text">
-                                    {{ room.lastMsg.user_id }} :
+                                    {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }} :
                                     <span ng-bind-html="(room.lastMsg.content.body) | linky:'_blank'">
                                     </span>
                                 </div>
 
                                 <div ng-switch-when="m.image">
-                                    {{ room.lastMsg.user_id }} sent an image
+                                    {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }} sent an image
                                 </div>
 
                                 <div ng-switch-when="m.emote">
@@ -51,7 +72,7 @@
                         </div>
 
                         <div ng-switch-default>
-                            <div ng-if="room.lastMsg.type.indexOf('m.call.') == 0">
+                            <div ng-if="room.lastMsg.type.indexOf('m.call.') === 0">
                                 Call
                             </div>
                         </div>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index c3f72c9d25..e69adb9b46 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-angular.module('RoomController', ['ngSanitize', 'mFileInput'])
+angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
 .controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mPresence', 'matrixPhoneService', 'MatrixCall',
                                function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, mPresence, matrixPhoneService, MatrixCall) {
    'use strict';
@@ -32,9 +32,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         first_pagination: true, // this is toggled off when the first pagination is done
         can_paginate: true, // this is toggled off when we run out of items
         paginating: false, // used to avoid concurrent pagination requests pulling in dup contents
-        stream_failure: undefined, // the response when the stream fails
-        // FIXME: sending has been disabled, as surely messages should be sent in the background rather than locking the UI synchronously --Matthew
-        sending: false // true when a message is being sent. It helps to disable the UI when a process is running
+        stream_failure: undefined // the response when the stream fails
     };
     $scope.members = {};
     $scope.autoCompleting = false;
@@ -44,18 +42,25 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
     $scope.imageURLToSend = "";
     $scope.userIDToInvite = "";
     
-    var scrollToBottom = function() {
+    var scrollToBottom = function(force) {
         console.log("Scrolling to bottom");
-        $timeout(function() {
-            var objDiv = document.getElementById("messageTableWrapper");
-            objDiv.scrollTop = objDiv.scrollHeight;
-        }, 0);
+        
+        // Do not autoscroll to the bottom to display the new event if the user is not at the bottom.
+        // Exception: in case where the event is from the user, we want to force scroll to the bottom
+        var objDiv = document.getElementById("messageTableWrapper");
+        if ((objDiv.offsetHeight + objDiv.scrollTop >= objDiv.scrollHeight) || force) {
+            
+            $timeout(function() {
+                objDiv.scrollTop = objDiv.scrollHeight;
+            }, 0);
+        }
     };
 
     $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) {
         if (isLive && event.room_id === $scope.room_id) {
-            scrollToBottom();
             
+            scrollToBottom();
+
             if (window.Notification) {
                 // Show notification when the user is idle
                 if (matrixService.presence.offline === mPresence.getState()) {
@@ -76,6 +81,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
     
     $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {
         if (isLive) {
+            scrollToBottom();
             updateMemberList(event);
         }
     });
@@ -169,16 +175,18 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
     var updateMemberList = function(chunk) {
         if (chunk.room_id != $scope.room_id) return;
 
-        // Ignore banned and kicked (leave) people
-        if ("ban" === chunk.membership || "leave" === chunk.membership) {
-            return;
-        }
 
         // set target_user_id to keep things clear
         var target_user_id = chunk.state_key;
 
         var isNewMember = !(target_user_id in $scope.members);
         if (isNewMember) {
+            
+            // Ignore banned and kicked (leave) people
+            if ("ban" === chunk.membership || "leave" === chunk.membership) {
+                return;
+            }
+        
             // FIXME: why are we copying these fields around inside chunk?
             if ("presence" in chunk.content) {
                 chunk.presence = chunk.content.presence;
@@ -202,6 +210,13 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         }
         else {
             // selectively update membership and presence else it will nuke the picture and displayname too :/
+            
+            // Remove banned and kicked (leave) people
+            if ("ban" === chunk.membership || "leave" === chunk.membership) {
+                delete $scope.members[target_user_id];
+                return;
+            }
+            
             var member = $scope.members[target_user_id];
             member.membership = chunk.content.membership;
             if ("presence" in chunk.content) {
@@ -256,7 +271,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
             
             normaliseMembersPowerLevels();
         }
-    }
+    };
 
     // Normalise users power levels so that the user with the higher power level
     // will have a bar covering 100% of the width of his avatar
@@ -277,104 +292,225 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
                 member.powerLevelNorm = (member.powerLevel * 100) / maxPowerLevel;
             }
         }
-    }
+    };
 
     $scope.send = function() {
         if ($scope.textInput === "") {
             return;
         }
-
-        $scope.state.sending = true;
+        
+        scrollToBottom(true);
         
         var promise;
+        var cmd;
+        var args;
+        var echo = false;
         
         // Check for IRC style commands first
-        if ($scope.textInput.indexOf("/") === 0) {
-            var args = $scope.textInput.split(' ');
-            var cmd = args[0];
+        var line = $scope.textInput;
+        
+        // trim any trailing whitespace, as it can confuse the parser for IRC-style commands
+        line = line.replace(/\s+$/, "");
+        
+        if (line[0] === "/" && line[1] !== "/") {
+            var bits = line.match(/^(\S+?)( +(.*))?$/);
+            cmd = bits[1];
+            args = bits[3];
+            
+            console.log("cmd: " + cmd + ", args: " + args);
             
             switch (cmd) {
                 case "/me":
-                    var emoteMsg = args.slice(1).join(' ');
-                    promise = matrixService.sendEmoteMessage($scope.room_id, emoteMsg);
+                    promise = matrixService.sendEmoteMessage($scope.room_id, args);
+                    echo = true;
                     break;
                     
                 case "/nick":
                     // Change user display name
-                    if (2 === args.length) {
-                        promise = matrixService.setDisplayName(args[1]);
+                    if (args) {
+                        promise = matrixService.setDisplayName(args);                     
+                    }
+                    else {
+                        $scope.feedback = "Usage: /nick <display_name>";
+                    }
+                    break;
+
+                case "/join":
+                    // Join a room
+                    if (args) {
+                        var matches = args.match(/^(\S+)$/);
+                        if (matches) {
+                            var room_alias = matches[1];
+                            if (room_alias.indexOf(':') == -1) {
+                                // FIXME: actually track the :domain style name of our homeserver
+                                // with or without port as is appropriate and append it at this point
+                            }
+                            
+                            var room_id = matrixService.getAliasToRoomIdMapping(room_alias);
+                            console.log("joining " + room_alias + " id=" + room_id);
+                            if ($rootScope.events.rooms[room_id]) {
+                                // don't send a join event for a room you're already in.
+                                $location.url("room/" + room_alias);
+                            }
+                            else {
+                                promise = matrixService.joinAlias(room_alias).then(
+                                    function(response) {
+                                        $location.url("room/" + room_alias);
+                                    },
+                                    function(error) {
+                                        $scope.feedback = "Can't join room: " + JSON.stringify(error.data);
+                                    }
+                                );
+                            }
+                        }
+                    }
+                    else {
+                        $scope.feedback = "Usage: /join <room_alias>";
                     }
                     break;
                     
                 case "/kick":
-                    // Kick a user from the room
-                    if (2 === args.length) {
-                        var user_id = args[1];
+                    // Kick a user from the room with an optional reason
+                    if (args) {
+                        var matches = args.match(/^(\S+?)( +(.*))?$/);
+                        if (matches) {
+                            promise = matrixService.kick($scope.room_id, matches[1], matches[3]);
+                        }
+                    }
 
-                        // Set his state in the room as leave
-                        promise = matrixService.setMembership($scope.room_id, user_id, "leave");
+                    if (!promise) {
+                        $scope.feedback = "Usage: /kick <userId> [<reason>]";
                     }
                     break;
-                    
+
                 case "/ban":
-                    // Ban a user from the room
-                    if (2 <= args.length) {
-                        // TODO: The user may have entered the display name
-                        // Need display name -> user_id resolution. Pb: how to manage user with same display names?
-                        var user_id = args[1];
-
-                        // Does the user provide a reason?
-                        if (3 <= args.length) {
-                            var reason = args.slice(2).join(' ');
+                    // Ban a user from the room with an optional reason
+                    if (args) {
+                        var matches = args.match(/^(\S+?)( +(.*))?$/);
+                        if (matches) {
+                            promise = matrixService.ban($scope.room_id, matches[1], matches[3]);
                         }
-                        promise = matrixService.ban($scope.room_id, user_id, reason);
                     }
-                    break;
                     
+                    if (!promise) {
+                        $scope.feedback = "Usage: /ban <userId> [<reason>]";
+                    }
+                    break;
+
                 case "/unban":
                     // Unban a user from the room
-                    if (2 === args.length) {
-                        var user_id = args[1];
-
-                        // Reset the user membership to leave to unban him
-                        promise = matrixService.setMembership($scope.room_id, user_id, "leave");
+                    if (args) {
+                        var matches = args.match(/^(\S+)$/);
+                        if (matches) {
+                            // Reset the user membership to "leave" to unban him
+                            promise = matrixService.unban($scope.room_id, matches[1]);
+                        }
+                    }
+                    
+                    if (!promise) {
+                        $scope.feedback = "Usage: /unban <userId>";
                     }
                     break;
                     
                 case "/op":
                     // Define the power level of a user
-                    if (3 === args.length) {
-                        var user_id = args[1];
-                        var powerLevel = parseInt(args[2]);
-                        promise = matrixService.setUserPowerLevel($scope.room_id, user_id, powerLevel);
+                    if (args) {
+                        var matches = args.match(/^(\S+?)( +(\d+))?$/);
+                        var powerLevel = 50; // default power level for op
+                        if (matches) {
+                            var user_id = matches[1];
+                            if (matches.length === 4) {
+                                powerLevel = parseInt(matches[3]);
+                            }
+                            if (powerLevel !== NaN) {
+                                promise = matrixService.setUserPowerLevel($scope.room_id, user_id, powerLevel);
+                            }
+                        }
+                    }
+                    
+                    if (!promise) {
+                        $scope.feedback = "Usage: /op <userId> [<power level>]";
                     }
                     break;
                     
                 case "/deop":
                     // Reset the power level of a user
-                    if (2 === args.length) {
-                        var user_id = args[1];
-                        promise = matrixService.setUserPowerLevel($scope.room_id, user_id, undefined);
+                    if (args) {
+                        var matches = args.match(/^(\S+)$/);
+                        if (matches) {
+                            promise = matrixService.setUserPowerLevel($scope.room_id, args, undefined);
+                        }
                     }
+                    
+                    if (!promise) {
+                        $scope.feedback = "Usage: /deop <userId>";
+                    }
+                    break;
+                
+                default:
+                    $scope.feedback = ("Unrecognised IRC-style command: " + cmd);
                     break;
             }
         }
         
-        if (!promise) {
-            // Send the text message
-            promise = matrixService.sendTextMessage($scope.room_id, $scope.textInput);
+        // By default send this as a message unless it's an IRC-style command
+        if (!promise && !cmd) {
+            // Make the request
+            promise = matrixService.sendTextMessage($scope.room_id, line);
+            echo = true;
         }
         
-        promise.then(
-            function() {
-                console.log("Request successfully sent");
-                $scope.textInput = "";
-                $scope.state.sending = false;
-            },
-            function(error) {
-                $scope.feedback = "Request failed: " + error.data.error;
-                $scope.state.sending = false;
-            });
+        if (echo) {
+            // Echo the message to the room
+            // To do so, create a minimalist fake text message event and add it to the in-memory list of room messages
+            var echoMessage = {
+                content: {
+                    body: (cmd === "/me" ? args : line),
+                    hsob_ts: new Date().getTime(), // fake a timestamp
+                    msgtype: (cmd === "/me" ? "m.emote" : "m.text"),
+                },
+                room_id: $scope.room_id,
+                type: "m.room.message",
+                user_id: $scope.state.user_id,
+                // FIXME: re-enable echo_msg_state when we have a nice way to turn the field off again
+                // echo_msg_state: "messagePending"     // Add custom field to indicate the state of this fake message to HTML
+            };
+
+            $scope.textInput = "";
+            $rootScope.events.rooms[$scope.room_id].messages.push(echoMessage);
+            scrollToBottom();
+        }
+
+        if (promise) {
+            promise.then(
+                function() {
+                    console.log("Request successfully sent");
+                    $scope.textInput = "";
+/*
+                    if (echoMessage) {
+                        // Remove the fake echo message from the room messages
+                        // It will be replaced by the one acknowledged by the server
+                        // ...except this causes a nasty flicker.  So don't swap messages for now. --matthew
+                        // var index = $rootScope.events.rooms[$scope.room_id].messages.indexOf(echoMessage);
+                        // if (index > -1) {
+                        //     $rootScope.events.rooms[$scope.room_id].messages.splice(index, 1);
+                        // }
+                    }
+                    else {
+                        $scope.textInput = "";
+                    }
+*/                    
+                },
+                function(error) {
+                    $scope.feedback = "Request failed: " + error.data.error;
+
+                    if (echoMessage) {
+                        // Mark the message as unsent for the rest of the page life
+                        echoMessage.content.hsob_ts = "Unsent";
+                        echoMessage.echo_msg_state = "messageUnSent";
+                    }
+                });
+        }
     };
 
     $scope.onInit = function() {
@@ -531,25 +667,20 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
     };
 
     $scope.sendImage = function(url, body) {
-        $scope.state.sending = true;
-
+        scrollToBottom(true);
+        
         matrixService.sendImageMessage($scope.room_id, url, body).then(
             function() {
                 console.log("Image sent");
-                $scope.state.sending = false;
             },
             function(error) {
                 $scope.feedback = "Failed to send image: " + error.data.error;
-                $scope.state.sending = false;
             });
     };
     
     $scope.imageFileToSend;
     $scope.$watch("imageFileToSend", function(newValue, oldValue) {
         if ($scope.imageFileToSend) {
-
-            $scope.state.sending = true;
-
             // Upload this image with its thumbnail to Internet
             mFileUpload.uploadImageAndThumbnail($scope.imageFileToSend, THUMBNAIL_SIZE).then(
                 function(imageMessage) {
@@ -557,16 +688,13 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
                     matrixService.sendMessage($scope.room_id, undefined, imageMessage).then(
                         function() {
                             console.log("Image message sent");
-                            $scope.state.sending = false;
                         },
                         function(error) {
                             $scope.feedback = "Failed to send image message: " + error.data.error;
-                            $scope.state.sending = false;
                         });
                 },
                 function(error) {
                     $scope.feedback = "Can't upload image";
-                    $scope.state.sending = false;
                 }
             );
         }
@@ -582,6 +710,6 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
         call.onHangup = $rootScope.onCallHangup;
         call.placeCall();
         $rootScope.currentCall = call;
-    }
+    };
 
 }]);
diff --git a/webclient/room/room-directive.js b/webclient/room/room-directive.js
index 659bcbc60f..e033b003e1 100644
--- a/webclient/room/room-directive.js
+++ b/webclient/room/room-directive.js
@@ -48,6 +48,9 @@ angular.module('RoomController')
                 var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
                 if (targetIndex === 0) {
                     element[0].value = text;
+                    
+                    // Force angular to wake up and update the input ng-model by firing up input event
+                    angular.element(element[0]).triggerHandler('input');
                 }
                 else if (search && search[1]) {
                     // console.log("search found: " + search);
@@ -81,7 +84,10 @@ angular.module('RoomController')
                             expansion += " ";
                         element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion);
                         // cancel blink
-                        element[0].className = "";                        
+                        element[0].className = "";     
+                        
+                        // Force angular to wake up and update the input ng-model by firing up input event
+                        angular.element(element[0]).triggerHandler('input');
                     }
                     else {
                         // console.log("wrapped!");
@@ -91,6 +97,9 @@ angular.module('RoomController')
                         }, 150);
                         element[0].value = text;
                         scope.tabCompleteIndex = 0;
+                        
+                        // Force angular to wake up and update the input ng-model by firing up input event
+                        angular.element(element[0]).triggerHandler('input');
                     }
                 }
                 else {
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 6732a7b3ae..5bd2cc92d5 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -3,7 +3,7 @@
     <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_id  | roomName }}
+            {{ room_id  | mRoomName }}
         </div>
     </div>
 
@@ -40,7 +40,10 @@
                 ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
                 <td class="leftBlock">
                     <div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
-                    <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div>
+                    <div class="timestamp"
+                         ng-class="msg.echo_msg_state">
+                        {{ (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.png' }}" width="32" height="32"
@@ -59,15 +62,24 @@
                                 {{ members[msg.user_id].displayname || msg.user_id }}
                                 {{ {"join": "kicked", "ban": "unbanned"}[msg.content.prev] }}
                                 {{ members[msg.state_key].displayname || msg.state_key }}
+                                <span ng-if="'join' === msg.content.prev && msg.content.reason">
+                                    : {{ msg.content.reason }}
+                                </span>
                             </span>
                         </span>
                         <span ng-if="'invite' === msg.content.membership || 'ban' === msg.content.membership">
                             {{ members[msg.user_id].displayname || msg.user_id }}
                             {{ {"invite": "invited", "ban": "banned"}[msg.content.membership] }}
                             {{ members[msg.state_key].displayname || msg.state_key }}
-                        </span>
+                            <span ng-if="'ban' === msg.content.prev && msg.content.reason">
+                                : {{ msg.content.reason }}
+                            </span>
+                        </span>                        
+                        
                         <span ng-show='msg.content.msgtype === "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/>
-                        <span ng-show='msg.content.msgtype === "m.text"' ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/>
+                        <span ng-show='msg.content.msgtype === "m.text"' 
+                              ng-class="msg.echo_msg_state"
+                              ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/>
                         <div ng-show='msg.content.msgtype === "m.image"'>
                             <div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
                                 <img class="image" ng-src="{{ msg.content.url }}"/>
diff --git a/webclient/settings/settings-controller.js b/webclient/settings/settings-controller.js
index 7a26367a1b..8c877a24e9 100644
--- a/webclient/settings/settings-controller.js
+++ b/webclient/settings/settings-controller.js
@@ -19,6 +19,17 @@ limitations under the License.
 angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInput'])
 .controller('SettingsController', ['$scope', 'matrixService', 'mFileUpload',
                               function($scope, matrixService, mFileUpload) {                 
+    // XXX: duplicated from register
+    var generateClientSecret = function() {
+        var ret = "";
+        var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+        for (var i = 0; i < 32; i++) {
+            ret += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+
+        return ret;
+    };
     $scope.config = matrixService.config();
 
     $scope.profile = {
@@ -106,16 +117,22 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
     $scope.linkedEmails = {
         linkNewEmail: "", // the email entry box
         emailBeingAuthed: undefined, // to populate verification text
-        authTokenId: undefined, // the token id from the IS
+        authSid: undefined, // the token id from the IS
         emailCode: "", // the code entry box
         linkedEmailList: matrixService.config().emailList // linked email list
     };
     
     $scope.linkEmail = function(email) {
-        matrixService.linkEmail(email).then(
+        if (email != $scope.linkedEmails.emailBeingAuthed) {
+            $scope.linkedEmails.emailBeingAuthed = email;
+            $scope.clientSecret = generateClientSecret();
+            $scope.sendAttempt = 0;
+        }
+        $scope.sendAttempt++;
+        matrixService.linkEmail(email, $scope.clientSecret, $scope.sendAttempt).then(
             function(response) {
                 if (response.data.success === true) {
-                    $scope.linkedEmails.authTokenId = response.data.tokenId;
+                    $scope.linkedEmails.authSid = response.data.sid;
                     $scope.emailFeedback = "You have been sent an email.";
                     $scope.linkedEmails.emailBeingAuthed = email;
                 }
@@ -129,34 +146,44 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
         );
     };
 
-    $scope.submitEmailCode = function(code) {
-        var tokenId = $scope.linkedEmails.authTokenId;
+    $scope.submitEmailCode = function() {
+        var tokenId = $scope.linkedEmails.authSid;
         if (tokenId === undefined) {
             $scope.emailFeedback = "You have not requested a code with this email.";
             return;
         }
-        matrixService.authEmail(matrixService.config().user_id, tokenId, code).then(
+        matrixService.authEmail($scope.clientSecret, $scope.linkedEmails.authSid, $scope.linkedEmails.emailCode).then(
             function(response) {
-                if ("success" in response.data && response.data.success === false) {
+                if ("errcode" in response.data) {
                     $scope.emailFeedback = "Failed to authenticate email.";
                     return;
                 }
-                var config = matrixService.config();
-                var emailList = {};
-                if ("emailList" in config) {
-                    emailList = config.emailList;
-                }
-                emailList[response.address] = response;
-                // save the new email list
-                config.emailList = emailList;
-                matrixService.setConfig(config);
-                matrixService.saveConfig();
-                // invalidate the email being authed and update UI.
-                $scope.linkedEmails.emailBeingAuthed = undefined;
-                $scope.emailFeedback = "";
-                $scope.linkedEmails.linkedEmailList = emailList;
-                $scope.linkedEmails.linkNewEmail = "";
-                $scope.linkedEmails.emailCode = "";
+                matrixService.bindEmail(matrixService.config().user_id, tokenId, $scope.clientSecret).then(
+                    function(response) {
+                         if ('errcode' in response.data) {
+                             $scope.emailFeedback = "Failed to link email.";
+                             return;
+                         }
+                         var config = matrixService.config();
+                         var emailList = {};
+                         if ("emailList" in config) {
+                             emailList = config.emailList;
+                         }
+                         emailList[$scope.linkedEmails.emailBeingAuthed] = response;
+                         // save the new email list
+                         config.emailList = emailList;
+                         matrixService.setConfig(config);
+                         matrixService.saveConfig();
+                         // invalidate the email being authed and update UI.
+                         $scope.linkedEmails.emailBeingAuthed = undefined;
+                         $scope.emailFeedback = "";
+                         $scope.linkedEmails.linkedEmailList = emailList;
+                         $scope.linkedEmails.linkNewEmail = "";
+                         $scope.linkedEmails.emailCode = "";
+                    }, function(reason) {
+                        $scope.emailFeedback = "Failed to link email: " + reason;
+                    }
+                );
             },
             function(reason) {
                 $scope.emailFeedback = "Failed to auth email: " + reason;
@@ -182,4 +209,4 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
             $scope.settings.notifications = permission;
         });
     };
-}]);
\ No newline at end of file
+}]);
diff --git a/webclient/settings/settings.html b/webclient/settings/settings.html
index b7fd5dfb50..924812e7ae 100644
--- a/webclient/settings/settings.html
+++ b/webclient/settings/settings.html
@@ -23,14 +23,14 @@
         </div>
         <br/>
 
-        <h3 style="display: none; ">Linked emails</h3>
-        <div class="section" style="display: none; ">
+        <h3>Linked emails</h3>
+        <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)">
                     Link Email
                 </button>
-                {{ emailFeedback }}    
+                {{ emailFeedback }}
             </form>
             <form ng-hide="!linkedEmails.emailBeingAuthed">
                 Enter validation token for {{ linkedEmails.emailBeingAuthed }}:
@@ -81,7 +81,7 @@
             <ul>
                 <li>/nick &lt;display_name&gt;: change your display name</li>
                 <li>/me &lt;action&gt;: send the action you are doing. /me will be replaced by your display name</li>
-                <li>/kick &lt;user_id&gt;: kick the user</li>
+                <li>/kick &lt;user_id&gt; [&lt;reason&gt;]: kick the user</li>
                 <li>/ban &lt;user_id&gt; [&lt;reason&gt;]: ban the user</li>
                 <li>/unban &lt;user_id&gt;: unban the user</li>
                 <li>/op &lt;user_id&gt; &lt;power_level&gt;: set user power level</li>