llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-05 05:50:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/App.js
View File

@ -55,20 +55,14 @@ import CustomGithubCorner from "./CustomGithubCorner";
import * as Conf from "./Conf";
import * as Auth from "./auth/Auth";
import SignupPage from "./auth/SignupPage";
import EntryPage from "./EntryPage";
import ResultPage from "./auth/ResultPage";
import LoginPage from "./auth/LoginPage";
import SelfLoginPage from "./auth/SelfLoginPage";
import SelfForgetPage from "./auth/SelfForgetPage";
import ForgetPage from "./auth/ForgetPage";
import * as AuthBackend from "./auth/AuthBackend";
import AuthCallback from "./auth/AuthCallback";
import SelectLanguageBox from "./SelectLanguageBox";
import i18next from "i18next";
import PromptPage from "./auth/PromptPage";
import OdicDiscoveryPage from "./auth/OidcDiscoveryPage";
import SamlCallback from "./auth/SamlCallback";
import CasLogout from "./auth/CasLogout";
import ModelListPage from "./ModelListPage";
import ModelEditPage from "./ModelEditPage";
import SystemInfo from "./SystemInfo";
@ -619,7 +613,7 @@ class App extends Component {
// https://www.freecodecamp.org/neyarnws/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
return (
<>
<React.Fragment>
{!this.state.account ? null : <div style={{display: "none"}} id="CasdoorApplicationName" value={this.state.account.signupApplication} />}
<Footer id="footer" style={
{
@ -630,63 +624,57 @@ class App extends Component {
}>
Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={`${Setting.StaticBaseUrl}/img/casdoor-logo_1185x256.png`} /></a>
</Footer>
</>
</React.Fragment>
);
}
isDoorPages() {
return this.isEntryPages() || window.location.pathname.startsWith("/callback");
}
isEntryPages() {
return window.location.pathname.startsWith("/signup") ||
window.location.pathname.startsWith("/login") ||
window.location.pathname.startsWith("/callback") ||
window.location.pathname.startsWith("/prompt") ||
window.location.pathname.startsWith("/forget") ||
window.location.pathname.startsWith("/cas");
window.location.pathname.startsWith("/prompt") ||
window.location.pathname.startsWith("/cas") ||
window.location.pathname.startsWith("/auto-signup");
}
renderPage() {
if (this.isDoorPages()) {
return (
<>
<React.Fragment>
<Layout id="parent-area">
<Content style={{display: "flex", justifyContent: "center"}}>
<Switch>
<Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} />)} />
<Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />)} />
<Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage account={this.state.account} {...props} />)} />
<Route exact path="/login/:owner" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage account={this.state.account} {...props} />)} />
<Route exact path="/auto-signup/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signup"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
<Route exact path="/signup/oauth/authorize" render={(props) => <SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
<Route exact path="/login/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
<Route exact path="/login/saml/authorize/:owner/:applicationName" render={(props) => <LoginPage account={this.state.account} type={"saml"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
<Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout clearAccount={() => this.setState({account: null})} {...props} />)} />
<Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage type={"cas"} mode={"signup"} account={this.state.account} {...props} />);}} />
<Route exact path="/callback" component={AuthCallback} />
<Route exact path="/callback/saml" component={SamlCallback} />
<Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)} />
<Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)} />
<Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} {...props} />)} />
<Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} {...props} />)} />
<Route exact path="/sysinfo" render={(props) => this.renderLoginIfNotLoggedIn(<SystemInfo {...props} />)} />
<Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
</Switch>
{
this.isEntryPages() ?
<EntryPage account={this.state.account} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />
:
<Switch>
<Route exact path="/callback" component={AuthCallback} />
<Route exact path="/callback/saml" component={SamlCallback} />
<Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
</Switch>
}
</Content>
{
this.renderFooter()
}
</Layout>
</>
</React.Fragment>
);
}
return (
<>
<React.Fragment>
<FloatButton.BackTop />
<CustomGithubCorner />
{
this.renderContent()
}
</>
</React.Fragment>
);
}

84
web/src/EntryPage.js Normal file
View File

