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

feat: login background image display (#1145)

Browse Source
This commit is contained in:
leoshine 2022-09-20 23:06:24 +08:00 committed by GitHub
parent e295da774f
commit 3d50255060
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
casdoor Normal file
View File

Binary file not shown.

4
web/src/App.js
View File

@ -697,8 +697,8 @@ class App extends Component {
renderPage() { renderPage() {
if (this.isDoorPages()) { if (this.isDoorPages()) {
return ( return (
<div style={{position: "relative", minHeight: "100vh"}}> <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
<div id="content-wrap" style={{flexDirection: "column"}}> <div id="login-content-wrap" style={{flexDirection: "column"}}>
<Switch> <Switch>
<Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} />)} /> <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="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />)} />

20
web/src/App.less
View File

@ -28,22 +28,32 @@
color: #61dafb; color: #61dafb;
} }
#root{
height: 100%;
}
#parent-area { #parent-area {
position: relative; display: flex;
flex-direction: column;
height: 100%;
min-height: 100vh; min-height: 100vh;
background-color: #f5f5f5; background-color: #f5f5f5;
display: flex;
} }
#content-wrap { #content-wrap {
padding-bottom: 70px; /* Footer height */
display: flex; display: flex;
flex: 1 1 0;
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
} }
#login-content-wrap {
display: flex;
flex: 1 1 0;
width: 100%;
}
#footer { #footer {
position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 70px; /* Footer height */ height: 70px; /* Footer height */
@ -78,6 +88,8 @@
} }
.loginBackground { .loginBackground {
height: 100%;
background: #ffffff no-repeat; background: #ffffff no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-attachment: fixed;
} }

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

@ -707,10 +707,10 @@ class LoginPage extends React.Component {
const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss); const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
return ( return (
<div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}> <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
<CustomGithubCorner /> <CustomGithubCorner />
<Row> <Row >
<Col span={8} offset={application.formOffset === 0 || Setting.inIframe() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}> <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
<div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}> <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
<div> <div>
{ {

4
web/src/auth/SignupPage.js
View File

@ -617,11 +617,11 @@ class SignupPage extends React.Component {
const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss); const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
return ( return (
<div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}> <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
<CustomGithubCorner /> <CustomGithubCorner />
&nbsp; &nbsp;
<Row> <Row>
<Col span={8} offset={application.formOffset === 0 || Setting.inIframe() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} > <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
<div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}> <div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}>
{ {
Setting.renderHelmet(application) Setting.renderHelmet(application)