imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SAS verification screen matching design

Browse source
This commit is contained in:
David Baker 2019-01-18 16:56:49 +00:00
parent 1d2538a7bc
commit ec2d51cbbb
6 changed files with 168 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/dialogs/DeviceVerifyDialog.js
View file

@ -50,6 +50,7 @@ export default class DeviceVerifyDialog extends React.Component {
this.state = {
phase: PHASE_START,
mode: SettingsStore.isFeatureEnabled("feature_sas") ? MODE_SAS : MODE_LEGACY,
sasVerified: false,
};
}
@ -102,6 +103,10 @@ export default class DeviceVerifyDialog extends React.Component {
});
}
_onVerifyStateChanged = (newVal) => {
this.setState({sasVerified: newVal});
}
_onSasMatchesClick = () => {
this._showSasEvent.confirm();
this.setState({
@ -127,7 +132,6 @@ export default class DeviceVerifyDialog extends React.Component {
body = this._renderSasVerificationPhaseStart();
break;
case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
//body = this._renderSasVerificationPhaseWaitForPartnerToAccept();
body = renderSasWaitAccept(this.props.userId);
break;
case PHASE_SHOW_SAS:
@ -180,6 +184,7 @@ export default class DeviceVerifyDialog extends React.Component {
_renderSasVerificationPhaseShowSas() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const HexVerify = sdk.getComponent('views.elements.HexVerify');
return <div>
<p>{_t(
"Verify this user by confirming the following number appears on their screen"
@ -188,9 +193,15 @@ export default class DeviceVerifyDialog extends React.Component {
"For maximum security, we reccommend you do this in person or use another " +
"trusted means of communication"
)}</p>
<pre>{this._showSasEvent.sas}</pre>
<HexVerify text={this._showSasEvent.sas}
onVerifiedStateChange={this._onVerifyStateChanged}
/>
<p>{_t(
"To continue, click on each pair to confirm it's correct.",
)}</p>
<DialogButtons onPrimaryButtonClick={this._onSasMatchesClick}
primaryButton={_t("This Matches")}
primaryButton={_t("Continue")}
primaryDisabled={!this.state.sasVerified}
hasCancel={true}
onCancel={this._onCancelClick}
/>

17
src/components/views/dialogs/IncomingSasDialog.js
View file

@ -38,6 +38,7 @@ export default class IncomingSasDialog extends React.Component {
this._showSasEvent = null;
this.state = {
phase: PHASE_START,
sasVerified: false,
};
this.props.verifier.on('show_sas', this._onVerifierShowSas);
this.props.verifier.on('cancel', this._onVerifierCancel);
@ -81,6 +82,10 @@ export default class IncomingSasDialog extends React.Component {
});
}
_onVerifiedStateChange = (newVal) => {
this.setState({sasVerified: newVal});
}
_onSasMatchesClick = () => {
this._showSasEvent.confirm();
this.setState({
@ -121,6 +126,7 @@ export default class IncomingSasDialog extends React.Component {
_renderPhaseShowSas() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const HexVerify = sdk.getComponent('views.elements.HexVerify');
return <div>
<p>{_t(
"Verify this user by confirming the following number appears on their screen"
@ -129,9 +135,15 @@ export default class IncomingSasDialog extends React.Component {
"For maximum security, we reccommend you do this in person or use another " +
"trusted means of communication"
)}</p>
<pre>{this._showSasEvent.sas}</pre>
<HexVerify text={this._showSasEvent.sas}
onVerifiedStateChange={this._onVerifiedStateChange}
/>
<p>{_t(
"To continue, click on each pair to confirm it's correct.",
)}</p>
<DialogButtons onPrimaryButtonClick={this._onSasMatchesClick}
primaryButton={_t("This Matches")}
primaryButton={_t("Continue")}
primaryDisabled={!this.state.sasVerified}
hasCancel={true}
onCancel={this._onCancelClick}
/>
@ -184,7 +196,6 @@ export default class IncomingSasDialog extends React.Component {
}
render() {
console.log("rendering pahse "+this.state.phase);
let body;
switch (this.state.phase) {
case PHASE_START: