From 503d24416627d0a7fde74720faee1a0fc613360a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=AD=E3=83=AA=E3=82=B5=E3=83=A1=20qianxi?= <55543743+qianxi0410@users.noreply.github.com> Date: Sun, 10 Jul 2022 15:45:55 +0800 Subject: [PATCH] feat(web): add lint (#875) * feat: add lint * feat: fix lint error * chore: add ignore file * chore: close indent --- web/.eslintignore | 2 + web/.eslintrc | 59 + web/craco.config.js | 36 +- web/package.json | 4 +- web/src/AccountTable.js | 94 +- web/src/App.js | 387 +- web/src/App.test.js | 12 +- web/src/ApplicationEditPage.js | 306 +- web/src/ApplicationListPage.js | 110 +- web/src/BaseListPage.js | 220 +- web/src/CertEditPage.js | 96 +- web/src/CertListPage.js | 116 +- web/src/CropperDiv.js | 210 +- web/src/LdapEditPage.js | 46 +- web/src/LdapListPage.js | 46 +- web/src/LdapSyncPage.js | 56 +- web/src/LdapTable.js | 74 +- web/src/ModelEditPage.js | 56 +- web/src/ModelListPage.js | 102 +- web/src/OrganizationEditPage.js | 147 +- web/src/OrganizationListPage.js | 138 +- web/src/PasswordModal.js | 25 +- web/src/PaymentEditPage.js | 158 +- web/src/PaymentListPage.js | 144 +- web/src/PaymentResultPage.js | 8 +- web/src/PermissionEditPage.js | 108 +- web/src/PermissionListPage.js | 138 +- web/src/ProductBuyPage.js | 28 +- web/src/ProductEditPage.js | 136 +- web/src/ProductListPage.js | 152 +- web/src/ProviderEditPage.js | 492 +- web/src/ProviderListPage.js | 130 +- web/src/ProviderTable.js | 100 +- web/src/RecordListPage.js | 124 +- web/src/ResetModal.js | 17 +- web/src/ResourceListPage.js | 166 +- web/src/RoleEditPage.js | 62 +- web/src/RoleListPage.js | 108 +- web/src/SelectLanguageBox.js | 8 +- web/src/SelectRegionBox.js | 74 +- web/src/Setting.js | 320 +- web/src/SignupTable.js | 104 +- web/src/SyncerEditPage.js | 152 +- web/src/SyncerListPage.js | 164 +- web/src/SyncerTableColumnTable.js | 66 +- web/src/TestEmailWidget.js | 8 +- web/src/TokenEditPage.js | 88 +- web/src/TokenListPage.js | 126 +- web/src/UrlTable.js | 32 +- web/src/UserEditPage.js | 284 +- web/src/UserListPage.js | 212 +- web/src/WebhookEditPage.js | 114 +- web/src/WebhookHeaderTable.js | 42 +- web/src/WebhookListPage.js | 130 +- web/src/account/AccountPage.js | 2 +- web/src/auth/AdfsLoginButton.js | 14 +- web/src/auth/AlipayLoginButton.js | 14 +- web/src/auth/AppleLoginButton.js | 14 +- web/src/auth/AuthBackend.js | 26 +- web/src/auth/AuthCallback.js | 22 +- web/src/auth/AzureADLoginButton.js | 14 +- web/src/auth/BaiduLoginButton.js | 14 +- web/src/auth/BilibiliLoginButton.js | 14 +- web/src/auth/CasLogout.js | 14 +- web/src/auth/CasdoorLoginButton.js | 14 +- web/src/auth/DingTalkLoginButton.js | 14 +- web/src/auth/DouyinLoginButton.js | 12 +- web/src/auth/FacebookLoginButton.js | 14 +- web/src/auth/ForgetPage.js | 700 +- web/src/auth/GitHubLoginButton.js | 14 +- web/src/auth/GitLabLoginButton.js | 14 +- web/src/auth/GiteeLoginButton.js | 14 +- web/src/auth/GoogleLoginButton.js | 14 +- web/src/auth/InfoflowLoginButton.js | 14 +- web/src/auth/LarkLoginButton.js | 14 +- web/src/auth/LinkedInLoginButton.js | 14 +- web/src/auth/LoginPage.js | 190 +- web/src/auth/OidcDiscoveryPage.js | 2 +- web/src/auth/OktaLoginButton.js | 14 +- web/src/auth/PromptPage.js | 22 +- web/src/auth/Provider.js | 10 +- web/src/auth/QqLoginButton.js | 4 +- web/src/auth/ResultPage.js | 8 +- web/src/auth/SamlCallback.js | 160 +- web/src/auth/SelfForgetPage.js | 2 +- web/src/auth/SelfLoginButton.js | 44 +- web/src/auth/SelfLoginPage.js | 4 +- web/src/auth/SignupPage.js | 100 +- web/src/auth/SlackLoginButton.js | 14 +- web/src/auth/SteamLoginButton.js | 14 +- web/src/auth/Util.js | 18 +- web/src/auth/WeComLoginButton.js | 14 +- web/src/auth/WechatLoginButton.js | 14 +- web/src/auth/WeiboLoginButton.js | 14 +- web/src/backend/ApplicationBackend.js | 14 +- web/src/backend/CertBackend.js | 12 +- web/src/backend/ModelBackend.js | 12 +- web/src/backend/OrganizationBackend.js | 12 +- web/src/backend/PaymentBackend.js | 12 +- web/src/backend/PermissionBackend.js | 12 +- web/src/backend/ProductBackend.js | 16 +- web/src/backend/ProviderBackend.js | 12 +- web/src/backend/ResourceBackend.js | 18 +- web/src/backend/RoleBackend.js | 12 +- web/src/backend/SyncerBackend.js | 16 +- web/src/backend/TokenBackend.js | 12 +- web/src/backend/UserBackend.js | 12 +- web/src/backend/WebhookBackend.js | 12 +- web/src/basic/HomePage.js | 30 +- web/src/basic/SingleCard.js | 18 +- web/src/common/AffiliationSelect.js | 30 +- web/src/common/CaptchaPreview.js | 8 +- web/src/common/CaptchaWidget.js | 105 +- web/src/common/CountDownInput.js | 42 +- web/src/common/OAuthWidget.js | 26 +- web/src/common/SamlWidget.js | 70 +- web/src/i18n.js | 60 +- web/src/index.js | 26 +- web/src/serviceWorker.js | 32 +- web/src/setupTests.js | 2 +- web/yarn.lock | 25220 ++++++++++++----------- 121 files changed, 17023 insertions(+), 16815 deletions(-) create mode 100644 web/.eslintignore create mode 100644 web/.eslintrc diff --git a/web/.eslintignore b/web/.eslintignore new file mode 100644 index 00000000..dd87e2d7 --- /dev/null +++ b/web/.eslintignore @@ -0,0 +1,2 @@ +node_modules +build diff --git a/web/.eslintrc b/web/.eslintrc new file mode 100644 index 00000000..96304384 --- /dev/null +++ b/web/.eslintrc @@ -0,0 +1,59 @@ +{ + "env": { + "browser": true, + "es6": true, + "node": true + }, + "parser": "babel-eslint", + "parserOptions": { + "ecmaVersion": 12, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "settings": { + "react": { + "version": "detect" + } + }, + "extends": ["eslint:recommended", "plugin:react/recommended"], + "rules": { + // "eqeqeq": "error", + "semi": ["error", "always"], + // "indent": ["error", 2], + // follow antd's style guide + "quotes": ["error", "double"], + "jsx-quotes": ["error", "prefer-double"], + "space-in-parens": ["error", "never"], + "object-curly-spacing": ["error", "never"], + "array-bracket-spacing": ["error", "never"], + "comma-spacing": ["error", { "before": false, "after": true }], + "react/jsx-curly-spacing": [ + "error", + { "when": "never", "allowMultiline": true, "children": true } + ], + "arrow-spacing": ["error", { "before": true, "after": true }], + "space-before-blocks": ["error", "always"], + "spaced-comment": ["error", "always"], + "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }], + "block-spacing": ["error", "never"], + "space-before-function-paren": ["error", "never"], + "no-trailing-spaces": ["error", { "ignoreComments": true }], + "eol-last": ["error", "always"], + // "no-var": ["error"], + "curly": ["error", "all"], + "brace-style": ["error", "1tbs", { "allowSingleLine": true }], + "no-mixed-spaces-and-tabs": "error", + + "react/prop-types": "off", + "react/display-name": "off", + "react/react-in-jsx-scope": "off", + + // don't use strict mod now, otherwise there are a lot of errors in the codebase + "no-unused-vars": "warn", + "react/no-deprecated": "warn", + "no-case-declarations": "warn", + "react/jsx-key": "warn" + } +} diff --git a/web/craco.config.js b/web/craco.config.js index a256379b..58530129 100644 --- a/web/craco.config.js +++ b/web/craco.config.js @@ -1,38 +1,38 @@ -const CracoLessPlugin = require('craco-less'); +const CracoLessPlugin = require("craco-less"); module.exports = { devServer: { proxy: { - '/api': { - target: 'http://localhost:8000', + "/api": { + target: "http://localhost:8000", changeOrigin: true, }, - '/swagger': { - target: 'http://localhost:8000', + "/swagger": { + target: "http://localhost:8000", changeOrigin: true, }, - '/files': { - target: 'http://localhost:8000', + "/files": { + target: "http://localhost:8000", changeOrigin: true, }, - '/.well-known/openid-configuration': { - target: 'http://localhost:8000', + "/.well-known/openid-configuration": { + target: "http://localhost:8000", changeOrigin: true, }, - '/cas/serviceValidate': { - target: 'http://localhost:8000', + "/cas/serviceValidate": { + target: "http://localhost:8000", changeOrigin: true, }, - '/cas/proxyValidate': { - target: 'http://localhost:8000', + "/cas/proxyValidate": { + target: "http://localhost:8000", changeOrigin: true, }, - '/cas/proxy': { - target: 'http://localhost:8000', + "/cas/proxy": { + target: "http://localhost:8000", changeOrigin: true, }, - '/cas/validate': { - target: 'http://localhost:8000', + "/cas/validate": { + target: "http://localhost:8000", changeOrigin: true, } }, @@ -43,7 +43,7 @@ module.exports = { options: { lessLoaderOptions: { lessOptions: { - modifyVars: {'@primary-color': 'rgb(45,120,213)'}, + modifyVars: {"@primary-color": "rgb(45,120,213)"}, javascriptEnabled: true, }, }, diff --git a/web/package.json b/web/package.json index b0c0fe67..6dc74b01 100644 --- a/web/package.json +++ b/web/package.json @@ -59,6 +59,8 @@ ] }, "devDependencies": { - "cross-env": "^7.0.3" + "cross-env": "^7.0.3", + "eslint": "^7.11.0", + "eslint-plugin-react": "^7.30.1" } } diff --git a/web/src/AccountTable.js b/web/src/AccountTable.js index 49405adb..93502982 100644 --- a/web/src/AccountTable.js +++ b/web/src/AccountTable.js @@ -13,12 +13,12 @@ // limitations under the License. import React from "react"; -import {DownOutlined, DeleteOutlined, UpOutlined} from '@ant-design/icons'; -import {Button, Col, Row, Select, Switch, Table, Tooltip} from 'antd'; +import {DownOutlined, DeleteOutlined, UpOutlined} from "@ant-design/icons"; +import {Button, Col, Row, Select, Switch, Table, Tooltip} from "antd"; import * as Setting from "./Setting"; import i18next from "i18next"; -const { Option } = Select; +const {Option} = Select; class AccountTable extends React.Component { constructor(props) { @@ -65,8 +65,8 @@ class AccountTable extends React.Component { const columns = [ { title: i18next.t("provider:Name"), - dataIndex: 'name', - key: 'name', + dataIndex: "name", + key: "name", render: (text, record, index) => { const items = [ {name: "Organization", displayName: i18next.t("general:Organization")}, @@ -103,63 +103,63 @@ class AccountTable extends React.Component { }; return ( - { + this.updateField(table, index, "name", value); + }} > { Setting.getDeduplicatedArray(items, table, "name").map((item, index) => ) } - ) + ); } }, { title: i18next.t("provider:visible"), - dataIndex: 'visible', - key: 'visible', - width: '120px', + dataIndex: "visible", + key: "visible", + width: "120px", render: (text, record, index) => { return ( { - this.updateField(table, index, 'visible', checked); + this.updateField(table, index, "visible", checked); }} /> - ) + ); } }, { title: i18next.t("organization:viewRule"), - dataIndex: 'viewRule', - key: 'viewRule', - width: '155px', + dataIndex: "viewRule", + key: "viewRule", + width: "155px", render: (text, record, index) => { if (!record.visible) { return null; } let options = [ - {id: 'Public', name: 'Public'}, - {id: 'Self', name: 'Self'}, - {id: 'Admin', name: 'Admin'}, + {id: "Public", name: "Public"}, + {id: "Self", name: "Self"}, + {id: "Admin", name: "Admin"}, ]; return ( - { + this.updateField(table, index, "viewRule", value); })}> { options.map((item, index) => ) } - ) + ); } }, { title: i18next.t("organization:modifyRule"), - dataIndex: 'modifyRule', - key: 'modifyRule', - width: '155px', + dataIndex: "modifyRule", + key: "modifyRule", + width: "155px", render: (text, record, index) => { if (!record.visible) { return null; @@ -168,32 +168,32 @@ class AccountTable extends React.Component { let options; if (record.viewRule === "Admin") { options = [ - {id: 'Admin', name: 'Admin'}, - {id: 'Immutable', name: 'Immutable'}, + {id: "Admin", name: "Admin"}, + {id: "Immutable", name: "Immutable"}, ]; } else { options = [ - {id: 'Self', name: 'Self'}, - {id: 'Admin', name: 'Admin'}, - {id: 'Immutable', name: 'Immutable'}, + {id: "Self", name: "Self"}, + {id: "Admin", name: "Admin"}, + {id: "Immutable", name: "Immutable"}, ]; } return ( - { + this.updateField(table, index, "modifyRule", value); })}> { options.map((item, index) => ) } - ) + ); } }, { title: i18next.t("general:Action"), - key: 'action', - width: '100px', + key: "action", + width: "100px", render: (text, record, index) => { return (
@@ -213,13 +213,13 @@ class AccountTable extends React.Component { ]; return ( - ( -
- {this.props.title}     - -
- )} +
( +
+ {this.props.title}     + +
+ )} /> ); } @@ -227,7 +227,7 @@ class AccountTable extends React.Component { render() { return (
- +
{ this.renderTable(this.props.table) @@ -235,7 +235,7 @@ class AccountTable extends React.Component { - ) + ); } } diff --git a/web/src/App.js b/web/src/App.js index a17ef6fc..d81055ad 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -12,13 +12,13 @@ // See the License for the specific language governing permissions and // limitations under the License. -import React, {Component} from 'react'; -import './App.less'; +import React, {Component} from "react"; +import "./App.less"; import {Helmet} from "react-helmet"; import * as Setting from "./Setting"; -import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons'; -import {Avatar, BackTop, Dropdown, Layout, Menu, Card, Result, Button} from 'antd'; -import {Link, Redirect, Route, Switch, withRouter} from 'react-router-dom' +import {DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons"; +import {Avatar, BackTop, Dropdown, Layout, Menu, Card, Result, Button} from "antd"; +import {Link, Redirect, Route, Switch, withRouter} from "react-router-dom"; import OrganizationListPage from "./OrganizationListPage"; import OrganizationEditPage from "./OrganizationEditPage"; import UserListPage from "./UserListPage"; @@ -63,16 +63,16 @@ import SelfForgetPage from "./auth/SelfForgetPage"; import ForgetPage from "./auth/ForgetPage"; import * as AuthBackend from "./auth/AuthBackend"; import AuthCallback from "./auth/AuthCallback"; -import SelectLanguageBox from './SelectLanguageBox'; -import i18next from 'i18next'; +import SelectLanguageBox from "./SelectLanguageBox"; +import i18next from "i18next"; import PromptPage from "./auth/PromptPage"; import OdicDiscoveryPage from "./auth/OidcDiscoveryPage"; -import SamlCallback from './auth/SamlCallback'; +import SamlCallback from "./auth/SamlCallback"; import CasLogout from "./auth/CasLogout"; import ModelListPage from "./ModelListPage"; import ModelEditPage from "./ModelEditPage"; -const { Header, Footer } = Layout; +const {Header, Footer} = Layout; class App extends Component { constructor(props) { @@ -110,46 +110,46 @@ class App extends Component { this.setState({ uri: uri, }); - if (uri === '/') { - this.setState({ selectedMenuKey: '/' }); - } else if (uri.includes('/organizations')) { - this.setState({ selectedMenuKey: '/organizations' }); - } else if (uri.includes('/users')) { - this.setState({ selectedMenuKey: '/users' }); - } else if (uri.includes('/roles')) { - this.setState({ selectedMenuKey: '/roles' }); - } else if (uri.includes('/permissions')) { - this.setState({ selectedMenuKey: '/permissions' }); - } else if (uri.includes('/models')) { - this.setState({ selectedMenuKey: '/models' }); - } else if (uri.includes('/providers')) { - 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')) { - this.setState({ selectedMenuKey: '/records' }); - } else if (uri.includes('/webhooks')) { - this.setState({ selectedMenuKey: '/webhooks' }); - } else if (uri.includes('/syncers')) { - this.setState({ selectedMenuKey: '/syncers' }); - } else if (uri.includes('/certs')) { - this.setState({ selectedMenuKey: '/certs' }); - } else if (uri.includes('/products')) { - this.setState({ selectedMenuKey: '/products' }); - } else if (uri.includes('/payments')) { - this.setState({ selectedMenuKey: '/payments' }); - } else if (uri.includes('/signup')) { - this.setState({ selectedMenuKey: '/signup' }); - } else if (uri.includes('/login')) { - this.setState({ selectedMenuKey: '/login' }); - } else if (uri.includes('/result')) { - this.setState({ selectedMenuKey: '/result' }); + if (uri === "/") { + this.setState({selectedMenuKey: "/"}); + } else if (uri.includes("/organizations")) { + this.setState({selectedMenuKey: "/organizations"}); + } else if (uri.includes("/users")) { + this.setState({selectedMenuKey: "/users"}); + } else if (uri.includes("/roles")) { + this.setState({selectedMenuKey: "/roles"}); + } else if (uri.includes("/permissions")) { + this.setState({selectedMenuKey: "/permissions"}); + } else if (uri.includes("/models")) { + this.setState({selectedMenuKey: "/models"}); + } else if (uri.includes("/providers")) { + 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")) { + this.setState({selectedMenuKey: "/records"}); + } else if (uri.includes("/webhooks")) { + this.setState({selectedMenuKey: "/webhooks"}); + } else if (uri.includes("/syncers")) { + this.setState({selectedMenuKey: "/syncers"}); + } else if (uri.includes("/certs")) { + this.setState({selectedMenuKey: "/certs"}); + } else if (uri.includes("/products")) { + this.setState({selectedMenuKey: "/products"}); + } else if (uri.includes("/payments")) { + this.setState({selectedMenuKey: "/payments"}); + } else if (uri.includes("/signup")) { + this.setState({selectedMenuKey: "/signup"}); + } else if (uri.includes("/login")) { + this.setState({selectedMenuKey: "/login"}); + } else if (uri.includes("/result")) { + this.setState({selectedMenuKey: "/result"}); } else { - this.setState({ selectedMenuKey: -1 }); + this.setState({selectedMenuKey: -1}); } } @@ -234,12 +234,12 @@ class App extends Component { AuthBackend.logout() .then((res) => { - if (res.status === 'ok') { + if (res.status === "ok") { this.setState({ account: null }); - Setting.showMessage("success", `Logged out successfully`); + Setting.showMessage("success", "Logged out successfully"); let redirectUri = res.data2; if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") { Setting.goToLink(redirectUri); @@ -259,9 +259,9 @@ class App extends Component { } handleRightDropdownClick(e) { - if (e.key === '/account') { - this.props.history.push(`/account`); - } else if (e.key === '/logout') { + if (e.key === "/account") { + this.props.history.push("/account"); + } else if (e.key === "/logout") { this.logout(); } } @@ -269,16 +269,16 @@ class App extends Component { renderAvatar() { if (this.state.account.avatar === "") { return ( - + {Setting.getShortName(this.state.account.name)} - ) + ); } else { return ( - + {Setting.getShortName(this.state.account.name)} - ) + ); } } @@ -298,7 +298,7 @@ class App extends Component { return ( -
+
    { @@ -312,7 +312,7 @@ class App extends Component {  
- ) + ); } renderAccount() { @@ -484,7 +484,7 @@ class App extends Component { renderHomeIfLoggedIn(component) { if (this.state.account !== null && this.state.account !== undefined) { - return + return ; } else { return component; } @@ -493,77 +493,114 @@ class App extends Component { renderLoginIfNotLoggedIn(component) { if (this.state.account === null) { sessionStorage.setItem("from", window.location.pathname); - return + return ; } else if (this.state.account === undefined) { return null; - } - else { + } else { return component; } } isStartPages() { - return window.location.pathname.startsWith('/login') || - window.location.pathname.startsWith('/signup') || - window.location.pathname === '/'; + return window.location.pathname.startsWith("/login") || + window.location.pathname.startsWith("/signup") || + window.location.pathname === "/"; } - renderRouter(){ + renderRouter() { return(
- this.renderHomeIfLoggedIn()}/> - this.renderHomeIfLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - }/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - {/* this.renderLoginIfNotLoggedIn()}/>*/} - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - }/> + this.renderHomeIfLoggedIn()} /> + this.renderHomeIfLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + } /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + {/* this.renderLoginIfNotLoggedIn()}/>*/} + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + } /> } />} /> - -
- ) + extra={} />} /> + +
+ ); } renderContent() { if (!Setting.isMobile()) { return ( -
- -
+
+ +
+ { + Setting.isMobile() ? null : ( + +
+ + ) + } +
+ + { + this.renderMenu() + } + + { + this.renderAccount() + } + +
+
+ + + { + this.renderRouter() + } + + + +
+ ); + } else { + return( +
+
{ Setting.isMobile() ? null : ( @@ -571,66 +608,28 @@ class App extends Component { ) } -
- - { - this.renderMenu() - } - - { - this.renderAccount() - } - -
-
- - - { - this.renderRouter() - } - - - -
- ) - } else { - return( -
-
- { - Setting.isMobile() ? null : ( - -
- - ) - } - - { - this.renderMenu() - } -
- { - this.renderAccount() - } - -
- -
- { - this.renderRouter() - } -
- ) + mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"} + selectedKeys={[`${this.state.selectedMenuKey}`]} + style={{lineHeight: "64px"}} + > + { + this.renderMenu() + } +
+ { + this.renderAccount() + } + +
+ +
+ { + this.renderRouter() + } +
+ ); } } @@ -641,14 +640,14 @@ class App extends Component { return ( - ) + ); } isDoorPages() { @@ -665,28 +664,28 @@ class App extends Component { return (
- this.renderHomeIfLoggedIn()}/> - this.renderHomeIfLoggedIn( {this.onUpdateAccount(account)}} />)}/> - this.renderHomeIfLoggedIn()}/> - {this.onUpdateAccount(account)}} />}/> - {this.onUpdateAccount(account)}} />}/> - {this.onUpdateAccount(account)}} />}/> + this.renderHomeIfLoggedIn()} /> + this.renderHomeIfLoggedIn( {this.onUpdateAccount(account);}} />)} /> + this.renderHomeIfLoggedIn()} /> + {this.onUpdateAccount(account);}} />} /> + {this.onUpdateAccount(account);}} />} /> + {this.onUpdateAccount(account);}} />} /> this.renderHomeIfLoggedIn( this.setState({account: null})} {...props} />)} /> - {return ()}} /> - - - this.renderHomeIfLoggedIn()}/> - this.renderHomeIfLoggedIn()}/> - this.renderLoginIfNotLoggedIn()}/> - this.renderLoginIfNotLoggedIn( {this.onUpdateAccount(account)}} {...props} />)}/> + {return ();}} /> + + + this.renderHomeIfLoggedIn()} /> + this.renderHomeIfLoggedIn()} /> + this.renderLoginIfNotLoggedIn()} /> + this.renderLoginIfNotLoggedIn( {this.onUpdateAccount(account);}} {...props} />)} /> }/>} /> + extra={} />} /> { this.renderFooter() }
- ) + ); } return ( @@ -716,7 +715,7 @@ class App extends Component { this.renderPage() } - ) + ); } const organization = this.state.account.organization; @@ -730,7 +729,7 @@ class App extends Component { this.renderPage() } - ) + ); } } diff --git a/web/src/App.test.js b/web/src/App.test.js index 2942ba59..b7d6e107 100644 --- a/web/src/App.test.js +++ b/web/src/App.test.js @@ -12,12 +12,14 @@ // See the License for the specific language governing permissions and // limitations under the License. -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; +import React from "react"; +import {render} from "@testing-library/react"; +import App from "./App"; -test('renders learn react link', () => { - const { getByText } = render(); +// eslint-disable-next-line no-undef +test("renders learn react link", () => { + const {getByText} = render(); const linkElement = getByText(/learn react/i); + // eslint-disable-next-line no-undef expect(linkElement).toBeInTheDocument(); }); diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js index 48f09fed..c49f948d 100644 --- a/web/src/ApplicationEditPage.js +++ b/web/src/ApplicationEditPage.js @@ -13,7 +13,7 @@ // limitations under the License. import React from "react"; -import {Button, Card, Col, Input, Popover, Row, Select, Switch, Upload} from 'antd'; +import {Button, Card, Col, Input, Popover, Row, Select, Switch, Upload} from "antd"; import {CopyOutlined, LinkOutlined, UploadOutlined} from "@ant-design/icons"; import * as ApplicationBackend from "./backend/ApplicationBackend"; import * as CertBackend from "./backend/CertBackend"; @@ -30,13 +30,13 @@ import SignupTable from "./SignupTable"; import PromptPage from "./auth/PromptPage"; import copy from "copy-to-clipboard"; -import {Controlled as CodeMirror} from 'react-codemirror2'; +import {Controlled as CodeMirror} from "react-codemirror2"; import "codemirror/lib/codemirror.css"; -require('codemirror/theme/material-darker.css'); +require("codemirror/theme/material-darker.css"); require("codemirror/mode/htmlmixed/htmlmixed"); require("codemirror/mode/xml/xml"); -const { Option } = Select; +const {Option} = Select; class ApplicationEditPage extends React.Component { constructor(props) { @@ -106,7 +106,7 @@ class ApplicationEditPage extends React.Component { .then((res) => { this.setState({ samlMetadata: res, - }) + }); }); } @@ -144,7 +144,7 @@ class ApplicationEditPage extends React.Component { } }).finally(() => { this.setState({uploading: false}); - }) + }); } renderApplication() { @@ -153,262 +153,262 @@ class ApplicationEditPage extends React.Component {
{this.state.mode === "add" ? i18next.t("application:New Application") : i18next.t("application:Edit Application")}     - - {this.state.mode === "add" ? : null} + + {this.state.mode === "add" ? : null}
- } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner"> - - + } style={(Setting.isMobile())? {margin: "5px"}:{}} type="inner"> + + {Setting.getLabel(i18next.t("general:Name"), i18next.t("general:Name - Tooltip"))} : { - this.updateApplicationField('name', e.target.value); + this.updateApplicationField("name", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} : { - this.updateApplicationField('displayName', e.target.value); + this.updateApplicationField("displayName", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Logo"), i18next.t("general:Logo - Tooltip"))} : - - - + + + {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} : - } value={this.state.application.logo} onChange={e => { - this.updateApplicationField('logo', e.target.value); + } value={this.state.application.logo} onChange={e => { + this.updateApplicationField("logo", e.target.value); }} /> - - + + {i18next.t("general:Preview")}: - {this.state.application.logo} + {this.state.application.logo} - - + + {Setting.getLabel(i18next.t("general:Home"), i18next.t("general:Home - Tooltip"))} : - } value={this.state.application.homepageUrl} onChange={e => { - this.updateApplicationField('homepageUrl', e.target.value); + } value={this.state.application.homepageUrl} onChange={e => { + this.updateApplicationField("homepageUrl", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Description"), i18next.t("general:Description - Tooltip"))} : { - this.updateApplicationField('description', e.target.value); + this.updateApplicationField("description", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} : - {this.updateApplicationField("organization", value);})}> { this.state.organizations.map((organization, index) => ) } - - + + {Setting.getLabel(i18next.t("provider:Client ID"), i18next.t("provider:Client ID - Tooltip"))} : { - this.updateApplicationField('clientId', e.target.value); + this.updateApplicationField("clientId", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"))} : { - this.updateApplicationField('clientSecret', e.target.value); + this.updateApplicationField("clientSecret", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Cert"), i18next.t("general:Cert - Tooltip"))} : - {this.updateApplicationField("cert", value);})}> { this.state.certs.map((cert, index) => ) } - - + + {Setting.getLabel(i18next.t("application:Redirect URLs"), i18next.t("application:Redirect URLs - Tooltip"))} : { this.updateApplicationField('redirectUris', value)}} + onUpdateTable={(value) => {this.updateApplicationField("redirectUris", value);}} /> - - + + {Setting.getLabel(i18next.t("application:Token format"), i18next.t("application:Token format - Tooltip"))} : - {this.updateApplicationField("tokenFormat", value);})}> { - ['JWT', 'JWT-Empty'] + ["JWT", "JWT-Empty"] .map((item, index) => ) } - - + + {Setting.getLabel(i18next.t("application:Token expire"), i18next.t("application:Token expire - Tooltip"))} : { - this.updateApplicationField('expireInHours', e.target.value); + this.updateApplicationField("expireInHours", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("application:Refresh token expire"), i18next.t("application:Refresh token expire - Tooltip"))} : { - this.updateApplicationField('refreshExpireInHours', e.target.value); + this.updateApplicationField("refreshExpireInHours", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("application:Password ON"), i18next.t("application:Password ON - Tooltip"))} : { - this.updateApplicationField('enablePassword', checked); + this.updateApplicationField("enablePassword", checked); }} /> - - + + {Setting.getLabel(i18next.t("application:Enable signup"), i18next.t("application:Enable signup - Tooltip"))} : { - this.updateApplicationField('enableSignUp', checked); + this.updateApplicationField("enableSignUp", checked); }} /> - - + + {Setting.getLabel(i18next.t("application:Signin session"), i18next.t("application:Enable signin session - Tooltip"))} : { - this.updateApplicationField('enableSigninSession', checked); + this.updateApplicationField("enableSigninSession", checked); }} /> - - + + {Setting.getLabel(i18next.t("application:Enable code signin"), i18next.t("application:Enable code signin - Tooltip"))} : { - this.updateApplicationField('enableCodeSignin', checked); + this.updateApplicationField("enableCodeSignin", checked); }} /> - - + + {Setting.getLabel(i18next.t("general:Signup URL"), i18next.t("general:Signup URL - Tooltip"))} : - } value={this.state.application.signupUrl} onChange={e => { - this.updateApplicationField('signupUrl', e.target.value); + } value={this.state.application.signupUrl} onChange={e => { + this.updateApplicationField("signupUrl", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Signin URL"), i18next.t("general:Signin URL - Tooltip"))} : - } value={this.state.application.signinUrl} onChange={e => { - this.updateApplicationField('signinUrl', e.target.value); + } value={this.state.application.signinUrl} onChange={e => { + this.updateApplicationField("signinUrl", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Forget URL"), i18next.t("general:Forget URL - Tooltip"))} : - } value={this.state.application.forgetUrl} onChange={e => { - this.updateApplicationField('forgetUrl', e.target.value); + } value={this.state.application.forgetUrl} onChange={e => { + this.updateApplicationField("forgetUrl", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Affiliation URL"), i18next.t("general:Affiliation URL - Tooltip"))} : - } value={this.state.application.affiliationUrl} onChange={e => { - this.updateApplicationField('affiliationUrl', e.target.value); + } value={this.state.application.affiliationUrl} onChange={e => { + this.updateApplicationField("affiliationUrl", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("provider:Terms of Use"), i18next.t("provider:Terms of Use - Tooltip"))} : { this.updateApplicationField("termsOfUse", e.target.value); - }}/> + }} /> {return false}} onChange={info => {this.handleUpload(info)}}> + beforeUpload={file => {return false;}} onChange={info => {this.handleUpload(info);}}> - - + + {Setting.getLabel(i18next.t("provider:Signup HTML"), i18next.t("provider:Signup HTML - Tooltip"))} : @@ -416,7 +416,7 @@ class ApplicationEditPage extends React.Component {
{ this.updateApplicationField("signupHtml", value); }} @@ -424,13 +424,13 @@ class ApplicationEditPage extends React.Component {
} title={i18next.t("provider:Signup HTML - Edit")} trigger="click"> { - this.updateApplicationField("signupHtml", e.target.value) - }}/> + this.updateApplicationField("signupHtml", e.target.value); + }} /> - - + + {Setting.getLabel(i18next.t("provider:Signin HTML"), i18next.t("provider:Signin HTML - Tooltip"))} : @@ -438,7 +438,7 @@ class ApplicationEditPage extends React.Component {
{ this.updateApplicationField("signinHtml", value); }} @@ -446,55 +446,55 @@ class ApplicationEditPage extends React.Component {
} title={i18next.t("provider:Signin HTML - Edit")} trigger="click"> { - this.updateApplicationField("signinHtml", e.target.value) - }}/> + this.updateApplicationField("signinHtml", e.target.value); + }} /> - - + + {Setting.getLabel(i18next.t("application:Grant types"), i18next.t("application:Grant types - Tooltip"))} : - { + this.updateApplicationField("grantTypes", value); + })} > + { + [ + {id: "authorization_code", name: "Authorization Code"}, + {id: "password", name: "Password"}, + {id: "client_credentials", name: "Client Credentials"}, + {id: "token", name: "Token"}, + {id: "id_token", name: "ID Token"}, + {id: "refresh_token", name: "Refresh Token"}, + ].map((item, index) => ) + } - - + + {Setting.getLabel(i18next.t("application:Enable SAML compress"), i18next.t("application:Enable SAML compress - Tooltip"))} : { - this.updateApplicationField('enableSamlCompress', checked); + this.updateApplicationField("enableSamlCompress", checked); }} /> - - + + {Setting.getLabel(i18next.t("application:SAML metadata"), i18next.t("application:SAML metadata - Tooltip"))} : {}} /> -
+
- - + + {Setting.getLabel(i18next.t("general:Providers"), i18next.t("general:Providers - Tooltip"))} : @@ -514,12 +514,12 @@ class ApplicationEditPage extends React.Component { table={this.state.application.providers} providers={this.state.providers} application={this.state.application} - onUpdateTable={(value) => { this.updateApplicationField('providers', value)}} + onUpdateTable={(value) => {this.updateApplicationField("providers", value);}} /> - - + + {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} : { @@ -528,22 +528,22 @@ class ApplicationEditPage extends React.Component { { !this.state.application.enableSignUp ? null : ( - - + + {Setting.getLabel(i18next.t("application:Signup items"), i18next.t("application:Signup items - Tooltip"))} : { this.updateApplicationField('signupItems', value)}} + onUpdateTable={(value) => {this.updateApplicationField("signupItems", value);}} /> ) } - - + + {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} : { @@ -551,13 +551,13 @@ class ApplicationEditPage extends React.Component { } - ) + ); } renderSignupSigninPreview() { 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`; - let maskStyle = {position: 'absolute', top: '0px', left: '0px', zIndex: 10, height: '100%', width: '100%', background: 'rgba(0,0,0,0.4)'}; + let maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"}; if (!this.state.application.enablePassword) { signUpUrl = signInUrl.replace("/login/oauth/authorize", "/signup/oauth/authorize"); } @@ -572,7 +572,7 @@ class ApplicationEditPage extends React.Component { > {i18next.t("application:Copy signup page URL")} -
+
{ this.state.application.enablePassword ? ( @@ -592,19 +592,19 @@ class ApplicationEditPage extends React.Component { > {i18next.t("application:Copy signin page URL")} -
+
- ) + ); } renderPromptPreview() { let promptUrl = `/prompt/${this.state.application.name}`; - let maskStyle = {position: 'absolute', top: '0px', left: '0px', zIndex: 10, height: '100%', width: '100%', background: 'rgba(0,0,0,0.4)'}; + let maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"}; return (
-
+
- ) + ); } submitApplicationEdit(willExist) { @@ -628,19 +628,19 @@ class ApplicationEditPage extends React.Component { ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application) .then((res) => { if (res.msg === "") { - Setting.showMessage("success", `Successfully saved`); + Setting.showMessage("success", "Successfully saved"); this.setState({ applicationName: this.state.application.name, }); if (willExist) { - this.props.history.push(`/applications`); + this.props.history.push("/applications"); } else { this.props.history.push(`/applications/${this.state.application.name}`); } } else { Setting.showMessage("error", res.msg); - this.updateApplicationField('name', this.state.applicationName); + this.updateApplicationField("name", this.state.applicationName); } }) .catch(error => { @@ -651,7 +651,7 @@ class ApplicationEditPage extends React.Component { deleteApplication() { ApplicationBackend.deleteApplication(this.state.application) .then(() => { - this.props.history.push(`/applications`); + this.props.history.push("/applications"); }) .catch(error => { Setting.showMessage("error", `Application failed to delete: ${error}`); @@ -661,15 +661,15 @@ class ApplicationEditPage extends React.Component { render() { return (
- { - this.state.application !== null ? this.renderApplication() : null - } -
- - - {this.state.mode === "add" ? : null} + { + this.state.application !== null ? this.renderApplication() : null + } +
+ + + {this.state.mode === "add" ? : null} +
-
); } } diff --git a/web/src/ApplicationListPage.js b/web/src/ApplicationListPage.js index d547c20b..12e83b21 100644 --- a/web/src/ApplicationListPage.js +++ b/web/src/ApplicationListPage.js @@ -14,7 +14,7 @@ import React from "react"; import {Link} from "react-router-dom"; -import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from 'antd'; +import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from "antd"; import {EditOutlined} from "@ant-design/icons"; import moment from "moment"; import * as Setting from "./Setting"; @@ -53,15 +53,15 @@ class ApplicationListPage extends BaseListPage { redirectUris: ["http://localhost:9000/callback"], tokenFormat: "JWT", expireInHours: 24 * 7, - } + }; } addApplication() { const newApplication = this.newApplication(); ApplicationBackend.addApplication(newApplication) .then((res) => { - this.props.history.push({pathname: `/applications/${newApplication.name}`, mode: "add"}); - } + this.props.history.push({pathname: `/applications/${newApplication.name}`, mode: "add"}); + } ) .catch(error => { Setting.showMessage("error", `Application failed to add: ${error}`); @@ -71,12 +71,12 @@ class ApplicationListPage extends BaseListPage { deleteApplication(i) { ApplicationBackend.deleteApplication(this.state.data[i]) .then((res) => { - Setting.showMessage("success", `Application deleted successfully`); - this.setState({ - data: Setting.deleteRow(this.state.data, i), - pagination: {total: this.state.pagination.total - 1}, - }); - } + Setting.showMessage("success", "Application deleted successfully"); + this.setState({ + data: Setting.deleteRow(this.state.data, i), + pagination: {total: this.state.pagination.total - 1}, + }); + } ) .catch(error => { Setting.showMessage("error", `Application failed to delete: ${error}`); @@ -87,25 +87,25 @@ class ApplicationListPage extends BaseListPage { const columns = [ { title: i18next.t("general:Name"), - dataIndex: 'name', - key: 'name', - width: '150px', - fixed: 'left', + dataIndex: "name", + key: "name", + width: "150px", + fixed: "left", sorter: true, - ...this.getColumnSearchProps('name'), + ...this.getColumnSearchProps("name"), render: (text, record, index) => { return ( {text} - ) + ); } }, { title: i18next.t("general:Created time"), - dataIndex: 'createdTime', - key: 'createdTime', - width: '160px', + dataIndex: "createdTime", + key: "createdTime", + width: "160px", sorter: true, render: (text, record, index) => { return Setting.getFormattedDate(text); @@ -113,45 +113,45 @@ class ApplicationListPage extends BaseListPage { }, { title: i18next.t("general:Display name"), - dataIndex: 'displayName', - key: 'displayName', + dataIndex: "displayName", + key: "displayName", // width: '100px', sorter: true, - ...this.getColumnSearchProps('displayName'), + ...this.getColumnSearchProps("displayName"), }, { - title: 'Logo', - dataIndex: 'logo', - key: 'logo', - width: '200px', + title: "Logo", + dataIndex: "logo", + key: "logo", + width: "200px", render: (text, record, index) => { return ( {text} - ) + ); } }, { title: i18next.t("general:Organization"), - dataIndex: 'organization', - key: 'organization', - width: '150px', + dataIndex: "organization", + key: "organization", + width: "150px", sorter: true, - ...this.getColumnSearchProps('organization'), + ...this.getColumnSearchProps("organization"), render: (text, record, index) => { return ( {text} - ) + ); } }, { title: i18next.t("general:Providers"), - dataIndex: 'providers', - key: 'providers', - ...this.getColumnSearchProps('providers'), + dataIndex: "providers", + key: "providers", + ...this.getColumnSearchProps("providers"), // width: '600px', render: (text, record, index) => { const providers = text; @@ -179,11 +179,11 @@ class ApplicationListPage extends BaseListPage { - ) + ); }} /> - ) - } + ); + }; return (
@@ -200,28 +200,28 @@ class ApplicationListPage extends BaseListPage {
- ) + ); }, }, { title: i18next.t("general:Action"), - dataIndex: '', - key: 'op', - width: '170px', + dataIndex: "", + key: "op", + width: "170px", fixed: (Setting.isMobile()) ? "false" : "right", render: (text, record, index) => { return (
- + this.deleteApplication(index)} disabled={record.name === "app-built-in"} > - +
- ) + ); } }, ]; @@ -235,15 +235,15 @@ class ApplicationListPage extends BaseListPage { return (
-
( -
- {i18next.t("general:Applications")}     - -
- )} - loading={this.state.loading} - onChange={this.handleTableChange} +
( +
+ {i18next.t("general:Applications")}     + +
+ )} + loading={this.state.loading} + onChange={this.handleTableChange} /> ); @@ -252,7 +252,7 @@ class ApplicationListPage extends BaseListPage { fetch = (params = {}) => { let field = params.searchedColumn, value = params.searchText; let sortField = params.sortField, sortOrder = params.sortOrder; - this.setState({ loading: true }); + this.setState({loading: true}); ApplicationBackend.getApplications("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder) .then((res) => { if (res.status === "ok") { diff --git a/web/src/BaseListPage.js b/web/src/BaseListPage.js index 0875f446..55f41a81 100644 --- a/web/src/BaseListPage.js +++ b/web/src/BaseListPage.js @@ -18,121 +18,121 @@ import {SearchOutlined} from "@ant-design/icons"; import Highlighter from "react-highlight-words"; class BaseListPage extends React.Component { - constructor(props) { - super(props); - this.state = { - classes: props, - data: [], - pagination: { - current: 1, - pageSize: 10, - }, - loading: false, - searchText: '', - searchedColumn: '', - }; - } + constructor(props) { + super(props); + this.state = { + classes: props, + data: [], + pagination: { + current: 1, + pageSize: 10, + }, + loading: false, + searchText: "", + searchedColumn: "", + }; + } - UNSAFE_componentWillMount() { - const { pagination } = this.state; - this.fetch({ pagination }); - } + UNSAFE_componentWillMount() { + const {pagination} = this.state; + this.fetch({pagination}); + } - getColumnSearchProps = dataIndex => ({ - filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( -
- { - this.searchInput = node; - }} - placeholder={`Search ${dataIndex}`} - value={selectedKeys[0]} - onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])} - onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)} - style={{ marginBottom: 8, display: 'block' }} - /> - - - - - -
- ), - filterIcon: filtered => , - onFilter: (value, record) => - record[dataIndex] - ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) - : '', - onFilterDropdownVisibleChange: visible => { - if (visible) { - setTimeout(() => this.searchInput.select(), 100); - } - }, - render: text => - this.state.searchedColumn === dataIndex ? ( - - ) : ( - text - ), - }); + getColumnSearchProps = dataIndex => ({ + filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => ( +
+ { + this.searchInput = node; + }} + placeholder={`Search ${dataIndex}`} + value={selectedKeys[0]} + onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])} + onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)} + style={{marginBottom: 8, display: "block"}} + /> + + + + + +
+ ), + filterIcon: filtered => , + onFilter: (value, record) => + record[dataIndex] + ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) + : "", + onFilterDropdownVisibleChange: visible => { + if (visible) { + setTimeout(() => this.searchInput.select(), 100); + } + }, + render: text => + this.state.searchedColumn === dataIndex ? ( + + ) : ( + text + ), + }); - handleSearch = (selectedKeys, confirm, dataIndex) => { - this.fetch({searchText: selectedKeys[0], searchedColumn: dataIndex, pagination: this.state.pagination}); - }; + handleSearch = (selectedKeys, confirm, dataIndex) => { + this.fetch({searchText: selectedKeys[0], searchedColumn: dataIndex, pagination: this.state.pagination}); + }; - handleReset = clearFilters => { - clearFilters(); - const { pagination } = this.state; - this.fetch({ pagination }); - }; + handleReset = clearFilters => { + clearFilters(); + const {pagination} = this.state; + this.fetch({pagination}); + }; - handleTableChange = (pagination, filters, sorter) => { - this.fetch({ - sortField: sorter.field, - sortOrder: sorter.order, - pagination, - ...filters, - searchText: this.state.searchText, - searchedColumn: this.state.searchedColumn, - }); - }; + handleTableChange = (pagination, filters, sorter) => { + this.fetch({ + sortField: sorter.field, + sortOrder: sorter.order, + pagination, + ...filters, + searchText: this.state.searchText, + searchedColumn: this.state.searchedColumn, + }); + }; - render() { - return ( -
- { - this.renderTable(this.state.data) - } -
- ); - } + render() { + return ( +
+ { + this.renderTable(this.state.data) + } +
+ ); + } } -export default BaseListPage; \ No newline at end of file +export default BaseListPage; diff --git a/web/src/CertEditPage.js b/web/src/CertEditPage.js index 856c7aa2..d34d5d3a 100644 --- a/web/src/CertEditPage.js +++ b/web/src/CertEditPage.js @@ -13,15 +13,15 @@ // limitations under the License. import React from "react"; -import {Button, Card, Col, Input, InputNumber, Row, Select} from 'antd'; +import {Button, Card, Col, Input, InputNumber, Row, Select} from "antd"; import * as CertBackend from "./backend/CertBackend"; import * as Setting from "./Setting"; import i18next from "i18next"; import copy from "copy-to-clipboard"; import FileSaver from "file-saver"; -const { Option } = Select; -const { TextArea } = Input; +const {Option} = Select; +const {TextArea} = Input; class CertEditPage extends React.Component { constructor(props) { @@ -70,104 +70,104 @@ class CertEditPage extends React.Component {
{this.state.mode === "add" ? i18next.t("cert:New Cert") : i18next.t("cert:Edit Cert")}     - - {this.state.mode === "add" ? : null} + + {this.state.mode === "add" ? : null}
- } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner"> - - + } style={(Setting.isMobile())? {margin: "5px"}:{}} type="inner"> + + {Setting.getLabel(i18next.t("general:Name"), i18next.t("general:Name - Tooltip"))} : { - this.updateCertField('name', e.target.value); + this.updateCertField("name", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} : { - this.updateCertField('displayName', e.target.value); + this.updateCertField("displayName", e.target.value); }} /> - - + + {Setting.getLabel(i18next.t("cert:Scope"), i18next.t("cert:Scope - Tooltip"))} : - { + this.updateCertField("scope", value); })}> { [ - {id: 'JWT', name: 'JWT'}, + {id: "JWT", name: "JWT"}, ].map((item, index) => ) } - - + + {Setting.getLabel(i18next.t("cert:Type"), i18next.t("cert:Type - Tooltip"))} : - { + this.updateCertField("type", value); })}> { [ - {id: 'x509', name: 'x509'}, + {id: "x509", name: "x509"}, ].map((item, index) => ) } - - + + {Setting.getLabel(i18next.t("cert:Crypto algorithm"), i18next.t("cert:Crypto algorithm - Tooltip"))} : - { + this.updateCertField("cryptoAlgorithm", value); })}> { [ - {id: 'RS256', name: 'RS256'}, + {id: "RS256", name: "RS256"}, ].map((item, index) => ) } - - + + {Setting.getLabel(i18next.t("cert:Bit size"), i18next.t("cert:Bit size - Tooltip"))} : { - this.updateCertField('bitSize', value); + this.updateCertField("bitSize", value); }} /> - - + + {Setting.getLabel(i18next.t("cert:Expire in years"), i18next.t("cert:Expire in years - Tooltip"))} : { - this.updateCertField('expireInYears', value); + this.updateCertField("expireInYears", value); }} /> - - + + {Setting.getLabel(i18next.t("cert:Public key"), i18next.t("cert:Public key - Tooltip"))} : -