llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-23 02:35:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support custom HTML for signup and signin pages.

Browse Source
This commit is contained in:
Gucheng Wang 2021-10-26 13:11:21 +08:00
parent 5526286ad8
commit 2e1b51910f
4 changed files with 66 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
object/application.go
View File

@ -44,6 +44,8 @@ type Application struct {
ForgetUrl string `xorm:"varchar(100)" json:"forgetUrl"`
AffiliationUrl string `xorm:"varchar(100)" json:"affiliationUrl"`
TermsOfUse string `xorm:"varchar(1000)" json:"termsOfUse"`
SignupHtml string `xorm:"mediumtext" json:"signupHtml"`
SigninHtml string `xorm:"mediumtext" json:"signinHtml"`
}
func GetApplications(owner string) []*Application {

54
web/src/ApplicationEditPage.js
View File

@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Button, Card, Col, Input, Row, Select, Switch, Upload} from 'antd';
import {Button, Card, Col, Input, Popover, Row, Select, Switch, Upload} from 'antd';
import {LinkOutlined, UploadOutlined} from "@ant-design/icons";
import * as ApplicationBackend from "./backend/ApplicationBackend";
import * as Setting from "./Setting";
@ -27,6 +27,12 @@ import UrlTable from "./UrlTable";
import ProviderTable from "./ProviderTable";
import SignupTable from "./SignupTable";
import PromptPage from "./auth/PromptPage";
import {Controlled as CodeMirror} from 'react-codemirror2';
import "codemirror/lib/codemirror.css";
require('codemirror/theme/material-darker.css');
require("codemirror/mode/htmlmixed/htmlmixed");
const { Option } = Select;
class ApplicationEditPage extends React.Component {
@ -307,7 +313,7 @@ class ApplicationEditPage extends React.Component {
</Col>
<Col span={22} >
<Input value={this.state.application.termsOfUse} style={{marginBottom: "10px"}} onChange={e => {
this.updateApplicationField("termsOfUse", e.target.value)
this.updateApplicationField("termsOfUse", e.target.value);
}}/>
<Upload maxCount={1} accept=".html" showUploadList={false}
beforeUpload={file => {return false}} onChange={info => {this.handleUpload(info)}}>
@ -315,6 +321,50 @@ class ApplicationEditPage extends React.Component {
</Upload>
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("provider:Signup HTML"), i18next.t("provider:Signup HTML - Tooltip"))} :
</Col>
<Col span={22} >
<Popover placement="right" content={
<div style={{width: "900px", height: "300px"}} >
<CodeMirror
value={this.state.application.signupHtml}
options={{mode: 'htmlmixed', theme: "material-darker"}}
onBeforeChange={(editor, data, value) => {
this.updateApplicationField("signupHtml", value);
}}
/>
</div>
} title={i18next.t("provider:Signup HTML - Edit")} trigger="click">
<Input value={this.state.application.signupHtml} style={{marginBottom: "10px"}} onChange={e => {
this.updateApplicationField("signupHtml", e.target.value)
}}/>
</Popover>
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("provider:Signin HTML"), i18next.t("provider:Signin HTML - Tooltip"))} :
</Col>
<Col span={22} >
<Popover placement="right" content={
<div style={{width: "900px", height: "300px"}} >
<CodeMirror
value={this.state.application.signinHtml}
options={{mode: 'htmlmixed', theme: "material-darker"}}
onBeforeChange={(editor, data, value) => {
this.updateApplicationField("signinHtml", value);
}}
/>
</div>
} title={i18next.t("provider:Signin HTML - Edit")} trigger="click">
<Input value={this.state.application.signinHtml} style={{marginBottom: "10px"}} onChange={e => {
this.updateApplicationField("signinHtml", e.target.value)
}}/>
</Popover>
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("general:Providers"), i18next.t("general:Providers - Tooltip"))} :

6
web/src/auth/LoginPage.js
View File

@ -412,6 +412,12 @@ class LoginPage extends React.Component {
return Util.renderMessageLarge(this, this.state.msg);
}
if (application.signinHtml !== "") {
return (
<div dangerouslySetInnerHTML={{ __html: application.signinHtml}} />
)
}
const visibleOAuthProviderItems = application.providers.filter(providerItem => this.isProviderVisible(providerItem));
if (this.props.application === undefined && !application.enablePassword && visibleOAuthProviderItems.length === 1) {
Setting.goToLink(Provider.getAuthUrl(application, visibleOAuthProviderItems[0].provider, "signup"));

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

@ -520,6 +520,12 @@ class SignupPage extends React.Component {
return null;
}
if (application.signupHtml !== "") {
return (
<div dangerouslySetInnerHTML={{ __html: application.signupHtml}} />
)
}
return (
<div>
&nbsp;