Merge branch 'develop' into new-guest-access

Conflicts:
	src/components/structures/MatrixChat.js

src/components/views/dialogs/BaseDialog.js

@@ -47,35 +47,18 @@ export default React.createClass({
         children: React.PropTypes.node,
     },
 
-    componentWillMount: function() {
-        this.priorActiveElement = document.activeElement;
-    },
-
-    componentWillUnmount: function() {
-        if (this.priorActiveElement !== null) {
-            this.priorActiveElement.focus();
-        }
-    },
-
-    // Don't let key{down,press} events escape the modal. Consume them all.
-    _eatKeyEvent: function(e) {
-        e.stopPropagation();
-    },
-    
-    // Must be when the key is released (and not pressed) otherwise componentWillUnmount
-    // will focus another element which will receive future key events
-    _onKeyUp: function(e) {
+    _onKeyDown: function(e) {
         if (e.keyCode === KeyCode.ESCAPE) {
+            e.stopPropagation();
             e.preventDefault();
             this.props.onFinished();
         } else if (e.keyCode === KeyCode.ENTER) {
             if (this.props.onEnterPressed) {
+                e.stopPropagation();
                 e.preventDefault();
                 this.props.onEnterPressed(e);
             }
         }
-        // Consume all keyup events while Modal is open
-        e.stopPropagation();
     },
 
     _onCancelClick: function(e) {
@@ -84,13 +67,9 @@ export default React.createClass({
 
     render: function() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
+                
         return (
-            <div onKeyUp={this._onKeyUp}
-                 onKeyDown={this._eatKeyEvent}
-                 onKeyPress={this._eatKeyEvent}
-                 className={this.props.className}
-            >
+            <div onKeyDown={this._onKeyDown} className={this.props.className}>
                 <AccessibleButton onClick={this._onCancelClick}
                     className="mx_Dialog_cancelButton"
                 >

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -0,0 +1,76 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+import * as FormattingUtils from '../../../utils/FormattingUtils';
+
+export default function DeviceVerifyDialog(props) {
+    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+    const key = FormattingUtils.formatCryptoKey(props.device.getFingerprint());
+    const body = (
+        <div>
+            <p>
+                To verify that this device can be trusted, please contact its
+                owner using some other means (e.g. in person or a phone call)
+                and ask them whether the key they see in their User Settings
+                for this device matches the key below:
+            </p>
+            <div className="mx_UserSettings_cryptoSection">
+                <ul>
+                    <li><label>Device name:</label> <span>{ props.device.getDisplayName() }</span></li>
+                    <li><label>Device ID:</label> <span><code>{ props.device.deviceId}</code></span></li>
+                    <li><label>Device key:</label> <span><code><b>{ key }</b></code></span></li>
+                </ul>
+            </div>
+            <p>
+                If it matches, press the verify button below.
+                If it doesnt, then someone else is intercepting this device
+                and you probably want to press the blacklist button instead.
+            </p>
+            <p>
+                In future this verification process will be more sophisticated.
+            </p>
+        </div>
+    );
+
+    function onFinished(confirm) {
+        if (confirm) {
+            MatrixClientPeg.get().setDeviceVerified(
+                props.userId, props.device.deviceId, true,
+            );
+        }
+        props.onFinished(confirm);
+    }
+
+    return (
+        <QuestionDialog
+            title="Verify device"
+            description={body}
+            button="I verify that the keys match"
+            onFinished={onFinished}
+        />
+    );
+}
+
+DeviceVerifyDialog.propTypes = {
+    userId: React.PropTypes.string.isRequired,
+    device: React.PropTypes.object.isRequired,
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/dialogs/QuestionDialog.js

@@ -47,12 +47,6 @@ export default React.createClass({
         this.props.onFinished(false);
     },
 
-    componentDidMount: function() {
-        if (this.props.focus) {
-            this.refs.button.focus();
-        }
-    },
-
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const cancelButton = this.props.hasCancelButton ? (
@@ -69,7 +63,7 @@ export default React.createClass({
                     {this.props.description}
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button ref="button" className="mx_Dialog_primary" onClick={this.onOk}>
+                    <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
                         {this.props.button}
                     </button>
                     {this.props.extraButtons}