From 5967811cda85c00f00d788a28147b78768a77abc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 5 Sep 2021 16:57:36 +0200 Subject: [PATCH] Convert InteractiveAuthDialog to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- ...uthDialog.js => InteractiveAuthDialog.tsx} | 139 ++++++++++-------- 1 file changed, 74 insertions(+), 65 deletions(-) rename src/components/views/dialogs/{InteractiveAuthDialog.js => InteractiveAuthDialog.tsx} (65%) diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.tsx similarity index 65% rename from src/components/views/dialogs/InteractiveAuthDialog.js rename to src/components/views/dialogs/InteractiveAuthDialog.tsx index e5f4887f06..e9667c84b5 100644 --- a/src/components/views/dialogs/InteractiveAuthDialog.js +++ b/src/components/views/dialogs/InteractiveAuthDialog.tsx @@ -17,69 +17,82 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; -import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import AccessibleButton from '../elements/AccessibleButton'; -import { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth"; +import InteractiveAuth, { ERROR_USER_CANCELLED } from "../../structures/InteractiveAuth"; import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import BaseDialog from "./BaseDialog"; +import { IAuthData } from "matrix-js-sdk/src/interactive-auth"; + +interface IProps { + // matrix client to use for UI auth requests + matrixClient: MatrixClient; + + // response from initial request. If not supplied, will do a request on + // mount. + authData?: { + flows: []; + params: {}; + session: string; + }; + + // callback + makeRequest: (auth: IAuthData) => Promise; + + onFinished: (confirmed: boolean, result?) => void; + + // Optional title and body to show when not showing a particular stage + title?: string; + body?: string; + + // Optional title and body pairs for particular stages and phases within + // those stages. Object structure/example is: + // { + // "org.example.stage_type": { + // 1: { + // "body": "This is a body for phase 1" of org.example.stage_type, + // "title": "Title for phase 1 of org.example.stage_type" + // }, + // 2: { + // "body": "This is a body for phase 2 of org.example.stage_type", + // "title": "Title for phase 2 of org.example.stage_type" + // "continueText": "Confirm identity with Example Auth", + // "continueKind": "danger" + // } + // } + // } + // + // Default is defined in _getDefaultDialogAesthetics() + aestheticsForStagePhases?: {}; +} + +interface IState { + authError: Error; + + // See _onUpdateStagePhase() + uiaStage: number; + uiaStagePhase: number; +} @replaceableComponent("views.dialogs.InteractiveAuthDialog") -export default class InteractiveAuthDialog extends React.Component { - static propTypes = { - // matrix client to use for UI auth requests - matrixClient: PropTypes.object.isRequired, +export default class InteractiveAuthDialog extends React.Component { + constructor(props: IProps) { + super(props); - // response from initial request. If not supplied, will do a request on - // mount. - authData: PropTypes.shape({ - flows: PropTypes.array, - params: PropTypes.object, - session: PropTypes.string, - }), + this.state = { + authError: null, - // callback - makeRequest: PropTypes.func.isRequired, + // See _onUpdateStagePhase() + uiaStage: null, + uiaStagePhase: null, + }; + } - onFinished: PropTypes.func.isRequired, - - // Optional title and body to show when not showing a particular stage - title: PropTypes.string, - body: PropTypes.string, - - // Optional title and body pairs for particular stages and phases within - // those stages. Object structure/example is: - // { - // "org.example.stage_type": { - // 1: { - // "body": "This is a body for phase 1" of org.example.stage_type, - // "title": "Title for phase 1 of org.example.stage_type" - // }, - // 2: { - // "body": "This is a body for phase 2 of org.example.stage_type", - // "title": "Title for phase 2 of org.example.stage_type" - // "continueText": "Confirm identity with Example Auth", - // "continueKind": "danger" - // } - // } - // } - // - // Default is defined in _getDefaultDialogAesthetics() - aestheticsForStagePhases: PropTypes.object, - }; - - state = { - authError: null, - - // See _onUpdateStagePhase() - uiaStage: null, - uiaStagePhase: null, - }; - - _getDefaultDialogAesthetics() { + private getDefaultDialogAesthetics() { const ssoAesthetics = { [SSOAuthEntry.PHASE_PREAUTH]: { title: _t("Use Single Sign On to continue"), @@ -101,7 +114,7 @@ export default class InteractiveAuthDialog extends React.Component { }; } - _onAuthFinished = (success, result) => { + private onAuthFinished = (success: boolean, result: Error): void => { if (success) { this.props.onFinished(true, result); } else { @@ -115,19 +128,16 @@ export default class InteractiveAuthDialog extends React.Component { } }; - _onUpdateStagePhase = (newStage, newPhase) => { + private onUpdateStagePhase = (newStage, newPhase): void => { // We copy the stage and stage phase params into state for title selection in render() this.setState({ uiaStage: newStage, uiaStagePhase: newPhase }); }; - _onDismissClick = () => { + private onDismissClick = (): void => { this.props.onFinished(false); }; - render() { - const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth"); - const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - + public render(): JSX.Element { // Let's pick a title, body, and other params text that we'll show to the user. The order // is most specific first, so stagePhase > our props > defaults. @@ -135,7 +145,7 @@ export default class InteractiveAuthDialog extends React.Component { let body = this.state.authError ? null : this.props.body; let continueText = null; let continueKind = null; - const dialogAesthetics = this.props.aestheticsForStagePhases || this._getDefaultDialogAesthetics(); + const dialogAesthetics = this.props.aestheticsForStagePhases || this.getDefaultDialogAesthetics(); if (!this.state.authError && dialogAesthetics) { if (dialogAesthetics[this.state.uiaStage]) { const aesthetics = dialogAesthetics[this.state.uiaStage][this.state.uiaStagePhase]; @@ -152,9 +162,9 @@ export default class InteractiveAuthDialog extends React.Component {
{ this.state.authError.message || this.state.authError.toString() }

- { _t("Dismiss") } @@ -165,12 +175,11 @@ export default class InteractiveAuthDialog extends React.Component {
{ body }