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

Add resource list page.

Browse Source
This commit is contained in:
Yang Luo
2021-08-15 00:17:53 +08:00
parent f3c10c59cb
commit 495b64995f
16 changed files with 631 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/App.js
View File

@ -27,6 +27,8 @@ import ProviderListPage from "./ProviderListPage";
import ProviderEditPage from "./ProviderEditPage";
import ApplicationListPage from "./ApplicationListPage";
import ApplicationEditPage from "./ApplicationEditPage";
import ResourceListPage from "./ResourceListPage";
// import ResourceEditPage from "./ResourceEditPage";
import LdapEditPage from "./LdapEditPage";
import LdapSyncPage from "./LdapSyncPage";
import TokenListPage from "./TokenListPage";
@ -99,6 +101,8 @@ class App extends Component {
this.setState({ selectedMenuKey: '/providers' });
} else if (uri.includes('/applications')) {
this.setState({ selectedMenuKey: '/applications' });
} else if (uri.includes('/resources')) {
this.setState({ selectedMenuKey: '/resources' });
} else if (uri.includes('/tokens')) {
this.setState({ selectedMenuKey: '/tokens' });
} else if (uri.includes('/records')) {
@ -317,6 +321,13 @@ class App extends Component {
</Link>
</Menu.Item>
);
res.push(
<Menu.Item key="/resources">
<Link to="/resources">
{i18next.t("general:Resources")}
</Link>
</Menu.Item>
);
res.push(
<Menu.Item key="/tokens">
<Link to="/tokens">
@ -384,6 +395,8 @@ class App extends Component {
<Route exact path="/providers/:providerName" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderEditPage account={this.state.account} {...props} />)}/>
<Route exact path="/applications" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationListPage account={this.state.account} {...props} />)}/>
<Route exact path="/applications/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationEditPage account={this.state.account} {...props} />)}/>
<Route exact path="/resources" render={(props) => this.renderLoginIfNotLoggedIn(<ResourceListPage account={this.state.account} {...props} />)}/>
{/*<Route exact path="/resources/:resourceName" render={(props) => this.renderLoginIfNotLoggedIn(<ResourceEditPage account={this.state.account} {...props} />)}/>*/}
<Route exact path="/ldap/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapEditPage account={this.state.account} {...props} />)}/>
<Route exact path="/ldap/sync/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapSyncPage account={this.state.account} {...props} />)}/>
<Route exact path="/tokens" render={(props) => this.renderLoginIfNotLoggedIn(<TokenListPage account={this.state.account} {...props} />)}/>

4
web/src/ApplicationEditPage.js
View File

