Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import { verificationMethods } from 'matrix-js-sdk/src/crypto';
|
||||
import { verificationMethods } from "matrix-js-sdk/src/crypto";
|
||||
import { QrCodeEvent, ReciprocateQRCode, SCAN_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
|
||||
import {
|
||||
Phase,
|
||||
|
|
@ -68,52 +68,64 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
const showQR: boolean = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
|
||||
const brand = SdkConfig.get().brand;
|
||||
|
||||
const noCommonMethodError: JSX.Element = !showSAS && !showQR ?
|
||||
<p>{ _t(
|
||||
"The device you are trying to verify doesn't support scanning a " +
|
||||
"QR code or emoji verification, which is what %(brand)s supports. Try " +
|
||||
"with a different client.",
|
||||
{ brand },
|
||||
) }</p> :
|
||||
null;
|
||||
const noCommonMethodError: JSX.Element =
|
||||
!showSAS && !showQR ? (
|
||||
<p>
|
||||
{_t(
|
||||
"The device you are trying to verify doesn't support scanning a " +
|
||||
"QR code or emoji verification, which is what %(brand)s supports. Try " +
|
||||
"with a different client.",
|
||||
{ brand },
|
||||
)}
|
||||
</p>
|
||||
) : null;
|
||||
|
||||
if (this.props.layout === 'dialog') {
|
||||
if (this.props.layout === "dialog") {
|
||||
// HACK: This is a terrible idea.
|
||||
let qrBlockDialog: JSX.Element;
|
||||
let sasBlockDialog: JSX.Element;
|
||||
if (showQR) {
|
||||
qrBlockDialog =
|
||||
<div className='mx_VerificationPanel_QRPhase_startOption'>
|
||||
<p>{ _t("Scan this unique code") }</p>
|
||||
qrBlockDialog = (
|
||||
<div className="mx_VerificationPanel_QRPhase_startOption">
|
||||
<p>{_t("Scan this unique code")}</p>
|
||||
<VerificationQRCode qrCodeData={request.qrCodeData} />
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (showSAS) {
|
||||
sasBlockDialog = <div className='mx_VerificationPanel_QRPhase_startOption'>
|
||||
<p>{ _t("Compare unique emoji") }</p>
|
||||
<span className='mx_VerificationPanel_QRPhase_helpText'>
|
||||
{ _t("Compare a unique set of emoji if you don't have a camera on either device") }
|
||||
</span>
|
||||
<AccessibleButton disabled={this.state.emojiButtonClicked} onClick={this.startSAS} kind='primary'>
|
||||
{ _t("Start") }
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
sasBlockDialog = (
|
||||
<div className="mx_VerificationPanel_QRPhase_startOption">
|
||||
<p>{_t("Compare unique emoji")}</p>
|
||||
<span className="mx_VerificationPanel_QRPhase_helpText">
|
||||
{_t("Compare a unique set of emoji if you don't have a camera on either device")}
|
||||
</span>
|
||||
<AccessibleButton
|
||||
disabled={this.state.emojiButtonClicked}
|
||||
onClick={this.startSAS}
|
||||
kind="primary"
|
||||
>
|
||||
{_t("Start")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const or = qrBlockDialog && sasBlockDialog ?
|
||||
<div className='mx_VerificationPanel_QRPhase_betweenText'>
|
||||
{ _t("%(qrCode)s or %(emojiCompare)s", {
|
||||
emojiCompare: "",
|
||||
qrCode: "",
|
||||
}) }
|
||||
</div> : null;
|
||||
const or =
|
||||
qrBlockDialog && sasBlockDialog ? (
|
||||
<div className="mx_VerificationPanel_QRPhase_betweenText">
|
||||
{_t("%(qrCode)s or %(emojiCompare)s", {
|
||||
emojiCompare: "",
|
||||
qrCode: "",
|
||||
})}
|
||||
</div>
|
||||
) : null;
|
||||
return (
|
||||
<div>
|
||||
{ _t("Verify this device by completing one of the following:") }
|
||||
<div className='mx_VerificationPanel_QRPhase_startOptions'>
|
||||
{ qrBlockDialog }
|
||||
{ or }
|
||||
{ sasBlockDialog }
|
||||
{ noCommonMethodError }
|
||||
{_t("Verify this device by completing one of the following:")}
|
||||
<div className="mx_VerificationPanel_QRPhase_startOptions">
|
||||
{qrBlockDialog}
|
||||
{or}
|
||||
{sasBlockDialog}
|
||||
{noCommonMethodError}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -121,50 +133,58 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
|
||||
let qrBlock: JSX.Element;
|
||||
if (showQR) {
|
||||
qrBlock = <div className="mx_UserInfo_container">
|
||||
<h3>{ _t("Verify by scanning") }</h3>
|
||||
<p>{ _t("Ask %(displayName)s to scan your code:", {
|
||||
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
|
||||
}) }</p>
|
||||
qrBlock = (
|
||||
<div className="mx_UserInfo_container">
|
||||
<h3>{_t("Verify by scanning")}</h3>
|
||||
<p>
|
||||
{_t("Ask %(displayName)s to scan your code:", {
|
||||
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
|
||||
})}
|
||||
</p>
|
||||
|
||||
<div className="mx_VerificationPanel_qrCode">
|
||||
<VerificationQRCode qrCodeData={request.qrCodeData} />
|
||||
<div className="mx_VerificationPanel_qrCode">
|
||||
<VerificationQRCode qrCodeData={request.qrCodeData} />
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
);
|
||||
}
|
||||
|
||||
let sasBlock: JSX.Element;
|
||||
if (showSAS) {
|
||||
const disabled = this.state.emojiButtonClicked;
|
||||
const sasLabel = showQR ?
|
||||
_t("If you can't scan the code above, verify by comparing unique emoji.") :
|
||||
_t("Verify by comparing unique emoji.");
|
||||
const sasLabel = showQR
|
||||
? _t("If you can't scan the code above, verify by comparing unique emoji.")
|
||||
: _t("Verify by comparing unique emoji.");
|
||||
|
||||
// Note: mx_VerificationPanel_verifyByEmojiButton is for the end-to-end tests
|
||||
sasBlock = <div className="mx_UserInfo_container">
|
||||
<h3>{ _t("Verify by emoji") }</h3>
|
||||
<p>{ sasLabel }</p>
|
||||
<AccessibleButton
|
||||
disabled={disabled}
|
||||
kind="primary"
|
||||
className="mx_UserInfo_wideButton mx_VerificationPanel_verifyByEmojiButton"
|
||||
onClick={this.startSAS}
|
||||
>
|
||||
{ _t("Verify by emoji") }
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
sasBlock = (
|
||||
<div className="mx_UserInfo_container">
|
||||
<h3>{_t("Verify by emoji")}</h3>
|
||||
<p>{sasLabel}</p>
|
||||
<AccessibleButton
|
||||
disabled={disabled}
|
||||
kind="primary"
|
||||
className="mx_UserInfo_wideButton mx_VerificationPanel_verifyByEmojiButton"
|
||||
onClick={this.startSAS}
|
||||
>
|
||||
{_t("Verify by emoji")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const noCommonMethodBlock = noCommonMethodError ?
|
||||
<div className="mx_UserInfo_container">{ noCommonMethodError }</div> :
|
||||
null;
|
||||
const noCommonMethodBlock = noCommonMethodError ? (
|
||||
<div className="mx_UserInfo_container">{noCommonMethodError}</div>
|
||||
) : null;
|
||||
|
||||
// TODO: add way to open camera to scan a QR code
|
||||
return <React.Fragment>
|
||||
{ qrBlock }
|
||||
{ sasBlock }
|
||||
{ noCommonMethodBlock }
|
||||
</React.Fragment>;
|
||||
return (
|
||||
<React.Fragment>
|
||||
{qrBlock}
|
||||
{sasBlock}
|
||||
{noCommonMethodBlock}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
private onReciprocateYesClick = () => {
|
||||
|
|
@ -184,41 +204,49 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
|
||||
private renderQRReciprocatePhase() {
|
||||
const { member, request } = this.props;
|
||||
const description = request.isSelfVerification ?
|
||||
_t("Almost there! Is your other device showing the same shield?") :
|
||||
_t("Almost there! Is %(displayName)s showing the same shield?", {
|
||||
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
|
||||
});
|
||||
const description = request.isSelfVerification
|
||||
? _t("Almost there! Is your other device showing the same shield?")
|
||||
: _t("Almost there! Is %(displayName)s showing the same shield?", {
|
||||
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
|
||||
});
|
||||
let body: JSX.Element;
|
||||
if (this.state.reciprocateQREvent) {
|
||||
// Element Web doesn't support scanning yet, so assume here we're the client being scanned.
|
||||
body = <React.Fragment>
|
||||
<p>{ description }</p>
|
||||
<E2EIcon isUser={true} status={E2EState.Verified} size={128} hideTooltip={true} />
|
||||
<div className="mx_VerificationPanel_reciprocateButtons">
|
||||
<AccessibleButton
|
||||
kind="danger"
|
||||
disabled={this.state.reciprocateButtonClicked}
|
||||
onClick={this.onReciprocateNoClick}
|
||||
>
|
||||
{ _t("No") }
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
kind="primary"
|
||||
disabled={this.state.reciprocateButtonClicked}
|
||||
onClick={this.onReciprocateYesClick}
|
||||
>
|
||||
{ _t("Yes") }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
body = (
|
||||
<React.Fragment>
|
||||
<p>{description}</p>
|
||||
<E2EIcon isUser={true} status={E2EState.Verified} size={128} hideTooltip={true} />
|
||||
<div className="mx_VerificationPanel_reciprocateButtons">
|
||||
<AccessibleButton
|
||||
kind="danger"
|
||||
disabled={this.state.reciprocateButtonClicked}
|
||||
onClick={this.onReciprocateNoClick}
|
||||
>
|
||||
{_t("No")}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
kind="primary"
|
||||
disabled={this.state.reciprocateButtonClicked}
|
||||
onClick={this.onReciprocateYesClick}
|
||||
>
|
||||
{_t("Yes")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
} else {
|
||||
body = <p><Spinner /></p>;
|
||||
body = (
|
||||
<p>
|
||||
<Spinner />
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return <div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
|
||||
<h3>{ _t("Verify by scanning") }</h3>
|
||||
{ body }
|
||||
</div>;
|
||||
return (
|
||||
<div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
|
||||
<h3>{_t("Verify by scanning")}</h3>
|
||||
{body}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderVerifiedPhase() {
|
||||
|
|
@ -243,7 +271,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
description = _t("You've successfully verified your device!");
|
||||
} else {
|
||||
description = _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
|
||||
deviceName: device ? device.getDisplayName() : '',
|
||||
deviceName: device ? device.getDisplayName() : "",
|
||||
deviceId: this.props.request.channel.deviceId,
|
||||
});
|
||||
}
|
||||
|
|
@ -255,11 +283,11 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
|
||||
return (
|
||||
<div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
|
||||
<p>{ description }</p>
|
||||
<p>{description}</p>
|
||||
<E2EIcon isUser={true} status={E2EState.Verified} size={128} hideTooltip={true} />
|
||||
{ text ? <p>{ text }</p> : null }
|
||||
{text ? <p>{text}</p> : null}
|
||||
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
|
||||
{ _t("Got it") }
|
||||
{_t("Got it")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -293,11 +321,11 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
|
||||
return (
|
||||
<div className="mx_UserInfo_container">
|
||||
<h3>{ _t("Verification cancelled") }</h3>
|
||||
<p>{ text }</p>
|
||||
<h3>{_t("Verification cancelled")}</h3>
|
||||
<p>{text}</p>
|
||||
|
||||
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
|
||||
{ _t("Got it") }
|
||||
{_t("Got it")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -316,7 +344,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
case verificationMethods.RECIPROCATE_QR_CODE:
|
||||
return this.renderQRReciprocatePhase();
|
||||
case verificationMethods.SAS: {
|
||||
const emojis = this.state.sasEvent ?
|
||||
const emojis = this.state.sasEvent ? (
|
||||
<VerificationShowSas
|
||||
displayName={displayName}
|
||||
device={this.getDevice()}
|
||||
|
|
@ -325,10 +353,11 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
|
|||
onDone={this.onSasMatchesClick}
|
||||
inDialog={this.props.inDialog}
|
||||
isSelf={request.isSelfVerification}
|
||||
/> : <Spinner />;
|
||||
return <div className="mx_UserInfo_container">
|
||||
{ emojis }
|
||||
</div>;
|
||||
/>
|
||||
) : (
|
||||
<Spinner />
|
||||
);
|
||||
return <div className="mx_UserInfo_container">{emojis}</div>;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue