mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-04 05:10:19 +08:00
Add prompt page.
This commit is contained in:
@ -44,6 +44,7 @@ import * as AuthBackend from "./auth/AuthBackend";
|
|||||||
import AuthCallback from "./auth/AuthCallback";
|
import AuthCallback from "./auth/AuthCallback";
|
||||||
import SelectLanguageBox from './SelectLanguageBox';
|
import SelectLanguageBox from './SelectLanguageBox';
|
||||||
import i18next from 'i18next';
|
import i18next from 'i18next';
|
||||||
|
import PromptPage from "./auth/PromptPage";
|
||||||
|
|
||||||
const { Header, Footer } = Layout;
|
const { Header, Footer } = Layout;
|
||||||
|
|
||||||
@ -411,6 +412,7 @@ class App extends Component {
|
|||||||
return window.location.pathname.startsWith("/signup") ||
|
return window.location.pathname.startsWith("/signup") ||
|
||||||
window.location.pathname.startsWith("/login") ||
|
window.location.pathname.startsWith("/login") ||
|
||||||
window.location.pathname.startsWith("/callback") ||
|
window.location.pathname.startsWith("/callback") ||
|
||||||
|
window.location.pathname.startsWith("/prompt") ||
|
||||||
window.location.pathname.startsWith("/forget");
|
window.location.pathname.startsWith("/forget");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -426,6 +428,8 @@ class App extends Component {
|
|||||||
<Route exact path="/callback" component={AuthCallback}/>
|
<Route exact path="/callback" component={AuthCallback}/>
|
||||||
<Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)}/>
|
<Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)}/>
|
||||||
<Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...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>
|
</Switch>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -25,6 +25,7 @@ import i18next from "i18next";
|
|||||||
import UrlTable from "./UrlTable";
|
import UrlTable from "./UrlTable";
|
||||||
import ProviderTable from "./ProviderTable";
|
import ProviderTable from "./ProviderTable";
|
||||||
import SignupTable from "./SignupTable";
|
import SignupTable from "./SignupTable";
|
||||||
|
import PromptPage from "./auth/PromptPage";
|
||||||
|
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
|
|
||||||
@ -312,6 +313,14 @@ class ApplicationEditPage extends React.Component {
|
|||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
<Row style={{marginTop: '20px'}} >
|
||||||
|
<Col style={{marginTop: '5px'}} span={2}>
|
||||||
|
{i18next.t("general:Preview")}:
|
||||||
|
</Col>
|
||||||
|
{
|
||||||
|
this.renderPreview2()
|
||||||
|
}
|
||||||
|
</Row>
|
||||||
</Card>
|
</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() {
|
submitApplicationEdit() {
|
||||||
let application = Setting.deepCopy(this.state.application);
|
let application = Setting.deepCopy(this.state.application);
|
||||||
ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)
|
ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)
|
||||||
|
@ -322,7 +322,7 @@ class UserEditPage extends React.Component {
|
|||||||
</Row>
|
</Row>
|
||||||
{
|
{
|
||||||
(this.state.application === null || this.state.user === null) ? null : (
|
(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'}} >
|
<Row style={{marginTop: '20px'}} >
|
||||||
|
147
web/src/auth/PromptPage.js
Normal file
147
web/src/auth/PromptPage.js
Normal 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;
|
@ -59,11 +59,11 @@ class AffiliationSelect extends React.Component {
|
|||||||
{
|
{
|
||||||
this.props.application?.affiliationUrl === "" ? null : (
|
this.props.application?.affiliationUrl === "" ? null : (
|
||||||
<Row style={{marginTop: '20px'}} >
|
<Row style={{marginTop: '20px'}} >
|
||||||
<Col style={{marginTop: '5px'}} span={2}>
|
<Col style={{marginTop: '5px'}} span={this.props.labelSpan}>
|
||||||
{i18next.t("user:Address")}:
|
{i18next.t("user:Address")}:
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={22} >
|
<Col span={24 - this.props.labelSpan} >
|
||||||
<Cascader style={{width: '400px'}} value={this.props.user.address} options={this.state.addressOptions} onChange={value => {
|
<Cascader style={{width: '100%', maxWidth: '400px'}} value={this.props.user.address} options={this.state.addressOptions} onChange={value => {
|
||||||
this.updateUserField('address', value);
|
this.updateUserField('address', value);
|
||||||
this.updateUserField('affiliation', '');
|
this.updateUserField('affiliation', '');
|
||||||
this.updateUserField('score', 0);
|
this.updateUserField('score', 0);
|
||||||
@ -74,17 +74,17 @@ class AffiliationSelect extends React.Component {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
<Row style={{marginTop: '20px'}} >
|
<Row style={{marginTop: '20px'}} >
|
||||||
<Col style={{marginTop: '5px'}} span={2}>
|
<Col style={{marginTop: '5px'}} span={this.props.labelSpan}>
|
||||||
{i18next.t("user:Affiliation")}:
|
{i18next.t("user:Affiliation")}:
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={22} >
|
<Col span={24 - this.props.labelSpan} >
|
||||||
{
|
{
|
||||||
this.props.application?.affiliationUrl === "" ? (
|
this.props.application?.affiliationUrl === "" ? (
|
||||||
<Input value={this.props.user.affiliation} onChange={e => {
|
<Input value={this.props.user.affiliation} onChange={e => {
|
||||||
this.updateUserField('affiliation', e.target.value);
|
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 name = value;
|
||||||
const id = this.state.affiliationOptions.filter(affiliationOption => affiliationOption.name === name)[0].id;
|
const id = this.state.affiliationOptions.filter(affiliationOption => affiliationOption.name === name)[0].id;
|
||||||
this.updateUserField('affiliation', name);
|
this.updateUserField('affiliation', name);
|
||||||
|
@ -65,7 +65,8 @@
|
|||||||
"EmailYou should verify your code in 10 min!": "You should verify your email verification code in 10 min!",
|
"EmailYou should verify your code in 10 min!": "You should verify your email verification code in 10 min!",
|
||||||
"PhoneWrong code!": "Wrong phone verification code!",
|
"PhoneWrong code!": "Wrong phone verification code!",
|
||||||
"EmailWrong code!": "Wrong email verification code!",
|
"EmailWrong code!": "Wrong email verification code!",
|
||||||
"Missing parameter.": "Missing parameter."
|
"Missing parameter.": "Missing parameter.",
|
||||||
|
"Submit and complete": "Submit and complete"
|
||||||
},
|
},
|
||||||
"login":
|
"login":
|
||||||
{
|
{
|
||||||
@ -179,6 +180,7 @@
|
|||||||
"Login page preview": "Login page preview",
|
"Login page preview": "Login page preview",
|
||||||
"Test signup page..": "Test signup page..",
|
"Test signup page..": "Test signup page..",
|
||||||
"Test signin page..": "Test signin page..",
|
"Test signin page..": "Test signin page..",
|
||||||
|
"Test prompt page..": "Test prompt page..",
|
||||||
"Redirect URL": "Redirect URL",
|
"Redirect URL": "Redirect URL",
|
||||||
"Redirect URLs": "Redirect URLs",
|
"Redirect URLs": "Redirect URLs",
|
||||||
"Signup items": "Signup items"
|
"Signup items": "Signup items"
|
||||||
|
@ -65,7 +65,8 @@
|
|||||||
"EmailYou should verify your code in 10 min!": "你应该在 10 分钟之内验证邮箱",
|
"EmailYou should verify your code in 10 min!": "你应该在 10 分钟之内验证邮箱",
|
||||||
"PhoneWrong code!": "手机验证码错误",
|
"PhoneWrong code!": "手机验证码错误",
|
||||||
"EmailWrong code!": "邮箱验证码错误",
|
"EmailWrong code!": "邮箱验证码错误",
|
||||||
"Missing parameter.": "缺少参数"
|
"Missing parameter.": "缺少参数",
|
||||||
|
"Submit and complete": "完成提交"
|
||||||
},
|
},
|
||||||
"login":
|
"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..": "测试提醒页面..",
|
||||||
"Redirect URL": "回调URL",
|
"Redirect URL": "回调URL",
|
||||||
"Redirect URLs": "回调URLs",
|
"Redirect URLs": "回调URLs",
|
||||||
"Signup items": "注册项"
|
"Signup items": "注册项"
|
||||||
|
Reference in New Issue
Block a user