update sso page ui

This commit is contained in:
medcl 2020-11-18 21:45:22 +08:00
parent 6da49c1f40
commit 1e4d11349c
4 changed files with 100 additions and 125 deletions

View File

@ -215,6 +215,10 @@ export default {
'app.settings.global.data_path':"Data Path",
'app.settings.global.log_path':"Log Path",
'app.settings.security.auth2factor_enabled':"Enable 2FA(two-factor) Authentication",
'app.settings.security.audit_enabled':"Enable Audit Logging",
'app.settings.menuMap.basic': 'Basic Settings',
'app.settings.menuMap.security': 'Security Settings',
'app.settings.menuMap.binding': 'Account Binding',

View File

@ -219,10 +219,14 @@ export default {
'app.settings.global.site_name':"站点名称",
'app.settings.global.domain':"站点域名",
'app.settings.global.listen_addr':"监听地址",
'app.settings.global.is_tls':"是否开启 TLS",
'app.settings.global.is_tls':"开启 TLS",
'app.settings.global.data_path':"数据目录",
'app.settings.global.log_path':"日志目录",
'app.settings.security.auth2factor_enabled':"开启双因子身份认证",
'app.settings.security.audit_enabled':"开启审计日志",
'app.settings.menuMap.basic': '基本设置',
'app.settings.menuMap.security': '安全设置',
'app.settings.menuMap.binding': '账号绑定',

View File

@ -96,7 +96,7 @@ class Global extends Component {
rules: [
{
required: true,
message: "勾选状态",
message: formatMessage({id: 'app.settings.global.is_tls-message'}, {}),
},
],
})(

View File

@ -1,6 +1,8 @@
import React, {Component, Fragment} from 'react';
import {connect} from 'dva';
import {Card, Form, Input, Select, Button, message, Divider, Drawer, Descriptions} from 'antd';
import {Card, Form, Input, Select,Switch, Button, message, Divider, Drawer, Descriptions} from 'antd';
import { Table, Tag } from 'antd';
import { Icon } from 'antd';
const {Option} = Select;
import {formatMessage, FormattedMessage} from 'umi/locale';
@ -60,6 +62,71 @@ class General extends Component {
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} />);
}
generalSettings = () => {
const {
form: {getFieldDecorator},
@ -75,140 +142,40 @@ class General extends Component {
layout = "vertical"
hideRequiredMark >
<Form.Item label = {formatMessage({id: 'app.settings.security.auth2factor_enabled'})}>
{getFieldDecorator('auth2factor_enabled', {
initialValue: true,
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.security.auth2factor_enabled-message'}, {}),
},
],
})(
<Switch defaultChecked onChange={()=>{}} />
)}
</Form.Item>
< FormItem
label = {formatMessage({id: 'app.settings.security.auth2factor_enabled'})} >
{getFieldDecorator('profile',
label = {formatMessage({id: 'app.settings.security.audit_enabled'})} >
{getFieldDecorator('audit_enabled',
{
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.basic.profile-message'}, {}),
message: formatMessage({id: 'app.settings.security.audit_enabled-message'}, {}),
},
],
}
)
( < Input /> )
(
<Switch defaultChecked onChange={()=>{}} />
)
}
</FormItem>
< FormItem
label = {formatMessage({id: 'app.settings.basic.email'})} >
{getFieldDecorator('email',
{
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.basic.email-message'}, {}),
},
],
}
)
( < Input / >
)
}
<
/FormItem>
< FormItem
label = {formatMessage({id: 'app.settings.basic.nickname'})} >
{getFieldDecorator('name',
{
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.basic.nickname-message'}, {}),
},
],
}
)
( < Input / >
)
}
<
/FormItem>
< FormItem
label = {formatMessage({id: 'app.settings.basic.profile'})} >
{getFieldDecorator('profile',
{
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.basic.profile-message'}, {}),
},
],
}
)
(
< Input.TextArea
placeholder = {formatMessage({id: 'app.settings.basic.profile-placeholder'})}
rows = {4}
/>
)
}
<
/FormItem>
< FormItem
label = {formatMessage({id: 'app.settings.basic.country'})} >
{getFieldDecorator('country',
{
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.basic.country-message'}, {}),
},
],
}
)
(
< Select
style = {
{
maxWidth: 220
}
}>
<
Option
value = "China" > 中国 < /Option>
< /Select>
)
}
<
/FormItem>
< FormItem
label = {formatMessage({id: 'app.settings.basic.address'})} >
{getFieldDecorator('address',
{
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.basic.address-message'}, {}),
},
],
}
)
( < Input / >
)
}
<
/FormItem>
< FormItem
label = {formatMessage({id: 'app.settings.basic.phone'})} >
{getFieldDecorator('phone',
{
rules: [
{
required: true,
message: formatMessage({id: 'app.settings.basic.phone-message'}, {}),
},
// { validator: validatorPhone },
],
}
)
( < PhoneView / >
)
}
<
/FormItem>
< Button
type = "primary" >
< FormattedMessage
@ -233,7 +200,7 @@ class General extends Component {
const {operationkey} = this.state;
const contentList = {
tab1: ( < div > {this.generalSettings()} < /div>),
tab2: ( < div > SSO 集成 < /div>),
tab2: ( < div > {this.ssoSettings()}< /div>),
tab3: ( < div > 角色管理 < /div>),
tab4: ( < div > 用户管理 < /div>),
tab5: ( < div > 证书管理 < /div>),