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

@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Button, Col, Result, Row} from "antd";
import {Button, Card, Col, Result, Row} from "antd";
import * as ApplicationBackend from "../backend/ApplicationBackend";
import * as UserBackend from "../backend/UserBackend";
import * as AuthBackend from "./AuthBackend";
@ -30,7 +30,7 @@ class PromptPage extends React.Component {
this.state = {
classes: props,
type: props.type,
applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
applicationName: props.applicationName ?? (props.match === undefined ? null : props.match.params.applicationName),
application: null,
user: null,
};
@ -38,7 +38,9 @@ class PromptPage extends React.Component {
UNSAFE_componentWillMount() {
this.getUser();
this.getApplication();
if (this.getApplicationObj() === null) {
this.getApplication();
}
}
getUser() {
@ -59,6 +61,7 @@ class PromptPage extends React.Component {
ApplicationBackend.getApplication("admin", this.state.applicationName)
.then((application) => {
this.onUpdateApplication(application);
this.setState({
application: application,
});
@ -66,11 +69,11 @@ class PromptPage 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;
}
onUpdateApplication(application) {
this.props.onUpdateApplication(application);
}
parseUserField(key, value) {
@ -122,7 +125,7 @@ class PromptPage extends React.Component {
renderContent(application) {
return (
<div style={{width: "400px"}}>
<div style={{width: "500px"}}>
{
this.renderAffiliation(application)
}
@ -247,9 +250,9 @@ class PromptPage extends React.Component {
}
return (
<Row>
<Col span={24} style={{display: "flex", justifyContent: "center"}}>
<div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center"}}>
<div style={{display: "flex", flex: "1", justifyContent: "center"}}>
<Card>
<div style={{marginTop: "30px", marginBottom: "30px", textAlign: "center"}}>
{
Setting.renderHelmet(application)
}
@ -259,16 +262,12 @@ class PromptPage extends React.Component {
{
this.renderContent(application)
}
<Row style={{margin: 10}}>
<Col span={18}>
</Col>
</Row>
<div style={{marginTop: "50px"}}>
<Button disabled={!Setting.isPromptAnswered(this.state.user, application)} type="primary" size="large" onClick={() => {this.submitUserEdit(true);}}>{i18next.t("code:Submit and complete")}</Button>
</div>
</div>
</Col>
</Row>
</Card>
</div>
);
}
}