From c636f890b5a6c97c872cec3583620e93395d4c31 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 6 May 2019 09:55:27 -0600
Subject: [PATCH 01/34] Add configuration flag to disable minimum password
 requirements

The configuration flag is intentionally long and annoying - the vast majority of people should not need this. The flag is intended to be used in development environments where accounts are often registered with no intention of them sticking around.
---
 src/components/views/auth/RegistrationForm.js | 16 ++++++++++++++--
 src/i18n/strings/en_EN.json                   |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index 6e55581af0..eb77e125af 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -76,6 +76,7 @@ module.exports = React.createClass({
             password: "",
             passwordConfirm: "",
             passwordComplexity: null,
+            passwordUnsafe: false,
         };
     },
 
@@ -270,12 +271,23 @@ module.exports = React.createClass({
                     }
                     const { scorePassword } = await import('../../../utils/PasswordScorer');
                     const complexity = scorePassword(value);
+                    const unsafe = complexity.score < PASSWORD_MIN_SCORE;
+                    const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
                     this.setState({
                         passwordComplexity: complexity,
+                        passwordUnsafe: unsafe,
                     });
-                    return complexity.score >= PASSWORD_MIN_SCORE;
+                    return allowUnsafe || !unsafe;
+                },
+                valid: function() {
+                    // Unsafe passwords that are valid are only possible through a
+                    // configuration flag. We'll print some helper text to signal
+                    // to the user that their password is allowed, but unsafe.
+                    if (this.state.passwordUnsafe) {
+                        return _t("Password is allowed, but unsafe");
+                    }
+                    return _t("Nice, strong password!");
                 },
