From 91ee5f8a423c274156985042470ed255faa3a00d Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 2 Dec 2015 14:59:37 +0000
Subject: [PATCH 01/28] Add extra arg isGuest to MatrixClientPeg functions. Add
 GuestAccess class

GuestAccess serves to monitor which rooms are being tracked for guest
purposes
---
 src/GuestAccess.js     | 52 ++++++++++++++++++++++++++++++++++++++++++
 src/MatrixClientPeg.js | 20 ++++++++++++----
 2 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 src/GuestAccess.js

diff --git a/src/GuestAccess.js b/src/GuestAccess.js
new file mode 100644
index 0000000000..a76c2f2169
--- /dev/null
+++ b/src/GuestAccess.js
@@ -0,0 +1,52 @@
+/*
+Copyright 2015 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.
+*/
+import {MatrixClientPeg} from "./MatrixClientPeg";
+const ROOM_ID_KEY = "matrix-guest-room-ids";
+
+class GuestAccess {
+
+    constructor(localStorage) {
+        var existingRoomIds;
+        try {
+            existingRoomIds = JSON.parse(
+                localStorage.getItem(ROOM_ID_KEY) // an array
+            );
+        }
+        catch (e) {} // don't care
+        this.rooms = new Set(existingRoomIds);
+        this.localStorage = localStorage;
+    }
+
+    addRoom(roomId) {
+        this.rooms.add(roomId);
+    }
+
+    removeRoom(roomId) {
+        this.rooms.delete(roomId);
+    }
+
+    getRooms() {
+        return this.rooms.entries();
+    }
+
+    register() {
+        // nuke the rooms being watched from previous guest accesses if any.
+        localStorage.setItem(ROOM_ID_KEY, "[]");
+        return MatrixClientPeg.get().registerGuest();
+    }
+}
+
+module.exports = GuestAccess;
diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index d940b69f27..21fe934ca5 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -33,7 +33,7 @@ function deviceId() {
     return id;
 }
 
