PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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 EMSElementProDialog from "../views/dialogs/EMSElementProDialog";
import Modal from "../../Modal";
import Modal, {IHandle} from "../../Modal";
import {
IconizedContextMenuOption,
IconizedContextMenuOptionList,
@ -28,8 +28,8 @@ interface IProps {}
interface IState {}
export default class EMSElementProAction extends React.PureComponent<IProps, IState> {
closingAllowed = false;
modalRef: any;
private closingAllowed = false;
private modalRef: IHandle<void[]>;
private openDialog = () => {
this.modalRef = Modal.createTrackedDialog(
@ -52,7 +52,7 @@ export default class EMSElementProAction extends React.PureComponent<IProps, ISt
<IconizedContextMenuOption
iconClassName="mx_UserMenu_iconHosting"
label={_t("Get your own Element!")}
onClick={(e) => this.openDialog()}
onClick={this.openDialog}
/>
</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: sub => (
<a
href={signupLink}
target="_blank"
rel="noreferrer noopener"
tabIndex={-1}
>{sub}</a>
<a href={signupLink} target="_blank" 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 Modal from "../../../Modal";
import SdkConfig from "../../../SdkConfig";
import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import {_t} from "../../../languageHandler";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import {OwnProfileStore} from "../../../stores/OwnProfileStore";
import {IPostmessage, IPostmessageResponseData, PostmessageAction} from "./EMSElementProDialogTypes";
interface IProps {
requestClose(): void;
@ -34,8 +35,8 @@ interface IState {
}
export default class EMSElementProDialog extends React.PureComponent<IProps, IState> {
iframeRef;
elementProSetupUrl: string;
private iframeRef: React.RefObject<HTMLIFrameElement> = React.createRef();
private readonly elementProSetupUrl: string;
constructor(props: IProps) {
super(props);
@ -45,16 +46,15 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
error: null,
};
this.iframeRef = React.createRef();
this.elementProSetupUrl = SdkConfig.get().ems_element_pro.url;
}
private messageHandler = (message) => {
private messageHandler = (message: IPostmessage) => {
if (!this.elementProSetupUrl.startsWith(message.origin)) {
return;
}
switch (message.data.action) {
case 'element_pro_account_details_request':
case PostmessageAction.ElementProAccountDetailsRequest:
Modal.createDialog(
EMSElementProDataConfirmDialog,
{
@ -66,14 +66,14 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
},
);
break;
case 'setup_complete':
case PostmessageAction.SetupComplete:
// Set as completed but let the user close the modal themselves
// so they have time to finish reading any information
this.setState({
completed: true,
});
break;
case 'close_dialog':
case PostmessageAction.CloseDialog:
this.onFinished(true);
break;
}
@ -97,11 +97,8 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
}
}
private sendMessage = (message) => {
this.iframeRef.contentWindow.postMessage(
message,
this.elementProSetupUrl,
)
private sendMessage = (message: IPostmessageResponseData) => {
this.iframeRef.current.contentWindow.postMessage(message, this.elementProSetupUrl);
}
private async sendAccountDetails() {
@ -114,7 +111,7 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
return;
}
this.sendMessage({
action: 'element_pro_account_details',
action: PostmessageAction.ElementProAccountDetails,
account: {
accessToken: await MatrixClientPeg.get().getAccessToken(),
name: OwnProfileStore.instance.displayName,
@ -145,7 +142,8 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
<div className="mx_EMSElementProDialog_container">
<iframe
src={this.elementProSetupUrl}
ref={ref => this.iframeRef = ref}
ref={this.iframeRef}
sandbox="allow-forms allow-scripts allow-same-origin"
/>
{this.state.error &&
<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;
}