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

Add prompt page.

Browse Source
This commit is contained in:
Yang Luo
2021-06-18 02:05:19 +08:00
parent 32afafd56c
commit 92610f9971
7 changed files with 192 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/App.js
View File

@ -44,6 +44,7 @@ import * as AuthBackend from "./auth/AuthBackend";
import AuthCallback from "./auth/AuthCallback";
import SelectLanguageBox from './SelectLanguageBox';
import i18next from 'i18next';
import PromptPage from "./auth/PromptPage";
const { Header, Footer } = Layout;
@ -411,6 +412,7 @@ class App extends Component {
return window.location.pathname.startsWith("/signup") ||
window.location.pathname.startsWith("/login") ||
window.location.pathname.startsWith("/callback") ||
window.location.pathname.startsWith("/prompt") ||
window.location.pathname.startsWith("/forget");
}
@ -426,6 +428,8 @@ class App extends Component {
<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} />)}/>
<Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} {...props} />)}/>
<Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} {...props} />)}/>
</Switch>
)
}

28
web/src/ApplicationEditPage.js
View File

@ -25,6 +25,7 @@ import i18next from "i18next";
import UrlTable from "./UrlTable";
import ProviderTable from "./ProviderTable";
import SignupTable from "./SignupTable";
import PromptPage from "./auth/PromptPage";
const { Option } = Select;
@ -312,6 +313,14 @@ class ApplicationEditPage extends React.Component {
/>
</Col>
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
{i18next.t("general:Preview")}:
</Col>
{
this.renderPreview2()
}
</Row>
</Card>
)
}
@ -355,6 +364,25 @@ class ApplicationEditPage extends React.Component {
)
}
renderPreview2() {
let promptUrl = `/prompt/${this.state.application.name}`;
return (
<React.Fragment>
<Col span={11} >
<a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={promptUrl}>
<Button type="primary">{i18next.t("application:Test prompt page..")}</Button>
</a>
<br/>
<br/>
<div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888"}}>
<PromptPage application={this.state.application} account={this.props.account} />
</div>
</Col>
</React.Fragment>
)
}
submitApplicationEdit() {
let application = Setting.deepCopy(this.state.application);
ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)

2
web/src/UserEditPage.js
View File

@ -322,7 +322,7 @@ class UserEditPage extends React.Component {
</Row>
{
(this.state.application === null || this.state.user === null) ? null : (
<AffiliationSelect application={this.state.application} user={this.state.user} onUpdateUserField={(key, value) => { return this.updateUserField(key, value)}} />
<AffiliationSelect labelSpan={2} application={this.state.application} user={this.state.user} onUpdateUserField={(key, value) => { return this.updateUserField(key, value)}} />
)
}
<Row style={{marginTop: '20px'}} >

147
web/src/auth/PromptPage.js Normal file
View File

@ -0,0 +1,147 @@
// Copyright 2021 The casbin Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import React from "react";
import {Button, Col, Row} from "antd";
import * as ApplicationBackend from "../backend/ApplicationBackend";
import * as Setting from "../Setting";
import i18next from "i18next";
import AffiliationSelect from "../common/AffiliationSelect";
import * as UserBackend from "../backend/UserBackend";
class PromptPage extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: props,
type: props.type,
applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
application: null,
user: Setting.deepCopy(this.props.account),
};
}
UNSAFE_componentWillMount() {
this.getApplication();
}
getApplication() {
if (this.state.applicationName === null) {
return;
}
ApplicationBackend.getApplication("admin", this.state.applicationName)
.then((application) => {
this.setState({
application: application,
});
});
}
getApplicationObj() {
if (this.props.application !== undefined) {
return this.props.application;
} else {
return this.state.application;
}
}
parseUserField(key, value) {
// if ([].includes(key)) {
// value = Setting.myParseInt(value);
// }
return value;
}
updateUserField(key, value) {
value = this.parseUserField(key, value);
let user = this.state.user;
user[key] = value;
this.setState({
user: user,
});
}
renderContent(application) {
return (
<div style={{width: '400px'}}>
{
(application === null || this.state.user === null) ? null : (
<AffiliationSelect labelSpan={6} application={application} user={this.state.user} onUpdateUserField={(key, value) => { return this.updateUserField(key, value)}} />
)
}
</div>
)
}
isAnswered() {
if (this.state.user === null) {
return false;
}
return this.state.user.affiliation !== "";
}
submitUserEdit() {
let user = Setting.deepCopy(this.state.user);
UserBackend.updateUser(this.state.user.owner, this.state.user.name, user)
.then((res) => {
if (res.msg === "") {
Setting.showMessage("success", `Successfully saved`);
Setting.goToLogin(this, this.getApplicationObj());
} else {
Setting.showMessage("error", res.msg);
}
})
.catch(error => {
Setting.showMessage("error", `Failed to connect to server: ${error}`);
});
}
render() {
const application = this.getApplicationObj();
if (application === null) {
return null;
}
return (
<Row>
<Col span={24} style={{display: "flex", justifyContent: "center"}}>
<div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center"}}>
{
Setting.renderHelmet(application)
}
{
Setting.renderLogo(application)
}
{
this.renderContent(application)
}
<Row style={{margin: 10}}>
<Col span={18}>
</Col>
</Row>
<div style={{marginTop: "50px"}}>
<Button disabled={!this.isAnswered()} type="primary" size="large" onClick={this.submitUserEdit.bind(this)}>{i18next.t("signup:Submit and complete")}</Button>
</div>
</div>
</Col>
</Row>
)
}
}
export default PromptPage;

