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

feat: add left-side image and improve login page (#1226)

Browse Source
This commit is contained in:
Yaodong Yu
2022-10-22 21:43:41 +08:00
committed by GitHub
parent 19d351d157
commit b0f572c51a
13 changed files with 271 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/auth/SignupPage.js
View File

@ -14,7 +14,7 @@
import React from "react";
import {Link} from "react-router-dom";
import {Button, Checkbox, Col, Form, Input, Modal, Result, Row} from "antd";
import {Button, Checkbox, Form, Input, Modal, Result} from "antd";
import * as Setting from "../Setting";
import * as AuthBackend from "./AuthBackend";
import * as ProviderButton from "./ProviderButton";
@ -148,6 +148,18 @@ class SignupPage extends React.Component {
this.props.onUpdateAccount(account);
}
parseOffset(offset) {
if (offset === 2 || offset === 4 || Setting.inIframe() || Setting.isMobile()) {
return "0 auto";
}
if (offset === 1) {
return "0 10%";
}
if (offset === 3) {
return "0 60%";
}
}
onFinish(values) {
const application = this.getApplicationObj();
values.phonePrefix = application.organizationObj.phonePrefix;
@ -615,17 +627,18 @@ class SignupPage extends React.Component {
);
}
const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
return (
<div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
<CustomGithubCorner />
&nbsp;
<Row>
<Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
<div className="login-content">
<div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}>
<SelectLanguageBox id="language-box-corner" style={{top: formStyle !== null ? "3px" : "-20px", right: formStyle !== null ? "5px" : "-45px"}} />
<div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
{Setting.inIframe() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
<div className="login-panel" >
<SelectLanguageBox id="language-box-corner" style={{top: "50px"}} />
<div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}>
<div dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
</div>
<div className="login-form">
<div >
{
Setting.renderHelmet(application)
}
@ -637,8 +650,8 @@ class SignupPage extends React.Component {
}
</div>
</div>
</Col>
</Row>
</div>
</div>
{
this.renderModal()
}