From 9032865e6005b8f87441cdde021a5b499babefc8 Mon Sep 17 00:00:00 2001
From: DacongDA <dacongda1@sina.com>
Date: Sat, 1 Mar 2025 23:01:15 +0800
Subject: [PATCH] feat: support mobile background for login page (#3629)

---
 object/application.go          | 47 +++++++++++++++++-----------------
 web/src/ApplicationEditPage.js | 27 +++++++++++++++++++
 web/src/EntryPage.js           |  2 +-
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/object/application.go b/object/application.go
index 4b79d703..d4a8c553 100644
--- a/object/application.go
+++ b/object/application.go
@@ -97,29 +97,30 @@ type Application struct {
 	IsShared              bool            `json:"isShared"`
 	IpRestriction         string          `json:"ipRestriction"`
 
-	ClientId             string     `xorm:"varchar(100)" json:"clientId"`
-	ClientSecret         string     `xorm:"varchar(100)" json:"clientSecret"`
-	RedirectUris         []string   `xorm:"varchar(1000)" json:"redirectUris"`
-	TokenFormat          string     `xorm:"varchar(100)" json:"tokenFormat"`
-	TokenSigningMethod   string     `xorm:"varchar(100)" json:"tokenSigningMethod"`
-	TokenFields          []string   `xorm:"varchar(1000)" json:"tokenFields"`
-	ExpireInHours        int        `json:"expireInHours"`
-	RefreshExpireInHours int        `json:"refreshExpireInHours"`
-	SignupUrl            string     `xorm:"varchar(200)" json:"signupUrl"`
-	SigninUrl            string     `xorm:"varchar(200)" json:"signinUrl"`
-	ForgetUrl            string     `xorm:"varchar(200)" json:"forgetUrl"`
-	AffiliationUrl       string     `xorm:"varchar(100)" json:"affiliationUrl"`
-	IpWhitelist          string     `xorm:"varchar(200)" json:"ipWhitelist"`
-	TermsOfUse           string     `xorm:"varchar(100)" json:"termsOfUse"`
-	SignupHtml           string     `xorm:"mediumtext" json:"signupHtml"`
-	SigninHtml           string     `xorm:"mediumtext" json:"signinHtml"`
-	ThemeData            *ThemeData `xorm:"json" json:"themeData"`
-	FooterHtml           string     `xorm:"mediumtext" json:"footerHtml"`
-	FormCss              string     `xorm:"text" json:"formCss"`
-	FormCssMobile        string     `xorm:"text" json:"formCssMobile"`
-	FormOffset           int        `json:"formOffset"`
-	FormSideHtml         string     `xorm:"mediumtext" json:"formSideHtml"`
-	FormBackgroundUrl    string     `xorm:"varchar(200)" json:"formBackgroundUrl"`
+	ClientId                string     `xorm:"varchar(100)" json:"clientId"`
+	ClientSecret            string     `xorm:"varchar(100)" json:"clientSecret"`
+	RedirectUris            []string   `xorm:"varchar(1000)" json:"redirectUris"`
+	TokenFormat             string     `xorm:"varchar(100)" json:"tokenFormat"`
+	TokenSigningMethod      string     `xorm:"varchar(100)" json:"tokenSigningMethod"`
+	TokenFields             []string   `xorm:"varchar(1000)" json:"tokenFields"`
+	ExpireInHours           int        `json:"expireInHours"`
+	RefreshExpireInHours    int        `json:"refreshExpireInHours"`
+	SignupUrl               string     `xorm:"varchar(200)" json:"signupUrl"`
+	SigninUrl               string     `xorm:"varchar(200)" json:"signinUrl"`
+	ForgetUrl               string     `xorm:"varchar(200)" json:"forgetUrl"`
+	AffiliationUrl          string     `xorm:"varchar(100)" json:"affiliationUrl"`
+	IpWhitelist             string     `xorm:"varchar(200)" json:"ipWhitelist"`
+	TermsOfUse              string     `xorm:"varchar(100)" json:"termsOfUse"`
+	SignupHtml              string     `xorm:"mediumtext" json:"signupHtml"`
+	SigninHtml              string     `xorm:"mediumtext" json:"signinHtml"`
+	ThemeData               *ThemeData `xorm:"json" json:"themeData"`
+	FooterHtml              string     `xorm:"mediumtext" json:"footerHtml"`
+	FormCss                 string     `xorm:"text" json:"formCss"`
+	FormCssMobile           string     `xorm:"text" json:"formCssMobile"`
+	FormOffset              int        `json:"formOffset"`
+	FormSideHtml            string     `xorm:"mediumtext" json:"formSideHtml"`
+	FormBackgroundUrl       string     `xorm:"varchar(200)" json:"formBackgroundUrl"`
+	FormBackgroundUrlMobile string     `xorm:"varchar(200)" json:"formBackgroundUrlMobile"`
 
 	FailedSigninLimit      int `json:"failedSigninLimit"`
 	FailedSigninFrozenTime int `json:"failedSigninFrozenTime"`
diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index a1bf1e9b..3ca515fe 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -804,6 +804,33 @@ class ApplicationEditPage extends React.Component {
             </Row>
           </Col>
         </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:Background URL Mobile"), i18next.t("application:Background URL Mobile - Tooltip"))} :
+          </Col>
+          <Col span={22} style={(Setting.isMobile()) ? {maxWidth: "100%"} : {}}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Input prefix={<LinkOutlined />} value={this.state.application.formBackgroundUrlMobile} onChange={e => {
+                  this.updateApplicationField("formBackgroundUrlMobile", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {i18next.t("general:Preview")}:
+              </Col>
+              <Col span={22} >
+                <a target="_blank" rel="noreferrer" href={this.state.application.formBackgroundUrlMobile}>
+                  <img src={this.state.application.formBackgroundUrlMobile} alt={this.state.application.formBackgroundUrlMobile} 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:Custom CSS"), i18next.t("application:Custom CSS - Tooltip"))} :
diff --git a/web/src/EntryPage.js b/web/src/EntryPage.js
index ec4a4766..da3c3a78 100644
--- a/web/src/EntryPage.js
+++ b/web/src/EntryPage.js
@@ -109,7 +109,7 @@ class EntryPage extends React.Component {
       <React.Fragment>
         <CustomHead headerHtml={this.state.application?.headerHtml} />
         <div className={`${isDarkMode ? "loginBackgroundDark" : "loginBackground"}`}
-          style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${this.state.application?.formBackgroundUrl})`}}>
+          style={{backgroundImage: Setting.inIframe() ? null : (Setting.isMobile() ? `url(${this.state.application?.formBackgroundUrlMobile})` : `url(${this.state.application?.formBackgroundUrl})`)}}>
           <Spin size="large" spinning={this.state.application === undefined && this.state.pricing === undefined} tip={i18next.t("login:Loading")}
             style={{width: "100%", margin: "0 auto", position: "absolute"}} />
           <Switch>