From fc864b0de46638188a3c12b8238880f7b7e9a001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=83=E7=9F=B3?= <CN_QianShi@hotmail.com>
Date: Sun, 13 Oct 2024 22:31:54 +0800
Subject: [PATCH] feat: support ".login-panel-dark" CSS for signup/login pages
 (#3269)

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

* refactor: extract dark theme check to Setting.js
---
 web/src/ApplicationEditPage.js | 10 ++++++++--
 web/src/Setting.js             |  4 ++++
 web/src/auth/LoginPage.js      |  2 +-
 web/src/auth/SignupPage.js     |  2 +-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index 67516b83..b00cd0bf 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -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;
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 552c5b63..d4630015 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -1557,3 +1557,7 @@ export function getCurrencyText(product) {
     return "(Unknown currency)";
   }
 }
+
+export function isDarkTheme(themeAlgorithm) {
+  return themeAlgorithm && themeAlgorithm.includes("dark");
+}
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index cefff365..c444542a 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -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>
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index a49dc4fe..3103d8ef 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -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>