Merge branch 'develop' into travis/custom-status

src/components/views/dialogs/AddressPickerDialog.js

@@ -23,6 +23,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import Promise from 'bluebird';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
 import GroupStore from '../../../stores/GroupStore';
+import * as Email from "../../../email";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -419,6 +420,10 @@ module.exports = React.createClass({
         // a perfectly valid address if there are close matches.
         const addrType = getAddressType(query);
         if (this.props.validAddressTypes.includes(addrType)) {
+            if (addrType === 'email' && !Email.looksValid(query)) {
+                this.setState({searchError: _t("That doesn't look like a valid email address")});
+                return;
+            }
             suggestedList.unshift({
                 addressType: addrType,
                 address: query,

src/components/views/dialogs/BaseDialog.js

@@ -57,8 +57,7 @@ export default React.createClass({
         className: PropTypes.string,
 
         // Title for the dialog.
-        // (could probably actually be something more complicated than a string if desired)
-        title: PropTypes.string.isRequired,
+        title: PropTypes.node.isRequired,
 
         // children should be the content of the dialog
         children: PropTypes.node,

src/components/views/dialogs/SetMxIdDialog.js

@@ -23,6 +23,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import classnames from 'classnames';
 import { KeyCode } from '../../../Keyboard';
 import { _t } from '../../../languageHandler';
+import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 
 // The amount of time to wait for further changes to the input username before
 // sending a request to the server
@@ -110,12 +111,11 @@ export default React.createClass({
     },
 
     _doUsernameCheck: function() {
-        // XXX: SPEC-1
-        // Check if username is valid
-        // Naive impl copied from https://github.com/matrix-org/matrix-react-sdk/blob/66c3a6d9ca695780eb6b662e242e88323053ff33/src/components/views/login/RegistrationForm.js#L190
-        if (encodeURIComponent(this.state.username) !== this.state.username) {
+        // We do a quick check ahead of the username availability API to ensure the
+        // user ID roughly looks okay from a Matrix perspective.
+        if (!SAFE_LOCALPART_REGEX.test(this.state.username)) {
             this.setState({
-                usernameError: _t('User names may only contain letters, numbers, dots, hyphens and underscores.'),
+                usernameError: _t("Only use lower case letters, numbers and '=_-./'"),
             });
             return Promise.reject();
         }
@@ -210,7 +210,6 @@ export default React.createClass({
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
-        const Spinner = sdk.getComponent('elements.Spinner');
 
         let auth;
         if (this.state.doingUIAuth) {
@@ -230,9 +229,8 @@ export default React.createClass({
         });
 
         let usernameIndicator = null;
-        let usernameBusyIndicator = null;
         if (this.state.usernameBusy) {
-            usernameBusyIndicator = <Spinner w="24" h="24" />;
+            usernameIndicator = <div>{_t("Checking...")}</div>;
         } else {
             const usernameAvailable = this.state.username &&
                 this.state.usernameCheckSupport && !this.state.usernameError;
@@ -270,7 +268,6 @@ export default React.createClass({
                             size="30"
                             className={inputClasses}
                         />
-                        { usernameBusyIndicator }
                     </div>
                     { usernameIndicator }
                     <p>

src/components/views/elements/AppTile.js

@@ -22,7 +22,6 @@ import qs from 'querystring';
 import React from 'react';
 import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import PlatformPeg from '../../../PlatformPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import WidgetMessaging from '../../../WidgetMessaging';
 import TintableSvgButton from './TintableSvgButton';
@@ -49,7 +48,6 @@ export default class AppTile extends React.Component {
         this.state = this._getNewState(props);
 
         this._onAction = this._onAction.bind(this);
-        this._onMessage = this._onMessage.bind(this);
         this._onLoaded = this._onLoaded.bind(this);
         this._onEditClick = this._onEditClick.bind(this);
         this._onDeleteClick = this._onDeleteClick.bind(this);
@@ -143,10 +141,6 @@ export default class AppTile extends React.Component {
     }
 
     componentDidMount() {
-        // Legacy Jitsi widget messaging -- TODO replace this with standard widget
-        // postMessaging API
-        window.addEventListener('message', this._onMessage, false);
-
         // Widget action listeners
         this.dispatcherRef = dis.register(this._onAction);
     }
@@ -155,9 +149,6 @@ export default class AppTile extends React.Component {
         // Widget action listeners
         dis.unregister(this.dispatcherRef);
 
-        // Jitsi listener
-        window.removeEventListener('message', this._onMessage);
-
         // if it's not remaining on screen, get rid of the PersistedElement container
         if (!ActiveWidgetStore.getWidgetPersistence(this.props.id)) {
             ActiveWidgetStore.destroyPersistentWidget();
@@ -233,32 +224,6 @@ export default class AppTile extends React.Component {
         }
     }
 
-    // Legacy Jitsi widget messaging
-    // TODO -- This should be replaced with the new widget postMessaging API
-    _onMessage(event) {
-        if (this.props.type !== 'jitsi') {
-            return;
-        }
-        if (!event.origin) {
-            event.origin = event.originalEvent.origin;
-        }
-
-        const widgetUrlObj = url.parse(this.state.widgetUrl);
-        const eventOrigin = url.parse(event.origin);
-        if (
-            eventOrigin.protocol !== widgetUrlObj.protocol ||
-            eventOrigin.host !== widgetUrlObj.host
-        ) {
-            return;
-        }
-
-        if (event.data.widgetAction === 'jitsi_iframe_loaded') {
-            const iframe = this.refs.appFrame.contentWindow
-                .document.querySelector('iframe[id^="jitsiConferenceFrame"]');
-            PlatformPeg.get().setupScreenSharingForIframe(iframe);
-        }
-    }
-
     _canUserModify() {
         // User widgets should always be modifiable by their creator
         if (this.props.userWidget && MatrixClientPeg.get().credentials.userId === this.props.creatorUserId) {
@@ -544,7 +509,7 @@ export default class AppTile extends React.Component {
 
         // Additional iframe feature pemissions
         // (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
-        const iframeFeatures = "microphone; camera; encrypted-media;";
+        const iframeFeatures = "microphone; camera; encrypted-media; autoplay;";
 
         const appTileBodyClass = 'mx_AppTileBody' + (this.props.miniMode ? '_mini  ' : ' ');
 

src/components/views/elements/TintableSvg.js

@@ -29,6 +29,7 @@ var TintableSvg = React.createClass({
         width: PropTypes.string.isRequired,
         height: PropTypes.string.isRequired,
         className: PropTypes.string,
+        forceColors: PropTypes.arrayOf(PropTypes.string),
     },
 
     statics: {
@@ -50,6 +51,12 @@ var TintableSvg = React.createClass({
         delete TintableSvg.mounts[this.id];
     },
 
+    componentDidUpdate: function(prevProps, prevState) {
+        if (prevProps.forceColors !== this.props.forceColors) {
+            this.calcAndApplyFixups(this.refs.svgContainer);
+        }
+    },
+
     tint: function() {
         // TODO: only bother running this if the global tint settings have changed
         // since we loaded!
@@ -57,8 +64,13 @@ var TintableSvg = React.createClass({
     },
 
     onLoad: function(event) {
-        // console.log("TintableSvg.onLoad for " + this.props.src);
-        this.fixups = Tinter.calcSvgFixups([event.target]);
+        this.calcAndApplyFixups(event.target);
+    },
+
+    calcAndApplyFixups: function(target) {
+        if (!target) return;
+        // console.log("TintableSvg.calcAndApplyFixups for " + this.props.src);
+        this.fixups = Tinter.calcSvgFixups([target], this.props.forceColors);
         Tinter.applySvgFixups(this.fixups);
     },
 
@@ -71,6 +83,7 @@ var TintableSvg = React.createClass({
                     height={this.props.height}
                     onLoad={this.onLoad}
                     tabIndex="-1"
+                    ref="svgContainer"
                 />
         );
     },

src/components/views/login/PasswordLogin.js

@@ -40,6 +40,8 @@ class PasswordLogin extends React.Component {
         initialPassword: "",
         loginIncorrect: false,
         hsDomain: "",
+        hsName: null,
+        disableSubmit: false,
     }
 
     constructor(props) {
@@ -250,13 +252,15 @@ class PasswordLogin extends React.Component {
             );
         }
 
-        let matrixIdText = '';
-        if (this.props.hsUrl) {
+        let matrixIdText = _t('Matrix ID');
+        if (this.props.hsName) {
+            matrixIdText = _t('%(serverName)s Matrix ID', {serverName: this.props.hsName});
+        } else {
             try {
                 const parsedHsUrl = new URL(this.props.hsUrl);
                 matrixIdText = _t('%(serverName)s Matrix ID', {serverName: parsedHsUrl.hostname});
             } catch (e) {
-                // pass
+                // ignore
             }
         }
 
@@ -288,6 +292,8 @@ class PasswordLogin extends React.Component {
             );
         }
 
+        const disableSubmit = this.props.disableSubmit || matrixIdText === '';
+
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
@@ -301,7 +307,7 @@ class PasswordLogin extends React.Component {
                 />
                 <br />
                 { forgotPasswordJsx }
-                <input className="mx_Login_submit" type="submit" value={_t('Sign in')} disabled={matrixIdText === ''} />
+                <input className="mx_Login_submit" type="submit" value={_t('Sign in')} disabled={disableSubmit} />
                 </form>
             </div>
         );
@@ -325,6 +331,8 @@ PasswordLogin.propTypes = {
     onPhoneNumberChanged: PropTypes.func,
     onPasswordChanged: PropTypes.func,
     loginIncorrect: PropTypes.bool,
+    hsName: PropTypes.string,
+    disableSubmit: PropTypes.bool,
 };
 
 module.exports = PasswordLogin;

src/components/views/login/RegistrationForm.js

@@ -25,7 +25,7 @@ import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
+import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_COUNTRY = 'field_phone_country';
@@ -194,9 +194,8 @@ module.exports = React.createClass({
                 } else this.markFieldValid(field_id, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
                 break;
             case FIELD_USERNAME:
-                // XXX: SPEC-1
-                var username = this.refs.username.value.trim();
-                if (encodeURIComponent(username) != username) {
+                const username = this.refs.username.value.trim();
+                if (!SAFE_LOCALPART_REGEX.test(username)) {
                     this.markFieldValid(
                         field_id,
                         false,

src/components/views/room_settings/AliasSettings.js

@@ -130,7 +130,7 @@ module.exports = React.createClass({
     },
 
     isAliasValid: function(alias) {
-        // XXX: FIXME SPEC-1
+        // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
         return (alias.match(/^#([^\/:,]+?):(.+)$/) && encodeURI(alias) === alias);
     },
 

src/components/views/settings/KeyBackupPanel.js

@@ -154,6 +154,7 @@ export default class KeyBackupPanel extends React.Component {
             }
 
             let backupSigStatuses = this.state.backupSigStatus.sigs.map((sig, i) => {
+                const deviceName = sig.device.getDisplayName() || sig.device.deviceId;
                 const sigStatusSubstitutions = {
                     validity: sub =>
                         <span className={sig.valid ? 'mx_KeyBackupPanel_sigValid' : 'mx_KeyBackupPanel_sigInvalid'}>
@@ -163,7 +164,7 @@ export default class KeyBackupPanel extends React.Component {
                         <span className={sig.device.isVerified() ? 'mx_KeyBackupPanel_deviceVerified' : 'mx_KeyBackupPanel_deviceNotVerified'}>
                             {sub}
                         </span>,
-                    device: sub => <span className="mx_KeyBackupPanel_deviceName">{sig.device.getDisplayName()}</span>,
+                    device: sub => <span className="mx_KeyBackupPanel_deviceName">{deviceName}</span>,
                 };
                 let sigStatus;
                 if (sig.device.getFingerprint() === MatrixClientPeg.get().getDeviceEd25519Key()) {
@@ -174,7 +175,7 @@ export default class KeyBackupPanel extends React.Component {
                 } else if (sig.valid && sig.device.isVerified()) {
                     sigStatus = _t(
                         "Backup has a <validity>valid</validity> signature from " +
-                        "<verify>verified</verify> device <device>x</device>",
+                        "<verify>verified</verify> device <device></device>",
                         {}, sigStatusSubstitutions,
                     );
                 } else if (sig.valid && !sig.device.isVerified()) {

src/components/views/settings/Notifications.js

@@ -483,8 +483,11 @@ module.exports = React.createClass({
                 // The default push rules displayed by Vector UI
                 '.m.rule.contains_display_name': 'vector',
                 '.m.rule.contains_user_name': 'vector',
+                '.m.rule.roomnotif': 'vector',
                 '.m.rule.room_one_to_one': 'vector',
+                '.m.rule.encrypted_room_one_to_one': 'vector',
                 '.m.rule.message': 'vector',
+                '.m.rule.encrypted': 'vector',
                 '.m.rule.invite_for_me': 'vector',
                 //'.m.rule.member_event': 'vector',
                 '.m.rule.call': 'vector',
@@ -534,9 +537,12 @@ module.exports = React.createClass({
             const vectorRuleIds = [
                 '.m.rule.contains_display_name',
                 '.m.rule.contains_user_name',
+                '.m.rule.roomnotif',
                 '_keywords',
                 '.m.rule.room_one_to_one',
+                '.m.rule.encrypted_room_one_to_one',
                 '.m.rule.message',
+                '.m.rule.encrypted',
                 '.m.rule.invite_for_me',
                 //'im.vector.rule.member_event',
                 '.m.rule.call',