Modify Role view and User View See merge request entgra/carbon-device-mgt!392merge-requests/394/merge
Dharmakeerthi Lasantha
5 years ago
commit
e61397539a
@ -0,0 +1,340 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Button, Form, Input, message, Modal, notification, Select, Tree} from "antd";
|
||||||
|
import {withConfigContext} from "../../context/ConfigContext";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const {Option} = Select;
|
||||||
|
const {TreeNode} = Tree;
|
||||||
|
|
||||||
|
class AddRole extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.config = this.props.context;
|
||||||
|
this.expandKeys = [];
|
||||||
|
this.state = {
|
||||||
|
isAddRoleModalVisible: false,
|
||||||
|
isAddPermissionModalVisible: false,
|
||||||
|
roleName: '',
|
||||||
|
users: [],
|
||||||
|
nodeList: [],
|
||||||
|
expandedKeys: [],
|
||||||
|
autoExpandParent: true,
|
||||||
|
checkedKeys: [],
|
||||||
|
isNodeList: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openAddModal = () => {
|
||||||
|
this.setState({
|
||||||
|
isAddRoleModalVisible: true
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelHandler = e => {
|
||||||
|
this.setState({
|
||||||
|
isAddRoleModalVisible: false,
|
||||||
|
isAddPermissionModalVisible: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getCheckedPermissionsList = (data) =>{
|
||||||
|
data.forEach(item => {
|
||||||
|
if (item !== null) {
|
||||||
|
this.expandKeys.push(item.resourcePath);
|
||||||
|
this.getCheckedPermissionsList(item.nodeList);
|
||||||
|
}else{
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onAddRole = e => {
|
||||||
|
this.props.form.validateFields((err, values) => {
|
||||||
|
if (!err) {
|
||||||
|
this.onConfirmAddRole(values);
|
||||||
|
}
|
||||||
|
console.log(values);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onExpand = expandedKeys => {
|
||||||
|
this.setState({
|
||||||
|
expandedKeys,
|
||||||
|
autoExpandParent: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onCheck = checkedKeys => {
|
||||||
|
this.setState({checkedKeys});
|
||||||
|
};
|
||||||
|
|
||||||
|
onConfirmAddRole = (value) => {
|
||||||
|
const roleData = {
|
||||||
|
roleName: value.roleName,
|
||||||
|
users: value.users,
|
||||||
|
};
|
||||||
|
this.setState({
|
||||||
|
roleName: value.roleName,
|
||||||
|
});
|
||||||
|
axios.post(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/roles",
|
||||||
|
roleData,
|
||||||
|
{headers: {'Content-Type': 'application-json'}}
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 201) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
this.setState({
|
||||||
|
isAddRoleModalVisible: false,
|
||||||
|
isAddPermissionModalVisible: true,
|
||||||
|
|
||||||
|
});
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully added the role.",
|
||||||
|
});
|
||||||
|
this.loadPermissionList();
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to add role.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
renderTreeNodes = (data) => {
|
||||||
|
return data.map(item => {
|
||||||
|
if (item !== null) {
|
||||||
|
if (item.hasOwnProperty("nodeList")) {
|
||||||
|
return (
|
||||||
|
<TreeNode title={item.displayName} key={item.resourcePath} dataRef={item}>
|
||||||
|
{this.renderTreeNodes(item.nodeList)}
|
||||||
|
</TreeNode>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <TreeNode key={item.resourcePath} {...item}/>;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return <TreeNode/>;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onAssignPermissions = () =>{
|
||||||
|
const roleData = {
|
||||||
|
roleName : this.state.roleName,
|
||||||
|
permissions : this.state.checkedKeys
|
||||||
|
};
|
||||||
|
axios.put(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/roles/"+ this.state.roleName,
|
||||||
|
roleData,
|
||||||
|
{headers: {'Content-Type' : 'application-json'}}
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully Updated the Permissions.",
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
isAddPermissionModalVisible : false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to add permissions.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
loadPermissionList = () => {
|
||||||
|
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt + "/roles/" + this.state.roleName + "/permissions";
|
||||||
|
|
||||||
|
axios.get(apiURL).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.getCheckedPermissionsList(res.data.data.nodeList);
|
||||||
|
this.setState({
|
||||||
|
nodeList: res.data.data.nodeList,
|
||||||
|
isNodeList: true,
|
||||||
|
expandedKeys : this.expandKeys
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description: "Error occurred while trying to load permission.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
loadUsersList = (value) => {
|
||||||
|
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt + "/users/search/usernames?filter=" + value + "&domain=Primary";
|
||||||
|
axios.get(apiURL).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
let user = JSON.parse(res.data.data);
|
||||||
|
let users = [];
|
||||||
|
for (let i = 0; i < user.length; i++) {
|
||||||
|
users.push(<Option key={user[i].username}>{user[i].username}</Option>);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
users: users
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description: "Error occurred while trying to load users.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {getFieldDecorator} = this.props.form;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<Button type="primary" icon="plus" size={"default"} onClick={this.openAddModal}
|
||||||
|
style={{marginBottom: '10px'}}>
|
||||||
|
Add Role
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
title="ADD NEW ROLE"
|
||||||
|
width="40%"
|
||||||
|
visible={this.state.isAddRoleModalVisible}
|
||||||
|
onOk={this.onAddRole}
|
||||||
|
onCancel={this.onCancelHandler}
|
||||||
|
footer={[
|
||||||
|
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key="submit" type="primary" onClick={this.onAddRole}>
|
||||||
|
Add Role
|
||||||
|
</Button>,
|
||||||
|
]}>
|
||||||
|
<div style={{alignItems: "center"}}>
|
||||||
|
<p>Create new user on IoT Server.</p>
|
||||||
|
<Form
|
||||||
|
labelCol={{span: 5}}
|
||||||
|
wrapperCol={{span: 18}}>
|
||||||
|
<Form.Item label="User Store Domain" style={{display: "block"}}>
|
||||||
|
{getFieldDecorator('userStoreDomain', {
|
||||||
|
initialValue: 'PRIMARY'
|
||||||
|
})(
|
||||||
|
<Select>
|
||||||
|
<Option key="PRIMARY">PRIMARY</Option>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="Role Name" style={{display: "block"}}>
|
||||||
|
{getFieldDecorator('roleName', {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
pattern: new RegExp("^(((?!(\\@|\\/|\\s)).){3,})*$"),
|
||||||
|
message: 'Role name should be in minimum 3 characters long and not ' +
|
||||||
|
'include any whitespaces or @ or /',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required.',
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
})(<Input/>)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="User List" style={{display: "block"}}>
|
||||||
|
{getFieldDecorator('users', {})(<Select
|
||||||
|
mode="multiple"
|
||||||
|
style={{width: '100%'}}
|
||||||
|
onSearch={this.loadUsersList}>
|
||||||
|
{this.state.users}
|
||||||
|
</Select>)}
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
title="CHANGE ROLE PERMISSION"
|
||||||
|
width="40%"
|
||||||
|
visible={this.state.isAddPermissionModalVisible}
|
||||||
|
onOk={this.onAssignPermissions}
|
||||||
|
onCancel={this.onCancelHandler}
|
||||||
|
bodyStyle={{overflowY:"scroll", maxHeight:'500px', marginLeft:'10px'}}
|
||||||
|
footer={[
|
||||||
|
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key="submit" type="primary" onClick={this.onAssignPermissions}>
|
||||||
|
Assign
|
||||||
|
</Button>,
|
||||||
|
]}>
|
||||||
|
<div style={{alignItems: "center"}}>
|
||||||
|
<div>
|
||||||
|
{(this.state.isNodeList) && (
|
||||||
|
<Tree
|
||||||
|
checkable
|
||||||
|
onExpand={this.onExpand}
|
||||||
|
expandedKeys={this.state.expandedKeys}
|
||||||
|
autoExpandParent={this.state.autoExpandParent}
|
||||||
|
onCheck={this.onCheck}
|
||||||
|
checkedKeys={this.state.checkedKeys}>
|
||||||
|
{this.renderTreeNodes(this.state.nodeList)}
|
||||||
|
</Tree>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(Form.create({name: 'add-role'})(AddRole))
|
||||||
@ -0,0 +1,428 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Divider,
|
||||||
|
Form,
|
||||||
|
Icon,
|
||||||
|
Input,
|
||||||
|
message,
|
||||||
|
Modal,
|
||||||
|
notification,
|
||||||
|
Popconfirm,
|
||||||
|
Select,
|
||||||
|
Tooltip, Tree,
|
||||||
|
Typography
|
||||||
|
} from "antd";
|
||||||
|
import axios from "axios";
|
||||||
|
import {withConfigContext} from "../../context/ConfigContext";
|
||||||
|
const { Option } = Select;
|
||||||
|
const {Text} = Typography;
|
||||||
|
const { TreeNode } = Tree;
|
||||||
|
|
||||||
|
class RoleAction extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.config = this.props.context;
|
||||||
|
this.selected = [];
|
||||||
|
this.expandKeys = [];
|
||||||
|
this.state = {
|
||||||
|
roleData: [],
|
||||||
|
nodeList : [],
|
||||||
|
isNodeList: false,
|
||||||
|
users : [],
|
||||||
|
isEditRoleModalVisible: false,
|
||||||
|
isEditPermissionModalVisible: false,
|
||||||
|
expandedKeys: [],
|
||||||
|
autoExpandParent: true,
|
||||||
|
checkedKeys: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
openEditRoleModal = () =>{
|
||||||
|
let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/roles/"+ this.props.data;
|
||||||
|
|
||||||
|
axios.get(apiUrl).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.setState({
|
||||||
|
roleData : res.data.data,
|
||||||
|
isEditRoleModalVisible: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:"Error occurred while trying to load role.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
openEditPermissionModal =()=>{
|
||||||
|
this.loadPermissionList();
|
||||||
|
this.setState({
|
||||||
|
isEditPermissionModalVisible: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
loadPermissionList = () => {
|
||||||
|
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt + "/roles/"+this.props.data+"/permissions";
|
||||||
|
|
||||||
|
axios.get(apiURL).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.getCheckedPermissions(res.data.data.nodeList);
|
||||||
|
this.setState({
|
||||||
|
nodeList : res.data.data.nodeList,
|
||||||
|
isNodeList: true,
|
||||||
|
checkedKeys : this.selected,
|
||||||
|
expandedKeys : this.expandKeys
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:"Error occurred while trying to load permission.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
getCheckedPermissions = (data) =>{
|
||||||
|
data.forEach(item => {
|
||||||
|
if (item !== null) {
|
||||||
|
this.expandKeys.push(item.resourcePath);
|
||||||
|
if (item.isSelected) {
|
||||||
|
this.selected.push(item.resourcePath);
|
||||||
|
}
|
||||||
|
this.getCheckedPermissions(item.nodeList);
|
||||||
|
}else{
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onExpand = expandedKeys => {
|
||||||
|
this.setState({
|
||||||
|
expandedKeys,
|
||||||
|
autoExpandParent: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onCheck = checkedKeys => {
|
||||||
|
this.setState({checkedKeys});
|
||||||
|
};
|
||||||
|
|
||||||
|
renderTreeNodes = (data) => {
|
||||||
|
return data.map(item => {
|
||||||
|
if (item !== null) {
|
||||||
|
if (item.hasOwnProperty("nodeList")) {
|
||||||
|
return (
|
||||||
|
<TreeNode title={item.displayName} key={item.resourcePath} dataRef={item}>
|
||||||
|
{this.renderTreeNodes(item.nodeList)}
|
||||||
|
</TreeNode>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <TreeNode key={item.resourcePath} {...item}/>;
|
||||||
|
} else{
|
||||||
|
return <TreeNode/>;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onUpdateRole = e => {
|
||||||
|
this.props.form.validateFields((err, values) => {
|
||||||
|
if (!err) {
|
||||||
|
this.onConfirmUpdateRole(values);
|
||||||
|
}
|
||||||
|
console.log(values);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelHandler = e =>{
|
||||||
|
this.setState({
|
||||||
|
isEditRoleModalVisible: false,
|
||||||
|
isEditPermissionModalVisible:false,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
onConfirmUpdateRole = (value) =>{
|
||||||
|
const roleData = {
|
||||||
|
roleName : value.roleName,
|
||||||
|
users : value.users,
|
||||||
|
};
|
||||||
|
axios.put(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/roles/"+ this.props.data,
|
||||||
|
roleData,
|
||||||
|
{headers: {'Content-Type' : 'application-json'}}
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
this.setState({
|
||||||
|
isEditRoleModalVisible: false,
|
||||||
|
});
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully Updated the role.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to add role.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onAssignPermission = () =>{
|
||||||
|
const roleData = {
|
||||||
|
roleName : this.props.data,
|
||||||
|
permissions : this.state.checkedKeys
|
||||||
|
};
|
||||||
|
axios.put(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/roles/"+ this.props.data,
|
||||||
|
roleData,
|
||||||
|
{headers: {'Content-Type' : 'application-json'}}
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully Updated the Permissions.",
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
isEditPermissionModalVisible : false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to add permissions.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
loadUsersList = (value) => {
|
||||||
|
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt + "/users/search/usernames?filter="+value+"&domain=Primary";
|
||||||
|
axios.get(apiURL).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
let user = JSON.parse(res.data.data);
|
||||||
|
let users = [];
|
||||||
|
for(let i=0; i<user.length; i++){
|
||||||
|
users.push(<Option key={user[i].username}>{user[i].username}</Option>);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
users : users
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:"Error occurred while trying to load users.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
onDeleteRole = () => {
|
||||||
|
axios.delete(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/roles/" + this.props.data,
|
||||||
|
{headers: {'Content-Type': 'application/json'}}
|
||||||
|
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully deleted the Role.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to delete role.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const isAdminRole = this.props.data ==="admin";
|
||||||
|
const { getFieldDecorator } = this.props.form;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{display:isAdminRole ? "none" : "inline"}}>
|
||||||
|
<Tooltip placement="top" title={"Edit Role"}>
|
||||||
|
<a><Icon type="edit" onClick={this.openEditRoleModal}/></a>
|
||||||
|
</Tooltip>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<Tooltip placement="top" title={"Edit Permissions"}>
|
||||||
|
<a><Icon type="file-add" onClick={this.openEditPermissionModal}/></a>
|
||||||
|
</Tooltip>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<Tooltip placement="bottom" title={"Remove Role"}>
|
||||||
|
<Popconfirm
|
||||||
|
placement="top"
|
||||||
|
title={"Are you sure?"}
|
||||||
|
onConfirm={this.onDeleteRole}
|
||||||
|
okText="Ok"
|
||||||
|
cancelText="Cancel">
|
||||||
|
<a><Text type="danger"><Icon type="delete"/></Text></a>
|
||||||
|
</Popconfirm>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
title="EDIT ROLE"
|
||||||
|
width="40%"
|
||||||
|
visible={this.state.isEditRoleModalVisible}
|
||||||
|
onOk={this.onUpdateRole}
|
||||||
|
onCancel={this.onCancelHandler}
|
||||||
|
footer={[
|
||||||
|
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key="submit" type="primary" onClick={this.onUpdateRole}>
|
||||||
|
Add Role
|
||||||
|
</Button>,
|
||||||
|
]}>
|
||||||
|
<div style={{alignItems:"center"}}>
|
||||||
|
<p>Create new user on IoT Server.</p>
|
||||||
|
<Form
|
||||||
|
labelCol={{ span: 5 }}
|
||||||
|
wrapperCol={{ span: 18 }}>
|
||||||
|
<Form.Item label="User Store Domain" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('userStoreDomain', {
|
||||||
|
initialValue : 'PRIMARY'
|
||||||
|
})(
|
||||||
|
<Select>
|
||||||
|
<Option key="PRIMARY">PRIMARY</Option>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="Role Name" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('roleName', {
|
||||||
|
initialValue: this.state.roleData.roleName,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
pattern : new RegExp("^(((?!(\\@|\\/|\\s)).){3,})*$"),
|
||||||
|
message: 'Role name should be in minimum 3 characters long and not ' +
|
||||||
|
'include any whitespaces or @ or /',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required.',
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
})(<Input/>)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="User List" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('users', {
|
||||||
|
initialValue: this.state.roleData.users,
|
||||||
|
})(<Select
|
||||||
|
mode="multiple"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
onSearch={this.loadUsersList}>
|
||||||
|
{this.state.users}
|
||||||
|
</Select>)}
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
title="CHANGE ROLE PERMISSION"
|
||||||
|
width="40%"
|
||||||
|
visible={this.state.isEditPermissionModalVisible}
|
||||||
|
onOk={this.onAssignPermission}
|
||||||
|
onCancel={this.onCancelHandler}
|
||||||
|
footer={[
|
||||||
|
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key="submit" type="primary" onClick={this.onAssignPermission}>
|
||||||
|
Assign
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
bodyStyle={{overflowY:"scroll", maxHeight:'500px', marginLeft:'10px'}}>
|
||||||
|
<div>
|
||||||
|
{(this.state.isNodeList) &&(
|
||||||
|
<Tree
|
||||||
|
checkable
|
||||||
|
onExpand={this.onExpand}
|
||||||
|
expandedKeys={this.state.expandedKeys}
|
||||||
|
autoExpandParent={this.state.autoExpandParent}
|
||||||
|
onCheck={this.onCheck}
|
||||||
|
checkedKeys={this.state.checkedKeys}>
|
||||||
|
{this.renderTreeNodes(this.state.nodeList)}
|
||||||
|
</Tree>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(Form.create({name: 'role-actions'})(RoleAction));
|
||||||
@ -0,0 +1,423 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Divider,
|
||||||
|
Form,
|
||||||
|
Icon,
|
||||||
|
Input,
|
||||||
|
message,
|
||||||
|
Modal,
|
||||||
|
notification,
|
||||||
|
Popconfirm,
|
||||||
|
Select,
|
||||||
|
Tooltip,
|
||||||
|
Typography } from "antd";
|
||||||
|
import axios from "axios";
|
||||||
|
import {withConfigContext} from "../../context/ConfigContext";
|
||||||
|
const { Option } = Select;
|
||||||
|
const {Text} = Typography;
|
||||||
|
|
||||||
|
class UserActions extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.config = this.props.context;
|
||||||
|
this.state = {
|
||||||
|
isEditModalVisible: false,
|
||||||
|
isResetPasswordModalVisible: false,
|
||||||
|
rolesData: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
openEditModal = () =>{
|
||||||
|
this.setState({
|
||||||
|
isEditModalVisible: true,
|
||||||
|
});
|
||||||
|
this.fetchRoles(this.props.data.username);
|
||||||
|
|
||||||
|
};
|
||||||
|
openPasswordResetModal = () =>{
|
||||||
|
this.setState({
|
||||||
|
isResetPasswordModalVisible: true,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelHandler = () =>{
|
||||||
|
this.setState({
|
||||||
|
isEditModalVisible: false,
|
||||||
|
isResetPasswordModalVisible: false,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
compareToFirstPassword = (rule, value, callback) => {
|
||||||
|
if (value && value !== this.props.form.getFieldValue('password')) {
|
||||||
|
callback('New password doesn\'t match the confirmation.');
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onSavePassword = () => {
|
||||||
|
this.props.form.validateFields((['password', 'confirmPassword']),(err, values) => {
|
||||||
|
if (!err) {
|
||||||
|
this.onResetPassword(values);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onResetPassword = (value) =>{
|
||||||
|
const password = {
|
||||||
|
newPassword : value.password,
|
||||||
|
};
|
||||||
|
axios.post(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/admin/users/"+this.props.data.username+"/credentials",
|
||||||
|
password,
|
||||||
|
{headers: {'Content-Type' : 'application-json'}}
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
this.setState({
|
||||||
|
isResetPasswordModalVisible: false,
|
||||||
|
});
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully reset the password",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to reset password.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getRole();
|
||||||
|
}
|
||||||
|
|
||||||
|
getRole = () => {
|
||||||
|
let apiURL = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt + "/roles?user-store=PRIMARY&limit=100";
|
||||||
|
|
||||||
|
axios.get(apiURL).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
const roles = [];
|
||||||
|
for(let i=0; i<res.data.data.roles.length ; i++){
|
||||||
|
roles.push(<Option key={res.data.data.roles[i]}>{res.data.data.roles[i]}</Option>);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
roles : roles
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:"Error occurred while trying to load roles.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
onConfirmDeleteUser = () => {
|
||||||
|
axios.delete(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/users/" + this.props.data.username,
|
||||||
|
{headers: {'Content-Type': 'application/json'}}
|
||||||
|
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully deleted the user.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to delete user.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchRoles = (username) => {
|
||||||
|
let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/users/" + username + "/roles";
|
||||||
|
|
||||||
|
axios.get(apiUrl).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.setState({
|
||||||
|
rolesData: res.data.data.roles,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:"Error occurred while trying to load roles.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleEditOk = e =>{
|
||||||
|
this.props.form.validateFields((['userStoreDomain', 'userName', 'firstName', 'lastName' , 'email', 'userRoles']),(err, values) => {
|
||||||
|
if (!err) {
|
||||||
|
this.onUpdateUser(values);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onUpdateUser = (value) =>{
|
||||||
|
const userData = {
|
||||||
|
username : value.userStoreDomain +"/"+value.userName,
|
||||||
|
firstname : value.firstName,
|
||||||
|
lastname : value.lastName,
|
||||||
|
emailAddress : value.email,
|
||||||
|
roles : value.userRoles
|
||||||
|
};
|
||||||
|
axios.put(
|
||||||
|
window.location.origin + this.config.serverConfig.invoker.uri +
|
||||||
|
this.config.serverConfig.invoker.deviceMgt +
|
||||||
|
"/users/"+ this.props.data.username,
|
||||||
|
userData,
|
||||||
|
{headers: {'Content-Type' : 'application-json'}}
|
||||||
|
).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.props.fetchUsers();
|
||||||
|
this.setState({
|
||||||
|
isEditModalVisible: false,
|
||||||
|
});
|
||||||
|
notification["success"]({
|
||||||
|
message: "Done",
|
||||||
|
duration: 4,
|
||||||
|
description:
|
||||||
|
"Successfully updated the user.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||||
|
//todo display a popop with error
|
||||||
|
message.error('You are not logged in');
|
||||||
|
window.location.href = window.location.origin + '/entgra/login';
|
||||||
|
} else {
|
||||||
|
notification["error"]({
|
||||||
|
message: "There was a problem",
|
||||||
|
duration: 0,
|
||||||
|
description:
|
||||||
|
"Error occurred while trying to update user.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const isAdminUser = this.props.data.username ==="admin";
|
||||||
|
const { getFieldDecorator } = this.props.form;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{display:isAdminUser ? "none" : "inline"}}>
|
||||||
|
<Tooltip placement="top" title={"Edit User"}>
|
||||||
|
<a><Icon type="edit" onClick={this.openEditModal}/></a>
|
||||||
|
</Tooltip>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<Tooltip placement="top" title={"Reset Password"}>
|
||||||
|
<a><Icon type="key" onClick={this.openPasswordResetModal}/></a>
|
||||||
|
</Tooltip>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<Tooltip placement="bottom" title={"Remove User"}>
|
||||||
|
<Popconfirm
|
||||||
|
placement="top"
|
||||||
|
title={"Are you sure?"}
|
||||||
|
onConfirm={this.onConfirmDeleteUser}
|
||||||
|
okText="Ok"
|
||||||
|
cancelText="Cancel">
|
||||||
|
<a><Text type="danger"><Icon type="delete"/></Text></a>
|
||||||
|
</Popconfirm>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
title="Reset Password"
|
||||||
|
width="40%"
|
||||||
|
visible={this.state.isResetPasswordModalVisible}
|
||||||
|
onCancel={this.onCancelHandler}
|
||||||
|
onOk={this.onSavePassword}
|
||||||
|
footer={[
|
||||||
|
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key="submit" type="primary" onClick={this.onSavePassword} >
|
||||||
|
Save
|
||||||
|
</Button>,
|
||||||
|
]}>
|
||||||
|
<div style={{alignItems:"center"}}>
|
||||||
|
<Form
|
||||||
|
labelCol={{ span: 6 }}
|
||||||
|
wrapperCol={{ span: 17 }}>
|
||||||
|
<Form.Item label="New Password" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator(
|
||||||
|
'password',
|
||||||
|
{
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})(<Input.Password/>)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="Retype New Password" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator(
|
||||||
|
'confirmPassword',
|
||||||
|
{
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: this.compareToFirstPassword,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})(<Input.Password/>)}
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
title="EDIT USER"
|
||||||
|
width="40%"
|
||||||
|
visible={this.state.isEditModalVisible}
|
||||||
|
onOk={this.handleEditOk}
|
||||||
|
onCancel={this.onCancelHandler}
|
||||||
|
footer={[
|
||||||
|
<Button key="cancel" onClick={this.onCancelHandler}>
|
||||||
|
Cancel
|
||||||
|
</Button>,
|
||||||
|
<Button key="submit" type="primary" onClick={this.handleEditOk}>
|
||||||
|
Update
|
||||||
|
</Button>,
|
||||||
|
]}>
|
||||||
|
<div style={{alignItems:"center"}}>
|
||||||
|
<p>Create new user on IoT Server.</p>
|
||||||
|
<Form
|
||||||
|
labelCol={{ span: 5 }}
|
||||||
|
wrapperCol={{ span: 18 }}>
|
||||||
|
<Form.Item label="User Store Domain" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('userStoreDomain', {
|
||||||
|
initialValue : 'PRIMARY'
|
||||||
|
})(
|
||||||
|
<Select disabled={true}>
|
||||||
|
<Option key="PRIMARY">PRIMARY</Option>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="User Name" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('userName', {
|
||||||
|
initialValue: this.props.data.username,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required. Username should be at least 3 characters long with no white spaces.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})(<Input disabled={true}/>)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="First Name" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('firstName', {
|
||||||
|
initialValue: this.props.data.firstname,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})(<Input/>)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="Last Name" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('lastName', {
|
||||||
|
initialValue: this.props.data.lastname,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})(<Input/>)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="Email Address" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('email', {
|
||||||
|
initialValue: this.props.data.emailAddress,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
type: 'email',
|
||||||
|
message: 'Invalid Email Address',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: 'This field is required',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})(<Input/>)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="User Roles" style={{display:"block"}}>
|
||||||
|
{getFieldDecorator('userRoles', {
|
||||||
|
initialValue: this.state.rolesData,
|
||||||
|
})(<Select
|
||||||
|
mode="multiple"
|
||||||
|
style={{ width: '100%' }}>
|
||||||
|
{this.state.roles}
|
||||||
|
</Select>)}
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withConfigContext(Form.create({name: 'user-actions'})(UserActions));
|
||||||
Loading…
Reference in new issue