llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-23 02:35:49 +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

10
web/src/ApplicationEditPage.js
View File

@ -46,12 +46,18 @@ require("codemirror/mode/css/css");
const {Option} = Select;
const template = `<style>
.login-panel{
.login-panel {
padding: 40px 70px 0 70px;
border-radius: 10px;
background-color: #ffffff;
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>`;
const previewGrid = Setting.isMobile() ? 22 : 11;

4
web/src/Setting.js
View File

@ -1557,3 +1557,7 @@ export function getCurrencyText(product) {
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)}}>
{Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
{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 dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
</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)}}>
{Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
{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 dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
</div>