mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-15 09:42:03 +03:00
Code Issues Projects Releases Packages Wiki Activity

Typing and other PR feedback fixes

Browse source
This commit is contained in:
Jason Robinson 2020-12-18 16:05:57 +02:00
parent f0e93c6929
commit 0ae28d584b
4 changed files with 50 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/structures/EMSElementProAction.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import * as React from "react"; import * as React from "react";
import EMSElementProDialog from "../views/dialogs/EMSElementProDialog"; import EMSElementProDialog from "../views/dialogs/EMSElementProDialog";
import Modal from "../../Modal"; import Modal, {IHandle} from "../../Modal";
import { import {
IconizedContextMenuOption, IconizedContextMenuOption,
IconizedContextMenuOptionList, IconizedContextMenuOptionList,
@ -28,8 +28,8 @@ interface IProps {}
interface IState {} interface IState {}
export default class EMSElementProAction extends React.PureComponent<IProps, IState> { export default class EMSElementProAction extends React.PureComponent<IProps, IState> {
closingAllowed = false; private closingAllowed = false;
modalRef: any; private modalRef: IHandle<void[]>;
private openDialog = () => { private openDialog = () => {
this.modalRef = Modal.createTrackedDialog( this.modalRef = Modal.createTrackedDialog(
@ -52,7 +52,7 @@ export default class EMSElementProAction extends React.PureComponent<IProps, ISt
<IconizedContextMenuOption <IconizedContextMenuOption
iconClassName="mx_UserMenu_iconHosting" iconClassName="mx_UserMenu_iconHosting"
label={_t("Get your own Element!")} label={_t("Get your own Element!")}
onClick={(e) => this.openDialog()} onClick={this.openDialog}
/> />
</IconizedContextMenuOptionList> </IconizedContextMenuOptionList>
); );

9
src/components/structures/UserMenu.tsx
View file

@ -319,12 +319,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
"<a>Upgrade</a> to your own domain", {}, "<a>Upgrade</a> to your own domain", {},
{ {
a: sub => ( a: sub => (
<a <a href={signupLink} target="_blank" rel="noreferrer noopener" tabIndex={-1}>
href={signupLink} {sub}
target="_blank" </a>
rel="noreferrer noopener"
tabIndex={-1}
>{sub}</a>
), ),
}, },
)} )}

32
src/components/views/dialogs/EMSElementProDialog.tsx
View file

@ -20,9 +20,10 @@ import EMSElementProConfirmCloseDialog from './EMSElementProConfirmCloseDialog';
import EMSElementProDataConfirmDialog from './EMSElementProDataConfirmDialog'; import EMSElementProDataConfirmDialog from './EMSElementProDataConfirmDialog';
import Modal from "../../../Modal"; import Modal from "../../../Modal";
import SdkConfig from "../../../SdkConfig"; import SdkConfig from "../../../SdkConfig";
import { _t } from "../../../languageHandler"; import {_t} from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg"; import {MatrixClientPeg} from "../../../MatrixClientPeg";
import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import {OwnProfileStore} from "../../../stores/OwnProfileStore";
import {IPostmessage, IPostmessageResponseData, PostmessageAction} from "./EMSElementProDialogTypes";
interface IProps { interface IProps {
requestClose(): void; requestClose(): void;
@ -34,8 +35,8 @@ interface IState {
} }
export default class EMSElementProDialog extends React.PureComponent<IProps, IState> { export default class EMSElementProDialog extends React.PureComponent<IProps, IState> {
iframeRef; private iframeRef: React.RefObject<HTMLIFrameElement> = React.createRef();
elementProSetupUrl: string; private readonly elementProSetupUrl: string;
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);
@ -45,16 +46,15 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
error: null, error: null,
}; };
this.iframeRef = React.createRef();
this.elementProSetupUrl = SdkConfig.get().ems_element_pro.url; this.elementProSetupUrl = SdkConfig.get().ems_element_pro.url;
} }
private messageHandler = (message) => { private messageHandler = (message: IPostmessage) => {
if (!this.elementProSetupUrl.startsWith(message.origin)) { if (!this.elementProSetupUrl.startsWith(message.origin)) {
return; return;
} }
switch (message.data.action) { switch (message.data.action) {
case 'element_pro_account_details_request': case PostmessageAction.ElementProAccountDetailsRequest:
Modal.createDialog( Modal.createDialog(
EMSElementProDataConfirmDialog, EMSElementProDataConfirmDialog,
{ {
@ -66,14 +66,14 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
}, },
); );
break; break;
case 'setup_complete': case PostmessageAction.SetupComplete:
// Set as completed but let the user close the modal themselves // Set as completed but let the user close the modal themselves
// so they have time to finish reading any information // so they have time to finish reading any information
this.setState({ this.setState({
completed: true, completed: true,
}); });
break; break;
case 'close_dialog': case PostmessageAction.CloseDialog:
this.onFinished(true); this.onFinished(true);
break; break;
} }
@ -97,11 +97,8 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
} }
} }
private sendMessage = (message) => { private sendMessage = (message: IPostmessageResponseData) => {
this.iframeRef.contentWindow.postMessage( this.iframeRef.current.contentWindow.postMessage(message, this.elementProSetupUrl);
message,
this.elementProSetupUrl,
)
} }
private async sendAccountDetails() { private async sendAccountDetails() {
@ -114,7 +111,7 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
return; return;
} }
this.sendMessage({ this.sendMessage({
action: 'element_pro_account_details', action: PostmessageAction.ElementProAccountDetails,
account: { account: {
accessToken: await MatrixClientPeg.get().getAccessToken(), accessToken: await MatrixClientPeg.get().getAccessToken(),
name: OwnProfileStore.instance.displayName, name: OwnProfileStore.instance.displayName,
@ -145,7 +142,8 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
<div className="mx_EMSElementProDialog_container"> <div className="mx_EMSElementProDialog_container">
<iframe <iframe
src={this.elementProSetupUrl} src={this.elementProSetupUrl}
ref={ref => this.iframeRef = ref} ref={this.iframeRef}
sandbox="allow-forms allow-scripts allow-same-origin"
/> />
{this.state.error && {this.state.error &&
<div> <div>

28
src/components/views/dialogs/EMSElementProDialogTypes.tsx Normal file
View file

@ -0,0 +1,28 @@
export enum PostmessageAction {
CloseDialog = "close_dialog",
ElementProAccountDetails = "element_pro_account_details",
ElementProAccountDetailsRequest = "element_pro_account_details_request",
SetupComplete = "setup_complete",
}
interface IAccountData {
accessToken: string;
name: string;
openIdToken: string;
serverName: string;
userLocalpart: string;
}
export interface IPostmessageRequestData {
action: PostmessageAction;
}
export interface IPostmessageResponseData {
action: PostmessageAction;
account: IAccountData;
}
export interface IPostmessage {
data: IPostmessageRequestData;
origin: string;
}