feat: custom login form and background (#1107)

* feat: custom login form and background Signed-off-by: magicwind <2814461814@qq.com> * feat: costom login form border * chore: update i18 * Update ApplicationEditPage.js * Update LoginPage.js * Update SignupPage.js * Update LoginPage.js * Update ApplicationEditPage.js Signed-off-by: magicwind <2814461814@qq.com> Co-authored-by: Gucheng <85475922+nomeguy@users.noreply.github.com>
2025-07-03 20:50:19 +08:00 · 2022-09-10 00:56:37 +08:00
parent 94b6eb803d
commit 1edb91b3a3
14 changed files with 172 additions and 30 deletions
--- a/object/application.go
+++ b/object/application.go
@ -66,6 +66,9 @@ type Application struct {
 	TermsOfUse           string   `xorm:"varchar(100)" json:"termsOfUse"`
 	SignupHtml           string   `xorm:"mediumtext" json:"signupHtml"`
 	SigninHtml           string   `xorm:"mediumtext" json:"signinHtml"`
+	FormCss              string   `xorm:"text" json:"formCss"`
+	FormOffset           int      `json:"formOffset"`
+	FormBackgroundUrl    string   `xorm:"varchar(200)" json:"formBackgroundUrl"`
 }

 func GetApplicationCount(owner, field, value string) int {
--- a/object/init.go
+++ b/object/init.go
@ -157,6 +157,7 @@ func initBuiltInApplication() {
 		},
 		RedirectUris:  []string{},
 		ExpireInHours: 168,
+		FormOffset:    8,
 	}
 	AddApplication(application)
 }
--- a/web/src/App.less
+++ b/web/src/App.less
@ -76,3 +76,8 @@
  flex: 1;
  align-items: stretch;
 }
+
+.loginBackground {
+  background: #ffffff no-repeat;
+  background-size: 100% 100%;
+}
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@ -13,7 +13,7 @@
 // limitations under the License.

 import React from "react";
