llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-15 03:33:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: custom login form and background (#1107)

Browse Source 
* 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>
This commit is contained in:
leoshine
2022-09-10 00:56:37 +08:00
committed by GitHub
parent 94b6eb803d
commit 1edb91b3a3
14 changed files with 172 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/src/ApplicationEditPage.js
View File

@ -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>