-
+import React, {Component} from 'react';
+import {Switch, Redirect, Route, withRouter, Link} from 'react-router-dom';
+import {Avatar, BackTop, Dropdown, Layout, Menu} from 'antd';
+import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons';
+import './App.less';
+import * as Setting from "./Setting";
+import * as AccountBackend from "./backend/AccountBackend";
+import AuthCallback from "./AuthCallback";
+import * as Conf from "./Conf";
+import HomePage from "./HomePage";
+import DatasetListPage from "./DatasetListPage";
+import DatasetEditPage from "./DatasetEditPage";
+import SigninPage from "./SigninPage";
+import i18next from "i18next";
+import SelectLanguageBox from "./SelectLanguageBox";
+
+const {Header, Footer} = Layout;
+
+class App extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ classes: props,
+ selectedMenuKey: 0,
+ account: undefined,
+ uri: null,
+ };
+
+ Setting.initServerUrl();
+ Setting.initCasdoorSdk(Conf.AuthConfig);
+ }
+
+ componentWillMount() {
+ this.updateMenuKey();
+ this.getAccount();
+ }
+
+ componentDidUpdate() {
+ // eslint-disable-next-line no-restricted-globals
+ const uri = location.pathname;
+ if (this.state.uri !== uri) {
+ this.updateMenuKey();
+ }
+ }
+
+ updateMenuKey() {
+ // eslint-disable-next-line no-restricted-globals
+ const uri = location.pathname;
+ this.setState({
+ uri: uri,
+ });
+ if (uri === '/') {
+ this.setState({selectedMenuKey: '/'});
+ } else if (uri.includes('/datasets')) {
+ this.setState({ selectedMenuKey: '/datasets' });
+ } else {
+ this.setState({selectedMenuKey: 'null'});
+ }
+ }
+
+ onUpdateAccount(account) {
+ this.setState({
+ account: account
+ });
+ }
+
+ setLanguage(account) {
+ // let language = account?.language;
+ let language = localStorage.getItem("language");
+ if (language !== "" && language !== i18next.language) {
+ Setting.setLanguage(language);
+ }
+ }
+
+ getAccount() {
+ AccountBackend.getAccount()
+ .then((res) => {
+ let account = res.data;
+ if (account !== null) {
+ this.setLanguage(account);
+ }
+
+ this.setState({
+ account: account,
+ });
+ });
+ }
+
+ signout() {
+ AccountBackend.signout()
+ .then((res) => {
+ if (res.status === 'ok') {
+ this.setState({
+ account: null
+ });
+
+ Setting.showMessage("success", `Successfully signed out, redirected to homepage`);
+ Setting.goToLink("/");
+ // this.props.history.push("/");
+ } else {
+ Setting.showMessage("error", `Signout failed: ${res.msg}`);
+ }
+ });
+ }
+
+ handleRightDropdownClick(e) {
+ if (e.key === '/account') {
+ Setting.openLink(Setting.getMyProfileUrl(this.state.account));
+ } else if (e.key === '/logout') {
+ this.signout();
+ }
+ }
+
+ renderAvatar() {
+ if (this.state.account.avatar === "") {
+ return (
+
+ {Setting.getShortName(this.state.account.name)}
+
+ )
+ } else {
+ return (
+
+ {Setting.getShortName(this.state.account.name)}
+
+ )
+ }
+ }
+
+ renderRightDropdown() {
+ const menu = (
+
+ );
+
+ return (
+
+
+
+
+ {
+ this.renderAvatar()
+ }
+
+
+ {Setting.isMobile() ? null : Setting.getShortName(this.state.account.displayName)}
+
+
+
+
+
+ )
+ }
+
+ renderAccount() {
+ let res = [];
+
+ if (this.state.account === undefined) {
+ return null;
+ } else if (this.state.account === null) {
+ res.push(
+
+
+ {i18next.t("account:Sign Up")}
+
+
+ );
+ res.push(
+
+
+ {i18next.t("account:Sign In")}
+
+
+ );
+ res.push(
+
+
+ {i18next.t("general:Home")}
+
+
+ );
+ } else {
+ res.push(this.renderRightDropdown());
+ }
+
+ return res;
+ }
+
+ renderMenu() {
+ let res = [];
+
+ if (this.state.account === null || this.state.account === undefined) {
+ return [];
+ }
+
+ res.push(
+
+
+ {i18next.t("general:Home")}
+
+ {/**/}
+ {/* Home*/}
+ {/**/}
+
+ );
+
+ res.push(
+
+
+ {i18next.t("general:Datasets")}
+
+
+ );
+
+ return res;
+ }
+
+ renderHomeIfSignedIn(component) {
+ if (this.state.account !== null && this.state.account !== undefined) {
+ return
+ } else {
+ return component;
+ }
+ }
+
+ renderSigninIfNotSignedIn(component) {
+ if (this.state.account === null) {
+ sessionStorage.setItem("from", window.location.pathname);
+ return
+ } else if (this.state.account === undefined) {
+ return null;
+ }
+ else {
+ return component;
+ }
+ }
+
+ renderContent() {
+ return (
+
+
+
+
+ }/>
+ this.renderHomeIfSignedIn()}/>
+ this.renderSigninIfNotSignedIn()}/>
+ this.renderSigninIfNotSignedIn()}/>
+
+
+ )
+ }
+
+ renderFooter() {
+ // How to keep your footer where it belongs ?
+ // https://www.freecodecamp.org/neyarnws/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
+
+ return (
+
+ )
+ }
+
+ render() {
+ return (
+
+
+
+ {
+ this.renderContent()
+ }
+
+ {
+ this.renderFooter()
+ }
- );
+ );
+ }
}
-export default App;
+export default withRouter(App);
diff --git a/web/src/App.less b/web/src/App.less
new file mode 100644
index 0000000..82e754b
--- /dev/null
+++ b/web/src/App.less
@@ -0,0 +1,64 @@
+@import '~antd/dist/antd.less';
+
+.App {
+ text-align: center;
+}
+
+.App-logo {
+ height: 40vmin;
+}
+
+.App-header {
+ background-color: #282c34;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: white;
+}
+
+.App-link {
+ color: #09d3ac;
+}
+
+#parent-area {
+ position: relative;
+ min-height: 100vh;
+}
+
+#content-wrap {
+ padding-bottom: 70px; /* Footer height */
+}
+
+#footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 70px; /* Footer height */
+}
+
+.ant-table-body {
+ overflow-y: hidden !important
+}
+
+.language_box {
+ background: url("https://cdn.casbin.org/img/muti_language.svg");
+ background-size: 25px, 25px;
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 45px;
+ height: 65px;
+ float: right;
+ cursor: pointer;
+}
+
+.language_box:hover {
+ background-color: #f5f5f5;
+}
+
+
+.rightDropDown:hover {
+ background-color: #f5f5f5;
+}
diff --git a/web/src/App.test.js b/web/src/App.test.js
index 1f03afe..a754b20 100644
--- a/web/src/App.test.js
+++ b/web/src/App.test.js
@@ -1,8 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ReactDOM from 'react-dom';
import App from './App';
-test('renders learn react link', () => {
- render(
);
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
+it('renders without crashing', () => {
+ const div = document.createElement('div');
+ ReactDOM.render(
, div);
+ ReactDOM.unmountComponentAtNode(div);
});
diff --git a/web/src/AuthCallback.js b/web/src/AuthCallback.js
new file mode 100644
index 0000000..f50af6a
--- /dev/null
+++ b/web/src/AuthCallback.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { Button, Result, Spin } from "antd";
+import { withRouter } from "react-router-dom";
+import * as Setting from "./Setting";
+
+class AuthCallback extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ classes: props,
+ msg: null,
+ };
+ }
+
+ componentWillMount() {
+ this.login();
+ }
+
+ getFromLink() {
+ const from = sessionStorage.getItem("from");
+ if (from === null) {
+ return "/";
+ }
+ return from;
+ }
+
+ login() {
+ Setting.signin().then((res) => {
+ if (res.status === "ok") {
+ Setting.showMessage("success", `Logged in successfully`)
+
+ const link = this.getFromLink();
+ Setting.goToLink(link);
+ } else {
+ this.setState({
+ msg: res.msg,
+ });
+ }
+ });
+ }
+
+ render() {
+ return (
+
+ {this.state.msg === null ? (
+
+ ) : (
+
+
+ Details
+ ,
+ ,
+ ]}
+ />
+
+ )}
+
+ );
+ }
+}
+
+export default withRouter(AuthCallback);
diff --git a/web/src/Conf.js b/web/src/Conf.js
new file mode 100644
index 0000000..5f49b05
--- /dev/null
+++ b/web/src/Conf.js
@@ -0,0 +1,8 @@
+export const AuthConfig = {
+ // serverUrl: "https://door.casdoor.com",
+ serverUrl: "http://localhost:7001",
+ clientId: "af6b5aa958822fb9dc33",
+ appName: "app-casibase",
+ organizationName: "casbin",
+ redirectPath: "/callback",
+};
diff --git a/web/src/DatasetEditPage.js b/web/src/DatasetEditPage.js
new file mode 100644
index 0000000..5bb053d
--- /dev/null
+++ b/web/src/DatasetEditPage.js
@@ -0,0 +1,245 @@
+import React from "react";
+import {Button, Card, Col, DatePicker, Input, Row, Select} from 'antd';
+import * as DatasetBackend from "./backend/DatasetBackend";
+import * as Setting from "./Setting";
+import moment from "moment";
+import i18next from "i18next";
+
+const { Option } = Select;
+
+class DatasetEditPage extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ classes: props,
+ datasetName: props.match.params.datasetName,
+ dataset: null,
+ };
+ }
+
+ componentWillMount() {
+ this.getDataset();
+ }
+
+ getDataset() {
+ DatasetBackend.getDataset(this.props.account.name, this.state.datasetName)
+ .then((dataset) => {
+ this.setState({
+ dataset: dataset,
+ });
+ });
+ }
+
+ parseDatasetField(key, value) {
+ if (["score"].includes(key)) {
+ value = Setting.myParseInt(value);
+ }
+ return value;
+ }
+
+ updateDatasetField(key, value) {
+ value = this.parseDatasetField(key, value);
+
+ let dataset = this.state.dataset;
+ dataset[key] = value;
+ this.setState({
+ dataset: dataset,
+ });
+ }
+
+ renderDataset() {
+ return (
+
+ {i18next.t("dataset:Edit Dataset")}
+
+