floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update security pages

This commit is contained in:
medcl 2020-11-19 21:27:46 +08:00
parent dee9cef086
commit 5cc41c39b6
8 changed files with 411 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/config/router.config.js
View File

@ -259,12 +259,33 @@ export default [
}, { }, {
path: '/settings/security', path: '/settings/security',
name: 'security', name: 'security',
component: './Settings/Security/Base',
hideChildrenInMenu: true, hideChildrenInMenu: true,
routes: [ routes: [
{ {
path: '/settings/security', path: '/settings/security',
name: 'security', redirect: '/settings/security/general',
component: './Settings/Security/General', },
{
path: '/settings/security/general',
name: 'general',
component: './Settings/Security/General',
}, {
path: '/settings/security/sso',
name: 'sso',
component: './Settings/Security/SSO',
}, {
path: '/settings/security/roles',
name: 'roles',
component: './Settings/Security/Roles',
}, {
path: '/settings/security/users',
name: 'users',
component: './Settings/Security/Users',
}, {
path: '/settings/security/certs',
name: 'certs',
component: './Settings/Security/Certs',
}, },
] ]
}, { }, {

4
web/src/pages/Settings/Logs/Base.js
View File

@ -15,7 +15,7 @@ const {TextArea} = Input;
@connect() @connect()
class Overview extends Component { class Base extends Component {
handleTabChange = key => { handleTabChange = key => {
const { match,children } = this.props; const { match,children } = this.props;
switch (key) { switch (key) {
@ -70,4 +70,4 @@ class Overview extends Component {
} }
} }
export default Overview; export default Base;

80
web/src/pages/Settings/Security/Base.js Normal file
View File

@ -0,0 +1,80 @@
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import React, {Component, Fragment} from 'react';
import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
import {formatMessage} from 'umi/locale';
const {Option} = Select;
const FormItem = Form.Item;
const {TextArea} = Input;
@connect()
class Base extends Component {
handleTabChange = key => {
const { match,children } = this.props;
switch (key) {
case 'general':
router.push(`${match.url}/general`);
break;
case 'sso':
router.push(`${match.url}/sso`);
break;
case 'roles':
router.push(`${match.url}/roles`);
break;
case 'users':
router.push(`${match.url}/users`);
break;
case 'certs':
router.push(`${match.url}/certs`);
break;
default:
break;
}
}
render() {
const tabList = [
{
key: 'general',
tab: '基础设置',
},
{
key: 'sso',
tab: '单点登录',
},
{
key: 'roles',
tab: '角色管理',
},
{
key: 'users',
tab: '用户管理',
},
{
key: 'certs',
tab: '证书管理',
}
];
const { match, children, location } = this.props;
return (
<PageHeaderWrapper
tabList={tabList}
tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
onTabChange={this.handleTabChange}
>
{children}
</PageHeaderWrapper>
);
}
}
export default Base;

26
web/src/pages/Settings/Security/Certs.js Normal file
View File

@ -0,0 +1,26 @@
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import React, {Component, Fragment} from 'react';
import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
import {formatMessage} from 'umi/locale';
const {Option} = Select;
const FormItem = Form.Item;
const {TextArea} = Input;
@connect()
class Certs extends Component {
render() {
return (
<Card>Certs</Card>
);
}
}
export default Certs;

345
web/src/pages/Settings/Security/General.js
View File

@ -1,305 +1,88 @@
import {formatMessage, FormattedMessage} from 'umi/locale';
import React, {Component, Fragment} from 'react'; import React, {Component, Fragment} from 'react';
import {connect} from 'dva'; import {connect} from 'dva';
import {Card, Form, Input, Select,Switch, Button, message, Divider, Drawer, Descriptions} from 'antd'; import {Card, Form, Input, Select,Switch, Button,Row, message,Col, Divider, Drawer, Descriptions} from 'antd';
import { Table, Tag } from 'antd'; import { Table, Tag } from 'antd';
import { Icon } from 'antd'; import { Icon } from 'antd';
const {Option} = Select; import router from 'umi/router';
import {formatMessage, FormattedMessage} from 'umi/locale'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './General.less'; import styles from './General.less';
import PhoneView from "../../Account/Settings/PhoneView";
const {Option} = Select;
const FormItem = Form.Item; const FormItem = Form.Item;
const {TextArea} = Input; const {TextArea} = Input;
import {Row, Col} from 'antd';
const operationTabList = [ @connect()
{
key: 'tab1',
tab: '基本设置',
},
{
key: 'tab2',
tab: 'SSO 集成',
},
{
key: 'tab3',
tab: '角色管理',
},
{
key: 'tab4',
tab: '用户管理',
},
{
key: 'tab5',
tab: '证书管理',
}
];
// @connect(({logstash,loading }) => ({
// data: logstash.logstash,
// loading: loading.models.logstash,
// submitting: loading.effects['logstash/submitLogstashConfig'],
// }))
@Form.create()
class General extends Component { class General extends Component {
state = {
operationkey: 'tab1',
snapshotVisible: false,
repVisible: false,
};
componentDidMount() { render() {
// message.loading('数据加载中..', 'initdata');
// const { dispatch } = this.props;
// dispatch({
// type: 'logstash/queryInitialLogstashConfig',
// });
}
onOperationTabChange = key => {
this.setState({operationkey: key});
};
ssoSettings() {
const columns = [
{
title: 'ID',
dataIndex: 'key',
key: 'key',
render: text => <a>{text}</a>,
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
},
{
title: '启用',
key: 'enabled',
dataIndex: 'enabled',
render: text => <Icon type="check-square" />,
}, {
title: '最后更新时间',
key: 'modify_time',
dataIndex: 'modify_time',
}, {
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
},
{
title: '操作',
key: 'action',
render: (text, record) => (
<span>
<a>修改</a>
<Divider type="vertical" />
<a>删除</a>
</span>
),
},
];
const data = [
{
key: '1',
name: 'github',
type: "OAuth2",
enabled: true,
modify_time: "Mar 01, 2020",
create_time: "Oct 19, 2019",
},{
key: '2',
name: 'okta',
type: "OAuth2",
enabled: true,
modify_time: "Mar 02, 2020",
create_time: "Oct 29, 2019",
},
];
return (<Table columns={columns} dataSource={data} />);
}
userSettings() {
const columns = [
{
title: 'ID',
dataIndex: 'key',
key: 'key',
render: text => <a>{text}</a>,
},
{
title: '用户名',
dataIndex: 'user_name',
key: 'user_name',
},
{
title: '电子邮件地址',
dataIndex: 'email',
key: 'email',
},
{
title: '已激活',
key: 'enabled',
dataIndex: 'enabled',
render: text => <Icon type="check-square" />,
}, {
title: '管理员',
key: 'is_admin',
dataIndex: 'is_admin',
render: (text, record) => {
if (record.is_admin){
return <Icon type="check-square" />
}else{
return <Icon type="border" />
}
},
}, {
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
},{
title: '上次登录',
key: 'last_login_time',
dataIndex: 'last_login_time',
},
{
title: '操作',
key: 'action',
render: (text, record) => (
<span>
<a>修改</a>
<Divider type="vertical" />
<a>删除</a>
</span>
),
},
];
const data = [
{
key: '1',
user_name: 'admin',
email: "admin@infini.ltd",
enabled: true,
is_admin: true,
create_time: "Oct 19, 2019",
last_login_time: "Mar 01, 2020",
}, {
key: '2',
user_name: 'user',
email: "user@infini.ltd",
enabled: true,
is_admin: false,
create_time: "Oct 19, 2019",
last_login_time: "Mar 01, 2020",
},
];
return (<Table columns={columns} dataSource={data} />);
}
generalSettings = () => {
const { const {
form: {getFieldDecorator}, form: {getFieldDecorator},
} = this.props; } = this.props;
return ( return (
< div > <Card>
< Row <div>
type = "flex" <Row
justify = "end" > type = "flex"
< Col justify = "end" >
span = {16} > <Col
< div > < Form span = {16} >
layout = "vertical" <div>
hideRequiredMark > <Form layout = "vertical"
hideRequiredMark >
<Form.Item label = {formatMessage({id: 'app.settings.security.auth2factor_enabled'})}> <Form.Item label = {formatMessage({id: 'app.settings.security.auth2factor_enabled'})}>
{getFieldDecorator('auth2factor_enabled', { {getFieldDecorator('auth2factor_enabled', {
initialValue: true, initialValue: true,
rules: [ rules: [
{ {
required: true, required: true,
message: formatMessage({id: 'app.settings.security.auth2factor_enabled-message'}, {}), message: formatMessage({id: 'app.settings.security.auth2factor_enabled-message'}, {}),
}, },
], ],
})( })(
<Switch defaultChecked onChange={()=>{}} /> <Switch defaultChecked onChange={()=>{}} />
)} )}
</Form.Item> </Form.Item>
< FormItem <FormItem label = {formatMessage({id: 'app.settings.security.audit_enabled'})} >
label = {formatMessage({id: 'app.settings.security.audit_enabled'})} > {getFieldDecorator('audit_enabled',
{getFieldDecorator('audit_enabled', {
{ rules: [
rules: [ {
{ required: true,
required: true, message: formatMessage({id: 'app.settings.security.audit_enabled-message'}, {}),
message: formatMessage({id: 'app.settings.security.audit_enabled-message'}, {}), },
}, ],
], }
} )
) (
( <Switch defaultChecked onChange={()=>{}} />
<Switch defaultChecked onChange={()=>{}} /> )
) }
} </FormItem>
</FormItem>
< Button <Button
type = "primary" > type = "primary" >
< FormattedMessage <FormattedMessage
id = "app.settings.security.update" id = "app.settings.security.update"
defaultMessage = "Update Setting" defaultMessage = "Update Setting" />
/ > </Button>
< /Button> </Form>
< /Form></ </div>
div > </Col>
< /Col> <Col span = {8} ></Col>
< Col </Row>
span = {8} > </div></Card>
);
< /Col>
< /Row>
< /div>
)
;
};
render() {
const {operationkey} = this.state;
const contentList = {
tab1: ( < div > {this.generalSettings()} < /div>),
tab2: ( < div > {this.ssoSettings()}< /div>),
tab3: ( < div > 角色管理 < /div>),
tab4: ( < div > {this.userSettings()} < /div>),
tab5: ( < div > 证书管理 < /div>),
}
;
return (
< Fragment >
< Card
className = {styles.tabsCard}
bordered = {false}
tabList = {operationTabList}
onTabChange = {this.onOperationTabChange}
>
{contentList[operationkey]}
< /Card>
< /Fragment>
)
;
} }
} }
export default General; export default Form.create()(General);

26
web/src/pages/Settings/Security/Roles.js Normal file
View File

@ -0,0 +1,26 @@
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import React, {Component, Fragment} from 'react';
import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
import {formatMessage} from 'umi/locale';
const {Option} = Select;
const FormItem = Form.Item;
const {TextArea} = Input;
@connect()
class Roles extends Component {
render() {
return (
<Card>Roles</Card>
);
}
}
export default Roles;

87
web/src/pages/Settings/Security/SSO.js Normal file
View File

@ -0,0 +1,87 @@
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import React, {Component, Fragment} from 'react';
import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
import {formatMessage} from 'umi/locale';
const {Option} = Select;
const FormItem = Form.Item;
const {TextArea} = Input;
const columns = [
{
title: 'ID',
dataIndex: 'key',
key: 'key',
render: text => <a>{text}</a>,
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
},
{
title: '启用',
key: 'enabled',
dataIndex: 'enabled',
render: text => <Icon type="check-square" />,
}, {
title: '最后更新时间',
key: 'modify_time',
dataIndex: 'modify_time',
}, {
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
},
{
title: '操作',
key: 'action',
render: (text, record) => (
<span>
<a>修改</a>
<Divider type="vertical" />
<a>删除</a>
</span>
),
},
];
const data = [
{
key: '1',
name: 'github',
type: "OAuth2",
enabled: true,
modify_time: "Mar 01, 2020",
create_time: "Oct 19, 2019",
},{
key: '2',
name: 'okta',
type: "OAuth2",
enabled: true,
modify_time: "Mar 02, 2020",
create_time: "Oct 29, 2019",
},
];
@connect()
class SSO extends Component {
render() {
return (
<Card><Table columns={columns} dataSource={data} /></Card>
);
}
}
export default SSO;

102
web/src/pages/Settings/Security/Users.js Normal file
View File

@ -0,0 +1,102 @@
import router from 'umi/router';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import React, {Component, Fragment} from 'react';
import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
import {formatMessage} from 'umi/locale';
const {Option} = Select;
const FormItem = Form.Item;
const {TextArea} = Input;
const columns = [
{
title: 'ID',
dataIndex: 'key',
key: 'key',
render: text => <a>{text}</a>,
},
{
title: '用户名',
dataIndex: 'user_name',
key: 'user_name',
},
{
title: '电子邮件地址',
dataIndex: 'email',
key: 'email',
},
{
title: '已激活',
key: 'enabled',
dataIndex: 'enabled',
render: text => <Icon type="check-square" />,
}, {
title: '管理员',
key: 'is_admin',
dataIndex: 'is_admin',
render: (text, record) => {
if (record.is_admin){
return <Icon type="check-square" />
}else{
return <Icon type="border" />
}
},
}, {
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
},{
title: '上次登录',
key: 'last_login_time',
dataIndex: 'last_login_time',
},
{
title: '操作',
key: 'action',
render: (text, record) => (
<span>
<a>修改</a>
<Divider type="vertical" />
<a>删除</a>
</span>
),
},
];
const data = [
{
key: '1',
user_name: 'admin',
email: "admin@infini.ltd",
enabled: true,
is_admin: true,
create_time: "Oct 19, 2019",
last_login_time: "Mar 01, 2020",
}, {
key: '2',
user_name: 'user',
email: "user@infini.ltd",
enabled: true,
is_admin: false,
create_time: "Oct 19, 2019",
last_login_time: "Mar 01, 2020",
},
];
@connect()
class Users extends Component {
render() {
return (
<Card><Table columns={columns} dataSource={data} /></Card>
);
}
}
export default Users;