-function createClient(hs_url, is_url, user_id, access_token) {
+function createClient(hs_url, is_url, user_id, access_token, isGuest) {
     var opts = {
         baseUrl: hs_url,
         idBaseUrl: is_url,
@@ -47,6 +47,9 @@ function createClient(hs_url, is_url, user_id, access_token) {
     }
 
     matrixClient = Matrix.createClient(opts);
+    if (isGuest) {
+        matrixClient.setGuest(true);
+    }
 }
 
 if (localStorage) {
@@ -54,8 +57,16 @@ if (localStorage) {
     var is_url = localStorage.getItem("mx_is_url") || 'https://matrix.org';
     var access_token = localStorage.getItem("mx_access_token");
     var user_id = localStorage.getItem("mx_user_id");
+    var isGuest = localStorage.getItem("mx_is_guest") || false;
+    if (isGuest) {
+        try {
+            isGuest = JSON.parse(isGuest);
+        }
+        catch (e) {} // ignore
+        isGuest = Boolean(isGuest); // in case of null, make it false.
+    }
     if (access_token && user_id && hs_url) {
-        createClient(hs_url, is_url, user_id, access_token);
+        createClient(hs_url, is_url, user_id, access_token, isGuest);
     }
 }
 
@@ -97,7 +108,7 @@ class MatrixClient {
         }
     }
 
-    replaceUsingAccessToken(hs_url, is_url, user_id, access_token) {
+    replaceUsingAccessToken(hs_url, is_url, user_id, access_token, isGuest) {
         if (localStorage) {
             try {
                 localStorage.clear();
@@ -105,13 +116,14 @@ class MatrixClient {
                 console.warn("Error using local storage");
             }
         }
-        createClient(hs_url, is_url, user_id, access_token);
+        createClient(hs_url, is_url, user_id, access_token, isGuest);
         if (localStorage) {
             try {
                 localStorage.setItem("mx_hs_url", hs_url);
                 localStorage.setItem("mx_is_url", is_url);
                 localStorage.setItem("mx_user_id", user_id);
                 localStorage.setItem("mx_access_token", access_token);
+                localStorage.setItem("mx_is_guest", isGuest);
             } catch (e) {
                 console.warn("Error using local storage: can't persist session!");
             }

From d52b3149d4f074d9e66fd0f1b6268410bcc67250 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 4 Dec 2015 10:37:53 +0000
Subject: [PATCH 02/28] Wire GuestAccess to MatrixClientPeg

---
 src/GuestAccess.js     | 28 ++++++++++++++++++++++++----
 src/MatrixClientPeg.js | 31 ++++++++++++++++---------------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/GuestAccess.js b/src/GuestAccess.js
index a76c2f2169..b1a059425d 100644
--- a/src/GuestAccess.js
+++ b/src/GuestAccess.js
@@ -15,12 +15,14 @@ limitations under the License.
 */
 import {MatrixClientPeg} from "./MatrixClientPeg";
 const ROOM_ID_KEY = "matrix-guest-room-ids";
+const IS_GUEST_KEY = "matrix-is-guest";
 
 class GuestAccess {
 
     constructor(localStorage) {
         var existingRoomIds;
         try {
+            this._isGuest = localStorage.getItem(IS_GUEST_KEY) === "true";
             existingRoomIds = JSON.parse(
                 localStorage.getItem(ROOM_ID_KEY) // an array
             );
@@ -32,20 +34,38 @@ class GuestAccess {
 
     addRoom(roomId) {
         this.rooms.add(roomId);
+        this._saveAndSetRooms();
     }
 
     removeRoom(roomId) {
         this.rooms.delete(roomId);
+        this._saveAndSetRooms();
     }
 
     getRooms() {
         return this.rooms.entries();
     }
 
-    register() {
-        // nuke the rooms being watched from previous guest accesses if any.
-        localStorage.setItem(ROOM_ID_KEY, "[]");
-        return MatrixClientPeg.get().registerGuest();
+    isGuest() {
+        return this._isGuest;
+    }
+
+    markAsGuest(isGuest) {
+        try {
+            this.localStorage.setItem(IS_GUEST_KEY, JSON.stringify(isGuest));
+            // nuke the rooms being watched from previous guest accesses if any.
+            this.localStorage.setItem(ROOM_ID_KEY, "[]");
+        } catch (e) {} // ignore. If they don't do LS, they'll just get a new account.
+        this._isGuest = isGuest;
+        this.rooms = new Set();
+    }
+
+    _saveAndSetRooms() {
+        let rooms = this.getRooms();
+        MatrixClientPeg.get().setGuestRooms(rooms);
+        try {
+            this.localStorage.setItem(ROOM_ID_KEY, rooms);
+        } catch (e) {}
     }
 }
 
diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index 21fe934ca5..7a1ee781ab 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -18,6 +18,7 @@ limitations under the License.
 
 // A thing that holds your Matrix Client
 var Matrix = require("matrix-js-sdk");
+var GuestAccess = require("./GuestAccess");
 
 var matrixClient = null;
 
@@ -33,7 +34,7 @@ function deviceId() {
     return id;
 }
 
-function createClient(hs_url, is_url, user_id, access_token, isGuest) {
+function createClient(hs_url, is_url, user_id, access_token, guestAccess) {
     var opts = {
         baseUrl: hs_url,
         idBaseUrl: is_url,
@@ -47,8 +48,10 @@ function createClient(hs_url, is_url, user_id, access_token, isGuest) {
     }
 
     matrixClient = Matrix.createClient(opts);
-    if (isGuest) {
-        matrixClient.setGuest(true);
+    if (guestAccess) {
+        console.log("Guest: %s", guestAccess.isGuest());
+        matrixClient.setGuest(guestAccess.isGuest());
+        matrixClient.setGuestRooms(guestAccess.getRooms());
     }
 }
 
@@ -57,20 +60,18 @@ if (localStorage) {
     var is_url = localStorage.getItem("mx_is_url") || 'https://matrix.org';
     var access_token = localStorage.getItem("mx_access_token");
     var user_id = localStorage.getItem("mx_user_id");
-    var isGuest = localStorage.getItem("mx_is_guest") || false;
-    if (isGuest) {
-        try {
-            isGuest = JSON.parse(isGuest);
-        }
-        catch (e) {} // ignore
-        isGuest = Boolean(isGuest); // in case of null, make it false.
-    }
+    var guestAccess = new GuestAccess(localStorage);
     if (access_token && user_id && hs_url) {
-        createClient(hs_url, is_url, user_id, access_token, isGuest);
+        createClient(hs_url, is_url, user_id, access_token, guestAccess);
     }
 }
 
 class MatrixClient {
+
+    constructor(guestAccess) {
+        this.guestAccess = guestAccess;
+    }
+
     get() {
         return matrixClient;
     }
@@ -116,14 +117,14 @@ class MatrixClient {
                 console.warn("Error using local storage");
             }
         }
-        createClient(hs_url, is_url, user_id, access_token, isGuest);
+        this.guestAccess.markAsGuest(isGuest);
+        createClient(hs_url, is_url, user_id, access_token, this.guestAccess);
         if (localStorage) {
             try {
                 localStorage.setItem("mx_hs_url", hs_url);
                 localStorage.setItem("mx_is_url", is_url);
                 localStorage.setItem("mx_user_id", user_id);
                 localStorage.setItem("mx_access_token", access_token);
-                localStorage.setItem("mx_is_guest", isGuest);
             } catch (e) {
                 console.warn("Error using local storage: can't persist session!");
             }
@@ -134,6 +135,6 @@ class MatrixClient {
 }
 
 if (!global.mxMatrixClient) {
-    global.mxMatrixClient = new MatrixClient();
+    global.mxMatrixClient = new MatrixClient(new GuestAccess(localStorage));
 }
 module.exports = global.mxMatrixClient;

From d0ec84fe591734645a27bf5d0c687271a58a796b Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 4 Dec 2015 11:34:50 +0000
Subject: [PATCH 03/28] Hook up auto-registration as a guest to MatrixChat.

---
 src/MatrixClientPeg.js                  |  2 +-
 src/components/structures/MatrixChat.js | 52 +++++++++++++++++++++++--
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index 7a1ee781ab..76fa102562 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -117,7 +117,7 @@ class MatrixClient {
                 console.warn("Error using local storage");
             }
         }
-        this.guestAccess.markAsGuest(isGuest);
+        this.guestAccess.markAsGuest(Boolean(isGuest));
         createClient(hs_url, is_url, user_id, access_token, this.guestAccess);
         if (localStorage) {
             try {
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index a6d6716222..6bb16dafd2 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -40,7 +40,8 @@ module.exports = React.createClass({
         config: React.PropTypes.object.isRequired,
         ConferenceHandler: React.PropTypes.any,
         onNewScreen: React.PropTypes.func,
-        registrationUrl: React.PropTypes.string
+        registrationUrl: React.PropTypes.string,
+        enableGuest: React.PropTypes.bool
     },
 
     PageTypes: {
@@ -75,15 +76,31 @@ module.exports = React.createClass({
     },
 
     componentDidMount: function() {
+        this._autoRegisterAsGuest = false;
+        if (this.props.enableGuest) {
+            if (!this.props.config || !this.props.config.default_hs_url) {
+                console.error("Cannot enable guest access: No supplied config prop for HS/IS URLs");
+            }
+            else {
+                this._autoRegisterAsGuest = true;
+            }
+        }
+
         this.dispatcherRef = dis.register(this.onAction);
         if (this.state.logged_in) {
+            // Don't auto-register as a guest. This applies if you refresh the page on a
+            // logged in client THEN hit the Sign Out button.
+            this._autoRegisterAsGuest = false;
             this.startMatrixClient();
         }
         this.focusComposer = false;
         document.addEventListener("keydown", this.onKeyDown);
         window.addEventListener("focus", this.onFocus);
+
         if (this.state.logged_in) {
             this.notifyNewScreen('');
+        } else if (this._autoRegisterAsGuest) {
+            this._registerAsGuest();
         } else {
             this.notifyNewScreen('login');
         }
@@ -115,6 +132,26 @@ module.exports = React.createClass({
         }
     },
 
+    _registerAsGuest: function() {
+        var self = this;
+        var config = this.props.config;
+        console.log("Doing guest login on %s", config.default_hs_url);
+        MatrixClientPeg.replaceUsingUrls(
+            config.default_hs_url, config.default_is_url
+        );
+        MatrixClientPeg.get().registerGuest().done(function(creds) {
+            console.log("Registered as guest: %s", JSON.stringify(creds));
+        }, function(err) {
+            console.error(err.data);
+            self._setAutoRegisterAsGuest(false);
+        });
+    },
+
+    _setAutoRegisterAsGuest: function(shouldAutoRegister) {
+        this._autoRegisterAsGuest = shouldAutoRegister;
+        this.forceUpdate();
+    },
+
     onAction: function(payload) {
         var roomIndexDelta = 1;
 
@@ -130,6 +167,7 @@ module.exports = React.createClass({
                 MatrixClientPeg.get().stopClient();
                 MatrixClientPeg.get().removeAllListeners();
                 MatrixClientPeg.unset();
+
                 this.notifyNewScreen('login');
                 this.replaceState({
                     logged_in: false,
@@ -634,12 +672,20 @@ module.exports = React.createClass({
                         </div>
                 );
             }
-        } else if (this.state.logged_in) {
+        } else if (this.state.logged_in || (!this.state.logged_in && this._autoRegisterAsGuest)) {
             var Spinner = sdk.getComponent('elements.Spinner');
+            var logoutLink;
+            if (this.state.logged_in) {
+                logoutLink = (
+                    <a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }>
+                    Logout
+                    </a>
+                );
+            }
             return (
                 <div className="mx_MatrixChat_splash">
                     <Spinner />
-                    <a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }>Logout</a>
+                    {logoutLink}
                 </div>
             );
         } else if (this.state.screen == 'register') {

From 92cf14d5e9dbf864b2619225de1140c54ee46b8e Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 4 Dec 2015 15:28:35 +0000
Subject: [PATCH 04/28] Support registration as a guest

---
 src/GuestAccess.js                      |  2 +-
 src/components/structures/MatrixChat.js | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/GuestAccess.js b/src/GuestAccess.js
index b1a059425d..a76e198b4e 100644
--- a/src/GuestAccess.js
+++ b/src/GuestAccess.js
@@ -43,7 +43,7 @@ class GuestAccess {
     }
 
     getRooms() {
-        return this.rooms.entries();
+        return Array.from(this.rooms.entries());
     }
 
     isGuest() {
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 6bb16dafd2..4af6e96c96 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -140,7 +140,14 @@ module.exports = React.createClass({
             config.default_hs_url, config.default_is_url
         );
         MatrixClientPeg.get().registerGuest().done(function(creds) {
-            console.log("Registered as guest: %s", JSON.stringify(creds));
+            console.log("Registered as guest: %s", creds.user_id);
+            self.onLoggedIn({
+                userId: creds.user_id,
+                accessToken: creds.access_token,
+                homeserverUrl: config.default_hs_url,
+                identityServerUrl: config.default_is_url,
+                guest: true
+            });
         }, function(err) {
             console.error(err.data);
             self._setAutoRegisterAsGuest(false);
@@ -361,10 +368,11 @@ module.exports = React.createClass({
     },
 
     onLoggedIn: function(credentials) {
-        console.log("onLoggedIn => %s", credentials.userId);
+        credentials.guest = Boolean(credentials.guest);
+        console.log("onLoggedIn => %s (guest=%s)", credentials.userId, credentials.guest);
         MatrixClientPeg.replaceUsingAccessToken(
             credentials.homeserverUrl, credentials.identityServerUrl,
-            credentials.userId, credentials.accessToken
+            credentials.userId, credentials.accessToken, credentials.guest
         );
         this.setState({
             screen: undefined,

From 8bd4fdbd5a98d9a2aa812e6c6e8f949b2736a073 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 5 Jan 2016 13:24:05 +0000
Subject: [PATCH 05/28] Don't set presence

---
 src/Presence.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Presence.js b/src/Presence.js
index e776cca078..c3d6857e95 100644
--- a/src/Presence.js
+++ b/src/Presence.js
@@ -73,6 +73,11 @@ class Presence {
         }
         var old_state = this.state;
         this.state = newState;
+
+        if (MatrixClientPeg.get().isGuest()) {
+            return; // don't try to set presence when a guest; it won't work.
+        }
+
         var self = this;
         MatrixClientPeg.get().setPresence(this.state).done(function() {
             console.log("Presence: %s", newState);

From d729dee31db5ce504133dc2c900f39473f9fc34a Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 5 Jan 2016 17:34:25 +0000
Subject: [PATCH 06/28] Make the settings page load for guests. Add checkboxes
 for guest r/w

---
 src/UserSettingsStore.js                   |  7 ++-
 src/components/structures/RoomView.js      | 52 ++++++++++++----------
 src/components/views/rooms/RoomSettings.js | 20 +++++++++
 3 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/src/UserSettingsStore.js b/src/UserSettingsStore.js
index f2ada35b24..55a0518d85 100644
--- a/src/UserSettingsStore.js
+++ b/src/UserSettingsStore.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 'use strict';
-
+var q = require("q");
 var MatrixClientPeg = require("./MatrixClientPeg");
 var Notifier = require("./Notifier");
 
@@ -35,6 +35,11 @@ module.exports = {
     },
 
     loadThreePids: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            return q({
+                threepids: []
+            }); // guests can't poke 3pid endpoint
+        }
         return MatrixClientPeg.get().getThreePids();
     },
 
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 56dd41d929..318489d9fd 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -733,7 +733,7 @@ module.exports = React.createClass({
         return ret;
     },
 
-    uploadNewState: function(new_name, new_topic, new_join_rule, new_history_visibility, new_power_levels) {
+    uploadNewState: function(newVals) {
         var old_name = this.state.room.name;
 
         var old_topic = this.state.room.currentState.getStateEvents('m.room.topic', '');
@@ -759,46 +759,54 @@ module.exports = React.createClass({
 
         var deferreds = [];
 
-        if (old_name != new_name && new_name != undefined && new_name) {
+        if (old_name != newVals.name && newVals.name != undefined && newVals.name) {
             deferreds.push(
-                MatrixClientPeg.get().setRoomName(this.state.room.roomId, new_name)
+                MatrixClientPeg.get().setRoomName(this.state.room.roomId, newVals.name)
             );
         }
 
-        if (old_topic != new_topic && new_topic != undefined) {
+        if (old_topic != newVals.topic && newVals.topic != undefined) {
             deferreds.push(
-                MatrixClientPeg.get().setRoomTopic(this.state.room.roomId, new_topic)
+                MatrixClientPeg.get().setRoomTopic(this.state.room.roomId, newVals.topic)
             );
         }
 
-        if (old_join_rule != new_join_rule && new_join_rule != undefined) {
+        if (old_join_rule != newVals.join_rule && newVals.join_rule != undefined) {
             deferreds.push(
                 MatrixClientPeg.get().sendStateEvent(
                     this.state.room.roomId, "m.room.join_rules", {
-                        join_rule: new_join_rule,
+                        join_rule: newVals.join_rule,
                     }, ""
                 )
             );
         }
 
-        if (old_history_visibility != new_history_visibility && new_history_visibility != undefined) {
+        if (old_history_visibility != newVals.history_visibility &&
+                newVals.history_visibility != undefined) {
             deferreds.push(
                 MatrixClientPeg.get().sendStateEvent(
                     this.state.room.roomId, "m.room.history_visibility", {
-                        history_visibility: new_history_visibility,
+                        history_visibility: newVals.history_visibility,
                     }, ""
                 )
             );
         }
 
-        if (new_power_levels) {
+        if (newVals.power_levels) {
             deferreds.push(
                 MatrixClientPeg.get().sendStateEvent(
-                    this.state.room.roomId, "m.room.power_levels", new_power_levels, ""
+                    this.state.room.roomId, "m.room.power_levels", newVals.power_levels, ""
                 )
             );
         }
 
+        deferreds.push(
+            MatrixClientPeg.get().setGuestAccess(this.state.room.roomId, {
+                allowRead: newVals.guest_read,
+                allowJoin: newVals.guest_join
+            })
+        );
+
         if (deferreds.length) {
             var self = this;
             q.all(deferreds).fail(function(err) {
@@ -883,19 +891,15 @@ module.exports = React.createClass({
             uploadingRoomSettings: true,
         });
 
-        var new_name = this.refs.header.getRoomName();
-        var new_topic = this.refs.room_settings.getTopic();
-        var new_join_rule = this.refs.room_settings.getJoinRules();
-        var new_history_visibility = this.refs.room_settings.getHistoryVisibility();
-        var new_power_levels = this.refs.room_settings.getPowerLevels();
-
-        this.uploadNewState(
-            new_name,
-            new_topic,
-            new_join_rule,
-            new_history_visibility,
-            new_power_levels
-        );
+        this.uploadNewState({
+            name: this.refs.header.getRoomName(),
+            topic: this.refs.room_settings.getTopic(),
+            join_rule: this.refs.room_settings.getJoinRules(),
+            history_visibility: this.refs.room_settings.getHistoryVisibility(),
+            power_levels: this.refs.room_settings.getPowerLevels(),
+            guest_join: this.refs.room_settings.canGuestsJoin(),
+            guest_read: this.refs.room_settings.canGuestsRead()
+        });
     },
 
     onCancelClick: function() {
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index eb9bfd90c8..a242c47e4a 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -31,6 +31,14 @@ module.exports = React.createClass({
         };
     },
 
+    canGuestsJoin: function() {
+        return this.refs.guests_join.checked;
+    },
+
+    canGuestsRead: function() {
+        return this.refs.guests_read.checked;
+    },
+
     getTopic: function() {
         return this.refs.topic.value;
     },
@@ -83,6 +91,10 @@ module.exports = React.createClass({
         if (history_visibility) history_visibility = history_visibility.getContent().history_visibility;
 
         var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
+        var guest_access = this.props.room.currentState.getStateEvents('m.room.guest_access', '');
+        if (guest_access) {
+            guest_access = guest_access.getContent().guest_access;
+        }
 
         var events_levels = power_levels.events || {};
 
@@ -154,6 +166,14 @@ module.exports = React.createClass({
                 <textarea className="mx_RoomSettings_description" placeholder="Topic" defaultValue={topic} ref="topic"/> <br/>
                 <label><input type="checkbox" ref="is_private" defaultChecked={join_rule != "public"}/> Make this room private</label> <br/>
                 <label><input type="checkbox" ref="share_history" defaultChecked={history_visibility == "shared"}/> Share message history with new users</label> <br/>
+                <label>
+                    <input type="checkbox" ref="guests_read" defaultChecked={history_visibility === "world_readable"}/>
+                    Allow guests to read messages in this room
+                </label> <br/>
+                <label>
+                    <input type="checkbox" ref="guests_join" defaultChecked={guest_access === "can_join"}/>
+                    Allow guests to join this room
+                </label> <br/>
                 <label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label> <br/>
 
                 <h3>Power levels</h3>

From 29587ec347066886700ee8033e80d0d3855b808e Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 6 Jan 2016 17:33:00 +0000
Subject: [PATCH 07/28] No longer persist guest room IDs. Replace with
 transient peeked room ID.

---
 src/GuestAccess.js     | 37 ++++++++-----------------------------
 src/MatrixClientPeg.js |  6 +++++-
 2 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/src/GuestAccess.js b/src/GuestAccess.js
index a76e198b4e..ef48d23ded 100644
--- a/src/GuestAccess.js
+++ b/src/GuestAccess.js
@@ -13,37 +13,26 @@ 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.
 */
-import {MatrixClientPeg} from "./MatrixClientPeg";
-const ROOM_ID_KEY = "matrix-guest-room-ids";
 const IS_GUEST_KEY = "matrix-is-guest";
 
 class GuestAccess {
 
     constructor(localStorage) {
-        var existingRoomIds;
+        this.localStorage = localStorage;
         try {
             this._isGuest = localStorage.getItem(IS_GUEST_KEY) === "true";
-            existingRoomIds = JSON.parse(
-                localStorage.getItem(ROOM_ID_KEY) // an array
-            );
         }
         catch (e) {} // don't care
-        this.rooms = new Set(existingRoomIds);
-        this.localStorage = localStorage;
     }
 
-    addRoom(roomId) {
-        this.rooms.add(roomId);
-        this._saveAndSetRooms();
+    setPeekedRoom(roomId) {
+        // we purposefully do not persist this to local storage as peeking is
+        // entirely transient.
+        this._peekedRoomId = roomId;
     }
 
-    removeRoom(roomId) {
-        this.rooms.delete(roomId);
-        this._saveAndSetRooms();
-    }
-
-    getRooms() {
-        return Array.from(this.rooms.entries());
+    getPeekedRoom() {
+        return this._peekedRoomId;
     }
 
     isGuest() {
@@ -53,19 +42,9 @@ class GuestAccess {
     markAsGuest(isGuest) {
         try {
             this.localStorage.setItem(IS_GUEST_KEY, JSON.stringify(isGuest));
-            // nuke the rooms being watched from previous guest accesses if any.
-            this.localStorage.setItem(ROOM_ID_KEY, "[]");
         } catch (e) {} // ignore. If they don't do LS, they'll just get a new account.
         this._isGuest = isGuest;
-        this.rooms = new Set();
-    }
-
-    _saveAndSetRooms() {
-        let rooms = this.getRooms();
-        MatrixClientPeg.get().setGuestRooms(rooms);
-        try {
-            this.localStorage.setItem(ROOM_ID_KEY, rooms);
-        } catch (e) {}
+        this._peekedRoomId = null;
     }
 }
 
diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index 76fa102562..f250333461 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -51,7 +51,11 @@ function createClient(hs_url, is_url, user_id, access_token, guestAccess) {
     if (guestAccess) {
         console.log("Guest: %s", guestAccess.isGuest());
         matrixClient.setGuest(guestAccess.isGuest());
-        matrixClient.setGuestRooms(guestAccess.getRooms());
+        var peekedRoomId = guestAccess.getPeekedRoom();
+        if (peekedRoomId) {
+            console.log("Peeking in room %s", peekedRoomId);
+            matrixClient.peekInRoom(peekedRoomId);
+        }
     }
 }
 

From 458d71a4966fd4a72b42b6bbd0672becf501bc0f Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 7 Jan 2016 16:22:17 +0000
Subject: [PATCH 08/28] Attempt to peek into rooms we don't know about.

Also: display an error dialog if we fail to join the room if you click Join Room.
---
 src/components/structures/RoomView.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 99d4c1aa49..0b19951735 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -97,6 +97,24 @@ module.exports = React.createClass({
                 this.forceUpdate();
             }
         });
+        // if this is an unknown room then we're in one of three states:
+        // - This is a room we can peek into (search engine) (we can /peek)
+        // - This is a room we can publicly join or were invited to. (we can /join)
+        // - This is a room we cannot join at all. (no action can help us)
+        // We can't try to /join because this may implicitly accept invites (!)
+        // We can /peek though. If it fails then we present the join UI. If it
+        // succeeds then great, show the preview (but we still may be able to /join!).
+        if (!this.state.room) {
+            console.log("Attempting to peek into room %s", this.props.roomId);
+            MatrixClientPeg.get().peekInRoom(this.props.roomId).done(function() {
+                // we don't need to do anything - JS SDK will emit Room events
+                // which will update the UI.
+            }, function(err) {
+                console.error("Failed to peek into room: %s", err);
+            });
+        }
+
+
     },
 
     componentWillUnmount: function() {
@@ -422,6 +440,12 @@ module.exports = React.createClass({
                 joining: false,
                 joinError: error
             });
+            var msg = error.message ? error.message : JSON.stringify(error);
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Failed to join room",
+                description: msg
+            });
         });
         this.setState({
             joining: true

From a3df50f4c3c686c9811209c0f594525dadc0d170 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 7 Jan 2016 17:23:32 +0000
Subject: [PATCH 09/28] Implement guest account upgrading

---
 src/Signup.js                                 |  7 +++-
 src/components/structures/MatrixChat.js       | 11 ++++++
 src/components/structures/UserSettings.js     | 37 +++++++++++++++----
 .../structures/login/Registration.js          |  7 +++-
 .../views/login/RegistrationForm.js           |  4 +-
 5 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/Signup.js b/src/Signup.js
index 74c4ad5f19..42468959fe 100644
--- a/src/Signup.js
+++ b/src/Signup.js
@@ -69,6 +69,10 @@ class Register extends Signup {
         this.params.idSid = idSid;
     }
 
+    setGuestAccessToken(token) {
+        this.guestAccessToken = token;
+    }
+
     getStep() {
         return this._step;
     }
@@ -126,7 +130,8 @@ class Register extends Signup {
         }
 
         return MatrixClientPeg.get().register(
-            this.username, this.password, this.params.sessionId, authDict, bindEmail
+            this.username, this.password, this.params.sessionId, authDict, bindEmail,
+            this.guestAccessToken
         ).then(function(result) {
             self.credentials = result;
             self.setStep("COMPLETE");
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 5760453670..118b43ef9a 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -225,6 +225,14 @@ module.exports = React.createClass({
                     screen: 'post_registration'
                 });
                 break;
+            case 'start_upgrade_registration':
+                this.replaceState({
+                    screen: "register",
+                    upgradeUsername: MatrixClientPeg.get().getUserIdLocalpart(),
+                    guestAccessToken: MatrixClientPeg.get().getAccessToken()
+                });
+                this.notifyNewScreen('register');
+                break;
             case 'token_login':
                 if (this.state.logged_in) return;
 
@@ -784,6 +792,9 @@ module.exports = React.createClass({
                     sessionId={this.state.register_session_id}
                     idSid={this.state.register_id_sid}
                     email={this.props.startingQueryParams.email}
+                    username={this.state.upgradeUsername}
+                    disableUsernameChanges={Boolean(this.state.upgradeUsername)}
+                    guestAccessToken={this.state.guestAccessToken}
                     hsUrl={this.props.config.default_hs_url}
                     isUrl={this.props.config.default_is_url}
                     registrationUrl={this.props.registrationUrl}
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index c1550f9b6b..ddf4229170 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -135,6 +135,12 @@ module.exports = React.createClass({
         });
     },
 
+    onUpgradeClicked: function() {
+        dis.dispatch({
+            action: "start_upgrade_registration"
+        });
+    },
+
     onLogoutPromptCancel: function() {
         this.logoutModal.closeDialog();
     },
@@ -164,6 +170,28 @@ module.exports = React.createClass({
             this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
         );
 
+        var accountJsx;
+
+        if (MatrixClientPeg.get().isGuest()) {
+            accountJsx = (
+                <div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
+                    Upgrade (It's free!)
+                </div>
+            );
+        }
+        else {
+            accountJsx = (
+                <ChangePassword
+                        className="mx_UserSettings_accountTable"
+                        rowClassName="mx_UserSettings_profileTableRow"
+                        rowLabelClassName="mx_UserSettings_profileLabelCell"
+                        rowInputClassName="mx_UserSettings_profileInputCell"
+                        buttonClassName="mx_UserSettings_button"
+                        onError={this.onPasswordChangeError}
+                        onFinished={this.onPasswordChanged} />
+            );
+        }
+
         return (
             <div className="mx_UserSettings">
                 <RoomHeader simpleHeader="Settings" />
@@ -213,14 +241,7 @@ module.exports = React.createClass({
                 <h2>Account</h2>
 
                 <div className="mx_UserSettings_section">
-                    <ChangePassword
-                        className="mx_UserSettings_accountTable"
-                        rowClassName="mx_UserSettings_profileTableRow"
-                        rowLabelClassName="mx_UserSettings_profileLabelCell"
-                        rowInputClassName="mx_UserSettings_profileInputCell"
-                        buttonClassName="mx_UserSettings_button"
-                        onError={this.onPasswordChangeError}
-                        onFinished={this.onPasswordChanged} />                   
+                    {accountJsx}
                 </div>
 
                 <div className="mx_UserSettings_logout">
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 7f6e408fef..f89d65d740 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -19,7 +19,6 @@ limitations under the License.
 var React = require('react');
 
 var sdk = require('../../../index');
-var MatrixClientPeg = require('../../../MatrixClientPeg');
 var dis = require('../../../dispatcher');
 var Signup = require("../../../Signup");
 var ServerConfig = require("../../views/login/ServerConfig");
@@ -40,6 +39,9 @@ module.exports = React.createClass({
         hsUrl: React.PropTypes.string,
         isUrl: React.PropTypes.string,
         email: React.PropTypes.string,
+        username: React.PropTypes.string,
+        guestAccessToken: React.PropTypes.string,
+        disableUsernameChanges: React.PropTypes.bool,
         // registration shouldn't know or care how login is done.
         onLoginClick: React.PropTypes.func.isRequired
     },
@@ -63,6 +65,7 @@ module.exports = React.createClass({
         this.registerLogic.setSessionId(this.props.sessionId);
         this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
         this.registerLogic.setIdSid(this.props.idSid);
+        this.registerLogic.setGuestAccessToken(this.props.guestAccessToken);
         this.registerLogic.recheckState();
     },
 
@@ -186,7 +189,9 @@ module.exports = React.createClass({
                 registerStep = (
                     <RegistrationForm
                         showEmail={true}
+                        defaultUsername={this.props.username}
                         defaultEmail={this.props.email}
+                        disableUsernameChanges={this.props.disableUsernameChanges}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
                         onRegisterClick={this.onFormSubmit} />
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index bc461dd1bb..534464a4ae 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -30,6 +30,7 @@ module.exports = React.createClass({
         defaultUsername: React.PropTypes.string,
         showEmail: React.PropTypes.bool,
         minPasswordLength: React.PropTypes.number,
+        disableUsernameChanges: React.PropTypes.bool,
         onError: React.PropTypes.func,
         onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
     },
@@ -109,7 +110,8 @@ module.exports = React.createClass({
                     {emailSection}
                     <br />
                     <input className="mx_Login_field" type="text" ref="username"
-                        placeholder="User name" defaultValue={this.state.username} />
+                        placeholder="User name" defaultValue={this.state.username}
+                        disabled={this.props.disableUsernameChanges} />
                     <br />
                     <input className="mx_Login_field" type="password" ref="password"
                         placeholder="Password" defaultValue={this.state.password} />

From 62cf34b58cb554324fda7cb11e130c353d954ca6 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 8 Jan 2016 12:03:45 +0000
Subject: [PATCH 10/28] Fix some races due to promises completing after we've
 switched rooms

Add a few isMounted() checks to promise handlers so that we don't end up
throwing NPEs.
---
 src/components/structures/RoomView.js    | 13 ++++++++-----
 src/components/structures/ScrollPanel.js | 10 ++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 9ab99d9cba..c91be22a47 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -353,11 +353,14 @@ module.exports = React.createClass({
     _paginateCompleted: function() {
         debuglog("paginate complete");
 
-        this.setState({
-            room: MatrixClientPeg.get().getRoom(this.props.roomId)
-        });
+        // we might have switched rooms since the paginate started - just bin
+        // the results if so.
+        if (!this.isMounted()) return;
 
-        this.setState({paginating: false});
+        this.setState({
+            room: MatrixClientPeg.get().getRoom(this.props.roomId),
+            paginating: false,
+        });
     },
 
     onSearchResultsFillRequest: function(backwards) {
@@ -535,7 +538,7 @@ module.exports = React.createClass({
 
         return searchPromise.then(function(results) {
             debuglog("search complete");
-            if (!self.state.searching || self.searchId != localSearchId) {
+            if (!this.isMounted() || !self.state.searching || self.searchId != localSearchId) {
                 console.error("Discarding stale search results");
                 return;
             }
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index 042458717d..fc628b5a5e 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -158,6 +158,10 @@ module.exports = React.createClass({
 
     // check the scroll state and send out backfill requests if necessary.
     checkFillState: function() {
+        if (!this.isMounted()) {
+            return;
+        }
+
         var sn = this._getScrollNode();
 
         // if there is less than a screenful of messages above or below the
@@ -346,6 +350,12 @@ module.exports = React.createClass({
      * message panel.
      */
     _getScrollNode: function() {
+        if (!this.isMounted()) {
+            // this shouldn't happen, but when it does, turn the NPE into
+            // something more meaningful.
+            throw new Error("ScrollPanel._getScrollNode called when unmounted");
+        }
+
         var panel = ReactDOM.findDOMNode(this.refs.geminiPanel);
 
         // If the gemini scrollbar is doing its thing, this will be a div within

From 223f6f79146dc0bb5b2084d12b207997a3b68c4b Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 8 Jan 2016 13:25:03 +0000
Subject: [PATCH 11/28] Fix sorting of search result highlights

Make sure that we *actually* give preference to longer search result
highlights; it turns out that the code that looked like it was doing so has
never worked.
---
 src/components/structures/RoomView.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 9ab99d9cba..5cffefad26 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -553,7 +553,8 @@ module.exports = React.createClass({
 
             // For overlapping highlights,
             // favour longer (more specific) terms first
-            highlights = highlights.sort(function(a, b) { b.length - a.length });
+            highlights = highlights.sort(function(a, b) {
+                return b.length - a.length });
 
             self.setState({
                 searchHighlights: highlights,

From b37ea52a1f062fc29eaf7edd94637a485c0bb962 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 8 Jan 2016 16:43:25 +0000
Subject: [PATCH 12/28] Some null checks in animation code

---
 src/Velociraptor.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index d973a17f7f..066b1e2d05 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -36,7 +36,7 @@ module.exports = React.createClass({
                 var old = oldChildren[c.key];
                 var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
 
-                if (oldNode.style.left != c.props.style.left) {
+                if (oldNode && oldNode.style.left != c.props.style.left) {
                     Velocity(oldNode, { left: c.props.style.left }, self.props.transition).then(function() {
                         // special case visibility because it's nonsensical to animate an invisible element
                         // so we always hidden->visible pre-transition and visible->hidden after
@@ -73,6 +73,7 @@ module.exports = React.createClass({
 
     collectNode: function(k, node) {
         if (
+            node &&
             this.nodes[k] === undefined &&
             node.props.startStyle &&
             Object.keys(node.props.startStyle).length

From d63f83187f8a96e290f54694e5bb88359301d0e5 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 8 Jan 2016 21:18:47 +0000
Subject: [PATCH 13/28] Only show read marker if it's somewhere other than at
 the bottom, make it animate away and put a short delay before the read marker
 advances so quickly changing to a room and then away again doesn't advance
 your read marker.

---
 src/components/structures/RoomView.js | 76 ++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 5cffefad26..9871c54455 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -40,6 +40,7 @@ var dis = require("../../dispatcher");
 
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 20;
+var SEND_READ_RECEIPT_DELAY = 2000;
 
 var DEBUG_SCROLL = false;
 
@@ -74,6 +75,8 @@ module.exports = React.createClass({
             syncState: MatrixClientPeg.get().getSyncState(),
             hasUnsentMessages: this._hasUnsentMessages(room),
             callState: null,
+            readReceiptEventId: room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId),
+            readMarkerGhostEventId: undefined,
         }
     },
 
@@ -100,6 +103,12 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
+        // if we're waiting to send a read receipt, don't:
+        // message wasn't on screen for long enough
+        if (this.sendRRTimer) {
+            clearTimeout(this.sendRRTimer);
+        }
+
         if (this.refs.messagePanel) {
             // disconnect the D&D event listeners from the message panel. This
             // is really just for hygiene - the messagePanel is going to be
@@ -237,7 +246,16 @@ module.exports = React.createClass({
 
     onRoomReceipt: function(receiptEvent, room) {
         if (room.roomId == this.props.roomId) {
-            this.forceUpdate();
+            var readReceiptEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
+            var readMarkerGhostEventId = this.state.readMarkerGhostEventId;
+            if (this.state.readReceiptEventId !== undefined && this.state.readReceiptEventId != readReceiptEventId) {
+                var newReadEventIndex = this._indexForEventId(readReceiptEventId);
+                readMarkerGhostEventId = this.state.readReceiptEventId;
+            }
+            this.setState({
+                readReceiptEventId: readReceiptEventId,
+                readMarkerGhostEventId: readMarkerGhostEventId,
+            });
         }
     },
 
@@ -649,10 +667,10 @@ module.exports = React.createClass({
 
         var EventTile = sdk.getComponent('rooms.EventTile');
 
-
         var prevEvent = null; // the last event we showed
-        var readReceiptEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
         var startIdx = Math.max(0, this.state.room.timeline.length - this.state.messageCap);
+        var readMarkerIndex;
+        var ghostIndex;
         for (var i = startIdx; i < this.state.room.timeline.length; i++) {
             var mxEv = this.state.room.timeline[i];
 
@@ -666,6 +684,24 @@ module.exports = React.createClass({
                 }
             }
 
+            // now we've decided whether or not to show this messages,
+            // add the read up to marker if appropriate
+            // doing this here means we implicitly do not show the marker
+            // if it's at the bottom
+            // NB. it would be better to decide where the read marker was going
+            // when the state changed rather than here in the render method, but
+            // this is where we decide what messages we show so it's the only
+            // place we know whether we're at the bottom or not.
+            var self = this;
+            if (prevEvent && prevEvent.getId() == this.state.readReceiptEventId) {
+                var hr;
+                hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '85%'}} ref={function(n) {
+                    self.readMarkerNode = n;
+                }} />);
+                readMarkerIndex = ret.length;
+                ret.push(<li key="_readupto" className="mx_RoomView_myReadMarker_container">{hr}</li>);
+            }
+
             // is this a continuation of the previous message?
             var continuation = false;
             if (prevEvent !== null) {
@@ -702,13 +738,29 @@ module.exports = React.createClass({
                 </li>
             );
 
-            if (eventId == readReceiptEventId) {
-                ret.push(<hr className="mx_RoomView_myReadMarker" />);
+            // A read up to marker has died and returned as a ghost!
+            // Lives in the dom as the ghost of the previous one while it fades away
+            if (eventId == this.state.readMarkerGhostEventId) {
+                ghostIndex = i + 1;
             }
 
             prevEvent = mxEv;
         }
 
+        // splice the read marker ghost in now that we know whether the read receipt
+        // is the last element or not, because we only decide as we're going along.
+        if (readMarkerIndex === undefined && ghostIndex && ghostIndex <= ret.length) {
+            var hr;
+            hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '85%'}} ref={function(n) {
+                Velocity(n, {opacity: '0', width: '10%'}, {duration: 400, complete: function() {
+                    self.setState({readMarkerGhostEventId: undefined});
+                }});
+            }} />);
+            ret.splice(ghostIndex, 0, (
+                <li key="_readuptoghost" className="mx_RoomView_myReadMarker_container">{hr}</li>
+            ));
+        }
+
         return ret;
     },
 
@@ -815,6 +867,7 @@ module.exports = React.createClass({
 
     sendReadReceipt: function() {
         if (!this.state.room) return;
+
         var currentReadUpToEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
         var currentReadUpToEventIndex = this._indexForEventId(currentReadUpToEventId);
 
@@ -822,7 +875,18 @@ module.exports = React.createClass({
         if (lastReadEventIndex === null) return;
 
         if (lastReadEventIndex > currentReadUpToEventIndex) {
-            MatrixClientPeg.get().sendReadReceipt(this.state.room.timeline[lastReadEventIndex]);
+            var self = this;
+
+            var lastReadEventId = self.state.room.timeline[lastReadEventIndex].getId();
+            if (this.pendingRR != lastReadEventId) {
+                this.pendingRR = lastReadEventId;
+                if (this.sendRRTimer) clearTimeout(this.sendRRTimer);
+                this.sendRRTimer = setTimeout(function() {
+                    MatrixClientPeg.get().sendReadReceipt(self.state.room.timeline[lastReadEventIndex]);
+                    self.sendRRTimer = undefined;
+                    self.pendingRR  = undefined;
+                }, SEND_READ_RECEIPT_DELAY);
+            }
         }
     },
 

From 7913b0b465393659d487b2368e313c93e4858be1 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 8 Jan 2016 21:51:14 +0000
Subject: [PATCH 14/28] Length of the returned array, not the index of the
 timeline event.

---
 src/components/structures/RoomView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 9871c54455..375ea92686 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -741,7 +741,7 @@ module.exports = React.createClass({
             // A read up to marker has died and returned as a ghost!
             // Lives in the dom as the ghost of the previous one while it fades away
             if (eventId == this.state.readMarkerGhostEventId) {
-                ghostIndex = i + 1;
+                ghostIndex = ret.length;
             }
 
             prevEvent = mxEv;

From 1c4d1d250783b6eeaf15f8479eccf02f278b0d97 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 8 Jan 2016 22:19:31 +0000
Subject: [PATCH 15/28] Make scrolling count as user activity.

---
 src/UserActivity.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/UserActivity.js b/src/UserActivity.js
index 3048ad4454..6b918f0729 100644
--- a/src/UserActivity.js
+++ b/src/UserActivity.js
@@ -31,6 +31,9 @@ class UserActivity {
     start() {
         document.onmousemove = this._onUserActivity.bind(this);
         document.onkeypress = this._onUserActivity.bind(this);
+        // can't use document.scroll here because that's only the document
+        // itself being scrolled. Need to use addEventListener's useCapture.
+        window.addEventListener('scroll', this._onUserActivity.bind(this), true);
         this.lastActivityAtTs = new Date().getTime();
         this.lastDispatchAtTs = 0;
     }
@@ -41,6 +44,7 @@ class UserActivity {
     stop() {
         document.onmousemove = undefined;
         document.onkeypress = undefined;
+        window.removeEventListener('scroll', this._onUserActivity.bind(this), true);
     }
 
     _onUserActivity(event) {

From 7b2d56f6198324fc0a31ab7157396a26ffa6a409 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 8 Jan 2016 22:19:51 +0000
Subject: [PATCH 16/28] Calculate what event we send a read receipt for after
 the delay so we send a receipt for the one the user actually settles on.

---
 src/components/structures/RoomView.js | 29 ++++++++++-----------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 375ea92686..6f9ac51e4a 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -867,27 +867,20 @@ module.exports = React.createClass({
 
     sendReadReceipt: function() {
         if (!this.state.room) return;
+        if (this.sendRRTimer) clearTimeout(this.sendRRTimer);
+        var self = this;
+        this.sendRRTimer = setTimeout(function() {
+            self.sendRRTimer = undefined;
+            var currentReadUpToEventId = self.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
+            var currentReadUpToEventIndex = self._indexForEventId(currentReadUpToEventId);
 
-        var currentReadUpToEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
-        var currentReadUpToEventIndex = this._indexForEventId(currentReadUpToEventId);
+            var lastReadEventIndex = self._getLastDisplayedEventIndexIgnoringOwn();
+            if (lastReadEventIndex === null) return;
 
-        var lastReadEventIndex = this._getLastDisplayedEventIndexIgnoringOwn();
-        if (lastReadEventIndex === null) return;
-
-        if (lastReadEventIndex > currentReadUpToEventIndex) {
-            var self = this;
-
-            var lastReadEventId = self.state.room.timeline[lastReadEventIndex].getId();
-            if (this.pendingRR != lastReadEventId) {
-                this.pendingRR = lastReadEventId;
-                if (this.sendRRTimer) clearTimeout(this.sendRRTimer);
-                this.sendRRTimer = setTimeout(function() {
-                    MatrixClientPeg.get().sendReadReceipt(self.state.room.timeline[lastReadEventIndex]);
-                    self.sendRRTimer = undefined;
-                    self.pendingRR  = undefined;
-                }, SEND_READ_RECEIPT_DELAY);
+            if (lastReadEventIndex > currentReadUpToEventIndex) {
+                MatrixClientPeg.get().sendReadReceipt(self.state.room.timeline[lastReadEventIndex]);
             }
-        }
+        }, SEND_READ_RECEIPT_DELAY);
     },
 
     _getLastDisplayedEventIndexIgnoringOwn: function() {

From 581111e1a72b131eda3abe5fa324eb0730db7254 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Sat, 9 Jan 2016 00:06:54 +0000
Subject: [PATCH 17/28] Use wheel, not scroll as we get scroll events from auto
 scroll down. Also only do the cursor move check for mouse move events.

---
 src/UserActivity.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/UserActivity.js b/src/UserActivity.js
index 6b918f0729..8b136c0bcc 100644
--- a/src/UserActivity.js
+++ b/src/UserActivity.js
@@ -33,7 +33,9 @@ class UserActivity {
         document.onkeypress = this._onUserActivity.bind(this);
         // can't use document.scroll here because that's only the document
         // itself being scrolled. Need to use addEventListener's useCapture.
-        window.addEventListener('scroll', this._onUserActivity.bind(this), true);
+        // also this needs to be the wheel event, not scroll, as scroll is
+        // fired when the view scrolls down for a new message.
+        window.addEventListener('wheel', this._onUserActivity.bind(this), true);
         this.lastActivityAtTs = new Date().getTime();
         this.lastDispatchAtTs = 0;
     }
@@ -44,11 +46,11 @@ class UserActivity {
     stop() {
         document.onmousemove = undefined;
         document.onkeypress = undefined;
-        window.removeEventListener('scroll', this._onUserActivity.bind(this), true);
+        window.removeEventListener('wheel', this._onUserActivity.bind(this), true);
     }
 
     _onUserActivity(event) {
-        if (event.screenX) {
+        if (event.screenX && event.type == "mousemove") {
             if (event.screenX === this.lastScreenX &&
                 event.screenY === this.lastScreenY)
             {

From 1507b3994052b41771fb88bcb665b41f6fd38968 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Sat, 9 Jan 2016 00:07:51 +0000
Subject: [PATCH 18/28] Redundant line.

---
 src/components/structures/RoomView.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 6f9ac51e4a..2e6ebd2933 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -249,7 +249,6 @@ module.exports = React.createClass({
             var readReceiptEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
             var readMarkerGhostEventId = this.state.readMarkerGhostEventId;
             if (this.state.readReceiptEventId !== undefined && this.state.readReceiptEventId != readReceiptEventId) {
-                var newReadEventIndex = this._indexForEventId(readReceiptEventId);
                 readMarkerGhostEventId = this.state.readReceiptEventId;
             }
             this.setState({

From 2d5cba89e8792b38a82417173ad634e6c46326fd Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 9 Jan 2016 01:05:43 +0000
Subject: [PATCH 19/28] tint Dave's read-up-to marker

---
 src/Tinter.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Tinter.js b/src/Tinter.js
index a9b754ffde..7245a5825b 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -62,6 +62,7 @@ var cssAttrs = [
     "color",
     "backgroundColor",
     "borderColor",
+    "borderTopColor",
 ];
 
 var svgAttrs = [

From c30aeac31530e093adde022cdc658525a5021b21 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 11 Jan 2016 11:38:04 +0000
Subject: [PATCH 20/28] Set our own booleans instead of using isMounted

---
 src/components/structures/RoomView.js    | 12 +++++++++---
 src/components/structures/ScrollPanel.js | 12 ++++++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index c91be22a47..32deec8a9b 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -100,6 +100,12 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
+        // set a boolean to say we've been unmounted, which any pending
+        // promises can use to throw away their results.
+        //
+        // (We could use isMounted, but facebook have deprecated that.)
+        this.unmounted = true;
+
         if (this.refs.messagePanel) {
             // disconnect the D&D event listeners from the message panel. This
             // is really just for hygiene - the messagePanel is going to be
@@ -196,7 +202,7 @@ module.exports = React.createClass({
     },*/
 
     onRoomTimeline: function(ev, room, toStartOfTimeline) {
-        if (!this.isMounted()) return;
+        if (this.unmounted) return;
 
         // ignore anything that comes in whilst paginating: we get one
         // event for each new matrix event so this would cause a huge
@@ -355,7 +361,7 @@ module.exports = React.createClass({
 
         // we might have switched rooms since the paginate started - just bin
         // the results if so.
-        if (!this.isMounted()) return;
+        if (this.unmounted) return;
 
         this.setState({
             room: MatrixClientPeg.get().getRoom(this.props.roomId),
@@ -538,7 +544,7 @@ module.exports = React.createClass({
 
         return searchPromise.then(function(results) {
             debuglog("search complete");
-            if (!this.isMounted() || !self.state.searching || self.searchId != localSearchId) {
+            if (self.unmounted || !self.state.searching || self.searchId != localSearchId) {
                 console.error("Discarding stale search results");
                 return;
             }
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index fc628b5a5e..8d26b2e365 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -112,6 +112,14 @@ module.exports = React.createClass({
         this.checkFillState();
     },
 
+    componentWillUnmount: function() {
+        // set a boolean to say we've been unmounted, which any pending
+        // promises can use to throw away their results.
+        //
+        // (We could use isMounted(), but facebook have deprecated that.)
+        this.unmounted = true;
+    },
+
     onScroll: function(ev) {
         var sn = this._getScrollNode();
         debuglog("Scroll event: offset now:", sn.scrollTop, "recentEventScroll:", this.recentEventScroll);
@@ -158,7 +166,7 @@ module.exports = React.createClass({
 
     // check the scroll state and send out backfill requests if necessary.
     checkFillState: function() {
-        if (!this.isMounted()) {
+        if (this.unmounted) {
             return;
         }
 
@@ -350,7 +358,7 @@ module.exports = React.createClass({
      * message panel.
      */
     _getScrollNode: function() {
-        if (!this.isMounted()) {
+        if (this.unmounted) {
             // this shouldn't happen, but when it does, turn the NPE into
             // something more meaningful.
             throw new Error("ScrollPanel._getScrollNode called when unmounted");

From fcdfce3760076787a57e6032417f30d0f98785a8 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 11 Jan 2016 15:12:55 +0000
Subject: [PATCH 21/28] Toggle auto-reg off when successfully registered as a
 guest.

Otherwise if you refresh -> auto-reg -> logout, you will get an infinite
spinner as it will think it is auto-registering again.
---
 src/components/structures/MatrixChat.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 118b43ef9a..320dad09b3 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -152,6 +152,7 @@ module.exports = React.createClass({
         );
         MatrixClientPeg.get().registerGuest().done(function(creds) {
             console.log("Registered as guest: %s", creds.user_id);
+            self._setAutoRegisterAsGuest(false);
             self.onLoggedIn({
                 userId: creds.user_id,
                 accessToken: creds.access_token,
@@ -185,7 +186,6 @@ module.exports = React.createClass({
                 MatrixClientPeg.get().stopClient();
                 MatrixClientPeg.get().removeAllListeners();
                 MatrixClientPeg.unset();
-
                 this.notifyNewScreen('login');
                 this.replaceState({
                     logged_in: false,

From 243b2e4587c5b82255be14168d7cedf32574eea8 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 11 Jan 2016 15:28:59 +0000
Subject: [PATCH 22/28] Make the scrollpanel update itself correctly on video
 resize.

When we first get video, the video component will resize itself. This will
cause the page to be reflowed, but that doesn't trigger an update on the gemini
scrollbar. We therefore need to force an update on the messagepanel. Implement
this by providing an onResize property on the CallView component.

We need to do the same when we change the maxHeight on the video panel.

The same applies to resizing of the MessageComposer. That was previously
handled with a fugly roomView.forceUpdate() from MessageComposer - make it use
the same mechanism.

Finally: the messageComposer is at least 70 pixels, and up to 100 pixels high -
not 36. Fix the auxPanelMaxHeight calculation - and use a static constant
rather than hardcoding the number to avoid this happening again.
---
 src/components/structures/RoomView.js         | 26 +++++++++++++++----
 src/components/views/rooms/MessageComposer.js | 23 +++++++++++-----
 src/components/views/voip/CallView.js         |  8 +++++-
 src/components/views/voip/VideoFeed.js        | 22 +++++++++++++++-
 src/components/views/voip/VideoView.js        |  2 +-
 5 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 26c2c6a1bc..c622a7d769 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1064,17 +1064,23 @@ module.exports = React.createClass({
         // a maxHeight on the underlying remote video tag.
         var auxPanelMaxHeight;
         if (this.refs.callView) {
-            // XXX: don't understand why we have to call findDOMNode here in react 0.14 - it should already be a DOM node.
-            var video = ReactDOM.findDOMNode(this.refs.callView.refs.video.refs.remote);
+            var video = this.refs.callView.getVideoView().getRemoteVideoElement();
 
             // header + footer + status + give us at least 100px of scrollback at all times.
-            auxPanelMaxHeight = window.innerHeight - (83 + 72 + 36 + 100);
+            auxPanelMaxHeight = window.innerHeight -
+                (83 + 72 +
+                 sdk.getComponent('rooms.MessageComposer').MAX_HEIGHT +
+                 100);
 
             // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
             // but it's better than the video going missing entirely
             if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
 
             video.style.maxHeight = auxPanelMaxHeight + "px";
+
+            // the above might have made the video panel resize itself, so now
+            // we need to tell the gemini panel to adapt.
+            this.onChildResize();
         }
     },
 
@@ -1109,6 +1115,15 @@ module.exports = React.createClass({
         });
     },
 
+    onChildResize: function() {
+        // When the video or the message composer resizes, the scroll panel
+        // also changes size.  Work around GeminiScrollBar fail by telling it
+        // about it. This also ensures that the scroll offset is updated.
+        if (this.refs.messagePanel) {
+            this.refs.messagePanel.forceUpdate();
+        }
+    },
+
     render: function() {
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         var MessageComposer = sdk.getComponent('rooms.MessageComposer');
@@ -1299,7 +1314,7 @@ module.exports = React.createClass({
             if (canSpeak) {
                 messageComposer =
                     <MessageComposer
-                        room={this.state.room} roomView={this} uploadFile={this.uploadFile}
+                        room={this.state.room} onResize={this.onChildResize} uploadFile={this.uploadFile}
                         callState={this.state.callState} tabComplete={this.tabComplete} />
             }
 
@@ -1402,7 +1417,8 @@ module.exports = React.createClass({
                         } />
                     { fileDropTarget }    
                     <div className="mx_RoomView_auxPanel">
-                        <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
+                        <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}
+                            onResize={this.onChildResize} />
                         { conferenceCallNotification }
                         { aux }
                     </div>
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 083cee46a2..f2894bd6b3 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -65,8 +65,17 @@ function mdownToHtml(mdown) {
 module.exports = React.createClass({
     displayName: 'MessageComposer',
 
+    statics: {
+        // the height we limit the composer to
+        MAX_HEIGHT: 100,
+    },
+
     propTypes: {
-        tabComplete: React.PropTypes.any
+        tabComplete: React.PropTypes.any,
+
+        // a callback which is called when the height of the composer is
+        // changed due to a change in content.
+        onResize: React.PropTypes.function,
     },
 
     componentWillMount: function() {
@@ -237,13 +246,15 @@ module.exports = React.createClass({
         // scrollHeight is at least equal to clientHeight, so we have to
         // temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
         this.refs.textarea.style.height = "0px";
-        var newHeight = this.refs.textarea.scrollHeight < 100 ? this.refs.textarea.scrollHeight : 100;
+        var newHeight = Math.min(this.refs.textarea.scrollHeight,
+                                 this.constructor.MAX_HEIGHT);
         this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
-        if (this.props.roomView) {
-            // kick gemini-scrollbar to re-layout
-            this.props.roomView.forceUpdate();
-        }
         this.oldScrollHeight = this.refs.textarea.scrollHeight;
+
+        if (this.props.onResize) {
+            // kick gemini-scrollbar to re-layout
+            this.props.onResize();
+        }
     },
 
     onKeyUp: function(ev) {
diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index bc82556163..98bad37467 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -33,6 +33,12 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 module.exports = React.createClass({
     displayName: 'CallView',
 
+    propTypes: {
+        // a callback which is called when the video within the callview
+        // due to a change in video metadata
+        onResize: React.PropTypes.function,
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         if (this.props.room) {
@@ -97,7 +103,7 @@ module.exports = React.createClass({
     render: function(){
         var VideoView = sdk.getComponent('voip.VideoView');
         return (
-            <VideoView ref="video" onClick={ this.props.onClick }/>
+            <VideoView ref="video" onClick={ this.props.onClick } onResize={ this.props.onResize }/>
         );
     }
 });
diff --git a/src/components/views/voip/VideoFeed.js b/src/components/views/voip/VideoFeed.js
index e4833dba9f..88d1b50cce 100644
--- a/src/components/views/voip/VideoFeed.js
+++ b/src/components/views/voip/VideoFeed.js
@@ -21,9 +21,29 @@ var React = require('react');
 module.exports = React.createClass({
     displayName: 'VideoFeed',
 
+    propTypes: {
+        // a callback which is called when the video element is resized
+        // due to a change in video metadata
+        onResize: React.PropTypes.function,
+    },
+
+    componentDidMount() {
+        this.refs.vid.addEventListener('resize', this.onResize);
+    },
+
+    componentWillUnmount() {
+        this.refs.vid.removeEventListener('resize', this.onResize);
+    },
+
+    onResize: function(e) {
+        if(this.props.onResize) {
+            this.props.onResize(e);
+        }
+    },
+
     render: function() {
         return (
-            <video>
+            <video ref="vid">
             </video>
         );
     },
diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
index 15ce14a299..08e587f47f 100644
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -85,7 +85,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_VideoView" ref={this.setContainer} onClick={ this.props.onClick }>
                 <div className="mx_VideoView_remoteVideoFeed">
-                    <VideoFeed ref="remote"/>
+                    <VideoFeed ref="remote" onResize={this.props.onResize}/>
                     <audio ref="remoteAudio"/>
                 </div>
                 <div className="mx_VideoView_localVideoFeed">                

From cd525497130aec00f463d7a53be576fedbddeacb Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 12 Jan 2016 13:11:53 +0000
Subject: [PATCH 23/28] s/function/func/ in PropTypes declarations

---
 src/components/views/rooms/MessageComposer.js | 2 +-
 src/components/views/voip/CallView.js         | 2 +-
 src/components/views/voip/VideoFeed.js        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index f2894bd6b3..a3ad033acc 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -75,7 +75,7 @@ module.exports = React.createClass({
 
         // a callback which is called when the height of the composer is
         // changed due to a change in content.
-        onResize: React.PropTypes.function,
+        onResize: React.PropTypes.func,
     },
 
     componentWillMount: function() {
diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index 98bad37467..ed44313b9e 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -36,7 +36,7 @@ module.exports = React.createClass({
     propTypes: {
         // a callback which is called when the video within the callview
         // due to a change in video metadata
-        onResize: React.PropTypes.function,
+        onResize: React.PropTypes.func,
     },
 
     componentDidMount: function() {
diff --git a/src/components/views/voip/VideoFeed.js b/src/components/views/voip/VideoFeed.js
index 88d1b50cce..c4a65d1145 100644
--- a/src/components/views/voip/VideoFeed.js
+++ b/src/components/views/voip/VideoFeed.js
@@ -24,7 +24,7 @@ module.exports = React.createClass({
     propTypes: {
         // a callback which is called when the video element is resized
         // due to a change in video metadata
-        onResize: React.PropTypes.function,
+        onResize: React.PropTypes.func,
     },
 
     componentDidMount() {

From 37f1b4ba8a884690e93a868655f4eac02be0cd0c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 12 Jan 2016 14:13:42 +0000
Subject: [PATCH 24/28] Tweaked style means we can have 100% width (well 99%
 otherwise we gain a horizontal scrollbar)

---
 src/components/structures/RoomView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 2e6ebd2933..5df5a1044e 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -694,7 +694,7 @@ module.exports = React.createClass({
             var self = this;
             if (prevEvent && prevEvent.getId() == this.state.readReceiptEventId) {
                 var hr;
-                hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '85%'}} ref={function(n) {
+                hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '99%'}} ref={function(n) {
                     self.readMarkerNode = n;
                 }} />);
                 readMarkerIndex = ret.length;

From 8b730c0a5d7c1aa2db7ddf0227e0d7aa3fedddfb Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 12 Jan 2016 16:38:09 +0000
Subject: [PATCH 25/28] PR feedback

---
 src/components/structures/RoomView.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 5df5a1044e..e1f8067146 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -75,7 +75,7 @@ module.exports = React.createClass({
             syncState: MatrixClientPeg.get().getSyncState(),
             hasUnsentMessages: this._hasUnsentMessages(room),
             callState: null,
-            readReceiptEventId: room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId),
+            readMarkerEventId: room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId),
             readMarkerGhostEventId: undefined,
         }
     },
@@ -246,13 +246,13 @@ module.exports = React.createClass({
 
     onRoomReceipt: function(receiptEvent, room) {
         if (room.roomId == this.props.roomId) {
-            var readReceiptEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
+            var readMarkerEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
             var readMarkerGhostEventId = this.state.readMarkerGhostEventId;
-            if (this.state.readReceiptEventId !== undefined && this.state.readReceiptEventId != readReceiptEventId) {
-                readMarkerGhostEventId = this.state.readReceiptEventId;
+            if (this.state.readMarkerEventId !== undefined && this.state.readMarkerEventId != readMarkerEventId) {
+                readMarkerGhostEventId = this.state.readMarkerEventId;
             }
             this.setState({
-                readReceiptEventId: readReceiptEventId,
+                readMarkerEventId: readMarkerEventId,
                 readMarkerGhostEventId: readMarkerGhostEventId,
             });
         }
@@ -683,7 +683,7 @@ module.exports = React.createClass({
                 }
             }
 
-            // now we've decided whether or not to show this messages,
+            // now we've decided whether or not to show this message,
             // add the read up to marker if appropriate
             // doing this here means we implicitly do not show the marker
             // if it's at the bottom
@@ -692,7 +692,7 @@ module.exports = React.createClass({
             // this is where we decide what messages we show so it's the only
             // place we know whether we're at the bottom or not.
             var self = this;
-            if (prevEvent && prevEvent.getId() == this.state.readReceiptEventId) {
+            if (prevEvent && prevEvent.getId() == this.state.readMarkerEventId) {
                 var hr;
                 hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '99%'}} ref={function(n) {
                     self.readMarkerNode = n;
@@ -751,7 +751,7 @@ module.exports = React.createClass({
         if (readMarkerIndex === undefined && ghostIndex && ghostIndex <= ret.length) {
             var hr;
             hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '85%'}} ref={function(n) {
-                Velocity(n, {opacity: '0', width: '10%'}, {duration: 400, complete: function() {
+                Velocity(n, {opacity: '0', width: '10%'}, {duration: 400, easing: 'easeInSine', complete: function() {
                     self.setState({readMarkerGhostEventId: undefined});
                 }});
             }} />);

From 4a8b5dfe3a4b9d1a663b6fb7a0a68c1fea0dc56d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 12 Jan 2016 17:18:16 +0000
Subject: [PATCH 26/28] Don't display read markers (or ghosts) above our own
 messages.

---
 src/components/structures/RoomView.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index e1f8067146..04facc59fc 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -251,6 +251,24 @@ module.exports = React.createClass({
             if (this.state.readMarkerEventId !== undefined && this.state.readMarkerEventId != readMarkerEventId) {
                 readMarkerGhostEventId = this.state.readMarkerEventId;
             }
+
+
+            // if the event after the one referenced in the read receipt if sent by us, do nothing since
+            // this is a temporary period before the synthesized receipt for our own message arrives
+            var readMarkerGhostEventIndex;
+            for (var i = 0; i < room.timeline.length; ++i) {
+                if (room.timeline[i].getId() == readMarkerGhostEventId) {
+                    readMarkerGhostEventIndex = i;
+                    break;
+                }
+            }
+            if (readMarkerGhostEventIndex + 1 < room.timeline.length) {
+                var nextEvent = room.timeline[readMarkerGhostEventIndex + 1];
+                if (nextEvent.sender && nextEvent.sender.userId == MatrixClientPeg.get().credentials.userId) {
+                    readMarkerGhostEventId = undefined;
+                }
+            }
+
             this.setState({
                 readMarkerEventId: readMarkerEventId,
                 readMarkerGhostEventId: readMarkerGhostEventId,
@@ -692,7 +710,8 @@ module.exports = React.createClass({
             // this is where we decide what messages we show so it's the only
             // place we know whether we're at the bottom or not.
             var self = this;
-            if (prevEvent && prevEvent.getId() == this.state.readMarkerEventId) {
+            var mxEvSender = mxEv.sender ? mxEv.sender.userId : null;
+            if (prevEvent && prevEvent.getId() == this.state.readMarkerEventId && mxEvSender != MatrixClientPeg.get().credentials.userId) {
                 var hr;
                 hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '99%'}} ref={function(n) {
                     self.readMarkerNode = n;

From ec4e0d768754f2300c41065a9b023b490e182b98 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 12 Jan 2016 17:20:16 +0000
Subject: [PATCH 27/28] Implement password reset

This adds a link to the login screen with "Forgot your password?". Clicking it
takes you to a form with fields for an email address and a new password. This
makes the same API calls as the Angular SDK.

Manually tested resetting + not clicking link + invalid email and it all seems
to work.
---
 src/PasswordReset.js                          | 104 +++++++++
 src/component-index.js                        |   9 +-
 src/components/structures/MatrixChat.js       |  27 ++-
 .../structures/login/ForgotPassword.js        | 199 ++++++++++++++++++
 src/components/structures/login/Login.js      |   8 +-
 src/components/views/login/PasswordLogin.js   |  14 +-
 6 files changed, 353 insertions(+), 8 deletions(-)
 create mode 100644 src/PasswordReset.js
 create mode 100644 src/components/structures/login/ForgotPassword.js

diff --git a/src/PasswordReset.js b/src/PasswordReset.js
new file mode 100644
index 0000000000..1029b07b70
--- /dev/null
+++ b/src/PasswordReset.js
@@ -0,0 +1,104 @@
+/*
+Copyright 2015, 2016 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.
+*/
+
+var Matrix = require("matrix-js-sdk");
+
+/**
+ * Allows a user to reset their password on a homeserver.
+ *
+ * This involves getting an email token from the identity server to "prove" that
+ * the client owns the given email address, which is then passed to the password
+ * API on the homeserver in question with the new password.
+ */
+class PasswordReset {
+
+    /**
+     * Configure the endpoints for password resetting.
+     * @param {string} homeserverUrl The URL to the HS which has the account to reset.
+     * @param {string} identityUrl The URL to the IS which has linked the email -> mxid mapping.
+     */
+    constructor(homeserverUrl, identityUrl) {
+        this.client = Matrix.createClient({
+            baseUrl: homeserverUrl,
+            idBaseUrl: identityUrl
+        });
+        this.clientSecret = generateClientSecret();
+        this.identityServerDomain = identityUrl.split("://")[1];
+    }
+
+    /**
+     * Attempt to reset the user's password. This will trigger a side-effect of
+     * sending an email to the provided email address.
+     * @param {string} emailAddress The email address
+     * @param {string} newPassword The new password for the account.
+     * @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
+     */
+    resetPassword(emailAddress, newPassword) {
+        this.password = newPassword;
+        return this.client.requestEmailToken(emailAddress, this.clientSecret, 1).then((res) => {
+            this.sessionId = res.sid;
+            return res;
+        }, function(err) {
+            if (err.httpStatus) {
+                err.message = err.message + ` (Status ${err.httpStatus})`;
+            }
+            throw err;
+        });
+    }
+
+    /**
+     * Checks if the email link has been clicked by attempting to change the password
+     * for the mxid linked to the email.
+     * @return {Promise} Resolves if the password was reset. Rejects with an object
+     * with a "message" property which contains a human-readable message detailing why
+     * the reset failed, e.g. "There is no mapped matrix user ID for the given email address".
+     */
+    checkEmailLinkClicked() {
+        return this.client.setPassword({
+            type: "m.login.email.identity",
+            threepid_creds: {
+                sid: this.sessionId,
+                client_secret: this.clientSecret,
+                id_server: this.identityServerDomain
+            }
+        }, this.password).catch(function(err) {
+            if (err.httpStatus === 401) {
+                err.message = "Failed to verify email address: make sure you clicked the link in the email";
+            }
+            else if (err.httpStatus === 404) {
+                err.message = "Your email address does not appear to be associated with a Matrix ID on this Homeserver.";
+            }
+            else if (err.httpStatus) {
+                err.message += ` (Status ${err.httpStatus})`;
+            }
+            throw err;
+        });
+    }
+}
+
+// from Angular SDK
+function generateClientSecret() {
+    var ret = "";
+    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+    for (var i = 0; i < 32; i++) {
+        ret += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+
+    return ret;
+}
+
+module.exports = PasswordReset;
diff --git a/src/component-index.js b/src/component-index.js
index 0c08d70b73..ac9a83346a 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -23,14 +23,15 @@ limitations under the License.
 
 module.exports.components = {};
 module.exports.components['structures.CreateRoom'] = require('./components/structures/CreateRoom');
+module.exports.components['structures.login.ForgotPassword'] = require('./components/structures/login/ForgotPassword');
+module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
+module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
+module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['structures.MatrixChat'] = require('./components/structures/MatrixChat');
 module.exports.components['structures.RoomView'] = require('./components/structures/RoomView');
 module.exports.components['structures.ScrollPanel'] = require('./components/structures/ScrollPanel');
 module.exports.components['structures.UploadBar'] = require('./components/structures/UploadBar');
 module.exports.components['structures.UserSettings'] = require('./components/structures/UserSettings');
-module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
-module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
-module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['views.avatars.MemberAvatar'] = require('./components/views/avatars/MemberAvatar');
 module.exports.components['views.avatars.RoomAvatar'] = require('./components/views/avatars/RoomAvatar');
 module.exports.components['views.create_room.CreateRoomButton'] = require('./components/views/create_room/CreateRoomButton');
@@ -51,10 +52,10 @@ module.exports.components['views.login.LoginHeader'] = require('./components/vie
 module.exports.components['views.login.PasswordLogin'] = require('./components/views/login/PasswordLogin');
 module.exports.components['views.login.RegistrationForm'] = require('./components/views/login/RegistrationForm');
 module.exports.components['views.login.ServerConfig'] = require('./components/views/login/ServerConfig');
+module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.MFileBody'] = require('./components/views/messages/MFileBody');
 module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody');
 module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody');
-module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
 module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
 module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 320dad09b3..ede2ab8f46 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -233,6 +233,13 @@ module.exports = React.createClass({
                 });
                 this.notifyNewScreen('register');
                 break;
+            case 'start_password_recovery':
+                if (this.state.logged_in) return;
+                this.replaceState({
+                    screen: 'forgot_password'
+                });
+                this.notifyNewScreen('forgot_password');
+                break;
             case 'token_login':
                 if (this.state.logged_in) return;
 
@@ -559,6 +566,11 @@ module.exports = React.createClass({
                 action: 'token_login',
                 params: params
             });
+        } else if (screen == 'forgot_password') {
+            dis.dispatch({
+                action: 'start_password_recovery',
+                params: params
+            });
         } else if (screen == 'new') {
             dis.dispatch({
                 action: 'view_create_room',
@@ -668,6 +680,10 @@ module.exports = React.createClass({
         this.showScreen("login");
     },
 
+    onForgotPasswordClick: function() {
+        this.showScreen("forgot_password");
+    },
+
     onRegistered: function(credentials) {
         this.onLoggedIn(credentials);
         // do post-registration stuff
@@ -706,6 +722,7 @@ module.exports = React.createClass({
         var CreateRoom = sdk.getComponent('structures.CreateRoom');
         var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
         var MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
+        var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
 
         // needs to be before normal PageTypes as you are logged in technically
         if (this.state.screen == 'post_registration') {
@@ -801,13 +818,21 @@ module.exports = React.createClass({
                     onLoggedIn={this.onRegistered}
                     onLoginClick={this.onLoginClick} />
             );
+        } else if (this.state.screen == 'forgot_password') {
+            return (
+                <ForgotPassword
+                    homeserverUrl={this.props.config.default_hs_url}
+                    identityServerUrl={this.props.config.default_is_url}
+                    onComplete={this.onLoginClick} />
+            );
         } else {
             return (
                 <Login
                     onLoggedIn={this.onLoggedIn}
                     onRegisterClick={this.onRegisterClick}
                     homeserverUrl={this.props.config.default_hs_url}
-                    identityServerUrl={this.props.config.default_is_url} />
+                    identityServerUrl={this.props.config.default_is_url}
+                    onForgotPasswordClick={this.onForgotPasswordClick} />
             );
         }
     }
diff --git a/src/components/structures/login/ForgotPassword.js b/src/components/structures/login/ForgotPassword.js
new file mode 100644
index 0000000000..dcf6a7c28e
--- /dev/null
+++ b/src/components/structures/login/ForgotPassword.js
@@ -0,0 +1,199 @@
+/*
+Copyright 2015, 2016 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';
+
+var React = require('react');
+var sdk = require('../../../index');
+var Modal = require("../../../Modal");
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+var PasswordReset = require("../../../PasswordReset");
+
+module.exports = React.createClass({
+    displayName: 'ForgotPassword',
+
+    propTypes: {
+        homeserverUrl: React.PropTypes.string,
+        identityServerUrl: React.PropTypes.string,
+        onComplete: React.PropTypes.func.isRequired
+    },
+
+    getInitialState: function() {
+        return {
+            enteredHomeserverUrl: this.props.homeserverUrl,
+            enteredIdentityServerUrl: this.props.identityServerUrl,
+            progress: null
+        };
+    },
+
+    submitPasswordReset: function(hsUrl, identityUrl, email, password) {
+        this.setState({
+            progress: "sending_email"
+        });
+        this.reset = new PasswordReset(hsUrl, identityUrl);
+        this.reset.resetPassword(email, password).done(() => {
+            this.setState({
+                progress: "sent_email"
+            });
+        }, (err) => {
+            this.showErrorDialog("Failed to send email: " + err.message);
+            this.setState({
+                progress: null
+            });
+        })
+    },
+
+    onVerify: function(ev) {
+        ev.preventDefault();
+        if (!this.reset) {
+            console.error("onVerify called before submitPasswordReset!");
+            return;
+        }
+        this.reset.checkEmailLinkClicked().done((res) => {
+            this.setState({ progress: "complete" });
+        }, (err) => {
+            this.showErrorDialog(err.message);
+        })
+    },
+
+    onSubmitForm: function(ev) {
+        ev.preventDefault();
+
+        if (!this.state.email) {
+            this.showErrorDialog("The email address linked to your account must be entered.");
+        }
+        else if (!this.state.password || !this.state.password2) {
+            this.showErrorDialog("A new password must be entered.");
+        }
+        else if (this.state.password !== this.state.password2) {
+            this.showErrorDialog("New passwords must match each other.");
+        }
+        else {
+            this.submitPasswordReset(
+                this.state.enteredHomeserverUrl, this.state.enteredIdentityServerUrl,
+                this.state.email, this.state.password
+            );
+        }
+    },
+
+    onInputChanged: function(stateKey, ev) {
+        this.setState({
+            [stateKey]: ev.target.value
+        });
+    },
+
+    onHsUrlChanged: function(newHsUrl) {
+        this.setState({
+            enteredHomeserverUrl: newHsUrl
+        });
+    },
+
+    onIsUrlChanged: function(newIsUrl) {
+        this.setState({
+            enteredIdentityServerUrl: newIsUrl
+        });
+    },
+
+    showErrorDialog: function(body, title) {
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createDialog(ErrorDialog, {
+            title: title,
+            description: body
+        });
+    },
+
+    render: function() {
+        var LoginHeader = sdk.getComponent("login.LoginHeader");
+        var LoginFooter = sdk.getComponent("login.LoginFooter");
+        var ServerConfig = sdk.getComponent("login.ServerConfig");
+        var Spinner = sdk.getComponent("elements.Spinner");
+
+        var resetPasswordJsx;
+
+        if (this.state.progress === "sending_email") {
+            resetPasswordJsx = <Spinner />
+        }
+        else if (this.state.progress === "sent_email") {
+            resetPasswordJsx = (
+                <div>
+                    An email has been sent to {this.state.email}. Once you&#39;ve followed
+                    the link it contains, click below.
+                    <br />
+                    <input className="mx_Login_submit" type="button" onClick={this.onVerify}
+                        value="I have verified my email address" />
+                </div>
+            );
+        }
+        else if (this.state.progress === "complete") {
+            resetPasswordJsx = (
+                <div>
+                    <p>Your password has been reset.</p>
+                    <p>You have been logged out of all devices and will no longer receive push notifications.
+                    To re-enable notifications, re-log in on each device.</p>
+                    <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
+                        value="Return to login screen" />
+                </div>
+            );
+        }
+        else {
+            resetPasswordJsx = (
+            <div>
+                To reset your password, enter the email address linked to your account:
+                <br />
+                <div>
+                    <form onSubmit={this.onSubmitForm}>
+                        <input className="mx_Login_field" ref="user" type="text"
+                            value={this.state.email}
+                            onChange={this.onInputChanged.bind(this, "email")}
+                            placeholder="Email address" autoFocus />
+                        <br />
+                        <input className="mx_Login_field" ref="pass" type="password"
+                            value={this.state.password}
+                            onChange={this.onInputChanged.bind(this, "password")}
+                            placeholder="New password" />
+                        <br />
+                        <input className="mx_Login_field" ref="pass" type="password"
+                            value={this.state.password2}
+                            onChange={this.onInputChanged.bind(this, "password2")}
+                            placeholder="Confirm your new password" />
+                        <br />
+                        <input className="mx_Login_submit" type="submit" value="Send Reset Email" />
+                    </form>
+                    <ServerConfig ref="serverConfig"
+                        withToggleButton={true}
+                        defaultHsUrl={this.props.homeserverUrl}
+                        defaultIsUrl={this.props.identityServerUrl}
+                        onHsUrlChanged={this.onHsUrlChanged}
+                        onIsUrlChanged={this.onIsUrlChanged}
+                        delayTimeMs={0}/>
+                    <LoginFooter />
+                </div>
+            </div>
+            );
+        }
+
+
+        return (
+            <div className="mx_Login">
+                <div className="mx_Login_box">
+                    <LoginHeader />
+                    {resetPasswordJsx}
+                </div>
+            </div>
+        );
+    }
+});
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
index b7d2d762a4..b853b8fd95 100644
--- a/src/components/structures/login/Login.js
+++ b/src/components/structures/login/Login.js
@@ -33,7 +33,9 @@ module.exports = React.createClass({displayName: 'Login',
         homeserverUrl: React.PropTypes.string,
         identityServerUrl: React.PropTypes.string,
         // login shouldn't know or care how registration is done.
-        onRegisterClick: React.PropTypes.func.isRequired
+        onRegisterClick: React.PropTypes.func.isRequired,
+        // login shouldn't care how password recovery is done.
+        onForgotPasswordClick: React.PropTypes.func
     },
 
     getDefaultProps: function() {
@@ -138,7 +140,9 @@ module.exports = React.createClass({displayName: 'Login',
         switch (step) {
             case 'm.login.password':
                 return (
-                    <PasswordLogin onSubmit={this.onPasswordLogin} />
+                    <PasswordLogin
+                        onSubmit={this.onPasswordLogin}
+                        onForgotPasswordClick={this.props.onForgotPasswordClick} />
                 );
             case 'm.login.cas':
                 return (
diff --git a/src/components/views/login/PasswordLogin.js b/src/components/views/login/PasswordLogin.js
index 3367ac3257..a8751da1a7 100644
--- a/src/components/views/login/PasswordLogin.js
+++ b/src/components/views/login/PasswordLogin.js
@@ -22,7 +22,8 @@ var ReactDOM = require('react-dom');
  */
 module.exports = React.createClass({displayName: 'PasswordLogin',
     propTypes: {
-        onSubmit: React.PropTypes.func.isRequired // fn(username, password)
+        onSubmit: React.PropTypes.func.isRequired, // fn(username, password)
+        onForgotPasswordClick: React.PropTypes.func // fn()
     },
 
     getInitialState: function() {
@@ -46,6 +47,16 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
     },
 
     render: function() {
+        var forgotPasswordJsx;
+
+        if (this.props.onForgotPasswordClick) {
+            forgotPasswordJsx = (
+                <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
+                    Forgot your password?
+                </a>
+            );
+        }
+
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
@@ -57,6 +68,7 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
                     value={this.state.password} onChange={this.onPasswordChanged}
                     placeholder="Password" />
                 <br />
+                {forgotPasswordJsx}
                 <input className="mx_Login_submit" type="submit" value="Log in" />
                 </form>
             </div>

From 848cb30ea4cea8466ccc9e420db85894e5dae305 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 12 Jan 2016 17:48:34 +0000
Subject: [PATCH 28/28] Remove ill-concieved delay before sending read receipts
 & instead just wait a bit before removing the ghost read marker.

---
 src/components/structures/RoomView.js | 27 ++++++++-------------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 04facc59fc..b06a4e23f4 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -103,12 +103,6 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
-        // if we're waiting to send a read receipt, don't:
-        // message wasn't on screen for long enough
-        if (this.sendRRTimer) {
-            clearTimeout(this.sendRRTimer);
-        }
-
         if (this.refs.messagePanel) {
             // disconnect the D&D event listeners from the message panel. This
             // is really just for hygiene - the messagePanel is going to be
@@ -770,7 +764,7 @@ module.exports = React.createClass({
         if (readMarkerIndex === undefined && ghostIndex && ghostIndex <= ret.length) {
             var hr;
             hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '85%'}} ref={function(n) {
-                Velocity(n, {opacity: '0', width: '10%'}, {duration: 400, easing: 'easeInSine', complete: function() {
+                Velocity(n, {opacity: '0', width: '10%'}, {duration: 400, easing: 'easeInSine', delay: 1000, complete: function() {
                     self.setState({readMarkerGhostEventId: undefined});
                 }});
             }} />);
@@ -885,20 +879,15 @@ module.exports = React.createClass({
 
     sendReadReceipt: function() {
         if (!this.state.room) return;
-        if (this.sendRRTimer) clearTimeout(this.sendRRTimer);
-        var self = this;
-        this.sendRRTimer = setTimeout(function() {
-            self.sendRRTimer = undefined;
-            var currentReadUpToEventId = self.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
-            var currentReadUpToEventIndex = self._indexForEventId(currentReadUpToEventId);
+        var currentReadUpToEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
+        var currentReadUpToEventIndex = this._indexForEventId(currentReadUpToEventId);
 
-            var lastReadEventIndex = self._getLastDisplayedEventIndexIgnoringOwn();
-            if (lastReadEventIndex === null) return;
+        var lastReadEventIndex = this._getLastDisplayedEventIndexIgnoringOwn();
+        if (lastReadEventIndex === null) return;
 
-            if (lastReadEventIndex > currentReadUpToEventIndex) {
-                MatrixClientPeg.get().sendReadReceipt(self.state.room.timeline[lastReadEventIndex]);
-            }
-        }, SEND_READ_RECEIPT_DELAY);
+        if (lastReadEventIndex > currentReadUpToEventIndex) {
+            MatrixClientPeg.get().sendReadReceipt(this.state.room.timeline[lastReadEventIndex]);
+        }
     },
 
     _getLastDisplayedEventIndexIgnoringOwn: function() {