@ -19,7 +19,7 @@ import * as ApplicationBackend from "./backend/ApplicationBackend";
import * as Setting from "./Setting";
import * as ProviderBackend from "./backend/ProviderBackend";
import * as OrganizationBackend from "./backend/OrganizationBackend";
import * as UserBackend from "./backend/UserBackend";
import * as ResourceBackend from "./backend/ResourceBackend";
import SignupPage from "./auth/SignupPage";
import LoginPage from "./auth/LoginPage";
import i18next from "i18next";
@ -99,7 +99,7 @@ class ApplicationEditPage extends React.Component {
}
this.setState({uploading: true});
const fullFilePath = `termsOfUse/${this.state.application.owner}/${this.state.application.name}.html`;
UserBackend.uploadFile(this.state.application.owner, "termsOfUse", this.state.application.name, fullFilePath, info.file)
ResourceBackend.uploadResource(this.state.application.owner, "termsOfUse", this.state.application.name, fullFilePath, info.file)
.then(res => {
if (res.status === "ok") {
Setting.showMessage("success", i18next.t("application:File uploaded successfully"));

5
web/src/CropperDiv.js
View File

@ -18,7 +18,7 @@ import "cropperjs/dist/cropper.css";
import * as Setting from "./Setting";
import {Button, Row, Col, Modal} from 'antd';
import i18next from "i18next";
import * as UserBackend from "./backend/UserBackend";
import * as ResourceBackend from "./backend/ResourceBackend";
export const CropperDiv = (props) => {
const [image, setImage] = useState("");
@ -27,6 +27,7 @@ export const CropperDiv = (props) => {
const [confirmLoading, setConfirmLoading] = React.useState(false);
const {title} = props;
const {user} = props;
const {account} = props;
const {buttonText} = props;
let uploadButton;
@ -57,7 +58,7 @@ export const CropperDiv = (props) => {
// Setting.showMessage("success", "uploading...");
const extension = image.substring(image.indexOf('/') + 1, image.indexOf(';base64'));
const fullFilePath = `avatar/${user.owner}/${user.name}.${extension}`;
UserBackend.uploadFile("admin", "avatar", "", fullFilePath, blob)
ResourceBackend.uploadResource("admin", "avatar", account.name, fullFilePath, blob)
.then((res) => {
if (res.status === "ok") {
window.location.href = "/account";

250
web/src/ResourceListPage.js Normal file
View File

@ -0,0 +1,250 @@
// 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, Popconfirm, Table, Upload} from 'antd';
import {UploadOutlined} from "@ant-design/icons";
import copy from 'copy-to-clipboard';
import * as Setting from "./Setting";
import * as ResourceBackend from "./backend/ResourceBackend";
import i18next from "i18next";
import {Link} from "react-router-dom";
class ResourceListPage extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: props,
resources: null,
fileList: [],
uploading: false,
};
}
UNSAFE_componentWillMount() {
this.getResources();
}
getResources() {
ResourceBackend.getResources("admin")
.then((res) => {
this.setState({
resources: res,
});
});
}
deleteResource(i) {
ResourceBackend.deleteResource(this.state.resources[i])
.then((res) => {
Setting.showMessage("success", `Resource deleted successfully`);
this.setState({
resources: Setting.deleteRow(this.state.resources, i),
});
}
)
.catch(error => {
Setting.showMessage("error", `Resource failed to delete: ${error}`);
});
}
handleUpload(info) {
this.setState({uploading: true});
const filename = info.fileList[0].name;
const fullFilePath = `resource/${this.props.account.owner}/${this.props.account.name}/${filename}`;
ResourceBackend.uploadResource("admin", "custom", this.props.account.name, fullFilePath, info.file)
.then(res => {
if (res.status === "ok") {
Setting.showMessage("success", i18next.t("application:File uploaded successfully"));
window.location.reload();
} else {
Setting.showMessage("error", res.msg);
}
}).finally(() => {
this.setState({uploading: false});
})
}
renderUpload() {
return (
<Upload maxCount={1} accept="image/*,video/*" showUploadList={false}
beforeUpload={file => {return false}} onChange={info => {this.handleUpload(info)}}>
<Button icon={<UploadOutlined />} loading={this.state.uploading} type="primary" size="small">
{i18next.t("resource:Upload a file...")}
</Button>
</Upload>
)
}
renderTable(resources) {
const columns = [
{
title: i18next.t("general:Name"),
dataIndex: 'name',
key: 'name',
width: '150px',
fixed: 'left',
sorter: (a, b) => a.name.localeCompare(b.name),
// render: (text, record, index) => {
// return (
// <Link to={`/resources/${text}`}>
// {text}
// </Link>
// )
// }
},
{
title: i18next.t("general:Created time"),
dataIndex: 'createdTime',
key: 'createdTime',
width: '160px',
sorter: (a, b) => a.createdTime.localeCompare(b.createdTime),
render: (text, record, index) => {
return Setting.getFormattedDate(text);
}
},
{
title: i18next.t("resource:Tag"),
dataIndex: 'tag',
key: 'tag',
width: '80px',
sorter: (a, b) => a.tag.localeCompare(b.tag),
},
{
title: i18next.t("resource:Parent"),
dataIndex: 'parent',
key: 'parent',
width: '80px',
sorter: (a, b) => a.parent.localeCompare(b.parent),
},
{
title: i18next.t("resource:File type"),
dataIndex: 'fileType',
key: 'fileType',
width: '120px',
sorter: (a, b) => a.fileType.localeCompare(b.fileType),
},
{
title: i18next.t("resource:File format"),
dataIndex: 'fileFormat',
key: 'fileFormat',
width: '130px',
sorter: (a, b) => a.fileFormat.localeCompare(b.fileFormat),
},
{
title: i18next.t("resource:File size"),
dataIndex: 'fileSize',
key: 'fileSize',
width: '120px',
sorter: (a, b) => a.fileSize - b.fileSize,
render: (text, record, index) => {
return Setting.getFriendlyFileSize(text);
}
},
{
title: i18next.t("general:Preview"),
dataIndex: 'preview',
key: 'preview',
width: '100px',
render: (text, record, index) => {
if (record.fileType === "image") {
return (
<a target="_blank" href={record.url}>
<img src={record.url} alt={record.name} width={100} />
</a>
)
} else if (record.fileType === "video") {
return (
<div>
<video width={100} controls>
<source src={text} type="video/mp4" />
</video>
</div>
)
}
}
},
{
title: i18next.t("general:URL"),
dataIndex: 'url',
key: 'url',
width: '120px',
render: (text, record, index) => {
return (
<div>
<Button type="normal" onClick={() => {
copy(record.url);
Setting.showMessage("success", i18next.t("resource:Link copied to clipboard successfully"));
}}
>
{i18next.t("resource:Copy Link")}
</Button>
</div>
)
}
},
{
title: i18next.t("general:Action"),
dataIndex: '',
key: 'op',
width: '70px',
fixed: (Setting.isMobile()) ? "false" : "right",
render: (text, record, index) => {
return (
<div>
{/*<Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/resources/${record.name}`)}>{i18next.t("general:Edit")}</Button>*/}
<Popconfirm
title={`Sure to delete resource: ${record.name} ?`}
onConfirm={() => this.deleteResource(index)}
okText={i18next.t("user:OK")}
cancelText={i18next.t("user:Cancel")}
>
<Button type="danger">{i18next.t("general:Delete")}</Button>
</Popconfirm>
</div>
)
}
},
];
return (
<div>
<Table scroll={{x: 'max-content'}} columns={columns} dataSource={resources} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
title={() => (
<div>
{i18next.t("general:Resources")}&nbsp;&nbsp;&nbsp;&nbsp;
{/*<Button type="primary" size="small" onClick={this.addResource.bind(this)}>{i18next.t("general:Add")}</Button>*/}
{
this.renderUpload()
}
</div>
)}
loading={resources === null}
/>
</div>
);
}
render() {
return (
<div>
{
this.renderTable(this.state.resources)
}
</div>
);
}
}
export default ResourceListPage;

12
web/src/Setting.js
View File

@ -274,6 +274,18 @@ export function getShortText(s, maxLength=35) {
}
}
export function getFriendlyFileSize(size) {
if (size < 1024) {
return size + ' B';
}
let i = Math.floor(Math.log(size) / Math.log(1024));
let num = (size / Math.pow(1024, i));
let round = Math.round(num);
num = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round;
return `${num} ${'KMGTPEZY'[i-1]}B`;
}
function getRandomInt(s) {
let hash = 0;
if (s.length !== 0) {

2
web/src/UserEditPage.js
View File

@ -179,7 +179,7 @@ class UserEditPage extends React.Component {
</Col>
</Row>
<Row style={{marginTop: '20px'}}>
<CropperDiv buttonText={`${i18next.t("user:Upload a photo")}...`} title={i18next.t("user:Upload a photo")} user={this.state.user} />
<CropperDiv buttonText={`${i18next.t("user:Upload a photo")}...`} title={i18next.t("user:Upload a photo")} user={this.state.user} account={this.props.account} />
</Row>
</Col>
</Row>

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

@ -437,7 +437,7 @@ class SignupPage extends React.Component {
this.props.history.goBack();
}}
>
<iframe style={{border: 0, width: "100%", height: "60vh"}} srcDoc={this.state.termsOfUseContent}/>
<iframe title={"terms"} style={{border: 0, width: "100%", height: "60vh"}} srcDoc={this.state.termsOfUseContent}/>
</Modal>
)
}

1
web/src/backend/ApplicationBackend.js
View File

@ -13,7 +13,6 @@
// limitations under the License.
import * as Setting from "../Setting";
import * as AuthBackend from "../auth/AuthBackend";
export function getApplications(owner) {
return fetch(`${Setting.ServerUrl}/api/get-applications?owner=${owner}`, {

66
web/src/backend/ResourceBackend.js Normal file
View File

@ -0,0 +1,66 @@
// 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 * as Setting from "../Setting";
export function getResources(owner) {
return fetch(`${Setting.ServerUrl}/api/get-resources?owner=${owner}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
}
export function getResource(owner, name) {
return fetch(`${Setting.ServerUrl}/api/get-resource?id=${owner}/${encodeURIComponent(name)}`, {
method: "GET",
credentials: "include"
}).then(res => res.json());
}
export function updateResource(owner, name, resource) {
let newResource = Setting.deepCopy(resource);
return fetch(`${Setting.ServerUrl}/api/update-resource?id=${owner}/${encodeURIComponent(name)}`, {
method: 'POST',
credentials: 'include',
body: JSON.stringify(newResource),
}).then(res => res.json());
}
export function addResource(resource) {
let newResource = Setting.deepCopy(resource);
return fetch(`${Setting.ServerUrl}/api/add-resource`, {
method: 'POST',
credentials: 'include',
body: JSON.stringify(newResource),
}).then(res => res.json());
}
export function deleteResource(resource) {
let newResource = Setting.deepCopy(resource);
return fetch(`${Setting.ServerUrl}/api/delete-resource`, {
method: 'POST',
credentials: 'include',
body: JSON.stringify(newResource),
}).then(res => res.json());
}
export function uploadResource(owner, tag, parent, fullFilePath, file) {
let formData = new FormData();
formData.append("file", file);
return fetch(`${Setting.ServerUrl}/api/upload-resource?owner=${owner}&tag=${tag}&parent=${parent}&fullFilePath=${encodeURIComponent(fullFilePath)}`, {
body: formData,
method: 'POST',
credentials: 'include',
}).then(res => res.json())
}

11
web/src/backend/UserBackend.js
View File

@ -13,7 +13,6 @@
// limitations under the License.
import * as Setting from "../Setting";
import * as AuthBackend from "../auth/AuthBackend";
import i18next from "i18next";
export function getGlobalUsers() {
@ -76,16 +75,6 @@ export function getAffiliationOptions(url, code) {
}).then(res => res.json());
}
export function uploadFile(owner, tag, parent, fullFilePath, file) {
let formData = new FormData();
formData.append("file", file);
return fetch(`${Setting.ServerUrl}/api/upload-file?owner=${owner}&tag=${tag}&parent=${parent}&fullFilePath=${encodeURIComponent(fullFilePath)}`, {
body: formData,
method: 'POST',
credentials: 'include',
}).then(res => res.json())
}
export function setPassword(userOwner, userName, oldPassword, newPassword) {
let formData = new FormData();
formData.append("userOwner", userOwner);