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

Some cleanup

pull/21833/head
Jason Robinson 2021-01-29 15:55:14 +02:00
parent 39984c9a34
commit 4ee6016084
1 changed files with 36 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/views/dialogs/HostSignupDialog.tsx
View File

@ -36,9 +36,7 @@ interface IProps {}
interface IState { interface IState {
completed: boolean; completed: boolean;
error: string; error: string;
loadIframe: boolean;
minimized: boolean; minimized: boolean;
termsAccepted: boolean;
} }
export default class HostSignupDialog extends React.PureComponent<IProps, IState> { export default class HostSignupDialog extends React.PureComponent<IProps, IState> {
@ -51,9 +49,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
this.state = { this.state = {
completed: false, completed: false,
error: null, error: null,
loadIframe: false,
minimized: false, minimized: false,
termsAccepted: false,
}; };
this.config = SdkConfig.get().hostSignup; this.config = SdkConfig.get().hostSignup;
@ -65,7 +61,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
} }
switch (message.data.action) { switch (message.data.action) {
case PostmessageAction.HostSignupAccountDetailsRequest: case PostmessageAction.HostSignupAccountDetailsRequest:
await this.sendAccountDetails(); this.onAccountDetailsRequest();
break; break;
case PostmessageAction.Maximize: case PostmessageAction.Maximize:
this.maximizeDialog(); this.maximizeDialog();
@ -151,37 +147,34 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
openIdToken: openIdToken.access_token, openIdToken: openIdToken.access_token,
serverName: await MatrixClientPeg.get().getDomain(), serverName: await MatrixClientPeg.get().getDomain(),
userLocalpart: await MatrixClientPeg.get().getUserIdLocalpart(), userLocalpart: await MatrixClientPeg.get().getUserIdLocalpart(),
termsAccepted: this.state.termsAccepted, termsAccepted: true,
}, },
}); });
} }
private loadIframe = () => { private onAccountDetailsDialogFinished = async (result) => {
window.addEventListener("message", this.messageHandler); if (result) {
this.setState({ return this.sendAccountDetails();
loadIframe: true, }
}); return this.closeDialog();
} }
private onStartClick = () => { private onAccountDetailsRequest = () => {
Modal.createDialog( Modal.createDialog(
QuestionDialog, QuestionDialog,
{ {
title: this.config.termsDialog.title, title: this.config.termsDialog.title,
description: this.config.termsDialog.text, description: this.config.termsDialog.text,
button: this.config.termsDialog.acceptText, button: this.config.termsDialog.acceptText,
onFinished: result => { onFinished: this.onAccountDetailsDialogFinished,
if (result) {
this.setState({
termsAccepted: true,
});
this.loadIframe();
}
},
}, },
); );
} }
public componentDidMount() {
window.addEventListener("message", this.messageHandler);
}
public componentWillUnmount() { public componentWillUnmount() {
if (HostSignupStore.instance.isHostSignupActive) { if (HostSignupStore.instance.isHostSignupActive) {
// Run the close dialog actions if we're still active, otherwise good to go // Run the close dialog actions if we're still active, otherwise good to go
@ -197,104 +190,24 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
<div className={["mx_Dialog", <div className={["mx_Dialog",
this.state.minimized ? "mx_HostSignupDialog_minimized" : "mx_HostSignupDialog"].join(" ") this.state.minimized ? "mx_HostSignupDialog_minimized" : "mx_HostSignupDialog"].join(" ")
}> }>
{this.state.loadIframe && {this.state.minimized &&
<> <div className="mx_Dialog_header mx_Dialog_headerWithButton">
{this.state.minimized && <div className="mx_Dialog_title">
<div className="mx_Dialog_header mx_Dialog_headerWithButton"> {this.config.minimizedDialogTitle}
<div className="mx_Dialog_title"> </div>
{this.config.minimizedDialogTitle} <AccessibleButton
</div> className="mx_HostSignup_maximize_button"
<AccessibleButton onClick={this.maximizeDialog}
className="mx_HostSignup_maximize_button" aria-label={_t("Maximize dialog")}
onClick={this.maximizeDialog}
aria-label={_t("Maximize dialog")}
/>
</div>
}
{!this.state.minimized &&
<div className="mx_Dialog_header mx_Dialog_headerWithCancel">
<AccessibleButton
onClick={this.onCloseClick} className="mx_Dialog_cancelButton"
aria-label={_t("Close dialog")}
/>
</div>
}
<iframe
src={this.config.url}
ref={this.iframeRef}
sandbox="allow-forms allow-scripts allow-same-origin"
/> />
</> </div>
} }
{!this.state.loadIframe && {!this.state.minimized &&
<div className="mx_HostSignupDialog_info"> <div className="mx_Dialog_header mx_Dialog_headerWithCancel">
{this.config.info.image && <AccessibleButton
<img onClick={this.onCloseClick} className="mx_Dialog_cancelButton"
alt={this.config.info.image.alt} aria-label={_t("Close dialog")}
height={this.config.info.image.height} />
src={this.config.info.image.src}
width={this.config.info.image.width}
/>
}
<div className="mx_HostSignupDialog_content_top">
<h1 className="mx_HostSignupDialog_text_dark">
{this.config.info.title}
</h1>
{this.config.info.additionalParagraphs &&
<div className="mx_HostSignupDialog_paragraphs">
{this.config.info.additionalParagraphs.map((para, index) => {
return <p className="mx_HostSignupDialog_text_light" key={index}>
{para}
</p>;
})}
{this.config.info.additionalInfoLink &&
<p><small>
<a href={this.config.info.additionalInfoLink.href}
target="_blank" rel="noopener noreferrer"
title={this.config.info.additionalInfoLink.text}
>
{this.config.info.additionalInfoLink.text}
</a>
</small></p>
}
</div>
}
</div>
<div className="mx_HostSignupDialog_buttons">
<AccessibleButton
onClick={this.closeDialog}
aria-label={this.config.info.cancelText}
>
<button>
{this.config.info.cancelText}
</button>
</AccessibleButton>
<AccessibleButton
onClick={this.onStartClick}
aria-label={this.config.info.continueText}
>
<button className="mx_Dialog_primary">
{this.config.info.continueText}
</button>
</AccessibleButton>
</div>
{this.config.info.footer &&
<div className="mx_HostSignupDialog_text_light">
<small>
<p className="mx_HostSignupDialog_footer">
{this.config.info.footer.image &&
<img
alt={this.config.info.footer.image.alt}
height={this.config.info.footer.image.height}
src={this.config.info.footer.image.src}
width={this.config.info.footer.image.width}
/>
}
{this.config.info.footer.text}
</p>
</small>
</div>
}
</div> </div>
} }
{this.state.error && {this.state.error &&
@ -302,10 +215,14 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
{this.state.error} {this.state.error}
</div> </div>
} }
{!this.state.error &&
<iframe
src={this.config.url}
ref={this.iframeRef}
sandbox="allow-forms allow-scripts allow-same-origin"
/>
}
</div> </div>
{!this.state.minimized &&
<div className="mx_Dialog_background mx_HostSignupDialog_background" />
}
</div> </div>
</PersistedElement> </PersistedElement>
</div> </div>