improve device info

This commit is contained in:
Matthew Hodgson 2016-09-15 02:44:55 +01:00
parent 8bda0bb095
commit ce655c7f50
3 changed files with 41 additions and 30 deletions

View file

@ -76,23 +76,23 @@ module.exports = React.createClass({
</tr>
<tr>
<td>Sender device name</td>
<td>{ device.getDisplayName() }</td>
<td>{ device ? device.getDisplayName() : <i>unknown device</i>}</td>
</tr>
<tr>
<td>Sender device ID</td>
<td>{ device.deviceId }</td>
<td>{ device ? <code>{ device.deviceId }</code> : <i>unknown device</i>}</td>
</tr>
<tr>
<td>Sender device verification:</td>
<td>Sender device verification</td>
<td>{ MatrixClientPeg.get().isEventSenderVerified(event) ? "verified" : <b>NOT verified</b> }</td>
</tr>
<tr>
<td>Sender device ed25519 identity key</td>
<td>{ device.getFingerprint() }</td>
<td>{ device ? <code>{device.getFingerprint()}</code> : <i>unknown device</i>}</td>
</tr>
<tr>
<td>Sender device curve25519 olm key</td>
<td>{ event.getWireContent().sender_key }</td>
<td><code>{ event.getWireContent().sender_key }</code></td>
</tr>
<tr>
<td>Algorithm</td>
@ -106,6 +106,10 @@ module.exports = React.createClass({
</tr>
) : ''
}
<tr>
<td>Session ID</td>
<td><code>{ event.getWireContent().session_id }</code></td>
</tr>
</tbody>
</table>
</div>

View file

@ -471,10 +471,10 @@ module.exports = React.createClass({
e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
}
else if (this.state.verified == true || (e2eEnabled && this.props.eventSendStatus)) {
e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" alt="Encrypted by a verified device"/>;
e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" width="10" height="12"/>;
}
else {
e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Encrypted by an unverified device!"/>;
e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
}
}
else if (e2eEnabled) {

View file

@ -87,6 +87,10 @@ export default class MemberDeviceInfo extends React.Component {
}
render() {
if (!this.props.device) {
return <div className="mx_MemberDeviceInfo"/>;
}
var indicator = null, blockButton = null, verifyButton = null;
if (this.props.device.isBlocked()) {
blockButton = (
@ -120,36 +124,39 @@ export default class MemberDeviceInfo extends React.Component {
);
}
if (this.props.device.isBlocked()) {
indicator = (
<div className="mx_MemberDeviceInfo_blocked">Blocked</div>
);
} else if (this.props.device.isVerified()) {
indicator = (
<div className="mx_MemberDeviceInfo_verified">Verified</div>
);
} else {
indicator = (
<div className="mx_MemberDeviceInfo_unverified">Unverified</div>
);
}
var deviceName = this.props.device.getDisplayName() || this.props.device.deviceId;
var info;
if (!this.props.hideInfo) {
info = (
<div className="mx_MemberDeviceInfo_deviceInfo">
<div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
{indicator}
if (this.props.device.isBlocked()) {
indicator = (
<div className="mx_MemberDeviceInfo_blocked">
<img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt="Blocked"/>
</div>
);
} else if (this.props.device.isVerified()) {
indicator = (
<div className="mx_MemberDeviceInfo_verified">
<img src="img/e2e-verified.svg" width="10" height="12" alt="Verified"/>
</div>
);
} else {
indicator = (
<div className="mx_MemberDeviceInfo_unverified">
<img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Unverified"/>
</div>
);
}
var deviceName = this.props.device.getDisplayName() || this.props.device.deviceId;
var info = (
<div className="mx_MemberDeviceInfo_deviceInfo" title={this.props.device.deviceId}>
<div className="mx_MemberDeviceInfo_deviceId">{deviceName}{indicator}</div>
</div>
);
}
// add the deviceId as a titletext to help with debugging
return (
<div className="mx_MemberDeviceInfo" title={this.props.device.deviceId}>
<div className="mx_MemberDeviceInfo">
{ info }
{ verifyButton }
{ blockButton }