-import {Button, Card, Col, Input, Popover, Row, Select, Switch, Upload} from "antd";
+import {Button, Card, Col, Input, Popover, Radio, 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";
@ -35,9 +35,18 @@ import "codemirror/lib/codemirror.css";
 require("codemirror/theme/material-darker.css");
 require("codemirror/mode/htmlmixed/htmlmixed");
 require("codemirror/mode/xml/xml");
+require("codemirror/mode/css/css");

 const {Option} = Select;

+const templete = {
+  padding: "30px",
+  border: "2px solid #ffffff",
+  borderRadius: "7px",
+  backgroundColor: "#ffffff",
+  boxShadow: " 0px 0px 20px rgba(0, 0, 0, 0.20)",
+};
+
 class ApplicationEditPage extends React.Component {
  constructor(props) {
    super(props);
@ -111,7 +120,7 @@ class ApplicationEditPage extends React.Component {
  }

  parseApplicationField(key, value) {
-    if (["expireInHours", "refreshExpireInHours"].includes(key)) {
+    if (["expireInHours", "refreshExpireInHours", "offset"].includes(key)) {
      value = Setting.myParseInt(value);
    }
    return value;
@ -148,6 +157,7 @@ class ApplicationEditPage extends React.Component {
  }

  renderApplication() {
+    const preview = JSON.stringify(templete, null, 2);
    return (
      <Card size="small" title={
        <div>
@ -536,6 +546,66 @@ class ApplicationEditPage extends React.Component {
            this.renderSignupSigninPreview()
          }
        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:Background URL"), i18next.t("application:Background URL - Tooltip"))} :
+          </Col>
+          <Col span={22} style={(Setting.isMobile()) ? {maxWidth: "100%"} : {}}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
+                {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
+              </Col>
+              <Col span={23} >
+                <Input prefix={<LinkOutlined />} value={this.state.application.backgroundUrl} onChange={e => {
+                  this.updateApplicationField("backgroundUrl", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
+                {i18next.t("general:Preview")}:
+              </Col>
+              <Col span={23} >
+                <a target="_blank" rel="noreferrer" href={this.state.application.backgroundUrl}>
+                  <img src={this.state.application.backgroundUrl} alt={this.state.application.backgroundUrl} height={90} style={{marginBottom: "20px"}} />
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:Form CSS"), i18next.t("application:Form CSS - Tooltip"))} :
+          </Col>
+          <Col span={22}>
+            <Popover placement="right" content={
+              <div style={{width: "900px", height: "300px"}} >
+                <CodeMirror value={this.state.application.formCss === "" ? preview : this.state.application.formCss}
+                  options={{mode: "css", theme: "material-darker"}}
+                  onBeforeChange={(editor, data, value) => {
+                    this.updateApplicationField("formCss", value);
+                  }}
+                />
+              </div>
+            } title={i18next.t("application:Form CSS - Edit")} trigger="click">
+              <Input value={this.state.application.formCss} style={{marginBottom: "10px"}} onChange={e => {
+                this.updateApplicationField("formCss", e.target.value);
+              }} />
+            </Popover>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:From position"), i18next.t("application:From position - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Radio.Group onChange={e => {this.updateApplicationField("formOffset", e.target.value);}} value={this.state.application.formOffset !== 0 ? this.state.application.formOffset : 8}>
+              <Radio.Button value={2}>left</Radio.Button>
+              <Radio.Button value={8}>center</Radio.Button>
+              <Radio.Button value={14}>right</Radio.Button>
+            </Radio.Group>
+          </Col>
+        </Row>
        {
          !this.state.application.enableSignUp ? null : (
            <Row style={{marginTop: "20px"}} >
@ -591,7 +661,7 @@ class ApplicationEditPage extends React.Component {
                <LoginPage type={"login"} mode={"signup"} application={this.state.application} />
              )
            }
-            <div style={maskStyle}></div>
+            <div style={maskStyle} />
          </div>
        </Col>
        <Col span={11}>
@ -605,7 +675,7 @@ class ApplicationEditPage extends React.Component {
          <br />
          <div style={{position: "relative", width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems: "center", overflow: "auto", flexDirection: "column", flex: "auto"}}>
            <LoginPage type={"login"} mode={"signin"} application={this.state.application} />
-            <div style={maskStyle}></div>
+            <div style={maskStyle} />
          </div>
        </Col>
      </React.Fragment>
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@ -82,7 +82,7 @@ export const OtherProviderInfo = {
      url: "https://cloud.tencent.com/product/cos",
    },
    "Azure Blob": {
-      logo: `${StaticBaseUrl}/img/social_azure.jpg`,
+      logo: `${StaticBaseUrl}/img/social_azure.png`,
      url: "https://azure.microsoft.com/en-us/services/storage/blobs/",
    },
  },
@ -354,6 +354,14 @@ export function isPromptAnswered(user, application) {
  return true;
 }

+export function parseObject(s) {
+  try {
+    return eval("(" + s + ")");
+  } catch (e) {
+    return null;
+  }
+}
+
 export function parseJson(s) {
  if (s === "") {
    return null;
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@ -680,10 +680,13 @@ class LoginPage extends React.Component {
      );
    }

+    const formStyle = Setting.parseObject(application.formCss);
+
    return (
+      <div className="loginBackground" style={{backgroundImage: `url(${application.formBackgroundUrl})`}}>
        <Row>
-        <Col span={24} style={{display: "flex", justifyContent: "center"}}>
-          <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center"}}>
+          <Col span={8} offset={application.formOffset === 0 ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
+            <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
              {
                Setting.renderHelmet(application)
              }
@ -703,6 +706,7 @@ class LoginPage extends React.Component {
            </div>
          </Col>
        </Row>
+      </div>
    );
  }
 }
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@ -614,13 +614,15 @@ class SignupPage extends React.Component {
      );
    }

+    const formStyle = Setting.parseObject(application.formCss);
+
    return (
-      <div>
+      <div className="loginBackground" style={{backgroundImage: `url(${application.formBackgroundUrl})`}}>
        <CustomGithubCorner />
        &nbsp;
        <Row>
-          <Col span={24} style={{display: "flex", justifyContent: "center"}} >
-            <div style={{marginTop: "10px", textAlign: "center"}}>
+          <Col span={8} offset={application.formOffset === 0 ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
+            <div style={{marginTop: "10px", marginBottom: "30px", textAlign: "center", ...formStyle}}>
              {
                Setting.renderHelmet(application)
              }
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@ -6,6 +6,8 @@
    "Sign Up": "Registrieren"
  },
  "application": {
+    "Background URL": "Background URL",
+    "Background URL - Tooltip": "Background URL - Tooltip",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -21,6 +23,11 @@
    "Enable signup": "Anmeldung aktivieren",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
    "File uploaded successfully": "Datei erfolgreich hochgeladen",
+    "Form CSS": "Form CSS",
+    "Form CSS - Edit": "Form CSS - Edit",
+    "Form CSS - Tooltip": "Form CSS - Tooltip",
+    "From position": "From position",
+    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
    "New Application": "New Application",
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@ -6,6 +6,8 @@
    "Sign Up": "Sign Up"
  },
  "application": {
+    "Background URL": "Background URL",
+    "Background URL - Tooltip": "Background URL - Tooltip",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -21,6 +23,11 @@
    "Enable signup": "Enable signup",
    "Enable signup - Tooltip": "Enable signup - Tooltip",
    "File uploaded successfully": "File uploaded successfully",
+    "Form CSS": "Form CSS",
+    "Form CSS - Edit": "Form CSS - Edit",
+    "Form CSS - Tooltip": "Form CSS - Tooltip",
+    "From position": "From position",
+    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
    "New Application": "New Application",
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@ -6,6 +6,8 @@
    "Sign Up": "S'inscrire"
  },
  "application": {
+    "Background URL": "Background URL",
+    "Background URL - Tooltip": "Background URL - Tooltip",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -21,6 +23,11 @@
    "Enable signup": "Activer l'inscription",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
    "File uploaded successfully": "Fichier téléchargé avec succès",
+    "Form CSS": "Form CSS",
+    "Form CSS - Edit": "Form CSS - Edit",
+    "Form CSS - Tooltip": "Form CSS - Tooltip",
+    "From position": "From position",
+    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
    "New Application": "New Application",
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@ -6,6 +6,8 @@
    "Sign Up": "新規登録"
  },
  "application": {
+    "Background URL": "Background URL",
+    "Background URL - Tooltip": "Background URL - Tooltip",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -21,6 +23,11 @@
    "Enable signup": "サインアップを有効にする",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
    "File uploaded successfully": "ファイルが正常にアップロードされました",
+    "Form CSS": "Form CSS",
+    "Form CSS - Edit": "Form CSS - Edit",
+    "Form CSS - Tooltip": "Form CSS - Tooltip",
+    "From position": "From position",
+    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
    "New Application": "New Application",
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@ -6,6 +6,8 @@
    "Sign Up": "Sign Up"
  },
  "application": {
+    "Background URL": "Background URL",
+    "Background URL - Tooltip": "Background URL - Tooltip",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -21,6 +23,11 @@
    "Enable signup": "Enable signup",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
    "File uploaded successfully": "File uploaded successfully",
+    "Form CSS": "Form CSS",
+    "Form CSS - Edit": "Form CSS - Edit",
+    "Form CSS - Tooltip": "Form CSS - Tooltip",
+    "From position": "From position",
+    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
    "New Application": "New Application",
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@ -6,6 +6,8 @@
    "Sign Up": "Регистрация"
  },
  "application": {
+    "Background URL": "Background URL",
+    "Background URL - Tooltip": "Background URL - Tooltip",
    "Copy SAML metadata URL": "Копировать адрес метаданных SAML",
    "Copy prompt page URL": "Скопировать URL-адрес страницы запроса",
    "Copy signin page URL": "Скопировать URL-адрес страницы входа",
@ -21,6 +23,11 @@
    "Enable signup": "Включить регистрацию",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
    "File uploaded successfully": "Файл успешно загружен",
+    "Form CSS": "Form CSS",
+    "Form CSS - Edit": "Form CSS - Edit",
+    "Form CSS - Tooltip": "Form CSS - Tooltip",
+    "From position": "From position",
+    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Виды грантов",
    "Grant types - Tooltip": "Виды грантов - Подсказка",
    "New Application": "Новое приложение",
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@ -6,6 +6,8 @@
    "Sign Up": "注册"
  },
  "application": {
+    "Background URL": "背景图URL",
+    "Background URL - Tooltip": "登录页背景图的链接",
    "Copy SAML metadata URL": "复制SAML元数据URL",
    "Copy prompt page URL": "复制提醒页面URL",
    "Copy signin page URL": "复制登录页面URL",
@ -21,6 +23,11 @@
    "Enable signup": "启用注册",
    "Enable signup - Tooltip": "是否允许用户注册",
    "File uploaded successfully": "文件上传成功",
+    "Form CSS": "表单CSS",
+    "Form CSS - Edit": "编辑表单CSS",
+    "Form CSS - Tooltip": "表单的CSS样式(增加边框和阴影)",
+    "From position": "面板的位置",
+    "From position - Tooltip": "登录和注册面板的位置",
    "Grant types": "OAuth授权类型",
    "Grant types - Tooltip": "选择允许哪些OAuth协议中的Grant types",
    "New Application": "添加应用",