12
web/src/common/AffiliationSelect.js
View File

@ -59,11 +59,11 @@ class AffiliationSelect extends React.Component {
{
this.props.application?.affiliationUrl === "" ? null : (
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
<Col style={{marginTop: '5px'}} span={this.props.labelSpan}>
{i18next.t("user:Address")}:
</Col>
<Col span={22} >
<Cascader style={{width: '400px'}} value={this.props.user.address} options={this.state.addressOptions} onChange={value => {
<Col span={24 - this.props.labelSpan} >
<Cascader style={{width: '100%', maxWidth: '400px'}} value={this.props.user.address} options={this.state.addressOptions} onChange={value => {
this.updateUserField('address', value);
this.updateUserField('affiliation', '');
this.updateUserField('score', 0);
@ -74,17 +74,17 @@ class AffiliationSelect extends React.Component {
)
}
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
<Col style={{marginTop: '5px'}} span={this.props.labelSpan}>
{i18next.t("user:Affiliation")}:
</Col>
<Col span={22} >
<Col span={24 - this.props.labelSpan} >
{
this.props.application?.affiliationUrl === "" ? (
<Input value={this.props.user.affiliation} onChange={e => {
this.updateUserField('affiliation', e.target.value);
}} />
) : (
<Select virtual={false} style={{width: '400px'}} value={this.props.user.affiliation} onChange={(value => {
<Select virtual={false} style={{width: '100%'}} value={this.props.user.affiliation} onChange={(value => {
const name = value;
const id = this.state.affiliationOptions.filter(affiliationOption => affiliationOption.name === name)[0].id;
this.updateUserField('affiliation', name);

4
web/src/locales/en.json
View File

@ -65,7 +65,8 @@
"EmailYou should verify your code in 10 min!": "You should verify your email verification code in 10 min!",
"PhoneWrong code!": "Wrong phone verification code!",
"EmailWrong code!": "Wrong email verification code!",
"Missing parameter.": "Missing parameter."
"Missing parameter.": "Missing parameter.",
"Submit and complete": "Submit and complete"
},
"login":
{
@ -179,6 +180,7 @@
"Login page preview": "Login page preview",
"Test signup page..": "Test signup page..",
"Test signin page..": "Test signin page..",
"Test prompt page..": "Test prompt page..",
"Redirect URL": "Redirect URL",
"Redirect URLs": "Redirect URLs",
"Signup items": "Signup items"

4
web/src/locales/zh.json
View File

@ -65,7 +65,8 @@
"EmailYou should verify your code in 10 min!": "你应该在 10 分钟之内验证邮箱",
"PhoneWrong code!": "手机验证码错误",
"EmailWrong code!": "邮箱验证码错误",
"Missing parameter.": "缺少参数"
"Missing parameter.": "缺少参数",
"Submit and complete": "完成提交"
},
"login":
{
@ -179,6 +180,7 @@
"Login page preview": "登录页面预览",
"Test signup page..": "测试注册页面..",
"Test signin page..": "测试登录页面..",
"Test prompt page..": "测试提醒页面..",
"Redirect URL": "回调URL",
"Redirect URLs": "回调URLs",
"Signup items": "注册项"