Hack in a layout option

This commit is contained in:
Travis Ralston 2020-01-31 15:04:44 +00:00 committed by Bruno Windels
parent ee23bfe625
commit ea4d97fa73
4 changed files with 34 additions and 1 deletions

View file

@ -140,6 +140,7 @@ export default class CompleteSecurity extends React.Component {
if (this.state.verificationRequest) { if (this.state.verificationRequest) {
const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel"); const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
body = <EncryptionPanel body = <EncryptionPanel
layout="dialog"
verificationRequest={this.state.verificationRequest} verificationRequest={this.state.verificationRequest}
onClose={this.props.onFinished} onClose={this.props.onFinished}
member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)} member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}

View file

@ -28,6 +28,7 @@ export default class DeviceVerifyOwnDialog extends React.Component {
render() { render() {
const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel"); const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
return <EncryptionPanel return <EncryptionPanel
layout="dialog"
verificationRequest={this.props.verificationRequest} verificationRequest={this.props.verificationRequest}
onClose={this.props.onFinished} onClose={this.props.onFinished}
member={MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId)} member={MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId)}

View file

@ -30,7 +30,7 @@ import {_t} from "../../../languageHandler";
// cancellation codes which constitute a key mismatch // cancellation codes which constitute a key mismatch
const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"]; const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
const EncryptionPanel = ({verificationRequest, member, onClose}) => { const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
const [request, setRequest] = useState(verificationRequest); const [request, setRequest] = useState(verificationRequest);
useEffect(() => { useEffect(() => {
setRequest(verificationRequest); setRequest(verificationRequest);
@ -77,6 +77,7 @@ const EncryptionPanel = ({verificationRequest, member, onClose}) => {
} else { } else {
return ( return (
<VerificationPanel <VerificationPanel
layout={layout}
onClose={onClose} onClose={onClose}
member={member} member={member}
request={request} request={request}
@ -89,6 +90,7 @@ EncryptionPanel.propTypes = {
member: PropTypes.object.isRequired, member: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
verificationRequest: PropTypes.object, verificationRequest: PropTypes.object,
layout: PropTypes.string,
}; };
export default EncryptionPanel; export default EncryptionPanel;

View file

@ -31,9 +31,11 @@ import {
PHASE_CANCELLED, VerificationRequest, PHASE_CANCELLED, VerificationRequest,
} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
import Spinner from "../elements/Spinner"; import Spinner from "../elements/Spinner";
import AccessibleButton from "../elements/AccessibleButton";
export default class VerificationPanel extends React.PureComponent { export default class VerificationPanel extends React.PureComponent {
static propTypes = { static propTypes = {
layout: PropTypes.string,
request: PropTypes.object.isRequired, request: PropTypes.object.isRequired,
member: PropTypes.object.isRequired, member: PropTypes.object.isRequired,
phase: PropTypes.oneOf([ phase: PropTypes.oneOf([
@ -69,6 +71,33 @@ export default class VerificationPanel extends React.PureComponent {
const {member} = this.props; const {member} = this.props;
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
if (this.props.layout === 'dialog') {
// HACK: This is a terrible idea.
let qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
if (this.state.qrCodeProps) {
qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
}
return (
<div>
{_t("Verify this session by completing one of the following:")}
<div className='mx_IncomingSasDialog_startOptions'>
<div className='mx_IncomingSasDialog_startOption'>
<p>{_t("Scan this unique code")}</p>
{qrCode}
</div>
<div className='mx_IncomingSasDialog_betweenText'>{_t("or")}</div>
<div className='mx_IncomingSasDialog_startOption'>
<p>{_t("Compare unique emoji")}</p>
<span className='mx_IncomingSasDialog_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
<AccessibleButton onClick={this._startSAS} kind='primary'>
{_t("Start")}
</AccessibleButton>
</div>
</div>
</div>
);
}
let button; let button;
if (pending) { if (pending) {
button = <Spinner />; button = <Spinner />;