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

feat: support ".login-panel-dark" CSS for signup/login pages (#3269)

Browse Source 
* feat: add custom dark mode CSS for login and registration forms.

* refactor: extract dark theme check to Setting.js
This commit is contained in:
千石 2024-10-13 22:31:54 +08:00 committed by GitHub
parent 3211bcc777
commit fc864b0de4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/ApplicationEditPage.js
View File

@ -52,6 +52,12 @@ const template = `<style>
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.20); box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.20);
} }
.login-panel-dark {
padding: 40px 70px 0 70px;
border-radius: 10px;
background-color: #333333;
box-shadow: 0 0 30px 20px rgba(255, 255, 255, 0.20);
}
</style>`; </style>`;
const previewGrid = Setting.isMobile() ? 22 : 11; const previewGrid = Setting.isMobile() ? 22 : 11;

4
web/src/Setting.js
View File

@ -1557,3 +1557,7 @@ export function getCurrencyText(product) {
return "(Unknown currency)"; return "(Unknown currency)";
} }
} }
export function isDarkTheme(themeAlgorithm) {
return themeAlgorithm && themeAlgorithm.includes("dark");
}

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

@ -1293,7 +1293,7 @@ class LoginPage extends React.Component {
<div className="login-content" style={{margin: this.props.preview ?? this.parseOffset(application.formOffset)}}> <div className="login-content" style={{margin: this.props.preview ?? this.parseOffset(application.formOffset)}}>
{Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />} {Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
{Setting.inIframe() || !Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCssMobile}} />} {Setting.inIframe() || !Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCssMobile}} />}
<div className="login-panel"> <div className={Setting.isDarkTheme(this.props.themeAlgorithm) ? "login-panel-dark" : "login-panel"}>
<div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}> <div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}>
<div dangerouslySetInnerHTML={{__html: application.formSideHtml}} /> <div dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
</div> </div>

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

@ -842,7 +842,7 @@ class SignupPage extends React.Component {
<div className="login-content" style={{margin: this.props.preview ?? this.parseOffset(application.formOffset)}}> <div className="login-content" style={{margin: this.props.preview ?? this.parseOffset(application.formOffset)}}>
{Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />} {Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
{Setting.inIframe() || !Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCssMobile}} />} {Setting.inIframe() || !Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCssMobile}} />}
<div className="login-panel" > <div className={Setting.isDarkTheme(this.props.themeAlgorithm) ? "login-panel-dark" : "login-panel"}>
<div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}> <div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}>
<div dangerouslySetInnerHTML={{__html: application.formSideHtml}} /> <div dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
</div> </div>