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

Add login page "signup" mode.

Browse Source
This commit is contained in:
Yang Luo 2021-06-14 22:42:58 +08:00
parent 5a852bfd1d
commit cc31c1d666
4 changed files with 108 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/App.js
View File

@ -421,7 +421,8 @@ class App extends Component {
<Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} />)}/>
<Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} />)}/>
<Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...props} />)}/>
<Route exact path="/login/oauth/authorize" render={(props) => <LoginPage type={"code"} {...props} />}/>
<Route exact path="/signup/oauth/authorize" render={(props) => <LoginPage type={"code"} mode={"signup"} {...props} />}/>
<Route exact path="/login/oauth/authorize" render={(props) => <LoginPage type={"code"} mode={"signin"} {...props} />}/>
<Route exact path="/callback" component={AuthCallback}/>
<Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)}/>
<Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)}/>

32
web/src/ApplicationEditPage.js
View File

@ -285,28 +285,50 @@ class ApplicationEditPage extends React.Component {
<Col style={{marginTop: '5px'}} span={2}>
{i18next.t("general:Preview")}:
</Col>
{
this.renderPreview()
}
</Row>
</Card>
)
}
renderPreview() {
let signUpUrl = `/signup/${this.state.application.name}`;
let signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
if (!this.state.application.enablePassword) {
signUpUrl = signInUrl.replace("/login/oauth/authorize", "/signup/oauth/authorize");
}
return (
<React.Fragment>
<Col span={11} >
<a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={`/signup/${this.state.application.name}`}>
<a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={signUpUrl}>
<Button type="primary">{i18next.t("application:Test signup page..")}</Button>
</a>
<br/>
<br/>
<div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888"}}>
{
this.state.application.enablePassword ? (
<SignupPage application={this.state.application} />
) : (
<LoginPage type={"login"} mode={"signup"} application={this.state.application} />
)
}
</div>
</Col>
<Col span={11} >
<a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={`/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`}>
<a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={signInUrl}>
<Button type="primary">{i18next.t("application:Test signin page..")}</Button>
</a>
<br/>
<br/>
<div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888"}}>
<LoginPage type={"login"} application={this.state.application} />
<LoginPage type={"login"} mode={"signin"} application={this.state.application} />
</div>
</Col>
</Row>
</Card>
</React.Fragment>
)
}

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

@ -13,7 +13,8 @@
// limitations under the License.
import React from "react";
import {Button, Checkbox, Col, Form, Input, Row} from "antd";
import {Link} from "react-router-dom";
import {Button, Checkbox, Col, Form, Input, Result, Row} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import * as AuthBackend from "./AuthBackend";
import * as ApplicationBackend from "../backend/ApplicationBackend";
@ -32,6 +33,7 @@ class LoginPage extends React.Component {
type: props.type,
applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
application: null,
mode: props.mode !== undefined ? props.mode : (props.match === undefined ? null : props.match.params.mode), // "signup" or "signin"
msg: null,
};
}
@ -139,11 +141,39 @@ class LoginPage extends React.Component {
}
}
isProviderVisible(providerItem) {
if (this.state.mode === "signup") {
return Setting.isProviderVisibleForSignUp(providerItem);
} else {
return Setting.isProviderVisibleForSignIn(providerItem);
}
}
renderForm(application) {
if (this.state.msg !== null) {
return Util.renderMessage(this.state.msg)
}
if (this.state.mode === "signup" && !application.enableSignUp) {
return (
<Result
status="error"
title="Sign Up Error"
subTitle={"The application does not allow to sign up new account"}
extra={[
<Link onClick={() => {
Setting.goToLogin(this, application);
}}>
<Button type="primary" key="signin">
Sign In
</Button>
</Link>
]}
>
</Result>
)
}
if (application.enablePassword) {
return (
<Form
@ -210,21 +240,12 @@ class LoginPage extends React.Component {
{i18next.t("login:Sign In")}
</Button>
{
!application.enableSignUp ? null : (
<div style={{float: "right"}}>
{i18next.t("login:No account yet?")}&nbsp;
<a onClick={() => {
Setting.goToSignup(this, application);
}}>
{i18next.t("login:sign up now")}
</a>
</div>
)
!application.enableSignUp ? null : this.renderFooter(application)
}
</Form.Item>
<Form.Item>
{
application.providers.filter(providerItem => Setting.isProviderVisibleForSignIn(providerItem)).map(providerItem => {
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
return this.renderProviderLogo(providerItem.provider, application, 30, 5, "small");
})
}
@ -245,7 +266,7 @@ class LoginPage extends React.Component {
</div>
<br/>
{
application.providers.filter(providerItem => Setting.isProviderVisibleForSignIn(providerItem)).map(providerItem => {
application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
return this.renderProviderLogo(providerItem.provider, application, 40, 10, "big");
})
}
@ -253,6 +274,31 @@ class LoginPage extends React.Component {
!application.enableSignUp ? null : (
<div>
<br/>
{
this.renderFooter(application)
}
</div>
)
}
</div>
)
}
}
renderFooter(application) {
if (this.state.mode === "signup") {
return (
<div style={{float: "right"}}>
{i18next.t("signup:Have account?")}&nbsp;
<Link onClick={() => {
Setting.goToLogin(this, application);
}}>
{i18next.t("signup:sign in now")}
</Link>
</div>
)
} else {
return (
<div style={{float: "right"}}>
{i18next.t("login:No account yet?")}&nbsp;
<a onClick={() => {
@ -261,10 +307,6 @@ class LoginPage extends React.Component {
{i18next.t("login:sign up now")}
</a>
</div>
</div>
)
}
</div>
)
}
}

2
web/src/auth/SelfLoginPage.js
View File

@ -19,7 +19,7 @@ import {authConfig} from "./Auth";
class SelfLoginPage extends React.Component {
render() {
return (
<LoginPage type={"login"} applicationName={authConfig.appName} account={this.props.account} {...this.props} />
<LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} account={this.props.account} {...this.props} />
)
}
}