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

Move common UI bits out to separate components

Browse source
This commit is contained in:
David Baker 2019-01-18 18:24:38 +00:00
parent ec2d51cbbb
commit 4f2f2f4f4e
6 changed files with 184 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -103,10 +103,6 @@ export default class DeviceVerifyDialog extends React.Component {
});
}
_onVerifyStateChanged = (newVal) => {
this.setState({sasVerified: newVal});
}
_onSasMatchesClick = () => {
this._showSasEvent.confirm();
this.setState({
@ -170,10 +166,16 @@ export default class DeviceVerifyDialog extends React.Component {
{_t("Use Legacy Verification (for older clients)")}
</AccessibleButton>
<p>
{ _t("Do clicky clicky button press request verify user send to do.") }
{ _t("Verify by comparing a short text string.") }
</p>
<p>
{_t(
"For maximum security, we recommend you do this in person or " +
"use another trusted means of communication.",
)}
</p>
<DialogButtons
primaryButton={_t('Send Verification Request')}
primaryButton={_t('Begin Verifying')}
hasCancel={true}
onPrimaryButtonClick={this._onSasRequestClick}
onCancel={this._onCancelClick}
@ -183,29 +185,8 @@ 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"
)}</p>
<p>{_t(
"For maximum security, we reccommend you do this in person or use another " +
"trusted means of communication"
)}</p>
<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("Continue")}
primaryDisabled={!this.state.sasVerified}
hasCancel={true}
onCancel={this._onCancelClick}
/>
</div>;
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
return <VerificationShowSas sas={this._showSasEvent.sas} onCancel={this._onCancelClick} onDone={this._onSasMatchesClick} />
}
_renderSasVerificationPhaseWaitForPartnerToConfirm() {
@ -219,31 +200,13 @@ export default class DeviceVerifyDialog extends React.Component {
}
_renderSasVerificationPhaseVerified() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <div>
<p>{_t("Verification complete!")}</p>
<DialogButtons onPrimaryButtonClick={this._onVerifiedDoneClick}
primaryButton={_t("Done")}
hasCancel={false}
/>
</div>;
const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
return <VerificationComplete onDone={this._onVerifiedDoneClick} />
}
_renderSasVerificationPhaseCancelled() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return (
<div>
<p>{_t(
"%(userId)s cancelled the verification.", {userId: this.props.userId},
)}</p>
<DialogButtons
primaryButton={_t('Cancel')}
hasCancel={false}
onPrimaryButtonClick={this._onCancelClick}
/>
</div>
);
const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
return <VerificationCancelled onDone={this._onCancelClick} />
}
_renderLegacyVerification() {

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

@ -82,10 +82,6 @@ export default class IncomingSasDialog extends React.Component {
});
}
_onVerifiedStateChange = (newVal) => {
this.setState({sasVerified: newVal});
}
_onSasMatchesClick = () => {
this._showSasEvent.confirm();
this.setState({
@ -125,29 +121,12 @@ 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"
)}</p>
<p>{_t(
"For maximum security, we reccommend you do this in person or use another " +
"trusted means of communication"
)}</p>
<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("Continue")}
primaryDisabled={!this.state.sasVerified}
hasCancel={true}
onCancel={this._onCancelClick}
/>
</div>;
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
return <VerificationShowSas
sas={this._showSasEvent.sas}
onCancel={this._onCancelClick}
onDone={this._onSasMatchesClick}
/>
}
_renderPhaseWaitForPartnerToConfirm() {
@ -162,37 +141,13 @@ export default class IncomingSasDialog extends React.Component {
}
_renderPhaseVerified() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return (
<div>
<p>{_t(
"Verification Complete!"
)}</p>
<DialogButtons
primaryButton={_t('Done')}
hasCancel={false}
onPrimaryButtonClick={this._onVerifiedDoneClick}
/>
</div>
);
const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
return <VerificationComplete onDone={this._onVerifiedDoneClick} />
}
_renderPhaseCancelled() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return (
<div>
<p>{_t(
"The other party cancelled the verification."
)}</p>
<DialogButtons
primaryButton={_t('Cancel')}
hasCancel={false}
onPrimaryButtonClick={this._onCancelClick}
/>
</div>
);
const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
return <VerificationCancelled onDone={this._onCancelClick} />
}
render() {