Merge remote-tracking branch 'origin/experimental' into travis/fix-memberlist-order

src/components/views/rooms/EntityTile.js

@@ -70,6 +70,7 @@ const EntityTile = React.createClass({
         onClick: PropTypes.func,
         suppressOnHover: PropTypes.bool,
         showPresence: PropTypes.bool,
+        subtextLabel: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -129,6 +130,9 @@ const EntityTile = React.createClass({
                     presenceState={this.props.presenceState} />;
                 nameClasses += ' mx_EntityTile_name_hover';
             }
+            if (this.props.subtextLabel) {
+                presenceLabel = <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>;
+            }
             nameEl = (
                 <div className="mx_EntityTile_details">
                     <EmojiText element="div" className={nameClasses} dir="auto">
@@ -137,6 +141,15 @@ const EntityTile = React.createClass({
                     {presenceLabel}
                 </div>
             );
+        } else if (this.props.subtextLabel) {
+            nameEl = (
+                <div className="mx_EntityTile_details">
+                    <EmojiText element="div" className="mx_EntityTile_name" dir="auto">
+                        {name}
+                    </EmojiText>
+                    <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>
+                </div>
+            );
         } else {
             nameEl = (
                 <EmojiText element="div" className="mx_EntityTile_name" dir="auto">{ name }</EmojiText>

src/components/views/rooms/MemberInfo.js

@@ -42,6 +42,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SdkConfig from '../../../SdkConfig';
 import MultiInviter from "../../../utils/MultiInviter";
+import SettingsStore from "../../../settings/SettingsStore";
 
 module.exports = withMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -889,11 +890,16 @@ module.exports = withMatrixClient(React.createClass({
         let presenceState;
         let presenceLastActiveAgo;
         let presenceCurrentlyActive;
+        let statusMessage;
 
         if (this.props.member.user) {
             presenceState = this.props.member.user.presence;
             presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
             presenceCurrentlyActive = this.props.member.user.currentlyActive;
+
+            if (SettingsStore.isFeatureEnabled("feature_custom_status")) {
+                statusMessage = this.props.member.user._unstable_statusMessage;
+            }
         }
 
         const room = this.props.matrixClient.getRoom(this.props.member.roomId);
@@ -915,6 +921,11 @@ module.exports = withMatrixClient(React.createClass({
                 presenceState={presenceState} />;
         }
 
+        let statusLabel = null;
+        if (statusMessage) {
+            statusLabel = <span className="mx_MemberInfo_statusMessage">{ statusMessage }</span>;
+        }
+
         let roomMemberDetails = null;
         if (this.props.member.roomId) { // is in room
             const PowerSelector = sdk.getComponent('elements.PowerSelector');
@@ -931,6 +942,7 @@ module.exports = withMatrixClient(React.createClass({
                 </div>
                 <div className="mx_MemberInfo_profileField">
                     {presenceLabel}
+                    {statusLabel}
                 </div>
             </div>;
         }

src/components/views/rooms/MemberTile.js

@@ -16,6 +16,8 @@ limitations under the License.
 
 'use strict';
 
+import SettingsStore from "../../../settings/SettingsStore";
+
 const React = require('react');
 import PropTypes from 'prop-types';
 
@@ -85,6 +87,11 @@ module.exports = React.createClass({
         const active = -1;
         const presenceState = member.user ? member.user.presence : null;
 
+        let statusMessage = null;
+        if (member.user && SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            statusMessage = member.user._unstable_statusMessage;
+        }
+
         const av = (
             <MemberAvatar member={member} width={36} height={36} />
         );
@@ -106,7 +113,9 @@ module.exports = React.createClass({
                 presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
                 presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
                 avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
-                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence} />
+                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence}
+                subtextLabel={statusMessage}
+            />
         );
     },
 });

src/components/views/rooms/MessageComposer.js

@@ -291,7 +291,7 @@ export default class MessageComposer extends React.Component {
 
     render() {
         const uploadInputStyle = {display: 'none'};
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
 
@@ -300,7 +300,7 @@ export default class MessageComposer extends React.Component {
         if (this.state.me) {
             controls.push(
                 <div key="controls_avatar" className="mx_MessageComposer_avatar">
-                    <MemberAvatar member={this.state.me} width={24} height={24} />
+                    <MemberStatusMessageAvatar member={this.state.me} width={24} height={24} />
                 </div>,
             );
         }
@@ -349,6 +349,34 @@ export default class MessageComposer extends React.Component {
         const canSendMessages = !this.state.tombstone &&
             this.props.room.maySendMessage();
 
+        // TODO: Remove temporary logging for riot-web#7838
+        // Note: we rip apart the power level event ourselves because we don't want to
+        // log too much data about it - just the bits we care about. Many of the variables
+        // logged here are to help figure out where in the stack the 'cannot post in room'
+        // warning is coming from. This means logging various numbers from the PL event to
+        // verify RoomState._maySendEventOfType is doing the right thing.
+        const room = this.props.room;
+        const plEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+        let plEventString = "<no power level event>";
+        if (plEvent) {
+            const content = plEvent.getContent();
+            if (!content) {
+                plEventString = "<no event content>";
+            } else {
+                const stringifyFalsey = (v) => v === null ? '<null>' : (v === undefined ? '<undefined>' : v);
+                const actualUserPl = stringifyFalsey(content.users ? content.users[room.myUserId] : "<no users in content>");
+                const usersPl = stringifyFalsey(content.users_default);
+                const actualEventPl = stringifyFalsey(content.events ? content.events['m.room.message'] : "<no events in content>");
+                const eventPl = stringifyFalsey(content.events_default);
+                plEventString = `actualUserPl=${actualUserPl} defaultUserPl=${usersPl} actualEventPl=${actualEventPl} defaultEventPl=${eventPl}`;
+            }
+        }
+        console.log(
+            `[riot-web#7838] renderComposer() hasTombstone=${!!this.state.tombstone} maySendMessage=${room.maySendMessage()}` +
+            ` myMembership=${room.getMyMembership()} maySendEvent=${room.currentState.maySendEvent('m.room.message', room.myUserId)}` +
+            ` myUserId=${room.myUserId} roomId=${room.roomId} hasPlEvent=${!!plEvent} powerLevels='${plEventString}'`
+        );
+
         if (canSendMessages) {
             // This also currently includes the call buttons. Really we should
             // check separately for whether we can call, but this is slightly
@@ -425,6 +453,8 @@ export default class MessageComposer extends React.Component {
                 </div>
             </div>);
         } else {
+            // TODO: Remove temporary logging for riot-web#7838
+            console.log("[riot-web#7838] Falling back to showing cannot post in room error");
             controls.push(
                 <div key="controls_error" className="mx_MessageComposer_noperm_error">
                     { _t('You do not have permission to post to this room') }

src/components/views/rooms/RoomList.js

@@ -86,6 +86,7 @@ module.exports = React.createClass({
             incomingCallTag: null,
             incomingCall: null,
             selectedTags: [],
+            hover: false,
         };
     },
 
@@ -294,6 +295,17 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
+    onMouseEnter: function(ev) {
+        this.setState({hover: true});
+    },
+
+    onMouseLeave: function(ev) {
+        this.setState({hover: false});
+
+        // Refresh the room list just in case the user missed something.
+        this._delayedRefreshRoomList();
+    },
+
     _delayedRefreshRoomList: new rate_limited_func(function() {
         this.refreshRoomList();
     }, 500),
@@ -346,6 +358,11 @@ module.exports = React.createClass({
     },
 
     refreshRoomList: function() {
+        if (this.state.hover) {
+            // Don't re-sort the list if we're hovering over the list
+            return;
+        }
+
         // TODO: ideally we'd calculate this once at start, and then maintain
         // any changes to it incrementally, updating the appropriate sublists
         // as needed.
@@ -693,9 +710,10 @@ module.exports = React.createClass({
         const subListComponents = this._mapSubListProps(subLists);
 
         return (
-            <div ref={this._collectResizeContainer} className="mx_RoomList">
+            <div ref={this._collectResizeContainer} className="mx_RoomList"
+                 onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 { subListComponents }
             </div>
         );
     },
-});
+});

src/components/views/rooms/RoomRecoveryReminder.js

@@ -19,13 +19,76 @@ import PropTypes from "prop-types";
 import sdk from "../../../index";
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
+import MatrixClientPeg from "../../../MatrixClientPeg";
 
 export default class RoomRecoveryReminder extends React.PureComponent {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
     }
 
-    showKeyBackupDialog = () => {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            loading: true,
+            error: null,
+            unverifiedDevice: null,
+        };
+    }
+
+    componentWillMount() {
+        this._loadBackupStatus();
+    }
+
+    async _loadBackupStatus() {
+        let backupSigStatus;
+        try {
+            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
+            backupSigStatus = await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo);
+        } catch (e) {
+            console.log("Unable to fetch key backup status", e);
+            this.setState({
+                loading: false,
+                error: e,
+            });
+            return;
+        }
+
+        let unverifiedDevice;
+        for (const sig of backupSigStatus.sigs) {
+            if (!sig.device.isVerified()) {
+                unverifiedDevice = sig.device;
+                break;
+            }
+        }
+        this.setState({
+            loading: false,
+            unverifiedDevice,
+        });
+    }
+
+    showSetupDialog = () => {
+        if (this.state.unverifiedDevice) {
+            // A key backup exists for this account, but the creating device is not
+            // verified, so we'll show the device verify dialog.
+            // TODO: Should change to a restore key backup flow that checks the recovery
+            // passphrase while at the same time also cross-signing the device as well in
+            // a single flow (for cases where a key backup exists but the backup creating
+            // device is unverified).  Since we don't have that yet, we'll look for an
+            // unverified device and verify it.  Note that this means we won't restore
+            // keys yet; instead we'll only trust the backup for sending our own new keys
+            // to it.
+            const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
+            Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
+                userId: MatrixClientPeg.get().credentials.userId,
+                device: this.state.unverifiedDevice,
+                onFinished: this.props.onFinished,
+            });
+            return;
+        }
+
+        // The default case assumes that a key backup doesn't exist for this account, so
+        // we'll show the create key backup flow.
         Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
             import("../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog"),
             {
@@ -46,29 +109,51 @@ export default class RoomRecoveryReminder extends React.PureComponent {
                     this.props.onFinished(false);
                 },
                 onSetup: () => {
-                    this.showKeyBackupDialog();
+                    this.showSetupDialog();
                 },
             },
         );
     }
 
     onSetupClick = () => {
-        this.showKeyBackupDialog();
+        this.showSetupDialog();
     }
 
     render() {
+        if (this.state.loading) {
+            return null;
+        }
+
         const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
 
+        let body;
+        if (this.state.error) {
+            body = <div className="error">
+                {_t("Unable to load key backup status")}
+            </div>;
+        } else if (this.state.unverifiedDevice) {
+            // A key backup exists for this account, but the creating device is not
+            // verified.
+            body = _t(
+                "To view your secure message history and ensure you can view new " +
+                "messages on future devices, set up Secure Message Recovery.",
+            );
+        } else {
+            // The default case assumes that a key backup doesn't exist for this account.
+            // (This component doesn't currently check that itself.)
+            body = _t(
+                "If you log out or use another device, you'll lose your " +
+                "secure message history. To prevent this, set up Secure " +
+                "Message Recovery.",
+            );
+        }
+
         return (
             <div className="mx_RoomRecoveryReminder">
                 <div className="mx_RoomRecoveryReminder_header">{_t(
                     "Secure Message Recovery",
                 )}</div>
-                <div className="mx_RoomRecoveryReminder_body">{_t(
-                    "If you log out or use another device, you'll lose your " +
-                    "secure message history. To prevent this, set up Secure " +
-                    "Message Recovery.",
-                )}</div>
+                <div className="mx_RoomRecoveryReminder_body">{body}</div>
                 <div className="mx_RoomRecoveryReminder_buttons">
                     <AccessibleButton className="mx_RoomRecoveryReminder_button mx_RoomRecoveryReminder_secondary"
                         onClick={this.onDontAskAgainClick}>

src/components/views/rooms/RoomTile.js

@@ -30,6 +30,7 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 import AccessibleButton from '../elements/AccessibleButton';
 import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
+import SettingsStore from "../../../settings/SettingsStore";
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -251,6 +252,17 @@ module.exports = React.createClass({
         const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
         const badges = notifBadges || mentionBadges;
 
+        const isJoined = this.props.room.getMyMembership() === "join";
+        const looksLikeDm = this.props.room.getInvitedAndJoinedMemberCount() === 2;
+        let subtext = null;
+        if (!isInvite && isJoined && looksLikeDm && SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            const selfId = MatrixClientPeg.get().getUserId();
+            const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
+            if (otherMember && otherMember.user && otherMember.user._unstable_statusMessage) {
+                subtext = otherMember.user._unstable_statusMessage;
+            }
+        }
+
         const classes = classNames({
             'mx_RoomTile': true,
             'mx_RoomTile_selected': this.state.selected,
@@ -261,6 +273,7 @@ module.exports = React.createClass({
             'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_noBadges': !badges,
             'mx_RoomTile_transparent': this.props.transparent,
+            'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
         });
 
         const avatarClasses = classNames({
@@ -286,6 +299,7 @@ module.exports = React.createClass({
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
+        let subtextLabel;
         let tooltip;
         if (!this.props.collapsed) {
             const nameClasses = classNames({
@@ -294,6 +308,8 @@ module.exports = React.createClass({
                 'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
             });
 
+            subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
+
             if (this.state.selected) {
                 const nameSelected = <EmojiText>{ name }</EmojiText>;
 
@@ -337,9 +353,14 @@ module.exports = React.createClass({
                     { dmIndicator }
                 </div>
             </div>
-            { label }
-            { contextMenuButton }
-            { badge }
+            <div className="mx_RoomTile_nameContainer">
+                <div className="mx_RoomTile_labelContainer">
+                    { label }
+                    { subtextLabel }
+                </div>
+                { contextMenuButton }
+                { badge }
+            </div>
             { /* { incomingCallBox } */ }
             { tooltip }
         </AccessibleButton>;