From 8dbb041a34de30affdfeb946343a718a9a703bdb Mon Sep 17 00:00:00 2001
From: DacongDA <dacongda1@sina.com>
Date: Wed, 24 Apr 2024 15:19:30 +0800
Subject: [PATCH] feat: fix empty custom CSS for new rows in signin items table
 (#2897)

---
 object/application.go        |  2 +-
 web/src/auth/LoginPage.js    |  5 ++---
 web/src/table/SigninTable.js | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/object/application.go b/object/application.go
index 14d509a0..db157c01 100644
--- a/object/application.go
+++ b/object/application.go
@@ -209,7 +209,7 @@ func extendApplicationWithSigninItems(application *Application) (err error) {
 		signinItem := &SigninItem{
 			Name:        "Back button",
 			Visible:     true,
-			Label:       ".back-button {\n      top: 65px;\n      left: 15px;\n      position: absolute;\n}",
+			Label:       ".back-button {\n      top: 65px;\n      left: 15px;\n      position: absolute;\n}\n.back-inner-button{}",
 			Placeholder: "",
 			Rule:        "None",
 		}
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 4378a2b2..1a43d97c 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -543,7 +543,7 @@ class LoginPage extends React.Component {
       );
     } else if (signinItem.name === "Back button") {
       return (
-        <div>
+        <div className="back-button">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.label?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {
             this.renderBackButton()
@@ -1199,8 +1199,7 @@ class LoginPage extends React.Component {
   renderBackButton() {
     if (this.state.orgChoiceMode === "None" || this.props.preview === "auto") {
       return (
-        <Button type="text" size="large" icon={<ArrowLeftOutlined />}
-          className="back-button"
+        <Button className="back-inner-button" type="text" size="large" icon={<ArrowLeftOutlined />}
           onClick={() => history.back()}>
         </Button>
       );
diff --git a/web/src/table/SigninTable.js b/web/src/table/SigninTable.js
index da4f9785..8ca577ac 100644
--- a/web/src/table/SigninTable.js
+++ b/web/src/table/SigninTable.js
@@ -26,6 +26,20 @@ require("codemirror/mode/htmlmixed/htmlmixed");
 
 const {Option} = Select;
 
+export const SigninTableDefaultCssMap = {
+  "Back button": ".back-button {\n      top: 65px;\n      left: 15px;\n      position: absolute;\n}\n.back-inner-button{}",
+  "Languages": ".login-languages {\n    top: 55px;\n    right: 5px;\n    position: absolute;\n}",
+  "Logo": ".login-logo-box {}",
+  "Signin methods": ".signin-methods {}",
+  "Username": ".login-username {}\n.login-username-input{}",
+  "Password": ".login-password {}\n.login-password-input{}",
+  "Agreement": ".login-agreement {}",
+  "Forgot password?": ".login-forget-password {\n    display: inline-flex;\n    justify-content: space-between;\n    width: 320px;\n    margin-bottom: 25px;\n}",
+  "Login button": ".login-button-box {\n    margin-bottom: 5px;\n}\n.login-button {\n    width: 100%;\n}",
+  "Signup link": ".login-signup-link {\n    margin-bottom: 24px;\n    display: flex;\n    justify-content: end;\n}",
+  "Providers": ".provider-img {\n      width: 30px;\n      margin: 5px;\n}\n.provider-big-img {\n      margin-bottom: 10px;\n}",
+};
+
 class SigninTable extends React.Component {
   constructor(props) {
     super(props);
@@ -120,6 +134,7 @@ class SigninTable extends React.Component {
               value={getItemDisplayName(text)}
               onChange={value => {
                 this.updateField(table, index, "name", value);
+                this.updateField(table, index, "label", SigninTableDefaultCssMap[value]);
               }} >
               {
                 Setting.getDeduplicatedArray(items, table, "name").map((item, index) => <Option key={index} value={item.name}>{item.displayName}</Option>)