diff --git a/src/components/views/dialogs/DeviceVerifyDialog.js b/src/components/views/dialogs/DeviceVerifyDialog.js
index d78ef3ca83..0b2470c92b 100644
--- a/src/components/views/dialogs/DeviceVerifyDialog.js
+++ b/src/components/views/dialogs/DeviceVerifyDialog.js
@@ -27,16 +27,19 @@ import {verificationMethods} from 'matrix-js-sdk/src/crypto';
import {ensureDMExists} from "../../../createRoom";
import dis from "../../../dispatcher";
import SettingsStore from '../../../settings/SettingsStore';
+import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
+import VerificationQREmojiOptions from "../verification/VerificationQREmojiOptions";
const MODE_LEGACY = 'legacy';
const MODE_SAS = 'sas';
const PHASE_START = 0;
const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
-const PHASE_SHOW_SAS = 2;
-const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 3;
-const PHASE_VERIFIED = 4;
-const PHASE_CANCELLED = 5;
+const PHASE_PICK_VERIFICATION_OPTION = 2;
+const PHASE_SHOW_SAS = 3;
+const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 4;
+const PHASE_VERIFIED = 5;
+const PHASE_CANCELLED = 6;
export default class DeviceVerifyDialog extends React.Component {
static propTypes = {
@@ -49,6 +52,7 @@ export default class DeviceVerifyDialog extends React.Component {
super();
this._verifier = null;
this._showSasEvent = null;
+ this._request = null;
this.state = {
phase: PHASE_START,
mode: MODE_SAS,
@@ -80,6 +84,25 @@ export default class DeviceVerifyDialog extends React.Component {
this.props.onFinished(false);
}
+ _onUseSasClick = async () => {
+ try {
+ this._verifier = this._request.beginKeyVerification(verificationMethods.SAS);
+ this._verifier.on('show_sas', this._onVerifierShowSas);
+ // throws upon cancellation
+ await this._verifier.verify();
+ this.setState({phase: PHASE_VERIFIED});
+ this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+ this._verifier = null;
+ } catch (e) {
+ console.log("Verification failed", e);
+ this.setState({
+ phase: PHASE_CANCELLED,
+ });
+ this._verifier = null;
+ this._request = null;
+ }
+ };
+
_onLegacyFinished = (confirm) => {
if (confirm) {
MatrixClientPeg.get().setDeviceVerified(
@@ -108,11 +131,20 @@ export default class DeviceVerifyDialog extends React.Component {
} else {
this._verifier = request.verifier;
}
+ } else if (verifyingOwnDevice && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+ this._request = await client.requestVerification(this.props.userId,[
+ verificationMethods.SAS,
+ SHOW_QR_CODE_METHOD,
+ ]);
+
+ await this._request.waitFor(r => r.ready || r.started);
+ this.setState({phase: PHASE_PICK_VERIFICATION_OPTION});
} else {
this._verifier = client.beginKeyVerification(
verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
);
}
+ if (!this._verifier) return;
this._verifier.on('show_sas', this._onVerifierShowSas);
// throws upon cancellation
await this._verifier.verify();
@@ -150,10 +182,13 @@ export default class DeviceVerifyDialog extends React.Component {
let body;
switch (this.state.phase) {
case PHASE_START:
- body = this._renderSasVerificationPhaseStart();
+ body = this._renderVerificationPhaseStart();
break;
case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
- body = this._renderSasVerificationPhaseWaitAccept();
+ body = this._renderVerificationPhaseWaitAccept();
+ break;
+ case PHASE_PICK_VERIFICATION_OPTION:
+ body = this._renderVerificationPhasePick();
break;
case PHASE_SHOW_SAS:
body = this._renderSasVerificationPhaseShowSas();
@@ -162,10 +197,10 @@ export default class DeviceVerifyDialog extends React.Component {
body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
break;
case PHASE_VERIFIED:
- body = this._renderSasVerificationPhaseVerified();
+ body = this._renderVerificationPhaseVerified();
break;
case PHASE_CANCELLED:
- body = this._renderSasVerificationPhaseCancelled();
+ body = this._renderVerificationPhaseCancelled();
break;
}
@@ -180,7 +215,7 @@ export default class DeviceVerifyDialog extends React.Component {
);
}
- _renderSasVerificationPhaseStart() {
+ _renderVerificationPhaseStart() {
const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return (
@@ -206,7 +241,7 @@ export default class DeviceVerifyDialog extends React.Component {
);
}
- _renderSasVerificationPhaseWaitAccept() {
+ _renderVerificationPhaseWaitAccept() {
const Spinner = sdk.getComponent("views.elements.Spinner");
const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
@@ -227,6 +262,14 @@ export default class DeviceVerifyDialog extends React.Component {
);
}
+ _renderVerificationPhasePick() {
+ return
{_t("Scan this unique code")}
+ {qrCode} +{_t("Compare unique emoji")}
+ {_t("Compare a unique set of emoji if you don't have a camera on either device")} +