OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert IncomingSasDialog to TS 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-09-05 17:15:33 +02:00
parent 5967811cda
commit ae631f9fce
No known key found for this signature in database
GPG Key ID: 55C211A1226CB17D
1 changed files with 73 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/views/dialogs/IncomingSasDialog.js → src/components/views/dialogs/IncomingSasDialog.tsx
View File

@ -15,12 +15,17 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { MatrixClientPeg } from '../../../MatrixClientPeg';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media"; import { mediaFromMxc } from "../../../customisations/Media";
import VerificationComplete from "../verification/VerificationComplete";
import VerificationCancelled from "../verification/VerificationCancelled";
import BaseAvatar from "../avatars/BaseAvatar";
import Spinner from "../elements/Spinner";
import VerificationShowSas from "../verification/VerificationShowSas";
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
const PHASE_START = 0; const PHASE_START = 0;
const PHASE_SHOW_SAS = 1; const PHASE_SHOW_SAS = 1;
@ -28,13 +33,28 @@ const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
const PHASE_VERIFIED = 3; const PHASE_VERIFIED = 3;
const PHASE_CANCELLED = 4; const PHASE_CANCELLED = 4;
@replaceableComponent("views.dialogs.IncomingSasDialog") interface IProps {
export default class IncomingSasDialog extends React.Component { verifier: any; // TODO types
static propTypes = { onFinished: (confirmed: boolean) => void;
verifier: PropTypes.object.isRequired, }
};
constructor(props) { interface IState {
phase: number;
sasVerified: boolean;
opponentProfile: {
// eslint-disable-next-line camelcase
avatar_url?: string;
displayname?: string;
};
opponentProfileError: Error;
sas: any; // TODO types
}
@replaceableComponent("views.dialogs.IncomingSasDialog")
export default class IncomingSasDialog extends React.Component<IProps, IState> {
private showSasEvent: any; // TODO: Types
constructor(props: IProps) {
super(props); super(props);
let phase = PHASE_START; let phase = PHASE_START;
@ -43,26 +63,27 @@ export default class IncomingSasDialog extends React.Component {
phase = PHASE_CANCELLED; phase = PHASE_CANCELLED;
} }
this._showSasEvent = null; this.showSasEvent = null;
this.state = { this.state = {
phase: phase, phase: phase,
sasVerified: false, sasVerified: false,
opponentProfile: null, opponentProfile: null,
opponentProfileError: null, opponentProfileError: null,
sas: null,
}; };
this.props.verifier.on('show_sas', this._onVerifierShowSas); this.props.verifier.on('show_sas', this.onVerifierShowSas);
this.props.verifier.on('cancel', this._onVerifierCancel); this.props.verifier.on('cancel', this.onVerifierCancel);
this._fetchOpponentProfile(); this.fetchOpponentProfile();
} }
componentWillUnmount() { public componentWillUnmount(): void {
if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) { if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) {
this.props.verifier.cancel('User cancel'); this.props.verifier.cancel('User cancel');
} }
this.props.verifier.removeListener('show_sas', this._onVerifierShowSas); this.props.verifier.removeListener('show_sas', this.onVerifierShowSas);
} }
async _fetchOpponentProfile() { private async fetchOpponentProfile(): Promise<void> {
try { try {
const prof = await MatrixClientPeg.get().getProfileInfo( const prof = await MatrixClientPeg.get().getProfileInfo(
this.props.verifier.userId, this.props.verifier.userId,
@ -77,53 +98,51 @@ export default class IncomingSasDialog extends React.Component {
} }
} }
_onFinished = () => { private onFinished = (): void => {
this.props.onFinished(this.state.phase === PHASE_VERIFIED); this.props.onFinished(this.state.phase === PHASE_VERIFIED);
} };
_onCancelClick = () => { private onCancelClick = (): void => {
this.props.onFinished(this.state.phase === PHASE_VERIFIED); this.props.onFinished(this.state.phase === PHASE_VERIFIED);
} };
_onContinueClick = () => { private onContinueClick = (): void => {
this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM }); this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM });
this.props.verifier.verify().then(() => { this.props.verifier.verify().then(() => {
this.setState({ phase: PHASE_VERIFIED }); this.setState({ phase: PHASE_VERIFIED });
}).catch((e) => { }).catch((e) => {
console.log("Verification failed", e); console.log("Verification failed", e);
}); });
} };
_onVerifierShowSas = (e) => { // TODO: Types
this._showSasEvent = e; private onVerifierShowSas = (e): void => {
this.showSasEvent = e;
this.setState({ this.setState({
phase: PHASE_SHOW_SAS, phase: PHASE_SHOW_SAS,
sas: e.sas, sas: e.sas,
}); });
} };
_onVerifierCancel = (e) => { // TODO: Types
private onVerifierCancel = (e): void => {
this.setState({ this.setState({
phase: PHASE_CANCELLED, phase: PHASE_CANCELLED,
}); });
} };
_onSasMatchesClick = () => { private onSasMatchesClick = (): void => {
this._showSasEvent.confirm(); this.showSasEvent.confirm();
this.setState({ this.setState({
phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM, phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
}); });
} };
_onVerifiedDoneClick = () => { private onVerifiedDoneClick = (): void => {
this.props.onFinished(true); this.props.onFinished(true);
} };
_renderPhaseStart() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const Spinner = sdk.getComponent("views.elements.Spinner");
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
private renderPhaseStart(): JSX.Element {
const isSelf = this.props.verifier.userId === MatrixClientPeg.get().getUserId(); const isSelf = this.props.verifier.userId === MatrixClientPeg.get().getUserId();
let profile; let profile;
@ -190,27 +209,24 @@ export default class IncomingSasDialog extends React.Component {
<DialogButtons <DialogButtons
primaryButton={_t('Continue')} primaryButton={_t('Continue')}
hasCancel={true} hasCancel={true}
onPrimaryButtonClick={this._onContinueClick} onPrimaryButtonClick={this.onContinueClick}
onCancel={this._onCancelClick} onCancel={this.onCancelClick}
/> />
</div> </div>
); );
} }
_renderPhaseShowSas() { private renderPhaseShowSas(): JSX.Element {
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
return <VerificationShowSas return <VerificationShowSas
sas={this._showSasEvent.sas} sas={this.showSasEvent.sas}
onCancel={this._onCancelClick} onCancel={this.onCancelClick}
onDone={this._onSasMatchesClick} onDone={this.onSasMatchesClick}
isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()} isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
inDialog={true} inDialog={true}
/>; />;
} }
_renderPhaseWaitForPartnerToConfirm() { private renderPhaseWaitForPartnerToConfirm(): JSX.Element {
const Spinner = sdk.getComponent("views.elements.Spinner");
return ( return (
<div> <div>
<Spinner /> <Spinner />
@ -219,41 +235,38 @@ export default class IncomingSasDialog extends React.Component {
); );
} }
_renderPhaseVerified() { private renderPhaseVerified(): JSX.Element {
const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete'); return <VerificationComplete onDone={this.onVerifiedDoneClick} />;
return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
} }
_renderPhaseCancelled() { private renderPhaseCancelled(): JSX.Element {
const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled'); return <VerificationCancelled onDone={this.onCancelClick} />;
return <VerificationCancelled onDone={this._onCancelClick} />;
} }
render() { public render(): JSX.Element {
let body; let body;
switch (this.state.phase) { switch (this.state.phase) {
case PHASE_START: case PHASE_START:
body = this._renderPhaseStart(); body = this.renderPhaseStart();
break; break;
case PHASE_SHOW_SAS: case PHASE_SHOW_SAS:
body = this._renderPhaseShowSas(); body = this.renderPhaseShowSas();
break; break;
case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM: case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
body = this._renderPhaseWaitForPartnerToConfirm(); body = this.renderPhaseWaitForPartnerToConfirm();
break; break;
case PHASE_VERIFIED: case PHASE_VERIFIED:
body = this._renderPhaseVerified(); body = this.renderPhaseVerified();
break; break;
case PHASE_CANCELLED: case PHASE_CANCELLED:
body = this._renderPhaseCancelled(); body = this.renderPhaseCancelled();
break; break;
} }
const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
return ( return (
<BaseDialog <BaseDialog
title={_t("Incoming Verification Request")} title={_t("Incoming Verification Request")}
onFinished={this._onFinished} onFinished={this.onFinished}
fixedWidth={false} fixedWidth={false}
> >
{ body } { body }