@ -0,0 +1,84 @@
// Copyright 2022 The Casdoor Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import React from "react";
import {Redirect, Route, Switch} from "react-router-dom";
import {Spin} from "antd";
import i18next from "i18next";
import * as Setting from "./Setting";
import SignupPage from "./auth/SignupPage";
import SelfLoginPage from "./auth/SelfLoginPage";
import LoginPage from "./auth/LoginPage";
import SelfForgetPage from "./auth/SelfForgetPage";
import ForgetPage from "./auth/ForgetPage";
import PromptPage from "./auth/PromptPage";
import CasLogout from "./auth/CasLogout";
class EntryPage extends React.Component {
constructor(props) {
super(props);
this.state = {
application: undefined,
};
}
renderHomeIfLoggedIn(component) {
if (this.props.account !== null && this.props.account !== undefined) {
return <Redirect to="/" />;
} else {
return component;
}
}
renderLoginIfNotLoggedIn(component) {
if (this.props.account === null) {
sessionStorage.setItem("from", window.location.pathname);
return <Redirect to="/login" />;
} else if (this.props.account === undefined) {
return null;
} else {
return component;
}
}
render() {
const onUpdateApplication = (application) => {
this.setState({
application: application,
});
};
return <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${this.state.application?.formBackgroundUrl})`}}>
<Spin spinning={this.state.application === undefined} tip={i18next.t("login:Loading")} style={{margin: "0 auto"}} />
<Switch>
<Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/login/:owner" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/auto-signup/oauth/authorize" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"code"} mode={"signup"} onUpdateApplication={onUpdateApplication}{...props} />} />
<Route exact path="/signup/oauth/authorize" render={(props) => <SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />} />
<Route exact path="/login/oauth/authorize" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"code"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />} />
<Route exact path="/login/saml/authorize/:owner/:applicationName" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"saml"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />} />
<Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
<Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout {...this.props} application={this.state.application} {...props} />)} />
<Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage {...this.props} application={this.state.application} type={"cas"} mode={"signup"} {...props} />);}} />
</Switch>
</div>;
}
}
export default EntryPage;

2
web/src/auth/AuthCallback.js
View File

@ -178,7 +178,7 @@ class AuthCallback extends React.Component {
render() {
return (
<div style={{textAlign: "center"}}>
<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
{
(this.state.msg === null) ? (
<Spin size="large" tip={i18next.t("login:Signing in...")} style={{paddingTop: "10%"}} />

16
web/src/auth/CasLogout.js
View File

@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Spin} from "antd";
import {Card, Spin} from "antd";
import {withRouter} from "react-router-dom";
import * as AuthBackend from "./AuthBackend";
import * as Setting from "../Setting";
@ -39,7 +39,7 @@ class CasLogout extends React.Component {
.then((res) => {
if (res.status === "ok") {
Setting.showMessage("success", "Logged out successfully");
this.props.clearAccount();
this.props.onUpdateAccount(null);
const redirectUri = res.data2;
if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
Setting.goToLink(redirectUri);
@ -57,11 +57,13 @@ class CasLogout extends React.Component {
render() {
return (
<div style={{textAlign: "center"}}>
{
<Spin size="large" tip={i18next.t("login:Logging out...")} style={{paddingTop: "10%"}} />
}
</div>
<Card>
<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
{
<Spin size="large" tip={i18next.t("login:Logging out...")} style={{paddingTop: "10%"}} />
}
</div>
</Card>
);
}
}

53
web/src/auth/ForgetPage.js
View File

@ -34,12 +34,7 @@ class ForgetPage extends React.Component {
this.state = {
classes: props,
account: props.account,
applicationName:
props.applicationName !== undefined
? props.applicationName
: props.match === undefined
? null
: props.match.params.applicationName,
applicationName: props.applicationName ?? props.match.params?.applicationName,
application: null,
msg: null,
userId: "",
@ -57,34 +52,36 @@ class ForgetPage extends React.Component {
};
}
UNSAFE_componentWillMount() {
if (this.state.applicationName !== undefined) {
this.getApplication();
} else {
Setting.showMessage("error", i18next.t("forget:Unknown forget type: ") + this.state.type);
componentDidMount() {
if (this.getApplicationObj() === null) {
if (this.state.applicationName !== undefined) {
this.getApplication();
} else {
Setting.showMessage("error", i18next.t("forget:Unknown forget type: ") + this.state.type);
}
}
}
getApplication() {
if (this.state.applicationName === null) {
if (this.state.applicationName === undefined) {
return;
}
ApplicationBackend.getApplication("admin", this.state.applicationName).then(
(application) => {
ApplicationBackend.getApplication("admin", this.state.applicationName)
.then((application) => {
this.onUpdateApplication(application);
this.setState({
application: application,
});
}
);
});
}
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);
}
onFormFinish(name, info, forms) {
@ -143,7 +140,7 @@ class ForgetPage extends React.Component {
username: this.state.username,
name: this.state.name,
code: forms.step2.getFieldValue("emailCode"),
phonePrefix: this.state.application?.organizationObj.phonePrefix,
phonePrefix: this.getApplicationObj()?.organizationObj.phonePrefix,
type: "login",
}, oAuthParams).then(res => {
if (res.status === "ok") {
@ -166,10 +163,10 @@ class ForgetPage extends React.Component {
onFinish(values) {
values.username = this.state.username;
values.userOwner = this.state.application?.organizationObj.name;
values.userOwner = this.getApplicationObj()?.organizationObj.name;
UserBackend.setPassword(values.userOwner, values.username, "", values?.newPassword).then(res => {
if (res.status === "ok") {
Setting.redirectToLoginPage(this.state.application, this.props.history);
Setting.redirectToLoginPage(this.getApplicationObj(), this.props.history);
} else {
Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
}
@ -356,14 +353,14 @@ class ForgetPage extends React.Component {
<CountDownInput
disabled={this.state.username === "" || this.state.verifyType === ""}
method={"forget"}
onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(this.state.application), this.state.name]}
onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(this.getApplicationObj()), this.state.name]}
application={application}
/>
) : (
<CountDownInput
disabled={this.state.username === "" || this.state.verifyType === ""}
method={"forget"}
onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(this.state.application), this.state.name]}
onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(this.getApplicationObj()), this.state.name]}
application={application}
/>
)}
@ -492,7 +489,7 @@ class ForgetPage extends React.Component {
}
return (
<div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
<React.Fragment>
<CustomGithubCorner />
<div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
<Row>
@ -550,7 +547,7 @@ class ForgetPage extends React.Component {
</Col>
</Row>
</div>
</div>
</React.Fragment>
);
}
}

54
web/src/auth/LoginPage.js
View File

@ -61,19 +61,19 @@ class LoginPage extends React.Component {
}
}
UNSAFE_componentWillMount() {
if (this.state.type === "login" || this.state.type === "cas") {
this.getApplication();
} else if (this.state.type === "code") {
this.getApplicationLogin();
} else if (this.state.type === "saml") {
this.getSamlApplication();
} else {
Setting.showMessage("error", `Unknown authentication type: ${this.state.type}`);
}
}
componentDidMount() {
if (this.getApplicationObj() === null) {
if (this.state.type === "login" || this.state.type === "cas") {
this.getApplication();
} else if (this.state.type === "code") {
this.getApplicationLogin();
} else if (this.state.type === "saml") {
this.getSamlApplication();
} else {
Setting.showMessage("error", `Unknown authentication type: ${this.state.type}`);
}
}
Setting.Countries.forEach((country) => {
new Image().src = `${Setting.StaticBaseUrl}/flag-icons/${country.country}.svg`;
});
@ -117,6 +117,7 @@ class LoginPage extends React.Component {
if (this.state.owner === null || this.state.owner === undefined || this.state.owner === "") {
ApplicationBackend.getApplication("admin", this.state.applicationName)
.then((application) => {
this.onUpdateApplication(application);
this.setState({
application: application,
});
@ -125,6 +126,7 @@ class LoginPage extends React.Component {
OrganizationBackend.getDefaultApplication("admin", this.state.owner)
.then((res) => {
if (res.status === "ok") {
this.onUpdateApplication(res.data);
this.setState({
application: res.data,
applicationName: res.data.name,
@ -142,25 +144,25 @@ class LoginPage extends React.Component {
}
ApplicationBackend.getApplication(this.state.owner, this.state.applicationName)
.then((application) => {
this.onUpdateApplication(application);
this.setState({
application: application,
});
}
);
});
}
getApplicationObj() {
if (this.props.application !== undefined) {
return this.props.application;
} else {
return this.state.application;
}
return this.props.application ?? this.state.application;
}
onUpdateAccount(account) {
this.props.onUpdateAccount(account);
}
onUpdateApplication(application) {
this.props.onUpdateApplication(application);
}
parseOffset(offset) {
if (offset === 2 || offset === 4 || Setting.inIframe() || Setting.isMobile()) {
return "0 auto";
@ -191,8 +193,8 @@ class LoginPage extends React.Component {
values["relayState"] = oAuthParams.relayState;
}
if (this.state.application.organization !== null && this.state.application.organization !== undefined) {
values["organization"] = this.state.application.organization;
if (this.getApplicationObj()?.organization) {
values["organization"] = this.getApplicationObj().organization;
}
}
postCodeLoginAction(res) {
@ -573,12 +575,12 @@ class LoginPage extends React.Component {
<span style={{float: "right"}}>
{
!application.enableSignUp ? null : (
<>
<React.Fragment>
{i18next.t("login:No account?")}&nbsp;
{
Setting.renderSignupLink(application, i18next.t("login:sign up now"))
}
</>
</React.Fragment>
)
}
</span>
@ -788,14 +790,14 @@ class LoginPage extends React.Component {
if (this.props.application === undefined && !application.enablePassword && visibleOAuthProviderItems.length === 1) {
Setting.goToLink(Provider.getAuthUrl(application, visibleOAuthProviderItems[0].provider, "signup"));
return (
<div style={{textAlign: "center"}}>
<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
<Spin size="large" tip={i18next.t("login:Signing in...")} style={{paddingTop: "10%"}} />
</div>
);
}
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}} />}
@ -827,7 +829,7 @@ class LoginPage extends React.Component {
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
}

35
web/src/auth/PromptPage.js
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>
);
}
}

2
web/src/auth/SamlCallback.js
View File

@ -95,7 +95,7 @@ class SamlCallback extends React.Component {
render() {
return (
<div style={{textAlign: "center"}}>
<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
{
(this.state.msg === null) ? (
<Spin size="large" tip={i18next.t("login:Signing in...")} style={{paddingTop: "10%"}} />

1
web/src/auth/SelfForgetPage.js
View File

@ -22,7 +22,6 @@ class SelfForgetPage extends React.Component {
<ForgetPage
type={"forgotPassword"}
applicationName={authConfig.appName}
account={this.props.account}
{...this.props}
/>
);

2
web/src/auth/SelfLoginPage.js
View File

@ -19,7 +19,7 @@ import {authConfig} from "./Auth";
class SelfLoginPage extends React.Component {
render() {
return (
<LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} account={this.props.account} {...this.props} />
<LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} {...this.props} />
);
}
}

27
web/src/auth/SignupPage.js
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>
);
}
}

2
web/src/common/OAuthWidget.js
View File

@ -147,7 +147,7 @@ class OAuthWidget extends React.Component {
</Col>
<Col span={24 - this.props.labelSpan} >
<img style={{marginRight: "10px"}} width={30} height={30} src={avatarUrl} alt={name} referrerPolicy="no-referrer" />
<span style={{width: this.props.labelSpan === 3 ? "300px" : "130px", display: (Setting.isMobile()) ? "inline" : "inline-block"}}>
<span style={{width: this.props.labelSpan === 3 ? "300px" : "200px", display: (Setting.isMobile()) ? "inline" : "inline-block"}}>
{
linkedValue === "" ? (
"(empty)"

17
web/src/common/PoliciyTable.js
View File

@ -293,14 +293,15 @@ class PolicyTable extends React.Component {
}
render() {
return (<>
<Button type="primary" disabled={this.state.editingIndex !== ""} onClick={() => {this.synPolicies();}}>
{i18next.t("adapter:Sync")}
</Button>
{
this.renderTable(this.state.policyLists)
}
</>
return (
<React.Fragment>
<Button type="primary" disabled={this.state.editingIndex !== ""} onClick={() => {this.synPolicies();}}>
{i18next.t("adapter:Sync")}
</Button>
{
this.renderTable(this.state.policyLists)
}
</React.Fragment>
);
}
}

36
web/src/common/RedirectForm.js
View File

@ -13,6 +13,7 @@
// limitations under the License.
import React, {useEffect} from "react";
import i18next from "i18next";
export const RedirectForm = (props) => {
@ -20,23 +21,24 @@ export const RedirectForm = (props) => {
document.getElementById("saml").submit();
}, []);
return (<>
<p>Redirecting, please wait.</p>
<form id="saml" method="post" action={props.redirectUrl}>
<input
type="hidden"
name="SAMLResponse"
id="samlResponse"
value={props.samlResponse}
/>
<input
type="hidden"
name="RelayState"
id="relayState"
value={props.relayState}
/>
</form>
</>
return (
<React.Fragment>
<p>{i18next.t("login:Redirecting, please wait.")}</p>
<form id="saml" method="post" action={props.redirectUrl}>
<input
type="hidden"
name="SAMLResponse"
id="samlResponse"
value={props.samlResponse}
/>
<input
type="hidden"
name="RelayState"
id="relayState"
value={props.relayState}
/>
</form>
</React.Fragment>
);
};

2
web/src/locales/de/data.json
View File

@ -299,6 +299,7 @@
"Continue with": "Weiter mit",
"Email or phone": "E-Mail oder Telefon",
"Forgot password?": "Passwort vergessen?",
"Loading": "Loading",
"Logging out...": "Logging out...",
"No account?": "Kein Konto?",
"Or sign in with another account": "Oder melden Sie sich mit einem anderen Konto an",
@ -308,6 +309,7 @@
"Please input your password!": "Bitte geben Sie Ihr Passwort ein!",
"Please input your password, at least 6 characters!": "Bitte geben Sie Ihr Passwort ein, mindestens 6 Zeichen!",
"Please input your username, Email or phone!": "Bitte geben Sie Ihren Benutzernamen, E-Mail oder Telefon ein!",
"Redirecting, please wait.": "Redirecting, please wait.",
"Sign In": "Anmelden",
"Sign in with WebAuthn": "Sign in with WebAuthn",
"Sign in with {type}": "Mit {type} anmelden",

2
web/src/locales/en/data.json
View File

@ -299,6 +299,7 @@
"Continue with": "Continue with",
"Email or phone": "Email or phone",
"Forgot password?": "Forgot password?",
"Loading": "Loading",
"Logging out...": "Logging out...",
"No account?": "No account?",
"Or sign in with another account": "Or sign in with another account",
@ -308,6 +309,7 @@
"Please input your password!": "Please input your password!",
"Please input your password, at least 6 characters!": "Please input your password, at least 6 characters!",
"Please input your username, Email or phone!": "Please input your username, Email or phone!",
"Redirecting, please wait.": "Redirecting, please wait.",
"Sign In": "Sign In",
"Sign in with WebAuthn": "Sign in with WebAuthn",
"Sign in with {type}": "Sign in with {type}",

2
web/src/locales/fr/data.json
View File

@ -299,6 +299,7 @@
"Continue with": "Continuer avec",
"Email or phone": "Courriel ou téléphone",
"Forgot password?": "Mot de passe oublié ?",
"Loading": "Loading",
"Logging out...": "Logging out...",
"No account?": "Pas de compte ?",
"Or sign in with another account": "Ou connectez-vous avec un autre compte",
@ -308,6 +309,7 @@
"Please input your password!": "Veuillez saisir votre mot de passe !",
"Please input your password, at least 6 characters!": "Veuillez entrer votre mot de passe, au moins 6 caractères !",
"Please input your username, Email or phone!": "Veuillez entrer votre nom d'utilisateur, votre e-mail ou votre téléphone!",
"Redirecting, please wait.": "Redirecting, please wait.",
"Sign In": "Se connecter",
"Sign in with WebAuthn": "Sign in with WebAuthn",
"Sign in with {type}": "Se connecter avec {type}",

2
web/src/locales/ja/data.json
View File

@ -299,6 +299,7 @@
"Continue with": "次で続ける",
"Email or phone": "Eメールまたは電話番号",
"Forgot password?": "パスワードを忘れましたか？",
"Loading": "Loading",
"Logging out...": "Logging out...",
"No account?": "アカウントがありませんか？",
"Or sign in with another account": "または別のアカウントでサインイン",
@ -308,6 +309,7 @@
"Please input your password!": "パスワードを入力してください！",
"Please input your password, at least 6 characters!": "6文字以上でパスワードを入力してください！",
"Please input your username, Email or phone!": "ユーザー名、メールアドレスまたは電話番号を入力してください。",
"Redirecting, please wait.": "Redirecting, please wait.",
"Sign In": "サインイン",
"Sign in with WebAuthn": "Sign in with WebAuthn",
"Sign in with {type}": "{type} でサインイン",

2
web/src/locales/ko/data.json
View File

@ -299,6 +299,7 @@
"Continue with": "Continue with",
"Email or phone": "Email or phone",
"Forgot password?": "Forgot password?",
"Loading": "Loading",
"Logging out...": "Logging out...",
"No account?": "No account?",
"Or sign in with another account": "Or sign in with another account",
@ -308,6 +309,7 @@
"Please input your password!": "Please input your password!",
"Please input your password, at least 6 characters!": "Please input your password, at least 6 characters!",
"Please input your username, Email or phone!": "Please input your username, Email or phone!",
"Redirecting, please wait.": "Redirecting, please wait.",
"Sign In": "Sign In",
"Sign in with WebAuthn": "Sign in with WebAuthn",
"Sign in with {type}": "Sign in with {type}",

2
web/src/locales/ru/data.json
View File

@ -299,6 +299,7 @@
"Continue with": "Продолжить с",
"Email or phone": "Электронная почта или телефон",
"Forgot password?": "Забыли пароль?",
"Loading": "Loading",
"Logging out...": "Выход...",
"No account?": "Нет учетной записи?",
"Or sign in with another account": "Или войти с помощью другой учетной записи",
@ -308,6 +309,7 @@
"Please input your password!": "Пожалуйста, введите ваш пароль!",
"Please input your password, at least 6 characters!": "Пожалуйста, введите ваш пароль, по крайней мере 6 символов!",
"Please input your username, Email or phone!": "Пожалуйста, введите ваше имя пользователя, адрес электронной почты или телефон!",
"Redirecting, please wait.": "Redirecting, please wait.",
"Sign In": "Войти",
"Sign in with WebAuthn": "Sign in with WebAuthn",
"Sign in with {type}": "Войти с помощью {type}",

2
web/src/locales/zh/data.json
View File

@ -299,6 +299,7 @@
"Continue with": "使用以下账号继续",
"Email or phone": "Email或手机号",
"Forgot password?": "忘记密码？",
"Loading": "加载中",
"Logging out...": "正在退出登录...",
"No account?": "没有账号？",
"Or sign in with another account": "或者，登录其他账号",
@ -308,6 +309,7 @@
"Please input your password!": "请输入您的密码！",
"Please input your password, at least 6 characters!": "请输入您的密码，不少于6位",
"Please input your username, Email or phone!": "请输入您的用户名、Email或手机号！",
"Redirecting, please wait.": "正在跳转, 请稍等.",
"Sign In": "登录",
"Sign in with WebAuthn": "WebAuthn登录",
"Sign in with {type}": "{type}登录",