feat: add EntryPage for login, signup pages to fix background flashing issue (#1416)

* feat: fix flush in login Pages

* fix: code format

* fix: improve code

* Update App.js

* Update EntryPage.js

* fix: optimize api request

* Update App.js

* Update App.js

* fix: fix css

* fix: css and getApllicationObj

Co-authored-by: hsluoyz <hsluoyz@qq.com>
This commit is contained in:
Yaodong Yu
2022-12-22 23:39:02 +08:00
committed by GitHub
parent ae130788ec
commit a0dc6e06cd
21 changed files with 249 additions and 158 deletions

View File

@ -65,7 +65,7 @@ class SignupPage extends React.Component {
super(props);
this.state = {
classes: props,
applicationName: props.match?.params.applicationName !== undefined ? props.match.params.applicationName : authConfig.appName,
applicationName: props.match.params?.applicationName ?? authConfig.appName,
application: null,
email: "",
phone: "",
@ -91,10 +91,12 @@ class SignupPage extends React.Component {
sessionStorage.setItem("signinUrl", signinUrl);
}
if (applicationName !== undefined) {
this.getApplication(applicationName);
} else {
Setting.showMessage("error", `Unknown application name: ${applicationName}`);
if (this.getApplicationObj() === null) {
if (applicationName !== undefined) {
this.getApplication(applicationName);
} else {
Setting.showMessage("error", `Unknown application name: ${applicationName}`);
}
}
}
@ -105,6 +107,7 @@ class SignupPage extends React.Component {
ApplicationBackend.getApplication("admin", applicationName)
.then((application) => {
this.onUpdateApplication(application);
this.setState({
application: application,
});
@ -128,11 +131,7 @@ class SignupPage extends React.Component {
}
getApplicationObj() {
if (this.props.application !== undefined) {
return this.props.application;
} else {
return this.state.application;
}
return this.props.application ?? this.state.application;
}
getTermsofuseContent(url) {
@ -149,6 +148,10 @@ class SignupPage extends React.Component {
this.props.onUpdateAccount(account);
}
onUpdateApplication(application) {
this.props.onUpdateApplication(application);
}
parseOffset(offset) {
if (offset === 2 || offset === 4 || Setting.inIframe() || Setting.isMobile()) {
return "0 auto";
@ -632,7 +635,7 @@ class SignupPage extends React.Component {
}
return (
<div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
<React.Fragment>
<CustomGithubCorner />
<div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
{Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
@ -657,7 +660,7 @@ class SignupPage extends React.Component {
{
this.renderModal()
}
</div>
</React.Fragment>
);
}
}