From 1edb91b3a3bde1feab57ff57cfbd64d0a1b320ec Mon Sep 17 00:00:00 2001 From: leoshine <2814461814@qq.com> Date: Sat, 10 Sep 2022 00:56:37 +0800 Subject: [PATCH] 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> --- object/application.go | 3 ++ object/init.go | 1 + web/src/App.less | 5 +++ web/src/ApplicationEditPage.js | 78 ++++++++++++++++++++++++++++++++-- web/src/Setting.js | 10 ++++- web/src/auth/LoginPage.js | 48 +++++++++++---------- web/src/auth/SignupPage.js | 8 ++-- web/src/locales/de/data.json | 7 +++ web/src/locales/en/data.json | 7 +++ web/src/locales/fr/data.json | 7 +++ web/src/locales/ja/data.json | 7 +++ web/src/locales/ko/data.json | 7 +++ web/src/locales/ru/data.json | 7 +++ web/src/locales/zh/data.json | 7 +++ 14 files changed, 172 insertions(+), 30 deletions(-) diff --git a/object/application.go b/object/application.go index 9b14a15a..60459877 100644 --- 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 { diff --git a/object/init.go b/object/init.go index 82df37fd..1c0f7a13 100644 --- a/object/init.go +++ b/object/init.go @@ -157,6 +157,7 @@ func initBuiltInApplication() { }, RedirectUris: []string{}, ExpireInHours: 168, + FormOffset: 8, } AddApplication(application) } diff --git a/web/src/App.less b/web/src/App.less index cf5c202e..9d3496a3 100644 --- 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%; +} diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js index 755958e2..5e8e9074 100644 --- 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 ( @@ -536,6 +546,66 @@ class ApplicationEditPage extends React.Component { this.renderSignupSigninPreview() } + + + {Setting.getLabel(i18next.t("application:Background URL"), i18next.t("application:Background URL - Tooltip"))} : + + + + + {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} : + + + } value={this.state.application.backgroundUrl} onChange={e => { + this.updateApplicationField("backgroundUrl", e.target.value); + }} /> + + + + + {i18next.t("general:Preview")}: + + + + {this.state.application.backgroundUrl} + + + + + + + + {Setting.getLabel(i18next.t("application:Form CSS"), i18next.t("application:Form CSS - Tooltip"))} : + + + + { + this.updateApplicationField("formCss", value); + }} + /> + + } title={i18next.t("application:Form CSS - Edit")} trigger="click"> + { + this.updateApplicationField("formCss", e.target.value); + }} /> + + + + + + {Setting.getLabel(i18next.t("application:From position"), i18next.t("application:From position - Tooltip"))} : + + + {this.updateApplicationField("formOffset", e.target.value);}} value={this.state.application.formOffset !== 0 ? this.state.application.formOffset : 8}> + left + center + right + + + { !this.state.application.enableSignUp ? null : ( @@ -591,7 +661,7 @@ class ApplicationEditPage extends React.Component { ) } -
+
@@ -605,7 +675,7 @@ class ApplicationEditPage extends React.Component {
-
+
diff --git a/web/src/Setting.js b/web/src/Setting.js index 5752064f..3c61f7ea 100644 --- 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; diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js index 1a1601d3..82b5cac1 100644 --- a/web/src/auth/LoginPage.js +++ b/web/src/auth/LoginPage.js @@ -680,29 +680,33 @@ class LoginPage extends React.Component { ); } + const formStyle = Setting.parseObject(application.formCss); + return ( - - -
- { - Setting.renderHelmet(application) - } - - { - Setting.renderLogo(application) - } - {/* {*/} - {/* this.state.clientId !== null ? "Redirect" : null*/} - {/* }*/} - { - this.renderSignedInBox() - } - { - this.renderForm(application) - } -
- - +
+ + +
+ { + Setting.renderHelmet(application) + } + + { + Setting.renderLogo(application) + } + {/* {*/} + {/* this.state.clientId !== null ? "Redirect" : null*/} + {/* }*/} + { + this.renderSignedInBox() + } + { + this.renderForm(application) + } +
+ + +
); } } diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js index 2b9e58dc..f9808e5f 100644 --- 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 ( -
+
  - -
+ +
{ Setting.renderHelmet(application) } diff --git a/web/src/locales/de/data.json b/web/src/locales/de/data.json index e66dc78b..820bd64b 100644 --- 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", diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json index dffa762e..1f9fb2f8 100644 --- 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", diff --git a/web/src/locales/fr/data.json b/web/src/locales/fr/data.json index 1f340013..3dd79428 100644 --- 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", diff --git a/web/src/locales/ja/data.json b/web/src/locales/ja/data.json index eb19f1ed..44adef82 100644 --- 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", diff --git a/web/src/locales/ko/data.json b/web/src/locales/ko/data.json index dc3c24de..56b278c6 100644 --- 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", diff --git a/web/src/locales/ru/data.json b/web/src/locales/ru/data.json index e35b47c5..edbc9238 100644 --- 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": "Новое приложение", diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json index ea2f1edc..3a34cd57 100644 --- 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": "添加应用",