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