PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats 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() {

61
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}
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
return <VerificationShowSas
sas={this._showSasEvent.sas}
onCancel={this._onCancelClick}
onDone={this._onSasMatchesClick}
/>
</div>;
}
_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() {

40
src/components/views/verification/VerificationCancelled.js Normal file
View file

@ -0,0 +1,40 @@
/*
Copyright 2019 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import { _t } from '../../../languageHandler';
export default class VerificationCancelled extends React.Component {
static propTypes = {
onDone: PropTypes.func.isRequired,
}
render() {
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.props.onDone}
/>
</div>;
}
};

42
src/components/views/verification/VerificationComplete.js Normal file
View file

@ -0,0 +1,42 @@
/*
Copyright 2019 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import { _t } from '../../../languageHandler';
export default class VerificationComplete extends React.Component {
static propTypes = {
onDone: PropTypes.func.isRequired,
}
render() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <div>
<h2>{_t("Verified!")}</h2>
<p>{_t("You've successfully verified this user.")}</p>
<p>{_t(
"Secure messages with this user are end-to-end encrypted and not able to be " +
"read by third parties.",
)}</p>
<DialogButtons onPrimaryButtonClick={this.props.onDone}
primaryButton={_t("Got It")}
hasCancel={false}
/>
</div>;
}
};

65
src/components/views/verification/VerificationShowSas.js Normal file
View file

@ -0,0 +1,65 @@
/*
Copyright 2019 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import { _t } from '../../../languageHandler';
export default class VerificationShowSas extends React.Component {
static propTypes = {
onDone: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
sas: PropTypes.string.isRequired,
}
constructor() {
super();
this.state = {
sasVerified: false,
};
}
_onVerifiedStateChange = (newVal) => {
this.setState({sasVerified: newVal});
}
render() {
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.props.sas}
onVerifiedStateChange={this._onVerifiedStateChange}
/>
<p>{_t(
"To continue, click on each pair to confirm it's correct.",
)}</p>
<DialogButtons onPrimaryButtonClick={this.props.onDone}
primaryButton={_t("Continue")}
primaryDisabled={!this.state.sasVerified}
hasCancel={true}
onCancel={this.props.onCancel}
/>
</div>;
}
};

25
src/i18n/strings/en_EN.json
View file

@ -320,6 +320,16 @@
"Incoming call from %(name)s": "Incoming call from %(name)s",
"Decline": "Decline",
"Accept": "Accept",
"The other party cancelled the verification.": "The other party cancelled the verification.",
"Cancel": "Cancel",
"Verified!": "Verified!",
"You've successfully verified this user.": "You've successfully verified this user.",
"Secure messages with this user are end-to-end encrypted and not able to be read by third parties.": "Secure messages with this user are end-to-end encrypted and not able to be read by third parties.",
"Got It": "Got It",
"Verify this user by confirming the following number appears on their screen": "Verify this user by confirming the following number appears on their screen",
"For maximum security, we reccommend you do this in person or use another trusted means of communication": "For maximum security, we reccommend you do this in person or use another trusted means of communication",
"To continue, click on each pair to confirm it's correct.": "To continue, click on each pair to confirm it's correct.",
"Continue": "Continue",
"A text message has been sent to +%(msisdn)s. Please enter the verification code it contains": "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains",
"Incorrect verification code": "Incorrect verification code",
"Enter Code": "Enter Code",
@ -334,7 +344,6 @@
"Passwords can't be empty": "Passwords can't be empty",
"Warning!": "Warning!",
"Changing password will currently reset any end-to-end encryption keys on all devices, making encrypted chat history unreadable, unless you first export your room keys and re-import them afterwards. In future this will be improved.": "Changing password will currently reset any end-to-end encryption keys on all devices, making encrypted chat history unreadable, unless you first export your room keys and re-import them afterwards. In future this will be improved.",
"Continue": "Continue",
"Export E2E room keys": "Export E2E room keys",
"Do you want to set an email address?": "Do you want to set an email address?",
"Current password": "Current password",
@ -648,7 +657,6 @@
"Search…": "Search…",
"This Room": "This Room",
"All Rooms": "All Rooms",
"Cancel": "Cancel",
"You don't currently have any stickerpacks enabled": "You don't currently have any stickerpacks enabled",
"Add some now": "Add some now",
"Stickerpack": "Stickerpack",
@ -943,14 +951,9 @@
"password": "password",
"Verify device": "Verify device",
"Use Legacy Verification (for older clients)": "Use Legacy Verification (for older clients)",
"Do clicky clicky button press request verify user send to do.": "Do clicky clicky button press request verify user send to do.",
"Send Verification Request": "Send Verification Request",
"Verify this user by confirming the following number appears on their screen": "Verify this user by confirming the following number appears on their screen",
"For maximum security, we reccommend you do this in person or use another trusted means of communication": "For maximum security, we reccommend you do this in person or use another trusted means of communication",
"To continue, click on each pair to confirm it's correct.": "To continue, click on each pair to confirm it's correct.",
"Verification complete!": "Verification complete!",
"Done": "Done",
"%(userId)s cancelled the verification.": "%(userId)s cancelled the verification.",
"Verify by comparing a short text string.": "Verify by comparing a short text string.",
"For maximum security, we recommend you do this in person or use another trusted means of communication.": "For maximum security, we recommend you do this in person or use another trusted means of communication.",
"Begin Verifying": "Begin Verifying",
"Use two-way text verification": "Use two-way text verification",
"To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:": "To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:",
"Device name": "Device name",
@ -976,8 +979,6 @@
"Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.": "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.",
"Verifying this user will mark their device as trusted, and also mark your device as trusted to them": "Verifying this user will mark their device as trusted, and also mark your device as trusted to them",
"Waiting for partner to confirm...": "Waiting for partner to confirm...",
"Verification Complete!": "Verification Complete!",
"The other party cancelled the verification.": "The other party cancelled the verification.",
"Incoming Verification Request": "Incoming Verification Request",
"You added a new device '%(displayName)s', which is requesting encryption keys.": "You added a new device '%(displayName)s', which is requesting encryption keys.",
"Your unverified device '%(displayName)s' is requesting encryption keys.": "Your unverified device '%(displayName)s' is requesting encryption keys.",