improve device info
This commit is contained in:
parent
8bda0bb095
commit
ce655c7f50
3 changed files with 41 additions and 30 deletions
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 }
|
||||
|
|
Loading…
Reference in a new issue