feat: support customize theme (#1500)

* refactor: simplify functions and improve variable naming

* feat: add themeEditor component

* feat: support customize theme

* chore: resolve conflict and add LICENCE

* chore: format code

* refactor: use icon replace background url

* feat: improve organization and application theme editor

web/src/ApplicationEditPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Popover, Radio, Result, Row, Select, Switch, Upload} from "antd";
+import {Button, Card, Col, ConfigProvider, Input, Popover, Radio, Result, Row, Select, Switch, Upload} from "antd";
 import {CopyOutlined, LinkOutlined, UploadOutlined} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as CertBackend from "./backend/CertBackend";
@@ -32,6 +32,7 @@ import copy from "copy-to-clipboard";
 
 import {Controlled as CodeMirror} from "react-codemirror2";
 import "codemirror/lib/codemirror.css";
+import ThemeEditor from "./common/theme/ThemeEditor";
 
 require("codemirror/theme/material-darker.css");
 require("codemirror/mode/htmlmixed/htmlmixed");
@@ -709,6 +710,31 @@ class ApplicationEditPage extends React.Component {
               : null}
           </Col>
         </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("theme:Theme"), i18next.t("theme:Theme - Tooltip"))} :
+          </Col>
+          <Col span={22} style={{marginTop: "5px"}}>
+            <Row>
+              <Radio.Group value={this.state.application.themeData?.isEnabled ?? false} onChange={e => {
+                const {_, ...theme} = this.state.application.themeData ?? {...Setting.ThemeDefault, isEnabled: false};
+                this.updateApplicationField("themeData", {...theme, isEnabled: e.target.value});
+              }} >
+                <Radio.Button value={false}>{i18next.t("application:Follow organization theme")}</Radio.Button>
+                <Radio.Button value={true}>{i18next.t("theme:Customize theme")}</Radio.Button>
+              </Radio.Group>
+            </Row>
+            {
+              this.state.application.themeData?.isEnabled ?
+                <Row style={{marginTop: "20px"}}>
+                  <ThemeEditor themeData={this.state.application.themeData} onThemeChange={(_, nextThemeData) => {
+                    const {isEnabled} = this.state.application.themeData ?? {...Setting.ThemeDefault, isEnabled: false};
+                    this.updateApplicationField("themeData", {...nextThemeData, isEnabled});
+                  }} />
+                </Row> : null
+            }
+          </Col>
+        </Row>
         {
           !this.state.application.enableSignUp ? null : (
             <Row style={{marginTop: "20px"}} >
@@ -738,6 +764,7 @@ class ApplicationEditPage extends React.Component {
   }
 
   renderSignupSigninPreview() {
+    const themeData = this.state.application.themeData;
     let signUpUrl = `/signup/${this.state.application.name}`;
     const signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
     const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "97%", width: "100%", background: "rgba(0,0,0,0.4)"};
@@ -756,20 +783,28 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("application:Copy signup page URL")}
           </Button>
           <br />
-          <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
-            {
-              this.state.application.enablePassword ? (
-                <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
-                  <SignupPage application={this.state.application} preview = "auto" />
-                </div>
-              ) : (
-                <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
-                  <LoginPage type={"login"} mode={"signup"} application={this.state.application} preview = "auto" />
-                </div>
-              )
-            }
-            <div style={{overflow: "auto", ...maskStyle}} />
-          </div>
+          <ConfigProvider theme={{
+            token: {
+              colorPrimary: themeData.colorPrimary,
+              colorInfo: themeData.colorPrimary,
+              borderRadius: themeData.borderRadius,
+            },
+          }}>
+            <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
+              {
+                this.state.application.enablePassword ? (
+                  <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                    <SignupPage application={this.state.application} preview = "auto" />
+                  </div>
+                ) : (
+                  <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                    <LoginPage type={"login"} mode={"signup"} application={this.state.application} preview = "auto" />
+                  </div>
+                )
+              }
+              <div style={{overflow: "auto", ...maskStyle}} />
+            </div>
+          </ConfigProvider>
         </Col>
         <Col span={previewGrid}>
           <Button style={{marginBottom: "10px", marginTop: Setting.isMobile() ? "15px" : "0"}} type="primary" shape="round" icon={<CopyOutlined />} onClick={() => {
@@ -780,18 +815,27 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("application:Copy signin page URL")}
           </Button>
           <br />
-          <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
-            <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
-              <LoginPage type={"login"} mode={"signin"} application={this.state.application} preview = "auto" />
+          <ConfigProvider theme={{
+            token: {
+              colorPrimary: themeData.colorPrimary,
+              colorInfo: themeData.colorPrimary,
+              borderRadius: themeData.borderRadius,
+            },
+          }}>
+            <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
+              <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                <LoginPage type={"login"} mode={"signin"} application={this.state.application} preview = "auto" />
+              </div>
+              <div style={{overflow: "auto", ...maskStyle}} />
             </div>
-            <div style={{overflow: "auto", ...maskStyle}} />
-          </div>
+          </ConfigProvider>
         </Col>
       </React.Fragment>
     );
   }
 
   renderPromptPreview() {
+    const themeData = this.state.application.themeData;
     const promptUrl = `/prompt/${this.state.application.name}`;
     const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
     return (
@@ -804,10 +848,18 @@ class ApplicationEditPage extends React.Component {
           {i18next.t("application:Copy prompt page URL")}
         </Button>
         <br />
-        <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", flexDirection: "column", flex: "auto"}}>
-          <PromptPage application={this.state.application} account={this.props.account} />
-          <div style={maskStyle} />
-        </div>
+        <ConfigProvider theme={{
+          token: {
+            colorPrimary: themeData.colorPrimary,
+            colorInfo: themeData.colorPrimary,
+            borderRadius: themeData.borderRadius,
+          },
+        }}>
+          <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", flexDirection: "column", flex: "auto"}}>
+            <PromptPage application={this.state.application} account={this.props.account} />
+            <div style={maskStyle} />
+          </div>
+        </ConfigProvider>
       </Col>
     );
   }