-                valid: () => _t("Nice, strong password!"),
                 invalid: function() {
                     const complexity = this.state.passwordComplexity;
                     if (!complexity) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index eaea057b36..273ca8a571 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1327,6 +1327,7 @@
     "Enter email address (required on this homeserver)": "Enter email address (required on this homeserver)",
     "Doesn't look like a valid email address": "Doesn't look like a valid email address",
     "Enter password": "Enter password",
+    "Password is allowed, but unsafe": "Password is allowed, but unsafe",
     "Nice, strong password!": "Nice, strong password!",
     "Keep going...": "Keep going...",
     "Passwords don't match": "Passwords don't match",

From 3beb70814c8b699f3d3d81da8dd36015bd635d14 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 7 May 2019 15:40:02 +0100
Subject: [PATCH 02/34] Fix indentation in TimelinePanel

---
 src/components/structures/TimelinePanel.js | 50 +++++++++++-----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index aa278f2349..e065c5719e 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -1193,9 +1193,9 @@ const TimelinePanel = React.createClass({
 
         if (this.state.events.length == 0 && !this.state.canBackPaginate && this.props.empty) {
             return (
-                    <div className={this.props.className + " mx_RoomView_messageListWrapper"}>
-                        <div className="mx_RoomView_empty">{ this.props.empty }</div>
-                    </div>
+                <div className={this.props.className + " mx_RoomView_messageListWrapper"}>
+                    <div className="mx_RoomView_empty">{this.props.empty}</div>
+                </div>
             );
         }
 
@@ -1217,28 +1217,28 @@ const TimelinePanel = React.createClass({
         );
         return (
             <MessagePanel ref="messagePanel"
-                          room={this.props.timelineSet.room}
-                          permalinkCreator={this.props.permalinkCreator}
-                          hidden={this.props.hidden}
-                          backPaginating={this.state.backPaginating}
-                          forwardPaginating={forwardPaginating}
-                          events={this.state.events}
-                          highlightedEventId={this.props.highlightedEventId}
-                          readMarkerEventId={this.state.readMarkerEventId}
-                          readMarkerVisible={this.state.readMarkerVisible}
-                          suppressFirstDateSeparator={this.state.canBackPaginate}
-                          showUrlPreview={this.props.showUrlPreview}
-                          showReadReceipts={this.props.showReadReceipts}
-                          ourUserId={MatrixClientPeg.get().credentials.userId}
-                          stickyBottom={stickyBottom}
-                          onScroll={this.onMessageListScroll}
-                          onFillRequest={this.onMessageListFillRequest}
-                          onUnfillRequest={this.onMessageListUnfillRequest}
-                          isTwelveHour={this.state.isTwelveHour}
-                          alwaysShowTimestamps={this.state.alwaysShowTimestamps}
-                          className={this.props.className}
-                          tileShape={this.props.tileShape}
-                          resizeNotifier={this.props.resizeNotifier}
+                room={this.props.timelineSet.room}
+                permalinkCreator={this.props.permalinkCreator}
+                hidden={this.props.hidden}
+                backPaginating={this.state.backPaginating}
+                forwardPaginating={forwardPaginating}
+                events={this.state.events}
+                highlightedEventId={this.props.highlightedEventId}
+                readMarkerEventId={this.state.readMarkerEventId}
+                readMarkerVisible={this.state.readMarkerVisible}
+                suppressFirstDateSeparator={this.state.canBackPaginate}
+                showUrlPreview={this.props.showUrlPreview}
+                showReadReceipts={this.props.showReadReceipts}
+                ourUserId={MatrixClientPeg.get().credentials.userId}
+                stickyBottom={stickyBottom}
+                onScroll={this.onMessageListScroll}
+                onFillRequest={this.onMessageListFillRequest}
+                onUnfillRequest={this.onMessageListUnfillRequest}
+                isTwelveHour={this.state.isTwelveHour}
+                alwaysShowTimestamps={this.state.alwaysShowTimestamps}
+                className={this.props.className}
+                tileShape={this.props.tileShape}
+                resizeNotifier={this.props.resizeNotifier}
             />
         );
     },

From 74189b21646fd7e4ab95fa6fa67767cf5ebf448f Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 7 May 2019 16:05:56 +0100
Subject: [PATCH 03/34] Fix indentation in MessagePanel

---
 src/components/structures/MessagePanel.js | 36 +++++++++++++----------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index b57b659136..b0f6699bc1 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -511,22 +511,26 @@ module.exports = React.createClass({
             readReceipts = this._getReadReceiptsForEvent(mxEv);
         }
         ret.push(
-                <li key={eventId}
-                        ref={this._collectEventNode.bind(this, eventId)}
-                        data-scroll-tokens={scrollToken}>
-                    <EventTile mxEvent={mxEv} continuation={continuation}
-                        isRedacted={mxEv.isRedacted()}
-                        onHeightChanged={this._onHeightChanged}
-                        readReceipts={readReceipts}
-                        readReceiptMap={this._readReceiptMap}
-                        showUrlPreview={this.props.showUrlPreview}
-                        checkUnmounting={this._isUnmounting}
-                        eventSendStatus={mxEv.status}
-                        tileShape={this.props.tileShape}
-                        isTwelveHour={this.props.isTwelveHour}
-                        permalinkCreator={this.props.permalinkCreator}
-                        last={last} isSelectedEvent={highlight} />
-                </li>,
+            <li key={eventId}
+                ref={this._collectEventNode.bind(this, eventId)}
+                data-scroll-tokens={scrollToken}
+            >
+                <EventTile mxEvent={mxEv}
+                    continuation={continuation}
+                    isRedacted={mxEv.isRedacted()}
+                    onHeightChanged={this._onHeightChanged}
+                    readReceipts={readReceipts}
+                    readReceiptMap={this._readReceiptMap}
+                    showUrlPreview={this.props.showUrlPreview}
+                    checkUnmounting={this._isUnmounting}
+                    eventSendStatus={mxEv.status}
+                    tileShape={this.props.tileShape}
+                    isTwelveHour={this.props.isTwelveHour}
+                    permalinkCreator={this.props.permalinkCreator}
+                    last={last}
+                    isSelectedEvent={highlight}
+                />
+            </li>,
         );
 
         return ret;

From 8903f65fcbb09cf154da767e8598c41ec5f619d6 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 8 May 2019 15:06:48 +0100
Subject: [PATCH 04/34] Enable client-side aggregations for reactions

If reactions are enabled, we need to enable client-side aggregation in the
`MatrixClient` to access the data.
---
 src/MatrixClientPeg.js      | 5 ++++-
 src/i18n/strings/en_EN.json | 2 +-
 src/settings/Settings.js    | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index 763eddbd5d..cd40c7874e 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -175,6 +175,8 @@ class MatrixClientPeg {
     }
 
     _createClient(creds: MatrixClientCreds) {
+        const aggregateRelations = SettingsStore.isFeatureEnabled("feature_reactions");
+
         const opts = {
             baseUrl: creds.homeserverUrl,
             idBaseUrl: creds.identityServerUrl,
@@ -183,7 +185,8 @@ class MatrixClientPeg {
             deviceId: creds.deviceId,
             timelineSupport: true,
             forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false),
-            verificationMethods: [verificationMethods.SAS]
+            verificationMethods: [verificationMethods.SAS],
+            unstableClientRelationAggregation: aggregateRelations,
         };
 
         this.matrixClient = createMatrixClient(opts);
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index eaea057b36..b8db74cdeb 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -297,7 +297,7 @@
     "Show recent room avatars above the room list": "Show recent room avatars above the room list",
     "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
     "Render simple counters in room header": "Render simple counters in room header",
-    "React to messages with emoji": "React to messages with emoji",
+    "React to messages with emoji (refresh to apply changes)": "React to messages with emoji (refresh to apply changes)",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Use compact timeline layout": "Use compact timeline layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 4be1b67227..1c3ca4fd0f 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -120,7 +120,7 @@ export const SETTINGS = {
     },
     "feature_reactions": {
         isFeature: true,
-        displayName: _td("React to messages with emoji"),
+        displayName: _td("React to messages with emoji (refresh to apply changes)"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },

From 8fdb59a90984e4b81e6f515d89c998bb41a381f4 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 8 May 2019 18:16:27 +0100
Subject: [PATCH 05/34] Use basic read path from JS SDK for reactions

This displays existing reactions correctly in the action bar and reaction row,
but it doesn't yet update after a new reaction is sent.
---
 src/components/structures/MessagePanel.js     |  4 ++
 src/components/structures/TimelinePanel.js    |  5 +++
 .../views/messages/MessageActionBar.js        |  4 ++
 .../views/messages/ReactionDimension.js       | 38 ++++++++++++++++++-
 src/components/views/messages/ReactionsRow.js | 25 +++---------
 src/components/views/rooms/EventTile.js       | 23 +++++++++--
 6 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index b0f6699bc1..2037217710 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -92,6 +92,9 @@ module.exports = React.createClass({
 
         // show timestamps always
         alwaysShowTimestamps: PropTypes.bool,
+
+        // helper function to access relations for an event
+        getRelationsForEvent: PropTypes.func,
     },
 
     componentWillMount: function() {
@@ -529,6 +532,7 @@ module.exports = React.createClass({
                     permalinkCreator={this.props.permalinkCreator}
                     last={last}
                     isSelectedEvent={highlight}
+                    getRelationsForEvent={this.props.getRelationsForEvent}
                 />
             </li>,
         );
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index e065c5719e..17a062be98 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -1168,6 +1168,10 @@ const TimelinePanel = React.createClass({
         });
     },
 
+    getRelationsForEvent(...args) {
+        return this.props.timelineSet.getRelationsForEvent(...args);
+    },
+
     render: function() {
         const MessagePanel = sdk.getComponent("structures.MessagePanel");
         const Loader = sdk.getComponent("elements.Spinner");
@@ -1239,6 +1243,7 @@ const TimelinePanel = React.createClass({
                 className={this.props.className}
                 tileShape={this.props.tileShape}
                 resizeNotifier={this.props.resizeNotifier}
+                getRelationsForEvent={this.getRelationsForEvent}
             />
         );
     },
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 9a482c9e6e..d2ac9adcf0 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -28,6 +28,8 @@ import { isContentActionable } from '../../../utils/EventUtils';
 export default class MessageActionBar extends React.PureComponent {
     static propTypes = {
         mxEvent: PropTypes.object.isRequired,
+        // The Relations model from the JS SDK for reactions to `mxEvent`
+        reactions: PropTypes.object,
         permalinkCreator: PropTypes.object,
         getTile: PropTypes.func,
         getReplyThread: PropTypes.func,
@@ -113,6 +115,7 @@ export default class MessageActionBar extends React.PureComponent {
         return <ReactionDimension
             title={_t("Agree or Disagree")}
             options={options}
+            reactions={this.props.reactions}
         />;
     }
 
@@ -135,6 +138,7 @@ export default class MessageActionBar extends React.PureComponent {
         return <ReactionDimension
             title={_t("Like or Dislike")}
             options={options}
+            reactions={this.props.reactions}
         />;
     }
 
diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index 3b72aabe15..675d99e187 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -18,20 +18,56 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
 export default class ReactionDimension extends React.PureComponent {
     static propTypes = {
         options: PropTypes.array.isRequired,
         title: PropTypes.string,
+        // The Relations model from the JS SDK for reactions
+        reactions: PropTypes.object,
     };
 
     constructor(props) {
         super(props);
 
         this.state = {
-            selected: null,
+            selected: this.getInitialSelection(),
         };
     }
 
+    getInitialSelection() {
+        const myReactions = this.getMyReactions();
+        if (!myReactions) {
+            return null;
+        }
+        const { options } = this.props;
+        let selected = null;
+        for (const { key, content } of options) {
+            const reactionExists = myReactions.some(mxEvent => {
+                return mxEvent.getContent()["m.relates_to"].key === content;
+            });
+            if (reactionExists) {
+                if (selected) {
+                    // If there are multiple selected values (only expected to occur via
+                    // non-Riot clients), then act as if none are selected.
+                    return null;
+                }
+                selected = key;
+            }
+        }
+        return selected;
+    }
+
+    getMyReactions() {
+        const reactions = this.props.reactions;
+        if (!reactions) {
+            return null;
+        }
+        const userId = MatrixClientPeg.get().getUserId();
+        return reactions.getAnnotationsBySender()[userId];
+    }
+
     onOptionClick = (ev) => {
         const { key } = ev.target.dataset;
         this.toggleDimensionValue(key);
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index a4299b9853..7242fa9144 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -20,37 +20,24 @@ import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { isContentActionable } from '../../../utils/EventUtils';
 
-// TODO: Actually load reactions from the timeline
-// Since we don't yet load reactions, let's inject some dummy data for testing the UI
-// only. The UI assumes these are already sorted into the order we want to present,
-// presumably highest vote first.
-const SAMPLE_REACTIONS = {
-    "👍": 4,
-    "👎": 2,
-    "🙂": 1,
-};
-
 export default class ReactionsRow extends React.PureComponent {
     static propTypes = {
         // The event we're displaying reactions for
         mxEvent: PropTypes.object.isRequired,
+        // The Relations model from the JS SDK for reactions to `mxEvent`
+        reactions: PropTypes.object,
     }
 
     render() {
-        const { mxEvent } = this.props;
+        const { mxEvent, reactions } = this.props;
 
-        if (!isContentActionable(mxEvent)) {
-            return null;
-        }
-
-        const content = mxEvent.getContent();
-        // TODO: Remove this once we load real reactions
-        if (!content.body || content.body !== "reactions test") {
+        if (!reactions || !isContentActionable(mxEvent)) {
             return null;
         }
 
         const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
-        const items = Object.entries(SAMPLE_REACTIONS).map(([content, count]) => {
+        const items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
+            const count = events.length;
             return <ReactionsRowButton
                 key={content}
                 content={content}
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 59025bf431..d40dd5a77c 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -159,6 +159,9 @@ module.exports = withMatrixClient(React.createClass({
 
         // show twelve hour timestamps
         isTwelveHour: PropTypes.bool,
+
+        // helper function to access relations for an event
+        getRelationsForEvent: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -472,6 +475,17 @@ module.exports = withMatrixClient(React.createClass({
         return this.refs.replyThread;
     },
 
+    getReactions() {
+        if (
+            !SettingsStore.isFeatureEnabled("feature_reactions") ||
+            !this.props.getRelationsForEvent
+        ) {
+            return null;
+        }
+        const eventId = this.props.mxEvent.getId();
+        return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
+    },
+
     render: function() {
         const MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
         const SenderProfile = sdk.getComponent('messages.SenderProfile');
@@ -584,9 +598,11 @@ module.exports = withMatrixClient(React.createClass({
             }
         }
 
+        const reactions = this.getReactions();
         const MessageActionBar = sdk.getComponent('messages.MessageActionBar');
         const actionBar = <MessageActionBar
             mxEvent={this.props.mxEvent}
+            reactions={reactions}
             permalinkCreator={this.props.permalinkCreator}
             getTile={this.getTile}
             getReplyThread={this.getReplyThread}
@@ -630,11 +646,12 @@ module.exports = withMatrixClient(React.createClass({
                 <ToolTipButton helpText={keyRequestHelpText} />
             </div> : null;
 
-        let reactions;
+        let reactionsRow;
         if (SettingsStore.isFeatureEnabled("feature_reactions")) {
             const ReactionsRow = sdk.getComponent('messages.ReactionsRow');
-            reactions = <ReactionsRow
+            reactionsRow = <ReactionsRow
                 mxEvent={this.props.mxEvent}
+                reactions={reactions}
             />;
         }
 
@@ -750,7 +767,7 @@ module.exports = withMatrixClient(React.createClass({
                                            showUrlPreview={this.props.showUrlPreview}
                                            onHeightChanged={this.props.onHeightChanged} />
                             { keyRequestInfo }
-                            { reactions }
+                            { reactionsRow }
                             { actionBar }
                         </div>
                         {

From 6a59143ffb334a896b8e596f4ea34c967df59e31 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 9 May 2019 15:14:58 +0100
Subject: [PATCH 06/34] Update reactions when redacted

This updates the reaction state in the reaction row and action bar when a
reaction is redacted.

Part of https://github.com/vector-im/riot-web/issues/9574
---
 .../views/messages/ReactionDimension.js       | 32 ++++++++++++++++--
 src/components/views/messages/ReactionsRow.js | 33 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index 675d99e187..015e69d6b6 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -32,11 +32,36 @@ export default class ReactionDimension extends React.PureComponent {
         super(props);
 
         this.state = {
-            selected: this.getInitialSelection(),
+            selected: this.getSelection(),
         };
+
+        if (props.reactions) {
+            props.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
     }
 
-    getInitialSelection() {
+    componentWillReceiveProps(nextProps) {
+        if (this.props.reactions !== nextProps.reactions) {
+            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.redaction",
+                this.onReactionsChange,
+            );
+        }
+    }
+
+    onReactionsChange = () => {
+        this.setState({
+            selected: this.getSelection(),
+        });
+    }
+
+    getSelection() {
         const myReactions = this.getMyReactions();
         if (!myReactions) {
             return null;
@@ -45,6 +70,9 @@ export default class ReactionDimension extends React.PureComponent {
         let selected = null;
         for (const { key, content } of options) {
             const reactionExists = myReactions.some(mxEvent => {
+                if (mxEvent.isRedacted()) {
+                    return false;
+                }
                 return mxEvent.getContent()["m.relates_to"].key === content;
             });
             if (reactionExists) {
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index 7242fa9144..a58990a8a5 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -28,6 +28,34 @@ export default class ReactionsRow extends React.PureComponent {
         reactions: PropTypes.object,
     }
 
+    constructor(props) {
+        super(props);
+
+        if (props.reactions) {
+            props.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (this.props.reactions !== nextProps.reactions) {
+            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.redaction",
+                this.onReactionsChange,
+            );
+        }
+    }
+
+    onReactionsChange = () => {
+        // TODO: Call `onHeightChanged` as needed
+        this.forceUpdate();
+    }
+
     render() {
         const { mxEvent, reactions } = this.props;
 
@@ -37,7 +65,10 @@ export default class ReactionsRow extends React.PureComponent {
 
         const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
         const items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
-            const count = events.length;
+            const count = events.size;
+            if (!count) {
+                return null;
+            }
             return <ReactionsRowButton
                 key={content}
                 content={content}

From ce35741030704d557d73eefe576d4c9a39ff3ea2 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 9 May 2019 15:39:00 +0100
Subject: [PATCH 07/34] Remove redundant `key` vs. `content` in
 `ReactionDimension`

This simplifies `ReactionDimension` by using the emoji string everywhere instead
of keeping a separate text string as well. It should improve readability as
well, as the reaction events also have a field `key` which was the emoji
content, which was easy to confuse.
---
 .../views/messages/MessageActionBar.js        | 24 ++-----------------
 .../views/messages/ReactionDimension.js       | 21 ++++++++--------
 2 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index d2ac9adcf0..903abfc2d2 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -102,19 +102,9 @@ export default class MessageActionBar extends React.PureComponent {
         }
 
         const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
-        const options = [
-            {
-                key: "agree",
-                content: "👍",
-            },
-            {
-                key: "disagree",
-                content: "👎",
-            },
-        ];
         return <ReactionDimension
             title={_t("Agree or Disagree")}
-            options={options}
+            options={["👍", "👎"]}
             reactions={this.props.reactions}
         />;
     }
@@ -125,19 +115,9 @@ export default class MessageActionBar extends React.PureComponent {
         }
 
         const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
-        const options = [
-            {
-                key: "like",
-                content: "🙂",
-            },
-            {
-                key: "dislike",
-                content: "😔",
-            },
-        ];
         return <ReactionDimension
             title={_t("Like or Dislike")}
-            options={options}
+            options={["🙂", "😔"]}
             reactions={this.props.reactions}
         />;
     }
diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index 015e69d6b6..f7b43a418c 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -22,6 +22,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export default class ReactionDimension extends React.PureComponent {
     static propTypes = {
+        // Array of strings containing the emoji for each option
         options: PropTypes.array.isRequired,
         title: PropTypes.string,
         // The Relations model from the JS SDK for reactions
@@ -68,12 +69,12 @@ export default class ReactionDimension extends React.PureComponent {
         }
         const { options } = this.props;
         let selected = null;
-        for (const { key, content } of options) {
+        for (const option of options) {
             const reactionExists = myReactions.some(mxEvent => {
                 if (mxEvent.isRedacted()) {
                     return false;
                 }
-                return mxEvent.getContent()["m.relates_to"].key === content;
+                return mxEvent.getContent()["m.relates_to"].key === option;
             });
             if (reactionExists) {
                 if (selected) {
@@ -81,7 +82,7 @@ export default class ReactionDimension extends React.PureComponent {
                     // non-Riot clients), then act as if none are selected.
                     return null;
                 }
-                selected = key;
+                selected = option;
             }
         }
         return selected;
@@ -98,12 +99,12 @@ export default class ReactionDimension extends React.PureComponent {
 
     onOptionClick = (ev) => {
         const { key } = ev.target.dataset;
-        this.toggleDimensionValue(key);
+        this.toggleDimension(key);
     }
 
-    toggleDimensionValue(value) {
+    toggleDimension(key) {
         const state = this.state.selected;
-        const newState = state !== value ? value : null;
+        const newState = state !== key ? key : null;
         this.setState({
             selected: newState,
         });
@@ -115,16 +116,16 @@ export default class ReactionDimension extends React.PureComponent {
         const { options } = this.props;
 
         const items = options.map(option => {
-            const disabled = selected && selected !== option.key;
+            const disabled = selected && selected !== option;
             const classes = classNames({
                 mx_ReactionDimension_disabled: disabled,
             });
-            return <span key={option.key}
-                data-key={option.key}
+            return <span key={option}
+                data-key={option}
                 className={classes}
                 onClick={this.onOptionClick}
             >
-                {option.content}
+                {option}
             </span>;
         });
 

From 37d2f60045457e1d35f482b6fb0f4012a4d45e06 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 9 May 2019 17:59:51 +0100
Subject: [PATCH 08/34] Listen for reaction collections when they are created

The `EventTile` for events without reactions now use `Event.relationsCreated` to
listen for a future time where they come in to being.
---
 src/components/views/rooms/EventTile.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index d40dd5a77c..5a5aaeb098 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -193,9 +193,12 @@ module.exports = withMatrixClient(React.createClass({
 
     componentDidMount: function() {
         this._suppressReadReceiptAnimation = false;
-        this.props.matrixClient.on("deviceVerificationChanged",
-                                 this.onDeviceVerificationChanged);
+        const client = this.props.matrixClient;
+        client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
         this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
+        if (SettingsStore.isFeatureEnabled("feature_reactions")) {
+            this.props.mxEvent.on("Event.relationsCreated", this._onReactionsCreated);
+        }
     },
 
     componentWillReceiveProps: function(nextProps) {
@@ -218,6 +221,9 @@ module.exports = withMatrixClient(React.createClass({
         const client = this.props.matrixClient;
         client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
+        if (SettingsStore.isFeatureEnabled("feature_reactions")) {
+            this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+        }
     },
 
     /** called when the event is decrypted after we show it.
@@ -486,6 +492,14 @@ module.exports = withMatrixClient(React.createClass({
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     },
 
+    _onReactionsCreated(relationType, eventType) {
+        if (relationType !== "m.annotation" || eventType !== "m.reaction") {
+            return;
+        }
+        this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
+        this.forceUpdate();
+    },
+
     render: function() {
         const MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
         const SenderProfile = sdk.getComponent('messages.SenderProfile');

From 39bd0d8bb3c357ba15485ad98862a8339a3cc570 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 9 May 2019 18:37:52 +0100
Subject: [PATCH 09/34] Listen for additional reactions in existing collection

The various reaction UI bits will now listen for `Reactions.add` for new
reactions just like with redactions.

Part of https://github.com/vector-im/riot-web/issues/9572
---
 src/components/views/messages/ReactionDimension.js | 6 ++++++
 src/components/views/messages/ReactionsRow.js      | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index f7b43a418c..13d43804ac 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -37,18 +37,24 @@ export default class ReactionDimension extends React.PureComponent {
         };
 
         if (props.reactions) {
+            props.reactions.on("Relations.add", this.onReactionsChange);
             props.reactions.on("Relations.redaction", this.onReactionsChange);
         }
     }
 
     componentWillReceiveProps(nextProps) {
         if (this.props.reactions !== nextProps.reactions) {
+            nextProps.reactions.on("Relations.add", this.onReactionsChange);
             nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
         }
     }
 
     componentWillUnmount() {
         if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.add",
+                this.onReactionsChange,
+            );
             this.props.reactions.removeListener(
                 "Relations.redaction",
                 this.onReactionsChange,
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index a58990a8a5..c49f5cba75 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -32,18 +32,24 @@ export default class ReactionsRow extends React.PureComponent {
         super(props);
 
         if (props.reactions) {
+            props.reactions.on("Relations.add", this.onReactionsChange);
             props.reactions.on("Relations.redaction", this.onReactionsChange);
         }
     }
 
     componentWillReceiveProps(nextProps) {
         if (this.props.reactions !== nextProps.reactions) {
+            nextProps.reactions.on("Relations.add", this.onReactionsChange);
             nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
         }
     }
 
     componentWillUnmount() {
         if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.add",
+                this.onReactionsChange,
+            );
             this.props.reactions.removeListener(
                 "Relations.redaction",
                 this.onReactionsChange,

From dc4fccd291a4e91874b767585d2f35b00a40e832 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 9 May 2019 19:11:40 +0100
Subject: [PATCH 10/34] Send and redact reaction events

This updates both the reaction row and action bar UIs to send and redact
reaction events as appropriate based on user interactions.

Fixes https://github.com/vector-im/riot-web/issues/9574
Fixes https://github.com/vector-im/riot-web/issues/9572
---
 .../views/messages/MessageActionBar.js        |  2 +
 .../views/messages/ReactionDimension.js       | 66 ++++++++++++-------
 src/components/views/messages/ReactionsRow.js | 26 ++++++++
 .../views/messages/ReactionsRowButton.js      | 48 +++++++-------
 4 files changed, 95 insertions(+), 47 deletions(-)

diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 903abfc2d2..52630d7b0e 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -106,6 +106,7 @@ export default class MessageActionBar extends React.PureComponent {
             title={_t("Agree or Disagree")}
             options={["👍", "👎"]}
             reactions={this.props.reactions}
+            mxEvent={this.props.mxEvent}
         />;
     }
 
@@ -119,6 +120,7 @@ export default class MessageActionBar extends React.PureComponent {
             title={_t("Like or Dislike")}
             options={["🙂", "😔"]}
             reactions={this.props.reactions}
+            mxEvent={this.props.mxEvent}
         />;
     }
 
diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index 13d43804ac..6e8b8ddc99 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -22,6 +22,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export default class ReactionDimension extends React.PureComponent {
     static propTypes = {
+        mxEvent: PropTypes.object.isRequired,
         // Array of strings containing the emoji for each option
         options: PropTypes.array.isRequired,
         title: PropTypes.string,
@@ -32,9 +33,7 @@ export default class ReactionDimension extends React.PureComponent {
     constructor(props) {
         super(props);
 
-        this.state = {
-            selected: this.getSelection(),
-        };
+        this.state = this.getSelection();
 
         if (props.reactions) {
             props.reactions.on("Relations.add", this.onReactionsChange);
@@ -63,35 +62,42 @@ export default class ReactionDimension extends React.PureComponent {
     }
 
     onReactionsChange = () => {
-        this.setState({
-            selected: this.getSelection(),
-        });
+        this.setState(this.getSelection());
     }
 
     getSelection() {
         const myReactions = this.getMyReactions();
         if (!myReactions) {
-            return null;
+            return {
+                selectedOption: null,
+                selectedReactionEvent: null,
+            };
         }
         const { options } = this.props;
-        let selected = null;
+        let selectedOption = null;
+        let selectedReactionEvent = null;
         for (const option of options) {
-            const reactionExists = myReactions.some(mxEvent => {
+            const reactionForOption = myReactions.find(mxEvent => {
                 if (mxEvent.isRedacted()) {
                     return false;
                 }
                 return mxEvent.getContent()["m.relates_to"].key === option;
             });
-            if (reactionExists) {
-                if (selected) {
-                    // If there are multiple selected values (only expected to occur via
-                    // non-Riot clients), then act as if none are selected.
-                    return null;
-                }
-                selected = option;
+            if (!reactionForOption) {
+                continue;
             }
+            if (selectedOption) {
+                // If there are multiple selected values (only expected to occur via
+                // non-Riot clients), then act as if none are selected.
+                return {
+                    selectedOption: null,
+                    selectedReactionEvent: null,
+                };
+            }
+            selectedOption = option;
+            selectedReactionEvent = reactionForOption;
         }
-        return selected;
+        return { selectedOption, selectedReactionEvent };
     }
 
     getMyReactions() {
@@ -109,20 +115,34 @@ export default class ReactionDimension extends React.PureComponent {
     }
 
     toggleDimension(key) {
-        const state = this.state.selected;
-        const newState = state !== key ? key : null;
+        const { selectedOption, selectedReactionEvent } = this.state;
+        const newSelectedOption = selectedOption !== key ? key : null;
         this.setState({
-            selected: newState,
+            selectedOption: newSelectedOption,
         });
-        // TODO: Send the reaction event
+        if (selectedReactionEvent) {
+            MatrixClientPeg.get().redactEvent(
+                this.props.mxEvent.getRoomId(),
+                selectedReactionEvent.getId(),
+            );
+        }
+        if (newSelectedOption) {
+            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), "m.reaction", {
+                "m.relates_to": {
+                    "rel_type": "m.annotation",
+                    "event_id": this.props.mxEvent.getId(),
+                    "key": newSelectedOption,
+                },
+            });
+        }
     }
 
     render() {
-        const { selected } = this.state;
+        const { selectedOption } = this.state;
         const { options } = this.props;
 
         const items = options.map(option => {
-            const disabled = selected && selected !== option;
+            const disabled = selectedOption && selectedOption !== option;
             const classes = classNames({
                 mx_ReactionDimension_disabled: disabled,
             });
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index c49f5cba75..3172b8b44c 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import { isContentActionable } from '../../../utils/EventUtils';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export default class ReactionsRow extends React.PureComponent {
     static propTypes = {
@@ -35,6 +36,10 @@ export default class ReactionsRow extends React.PureComponent {
             props.reactions.on("Relations.add", this.onReactionsChange);
             props.reactions.on("Relations.redaction", this.onReactionsChange);
         }
+
+        this.state = {
+            myReactions: this.getMyReactions(),
+        };
     }
 
     componentWillReceiveProps(nextProps) {
@@ -59,11 +64,24 @@ export default class ReactionsRow extends React.PureComponent {
 
     onReactionsChange = () => {
         // TODO: Call `onHeightChanged` as needed
+        this.setState({
+            myReactions: this.getMyReactions(),
+        });
         this.forceUpdate();
     }
 
+    getMyReactions() {
+        const reactions = this.props.reactions;
+        if (!reactions) {
+            return null;
+        }
+        const userId = MatrixClientPeg.get().getUserId();
+        return reactions.getAnnotationsBySender()[userId];
+    }
+
     render() {
         const { mxEvent, reactions } = this.props;
+        const { myReactions } = this.state;
 
         if (!reactions || !isContentActionable(mxEvent)) {
             return null;
@@ -75,10 +93,18 @@ export default class ReactionsRow extends React.PureComponent {
             if (!count) {
                 return null;
             }
+            const myReactionEvent = myReactions && myReactions.find(mxEvent => {
+                if (mxEvent.isRedacted()) {
+                    return false;
+                }
+                return mxEvent.getContent()["m.relates_to"].key === content;
+            });
             return <ReactionsRowButton
                 key={content}
                 content={content}
                 count={count}
+                mxEvent={mxEvent}
+                myReactionEvent={myReactionEvent}
             />;
         });
 
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 985479a237..721147cdb8 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -18,48 +18,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
 export default class ReactionsRowButton extends React.PureComponent {
     static propTypes = {
+        // The event we're displaying reactions for
+        mxEvent: PropTypes.object.isRequired,
         content: PropTypes.string.isRequired,
         count: PropTypes.number.isRequired,
-    }
-
-    constructor(props) {
-        super(props);
-
-        // TODO: This should be derived from actual reactions you may have sent
-        // once we have some API to read them.
-        this.state = {
-            selected: false,
-        };
+        // A possible Matrix event if the current user has voted for this type
+        myReactionEvent: PropTypes.object,
     }
 
     onClick = (ev) => {
-        const state = this.state.selected;
-        this.setState({
-            selected: !state,
-        });
-        // TODO: Send the reaction event
+        const { mxEvent, myReactionEvent, content } = this.props;
+        if (myReactionEvent) {
+            MatrixClientPeg.get().redactEvent(
+                mxEvent.getRoomId(),
+                myReactionEvent.getId(),
+            );
+        } else {
+            MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", {
+                "m.relates_to": {
+                    "rel_type": "m.annotation",
+                    "event_id": mxEvent.getId(),
+                    "key": content,
+                },
+            });
+        }
     };
 
     render() {
-        const { content, count } = this.props;
-        const { selected } = this.state;
+        const { content, count, myReactionEvent } = this.props;
 
         const classes = classNames({
             mx_ReactionsRowButton: true,
-            mx_ReactionsRowButton_selected: selected,
+            mx_ReactionsRowButton_selected: !!myReactionEvent,
         });
 
-        let adjustedCount = count;
-        if (selected) {
-            adjustedCount++;
-        }
-
         return <span className={classes}
             onClick={this.onClick}
         >
-            {content} {adjustedCount}
+            {content} {count}
         </span>;
     }
 }

From 33513a95d74cf8742a90796bbe80a21ff5c5013d Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 10 May 2019 17:59:17 +0100
Subject: [PATCH 11/34] Change to `componentDidUpdate` to process first
 reaction

This changes to "did update" and also calls the reaction change handler to
ensure that we update the state of my reactions (to know which were sent by
you).
---
 src/components/views/messages/ReactionDimension.js | 9 +++++----
 src/components/views/messages/ReactionsRow.js      | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/views/messages/ReactionDimension.js b/src/components/views/messages/ReactionDimension.js
index 6e8b8ddc99..a0cf5a86ec 100644
--- a/src/components/views/messages/ReactionDimension.js
+++ b/src/components/views/messages/ReactionDimension.js
@@ -41,10 +41,11 @@ export default class ReactionDimension extends React.PureComponent {
         }
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.props.reactions !== nextProps.reactions) {
-            nextProps.reactions.on("Relations.add", this.onReactionsChange);
-            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+    componentDidUpdate(prevProps) {
+        if (prevProps.reactions !== this.props.reactions) {
+            this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
+            this.onReactionsChange();
         }
     }
 
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index 3172b8b44c..dad604a4d5 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -42,10 +42,11 @@ export default class ReactionsRow extends React.PureComponent {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.props.reactions !== nextProps.reactions) {
-            nextProps.reactions.on("Relations.add", this.onReactionsChange);
-            nextProps.reactions.on("Relations.redaction", this.onReactionsChange);
+    componentDidUpdate(prevProps) {
+        if (prevProps.reactions !== this.props.reactions) {
+            this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
+            this.onReactionsChange();
         }
     }
 

From 6a3708d51b7a25ce3249a19d65fd14b765c0d4c0 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 10 May 2019 18:09:32 +0100
Subject: [PATCH 12/34] Disable select for reaction buttons

---
 res/css/views/messages/_ReactionsRowButton.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 49e3930979..3c6d019b30 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -24,6 +24,7 @@ limitations under the License.
     border-radius: 10px;
     background-color: $reaction-row-button-bg-color;
     cursor: pointer;
+    user-select: none;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;

From 4ffd826e76be3ee1bcd07aa010bc0f9f6c75b7c1 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Sun, 12 May 2019 22:53:06 -0600
Subject: [PATCH 13/34] Flip logic for unsafe->safe

---
 src/components/views/auth/RegistrationForm.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index eb77e125af..b4638bf8f4 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -76,7 +76,7 @@ module.exports = React.createClass({
             password: "",
             passwordConfirm: "",
             passwordComplexity: null,
-            passwordUnsafe: false,
+            passwordSafe: false,
         };
     },
 
@@ -271,19 +271,19 @@ module.exports = React.createClass({
                     }
                     const { scorePassword } = await import('../../../utils/PasswordScorer');
                     const complexity = scorePassword(value);
-                    const unsafe = complexity.score < PASSWORD_MIN_SCORE;
+                    const safe = complexity.score >= PASSWORD_MIN_SCORE;
                     const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
                     this.setState({
                         passwordComplexity: complexity,
-                        passwordUnsafe: unsafe,
+                        passwordSafe: safe,
                     });
-                    return allowUnsafe || !unsafe;
+                    return allowUnsafe || safe;
                 },
                 valid: function() {
                     // Unsafe passwords that are valid are only possible through a
                     // configuration flag. We'll print some helper text to signal
                     // to the user that their password is allowed, but unsafe.
-                    if (this.state.passwordUnsafe) {
+                    if (!this.state.passwordSafe) {
                         return _t("Password is allowed, but unsafe");
                     }
                     return _t("Nice, strong password!");

From 34990d1c8946008f1a012d1820a18dd3617fa60f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 13 May 2019 14:17:09 +0100
Subject: [PATCH 14/34] Fix bug where email was not required where it shouldn't
 have been

See comment!

Fixes https://github.com/vector-im/riot-web/issues/9681
---
 src/components/views/auth/RegistrationForm.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index 7c083ea270..bef0b9e019 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -150,7 +150,11 @@ module.exports = React.createClass({
             if (!field) {
                 continue;
             }
-            field.validate({ allowEmpty: false });
+            // We must wait for these validations to finish before queueing
+            // up the setState below so our setState gies in the queue after
+            // all the setStates from these validate calls (that's how we
+            // know they've finished).
+            await field.validate({ allowEmpty: false });
         }
 
         // Validation and state updates are async, so we need to wait for them to complete

From 59cefbaa442377a59f53ea8f401de5709decde43 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Mon, 13 May 2019 14:24:56 +0100
Subject: [PATCH 15/34] Typo

Co-Authored-By: J. Ryan Stinnett <jryans@gmail.com>
---
 src/components/views/auth/RegistrationForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index bef0b9e019..654387e196 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -151,7 +151,7 @@ module.exports = React.createClass({
                 continue;
             }
             // We must wait for these validations to finish before queueing
-            // up the setState below so our setState gies in the queue after
+            // up the setState below so our setState goes in the queue after
             // all the setStates from these validate calls (that's how we
             // know they've finished).
             await field.validate({ allowEmpty: false });

From 24209905e85b1ba8c713cca425f9b18e2e0cb641 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 13 May 2019 14:41:49 +0100
Subject: [PATCH 16/34] Test settings later for performance

---
 src/components/views/rooms/EventTile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 5a5aaeb098..b71b28c635 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -483,8 +483,8 @@ module.exports = withMatrixClient(React.createClass({
 
     getReactions() {
         if (
-            !SettingsStore.isFeatureEnabled("feature_reactions") ||
-            !this.props.getRelationsForEvent
+            !this.props.getRelationsForEvent ||
+            !SettingsStore.isFeatureEnabled("feature_reactions")
         ) {
             return null;
         }

From af9fdbaeebd0dff2465a1a4f66f9bb985a8c5a62 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 13 May 2019 14:52:55 +0100
Subject: [PATCH 17/34] Rework `reactionsCreated` in `EventTile` to use state

This changes to use component state instead of `forceUpdate`, so that it's more
obvious why an update is happening here.
---
 src/components/views/rooms/EventTile.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index b71b28c635..1706019e94 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -182,6 +182,8 @@ module.exports = withMatrixClient(React.createClass({
             verified: null,
             // Whether onRequestKeysClick has been called since mounting.
             previouslyRequestedKeys: false,
+            // The Relations model from the JS SDK for reactions to `mxEvent`
+            reactions: this.getReactions(),
         };
     },
 
@@ -497,7 +499,9 @@ module.exports = withMatrixClient(React.createClass({
             return;
         }
         this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
-        this.forceUpdate();
+        this.setState({
+            reactions: this.getReactions(),
+        });
     },
 
     render: function() {
@@ -612,11 +616,10 @@ module.exports = withMatrixClient(React.createClass({
             }
         }
 
-        const reactions = this.getReactions();
         const MessageActionBar = sdk.getComponent('messages.MessageActionBar');
         const actionBar = <MessageActionBar
             mxEvent={this.props.mxEvent}
-            reactions={reactions}
+            reactions={this.state.reactions}
             permalinkCreator={this.props.permalinkCreator}
             getTile={this.getTile}
             getReplyThread={this.getReplyThread}
@@ -665,7 +668,7 @@ module.exports = withMatrixClient(React.createClass({
             const ReactionsRow = sdk.getComponent('messages.ReactionsRow');
             reactionsRow = <ReactionsRow
                 mxEvent={this.props.mxEvent}
-                reactions={reactions}
+                reactions={this.state.reactions}
             />;
         }
 

From e22bd456089ad76efd76f50b960ba47b1dadac60 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 13 May 2019 15:00:43 +0100
Subject: [PATCH 18/34] Clarify `ReactionsRow` forceUpdate usage

---
 src/components/views/messages/ReactionsRow.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index dad604a4d5..ffb81e1a38 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -68,6 +68,9 @@ export default class ReactionsRow extends React.PureComponent {
         this.setState({
             myReactions: this.getMyReactions(),
         });
+        // Using `forceUpdate` for the moment, since we know the overall set of reactions
+        // has changed (this is triggered by events for that purpose only) and
+        // `PureComponent`s shallow state / props compare would otherwise filter this out.
         this.forceUpdate();
     }
 

From 9d9a41b263a12da7b456c8f85224c6defdd3fd8a Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 13 May 2019 18:00:52 +0100
Subject: [PATCH 19/34] Save `content.info` as a local for readability

---
 src/components/views/messages/MImageBody.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 9fd42fb31d..cb12259c9b 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -198,9 +198,11 @@ export default class MImageBody extends React.Component {
             // so we'll need to download the original image for this to work
             // well for now. First, let's try a few cases that let us avoid
             // downloading the original:
-            if (pixelRatio === 1.0 ||
-                    (!content.info || !content.info.w ||
-                     !content.info.h || !content.info.size)) {
+            const info = content.info;
+            if (
+                pixelRatio === 1.0 ||
+                (!info || !info.w || !info.h || !info.size)
+            ) {
                 // always thumbnail. it may look a bit worse, but it'll save bandwidth.
                 // which is probably desirable on a lo-dpi device anyway.
                 return this.context.matrixClient.mxcUrlToHttp(content.url, thumbWidth, thumbHeight);
@@ -215,10 +217,10 @@ export default class MImageBody extends React.Component {
                 // timeline (e.g. >1MB).
 
                 const isLargerThanThumbnail = (
-                    content.info.w > thumbWidth ||
-                    content.info.h > thumbHeight
+                    info.w > thumbWidth ||
+                    info.h > thumbHeight
                 );
-                const isLargeFileSize = content.info.size > 1*1024*1024;
+                const isLargeFileSize = info.size > 1*1024*1024;
 
                 if (isLargeFileSize && isLargerThanThumbnail) {
                     // image is too large physically and bytewise to clutter our timeline so

From 7881369b985119866737f50d64b4f622c2bdcabf Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 13 May 2019 18:28:57 +0100
Subject: [PATCH 20/34] Always thumbnail for GIFs

When displaying a GIF, we always want to thumbnail so that we can properly
respect the user's GIF autoplay setting (which relies on thumbnailing to produce
the static preview image).

Fixes https://github.com/vector-im/riot-web/issues/9658
---
 src/components/views/messages/MImageBody.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index cb12259c9b..4b5e1c20fa 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -200,6 +200,7 @@ export default class MImageBody extends React.Component {
             // downloading the original:
             const info = content.info;
             if (
+                this._isGif() ||
                 pixelRatio === 1.0 ||
                 (!info || !info.w || !info.h || !info.size)
             ) {

From 1584ab42c27cb95e1b142d811c47233348c8db0e Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 13 May 2019 14:12:58 -0600
Subject: [PATCH 21/34] Support a backup room ID in PermalinkCreator

In the case of room upgrades, it is possible the client is trying to render the room create event, but the user has never been in the old room. This results in an error because the PermalinkCreator cannot possibly figure out a room ID.

Instead, we'll feed the creator an alternate room ID to try if the room object can't be provided.

Fixes https://github.com/vector-im/riot-web/issues/9636
---
 src/components/views/messages/RoomCreate.js |  2 +-
 src/matrix-to.js                            | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/views/messages/RoomCreate.js b/src/components/views/messages/RoomCreate.js
index f9dc3df2dc..95254323fa 100644
--- a/src/components/views/messages/RoomCreate.js
+++ b/src/components/views/messages/RoomCreate.js
@@ -49,7 +49,7 @@ module.exports = React.createClass({
             return <div />; // We should never have been instaniated in this case
         }
         const prevRoom = MatrixClientPeg.get().getRoom(predecessor['room_id']);
-        const permalinkCreator = new RoomPermalinkCreator(prevRoom);
+        const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor['room_id']);
         permalinkCreator.load();
         const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
         return <div className="mx_CreateEvent">
diff --git a/src/matrix-to.js b/src/matrix-to.js
index a198bb422e..14467cb4c5 100644
--- a/src/matrix-to.js
+++ b/src/matrix-to.js
@@ -70,8 +70,12 @@ const MAX_SERVER_CANDIDATES = 3;
 // the list and magically have the link work.
 
 export class RoomPermalinkCreator {
-    constructor(room) {
+    // We support being given a roomId as a fallback in the event the `room` object
+    // doesn't exist or is not healthy for us to rely on. For example, loading a
+    // permalink to a room which the MatrixClient doesn't know about.
+    constructor(room, roomId=null) {
         this._room = room;
+        this._roomId = room ? room.roomId : roomId;
         this._highestPlUserId = null;
         this._populationMap = null;
         this._bannedHostsRegexps = null;
@@ -79,6 +83,10 @@ export class RoomPermalinkCreator {
         this._serverCandidates = null;
         this._started = false;
 
+        if (!this._roomId) {
+            throw new Error("Failed to resolve a roomId for the permalink creator to use");
+        }
+
         this.onMembership = this.onMembership.bind(this);
         this.onRoomState = this.onRoomState.bind(this);
     }
@@ -116,13 +124,13 @@ export class RoomPermalinkCreator {
     }
 
     forEvent(eventId) {
-        const roomId = this._room.roomId;
+        const roomId = this._roomId;
         const permalinkBase = `${baseUrl}/#/${roomId}/${eventId}`;
         return `${permalinkBase}${encodeServerCandidates(this._serverCandidates)}`;
     }
 
     forRoom() {
-        const roomId = this._room.roomId;
+        const roomId = this._roomId;
         const permalinkBase = `${baseUrl}/#/${roomId}`;
         return `${permalinkBase}${encodeServerCandidates(this._serverCandidates)}`;
     }
@@ -246,7 +254,6 @@ export class RoomPermalinkCreator {
     }
 }
 
-
 export function makeUserPermalink(userId) {
     return `${baseUrl}/#/${userId}`;
 }

From f86ccae4a0f3c6b5ade3ea861f1b07d2c2484ce7 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 13 May 2019 14:31:40 -0600
Subject: [PATCH 22/34] Give all the matrix.to tests a room ID to abuse

---
 test/matrix-to-test.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/test/matrix-to-test.js b/test/matrix-to-test.js
index 45b5f74c5e..33947703ef 100644
--- a/test/matrix-to-test.js
+++ b/test/matrix-to-test.js
@@ -74,7 +74,7 @@ describe('matrix-to', function() {
     });
 
     it('should pick no candidate servers when the room has no members', function() {
-        const room = mockRoom(null, []);
+        const room = mockRoom("!fake:example.org", []);
         const creator = new RoomPermalinkCreator(room);
         creator.load();
         expect(creator._serverCandidates).toBeTruthy();
@@ -82,7 +82,7 @@ describe('matrix-to', function() {
     });
 
     it('should pick a candidate server for the highest power level user in the room', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:pl_50",
                 powerLevel: 50,
@@ -109,7 +109,7 @@ describe('matrix-to', function() {
             userId: "@alice:pl_95",
             powerLevel: 95,
         };
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:pl_50",
                 powerLevel: 50,
@@ -132,7 +132,7 @@ describe('matrix-to', function() {
     });
 
     it('should pick candidate servers based on user population', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:first",
                 powerLevel: 0,
@@ -168,7 +168,7 @@ describe('matrix-to', function() {
     });
 
     it('should pick prefer candidate servers with higher power levels', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:first",
                 powerLevel: 100,
@@ -195,7 +195,7 @@ describe('matrix-to', function() {
     });
 
     it('should pick a maximum of 3 candidate servers', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:alpha",
                 powerLevel: 100,
@@ -224,7 +224,7 @@ describe('matrix-to', function() {
     });
 
     it('should not consider IPv4 hosts', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:127.0.0.1",
                 powerLevel: 100,
@@ -237,7 +237,7 @@ describe('matrix-to', function() {
     });
 
     it('should not consider IPv6 hosts', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:[::1]",
                 powerLevel: 100,
@@ -250,7 +250,7 @@ describe('matrix-to', function() {
     });
 
     it('should not consider IPv4 hostnames with ports', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:127.0.0.1:8448",
                 powerLevel: 100,
@@ -263,7 +263,7 @@ describe('matrix-to', function() {
     });
 
     it('should not consider IPv6 hostnames with ports', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:[::1]:8448",
                 powerLevel: 100,
@@ -276,7 +276,7 @@ describe('matrix-to', function() {
     });
 
     it('should work with hostnames with ports', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:example.org:8448",
                 powerLevel: 100,
@@ -291,7 +291,7 @@ describe('matrix-to', function() {
     });
 
     it('should not consider servers explicitly denied by ACLs', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:evilcorp.com",
                 powerLevel: 100,
@@ -311,7 +311,7 @@ describe('matrix-to', function() {
     });
 
     it('should not consider servers not allowed by ACLs', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:evilcorp.com",
                 powerLevel: 100,
@@ -331,7 +331,7 @@ describe('matrix-to', function() {
     });
 
     it('should consider servers not explicitly banned by ACLs', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:evilcorp.com",
                 powerLevel: 100,
@@ -352,7 +352,7 @@ describe('matrix-to', function() {
     });
 
     it('should consider servers not disallowed by ACLs', function() {
-        const room = mockRoom(null, [
+        const room = mockRoom("!fake:example.org", [
             {
                 userId: "@alice:evilcorp.com",
                 powerLevel: 100,

From a0ecd89c94a4269d81ff2b163a82b9f767e94769 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 11:44:00 +0100
Subject: [PATCH 23/34] Fix email registration: pt. 1

We look to see if there's already a user logged in and if there is,
restore that session instead of logging the user in as their new
account. We still set this 'is_registered' flag though, even though
in that case it's not a newly registered account that's being restored,
so don't set in that case.
---
 src/components/structures/MatrixChat.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 277985ba1d..49ee1ca872 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1710,9 +1710,6 @@ export default React.createClass({
 
     // returns a promise which resolves to the new MatrixClient
     onRegistered: function(credentials) {
-        // XXX: This should be in state or ideally store(s) because we risk not
-        //      rendering the most up-to-date view of state otherwise.
-        this._is_registered = true;
         if (this.state.register_session_id) {
             // The user came in through an email validation link. To avoid overwriting
             // their session, check to make sure the session isn't someone else.
@@ -1748,6 +1745,9 @@ export default React.createClass({
                 return MatrixClientPeg.get();
             }
         }
+        // XXX: This should be in state or ideally store(s) because we risk not
+        //      rendering the most up-to-date view of state otherwise.
+        this._is_registered = true;
         return Lifecycle.setLoggedIn(credentials);
     },
 

From c11d26d809ef42b37973db874f9408fd78a19479 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 11:59:38 +0100
Subject: [PATCH 24/34] Fix email registration, pt. 2

Regressed in https://github.com/matrix-org/matrix-react-sdk/pull/2768
where we check for an existing stored account first and restore that
instead if it exist, telling the user. We usually make a guest account
when the user first hits the page though, so this just restored this
guest account.

Don't restore the account if it's just a guest account (which, as per
comment, is not perfect, but is definitely better than the current
behaviour).

Fixes https://github.com/vector-im/riot-web/issues/9581
---
 src/Lifecycle.js                        | 29 ++++++++++++++++---------
 src/components/structures/MatrixChat.js |  8 +++++--
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 527394da4d..ca4c7c48f8 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -126,6 +126,15 @@ export function getStoredSessionOwner() {
     return hsUrl && userId && accessToken ? userId : null;
 }
 
+/**
+ * @returns {bool} True if the stored session is for a guest user or false if it is
+ *     for a real user. If there is no stored session, return null.
+ */
+export function getStoredSessionIsGuest() {
+    const {hsUrl, isUrl, accessToken, userId, deviceId, isGuest} = _getLocalStorageSessionVars();
+    return hsUrl && userId && accessToken ? isGuest : null;
+}
+
 /**
  * @param {Object} queryParams    string->string map of the
  *     query-parameters extracted from the real query-string of the starting
@@ -235,7 +244,15 @@ function _getLocalStorageSessionVars() {
     const userId = localStorage.getItem("mx_user_id");
     const deviceId = localStorage.getItem("mx_device_id");
 
-    return {hsUrl, isUrl, accessToken, userId, deviceId};
+    let isGuest;
+    if (localStorage.getItem("mx_is_guest") !== null) {
+        isGuest = localStorage.getItem("mx_is_guest") === "true";
+    } else {
+        // legacy key name
+        isGuest = localStorage.getItem("matrix-is-guest") === "true";
+    }
+
+    return {hsUrl, isUrl, accessToken, userId, deviceId, isGuest};
 }
 
 // returns a promise which resolves to true if a session is found in
@@ -253,15 +270,7 @@ async function _restoreFromLocalStorage() {
         return false;
     }
 
-    const {hsUrl, isUrl, accessToken, userId, deviceId} = _getLocalStorageSessionVars();
-
-    let isGuest;
-    if (localStorage.getItem("mx_is_guest") !== null) {
-        isGuest = localStorage.getItem("mx_is_guest") === "true";
-    } else {
-        // legacy key name
-        isGuest = localStorage.getItem("matrix-is-guest") === "true";
-    }
+    const {hsUrl, isUrl, accessToken, userId, deviceId, isGuest} = _getLocalStorageSessionVars();
 
     if (accessToken && userId && hsUrl) {
         console.log(`Restoring session for ${userId}`);
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 49ee1ca872..0b52cfa1bc 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1712,9 +1712,13 @@ export default React.createClass({
     onRegistered: function(credentials) {
         if (this.state.register_session_id) {
             // The user came in through an email validation link. To avoid overwriting
-            // their session, check to make sure the session isn't someone else.
+            // their session, check to make sure the session isn't someone else, and
+            // isn't a guest user since we'll usually have set a guest user session before
+            // starting the registration process. This isn't perfect since it's possible
+            // the user had a separate guest session they didn't actually mean to replace.
             const sessionOwner = Lifecycle.getStoredSessionOwner();
-            if (sessionOwner && sessionOwner !== credentials.userId) {
+            const sessionIsGuest = Lifecycle.getStoredSessionIsGuest();
+            if (sessionOwner && !sessionIsGuest && sessionOwner !== credentials.userId) {
                 console.log(
                     `Found a session for ${sessionOwner} but ${credentials.userId} is trying to verify their ` +
                     `email address. Restoring the session for ${sessionOwner} with warning.`,

From 7ac82a23ab62eb01118e885c011dae907e4034de Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 12:11:07 +0100
Subject: [PATCH 25/34] Yes yes, eslint

---
 src/Lifecycle.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index ca4c7c48f8..0e2389fd1c 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -131,8 +131,8 @@ export function getStoredSessionOwner() {
  *     for a real user. If there is no stored session, return null.
  */
 export function getStoredSessionIsGuest() {
-    const {hsUrl, isUrl, accessToken, userId, deviceId, isGuest} = _getLocalStorageSessionVars();
-    return hsUrl && userId && accessToken ? isGuest : null;
+    const sessVars = _getLocalStorageSessionVars();
+    return sessVars.hsUrl && sessVars.userId && sessVars.accessToken ? sessVars.isGuest : null;
 }
 
 /**

From d613498b8a3ec65ea51d0794a3b6b29e604ad126 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 13 May 2019 14:17:09 +0100
Subject: [PATCH 26/34] Fix bug where email was not required where it shouldn't
 have been

See comment!

Fixes https://github.com/vector-im/riot-web/issues/9681
---
 src/components/views/auth/RegistrationForm.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index 7c083ea270..bef0b9e019 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -150,7 +150,11 @@ module.exports = React.createClass({
             if (!field) {
                 continue;
             }
-            field.validate({ allowEmpty: false });
+            // We must wait for these validations to finish before queueing
+            // up the setState below so our setState gies in the queue after
+            // all the setStates from these validate calls (that's how we
+            // know they've finished).
+            await field.validate({ allowEmpty: false });
         }
 
         // Validation and state updates are async, so we need to wait for them to complete

From 2d6a313871562733040805de630abe6547d5c576 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Mon, 13 May 2019 14:24:56 +0100
Subject: [PATCH 27/34] Typo

Co-Authored-By: J. Ryan Stinnett <jryans@gmail.com>
---
 src/components/views/auth/RegistrationForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js
index bef0b9e019..654387e196 100644
--- a/src/components/views/auth/RegistrationForm.js
+++ b/src/components/views/auth/RegistrationForm.js
@@ -151,7 +151,7 @@ module.exports = React.createClass({
                 continue;
             }
             // We must wait for these validations to finish before queueing
-            // up the setState below so our setState gies in the queue after
+            // up the setState below so our setState goes in the queue after
             // all the setStates from these validate calls (that's how we
             // know they've finished).
             await field.validate({ allowEmpty: false });

From b6fd485dadae9202277c67402c78afdd7994b50d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 11:44:00 +0100
Subject: [PATCH 28/34] Fix email registration: pt. 1

We look to see if there's already a user logged in and if there is,
restore that session instead of logging the user in as their new
account. We still set this 'is_registered' flag though, even though
in that case it's not a newly registered account that's being restored,
so don't set in that case.
---
 src/components/structures/MatrixChat.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 33f1bac090..c0107263fc 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1733,9 +1733,6 @@ export default React.createClass({
 
     // returns a promise which resolves to the new MatrixClient
     onRegistered: function(credentials) {
-        // XXX: This should be in state or ideally store(s) because we risk not
-        //      rendering the most up-to-date view of state otherwise.
-        this._is_registered = true;
         if (this.state.register_session_id) {
             // The user came in through an email validation link. To avoid overwriting
             // their session, check to make sure the session isn't someone else.
@@ -1771,6 +1768,9 @@ export default React.createClass({
                 return MatrixClientPeg.get();
             }
         }
+        // XXX: This should be in state or ideally store(s) because we risk not
+        //      rendering the most up-to-date view of state otherwise.
+        this._is_registered = true;
         return Lifecycle.setLoggedIn(credentials);
     },
 

From 040424f462d523b00bfe6c19964fd261d1633743 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 11:59:38 +0100
Subject: [PATCH 29/34] Fix email registration, pt. 2

Regressed in https://github.com/matrix-org/matrix-react-sdk/pull/2768
where we check for an existing stored account first and restore that
instead if it exist, telling the user. We usually make a guest account
when the user first hits the page though, so this just restored this
guest account.

Don't restore the account if it's just a guest account (which, as per
comment, is not perfect, but is definitely better than the current
behaviour).

Fixes https://github.com/vector-im/riot-web/issues/9581
---
 src/Lifecycle.js                        | 29 ++++++++++++++++---------
 src/components/structures/MatrixChat.js |  8 +++++--
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 527394da4d..ca4c7c48f8 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -126,6 +126,15 @@ export function getStoredSessionOwner() {
     return hsUrl && userId && accessToken ? userId : null;
 }
 
+/**
+ * @returns {bool} True if the stored session is for a guest user or false if it is
+ *     for a real user. If there is no stored session, return null.
+ */
+export function getStoredSessionIsGuest() {
+    const {hsUrl, isUrl, accessToken, userId, deviceId, isGuest} = _getLocalStorageSessionVars();
+    return hsUrl && userId && accessToken ? isGuest : null;
+}
+
 /**
  * @param {Object} queryParams    string->string map of the
  *     query-parameters extracted from the real query-string of the starting
@@ -235,7 +244,15 @@ function _getLocalStorageSessionVars() {
     const userId = localStorage.getItem("mx_user_id");
     const deviceId = localStorage.getItem("mx_device_id");
 
-    return {hsUrl, isUrl, accessToken, userId, deviceId};
+    let isGuest;
+    if (localStorage.getItem("mx_is_guest") !== null) {
+        isGuest = localStorage.getItem("mx_is_guest") === "true";
+    } else {
+        // legacy key name
+        isGuest = localStorage.getItem("matrix-is-guest") === "true";
+    }
+
+    return {hsUrl, isUrl, accessToken, userId, deviceId, isGuest};
 }
 
 // returns a promise which resolves to true if a session is found in
@@ -253,15 +270,7 @@ async function _restoreFromLocalStorage() {
         return false;
     }
 
-    const {hsUrl, isUrl, accessToken, userId, deviceId} = _getLocalStorageSessionVars();
-
-    let isGuest;
-    if (localStorage.getItem("mx_is_guest") !== null) {
-        isGuest = localStorage.getItem("mx_is_guest") === "true";
-    } else {
-        // legacy key name
-        isGuest = localStorage.getItem("matrix-is-guest") === "true";
-    }
+    const {hsUrl, isUrl, accessToken, userId, deviceId, isGuest} = _getLocalStorageSessionVars();
 
     if (accessToken && userId && hsUrl) {
         console.log(`Restoring session for ${userId}`);
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index c0107263fc..b1001e3b83 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1735,9 +1735,13 @@ export default React.createClass({
     onRegistered: function(credentials) {
         if (this.state.register_session_id) {
             // The user came in through an email validation link. To avoid overwriting
-            // their session, check to make sure the session isn't someone else.
+            // their session, check to make sure the session isn't someone else, and
+            // isn't a guest user since we'll usually have set a guest user session before
+            // starting the registration process. This isn't perfect since it's possible
+            // the user had a separate guest session they didn't actually mean to replace.
             const sessionOwner = Lifecycle.getStoredSessionOwner();
-            if (sessionOwner && sessionOwner !== credentials.userId) {
+            const sessionIsGuest = Lifecycle.getStoredSessionIsGuest();
+            if (sessionOwner && !sessionIsGuest && sessionOwner !== credentials.userId) {
                 console.log(
                     `Found a session for ${sessionOwner} but ${credentials.userId} is trying to verify their ` +
                     `email address. Restoring the session for ${sessionOwner} with warning.`,

From 4aec75ef699198a4c13bf8f21fec7d7b8815e0f6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 12:11:07 +0100
Subject: [PATCH 30/34] Yes yes, eslint

---
 src/Lifecycle.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index ca4c7c48f8..0e2389fd1c 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -131,8 +131,8 @@ export function getStoredSessionOwner() {
  *     for a real user. If there is no stored session, return null.
  */
 export function getStoredSessionIsGuest() {
-    const {hsUrl, isUrl, accessToken, userId, deviceId, isGuest} = _getLocalStorageSessionVars();
-    return hsUrl && userId && accessToken ? isGuest : null;
+    const sessVars = _getLocalStorageSessionVars();
+    return sessVars.hsUrl && sessVars.userId && sessVars.accessToken ? sessVars.isGuest : null;
 }
 
 /**

From 4e2cce7d44af8528138b779478fa6b4ee1756e86 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 13:48:46 +0100
Subject: [PATCH 31/34] Prepare changelog for v1.1.1

---
 CHANGELOG.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d9a01e668..988a85fd43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+Changes in [1.1.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.1.1) (2019-05-14)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.1.0...v1.1.1)
+
+ * Fix registration with email
+   [\#2970](https://github.com/matrix-org/matrix-react-sdk/pull/2970)
+ * Fix bug where email was not required where it shouldn't have been
+   [\#2969](https://github.com/matrix-org/matrix-react-sdk/pull/2969)
+
 Changes in [1.1.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.1.0) (2019-05-07)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.1.0-rc.1...v1.1.0)

From 851d2076113d1aff90c14ebc13a645b003dbbe9e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 14 May 2019 13:48:47 +0100
Subject: [PATCH 32/34] v1.1.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5735fed77c..df51ac6526 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

From f19e70c219ecd8b3c7d07ffa394ef6333f79a7dc Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 14 May 2019 13:55:38 +0100
Subject: [PATCH 33/34] Add comment about thumbnailing for GIFs

---
 src/components/views/messages/MImageBody.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 4b5e1c20fa..2f12022140 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -197,15 +197,18 @@ export default class MImageBody extends React.Component {
             // synapse only supports 800x600 thumbnails for now though,
             // so we'll need to download the original image for this to work
             // well for now. First, let's try a few cases that let us avoid
-            // downloading the original:
+            // downloading the original, including:
+            //   - When displaying a GIF, we always want to thumbnail so that we can
+            //     properly respect the user's GIF autoplay setting (which relies on
+            //     thumbnailing to produce the static preview image)
+            //   - On a low DPI device, always thumbnail to save bandwidth
+            //   - If there's no sizing info in the event, default to thumbnail
             const info = content.info;
             if (
                 this._isGif() ||
                 pixelRatio === 1.0 ||
                 (!info || !info.w || !info.h || !info.size)
             ) {
-                // always thumbnail. it may look a bit worse, but it'll save bandwidth.
-                // which is probably desirable on a lo-dpi device anyway.
                 return this.context.matrixClient.mxcUrlToHttp(content.url, thumbWidth, thumbHeight);
             } else {
                 // we should only request thumbnails if the image is bigger than 800x600

From a2e0dc2f7e321eb2b47ca72f4aa0e47a216e379f Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 14 May 2019 16:51:50 +0100
Subject: [PATCH 34/34] Tweak message action bar position

This moves the message action bar up slightly to avoid covering message text.
---
 res/css/views/messages/_MessageActionBar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 419542036e..e66c99e95b 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -23,7 +23,7 @@ limitations under the License.
     line-height: 24px;
     border-radius: 4px;
     background: $message-action-bar-bg-color;
-    top: -13px;
+    top: -18px;
     right: 8px;
     user-select: none;