Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 14:05:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

basic verification UI

Browse Source
This commit is contained in:
Matthew Hodgson 2016-09-15 01:55:51 +01:00
parent d8770b2b41
commit 8bda0bb095
4 changed files with 60 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/structures/UserSettings.js
View File

@ -72,6 +72,7 @@ module.exports = React.createClass({
getInitialState: function() {
return {
avatarUrl: null,
myDevice: null,
threePids: [],
phase: "UserSettings.LOADING", // LOADING, DISPLAY
email_add_pending: false,
@ -342,14 +343,17 @@ module.exports = React.createClass({
var client = MatrixClientPeg.get();
var deviceId = client.deviceId;
var olmKey = client.getDeviceEd25519Key() || "<not supported>";
var identityKey = client.getDeviceEd25519Key() || "<not supported>";
var myDevice = client.getStoredDevicesForUser(MatrixClientPeg.get().credentials.userId)[0];
return (
<div>
<h3>Cryptography</h3>
<div className="mx_UserSettings_section">
<div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
<ul>
<li>Device ID: {deviceId}</li>
<li>Device key: {olmKey}</li>
<li><label>Device name:</label> <span>{ myDevice.getDisplayName() }</span></li>
<li><label>Device ID:</label> <span><code>{deviceId}</code></span></li>
<li><label>Device key:</label> <span><code><b>{identityKey}</b></code></span></li>
</ul>
</div>
</div>
@ -364,7 +368,7 @@ module.exports = React.createClass({
return (
<div>
<h3>Devices</h3>
<DevicesPanel className="mx_UserSettings_section" />
<DevicesPanel className="mx_UserSettings_section"/>
</div>
);
},

47
src/components/views/rooms/MemberDeviceInfo.js
View File

@ -16,6 +16,8 @@ limitations under the License.
import React from 'react';
import MatrixClientPeg from '../../../MatrixClientPeg';
import sdk from '../../../index';
import Modal from '../../../Modal';
export default class MemberDeviceInfo extends React.Component {
constructor(props) {
@ -27,9 +29,43 @@ export default class MemberDeviceInfo extends React.Component {
}
onVerifyClick() {
MatrixClientPeg.get().setDeviceVerified(
this.props.userId, this.props.device.deviceId, true
);
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
Modal.createDialog(QuestionDialog, {
title: "Verify device",
description: (
<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>{ this.props.device.getDisplayName() }</span></li>
<li><label>Device ID:</label> <span><code>{ this.props.device.deviceId}</code></span></li>
<li><label>Device key:</label> <span><code><b>{ this.props.device.getFingerprint() }</b></code></span></li>
</ul>
</div>
<p>
If it matches, press the verify button below.
If it doesn't, then someone else is intercepting this device
and you probably want to press the block button instead.
</p>
<p>
In future this verification process will be more sophisticated.
</p>
</div>
),
button: "I verify that the keys match",
onFinished: confirm=>{
if (confirm) {
MatrixClientPeg.get().setDeviceVerified(
this.props.userId, this.props.device.deviceId, true
);
}
},
});
}
onUnverifyClick() {
@ -104,12 +140,9 @@ export default class MemberDeviceInfo extends React.Component {
var info;
if (!this.props.hideInfo) {
info = (
<div>
<div className="mx_MemberDeviceInfo_deviceInfo">
<div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
{indicator}
<div className="mx_MemberDeviceInfo_deviceKey">
{this.props.device.getFingerprint()}
</div>
</div>
);
}

5
src/components/views/settings/DevicesPanel.js
View File

@ -137,3 +137,8 @@ export default class DevicesPanel extends React.Component {
);
}
}
DevicesPanel.displayName = 'MemberDeviceInfo';
DevicesPanel.propTypes = {
className: React.PropTypes.string,
};

7
src/components/views/settings/DevicesPanelEntry.js
View File

@ -107,8 +107,13 @@ export default class DevicesPanelEntry extends React.Component {
);
}
var myDeviceClass = '';
if (device.device_id === MatrixClientPeg.get().getDeviceId()) {
myDeviceClass = " mx_DevicesPanel_myDevice";
}
return (
<div className="mx_DevicesPanel_device">
<div className={ "mx_DevicesPanel_device" + myDeviceClass }>
<div className="mx_DevicesPanel_deviceId">
{device.device_id}
</div>