From df3548fb8f6f73831c383ac07e7822ddfae316d5 Mon Sep 17 00:00:00 2001 From: Kaveesha Mihirangi Date: Sat, 16 Nov 2019 03:43:50 +0000 Subject: [PATCH] Modify Role view and User View --- .../react-app/src/components/Roles/AddRole.js | 340 ++++++++++++++ .../src/components/Roles/RoleAction.js | 428 ++++++++++++++++++ .../src/components/Roles/RolesTable.js | 177 ++++++-- .../src/components/Users/UserActions.js | 423 +++++++++++++++++ .../src/components/Users/UsersTable.js | 97 ++-- 5 files changed, 1383 insertions(+), 82 deletions(-) create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/AddRole.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RoleAction.js create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UserActions.js diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/AddRole.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/AddRole.js new file mode 100644 index 00000000000..c23ad420e79 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/AddRole.js @@ -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 ( + + {this.renderTreeNodes(item.nodeList)} + + ); + } + return ; + } + else{ + return ; + } + }); + }; + + 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(); + } + 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 ( +
+
+ +
+
+ + Cancel + , + , + ]}> +
+

Create new user on IoT Server.

+
+ + {getFieldDecorator('userStoreDomain', { + initialValue: 'PRIMARY' + })( + + )} + + + {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.', + }, + + ], + })()} + + + {getFieldDecorator('users', {})()} + +
+
+ +
+
+ + Cancel + , + , + ]}> +
+
+ {(this.state.isNodeList) && ( + + {this.renderTreeNodes(this.state.nodeList)} + + )} +
+
+ +
+
+ ); + } +} + +export default withConfigContext(Form.create({name: 'add-role'})(AddRole)) \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RoleAction.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RoleAction.js new file mode 100644 index 00000000000..e2fd901f051 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RoleAction.js @@ -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 ( + + {this.renderTreeNodes(item.nodeList)} + + ); + } + return ; + } else{ + return ; + } + }); + }; + + 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[i].username}); + } + 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 ( +
+
+ + + + + + + + + + + + + +
+ +
+ + Cancel + , + , + ]}> +
+

Create new user on IoT Server.

+
+ + {getFieldDecorator('userStoreDomain', { + initialValue : 'PRIMARY' + })( + + )} + + + {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.', + }, + + ], + })()} + + + {getFieldDecorator('users', { + initialValue: this.state.roleData.users, + })()} + +
+
+ +
+
+ + Cancel + , + , + ]} + bodyStyle={{overflowY:"scroll", maxHeight:'500px', marginLeft:'10px'}}> +
+ {(this.state.isNodeList) &&( + + {this.renderTreeNodes(this.state.nodeList)} + + )} +
+ +
+
+ ); + } +} + +export default withConfigContext(Form.create({name: 'role-actions'})(RoleAction)); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js index 3d85bbe344c..976e90eca7d 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js @@ -18,24 +18,19 @@ import React from "react"; import axios from "axios"; -import {Card, Col, Icon, message, notification, Row, Typography} from "antd"; +import { + Button, + message, + Modal, + notification, + Table, List +} from "antd"; import TimeAgo from 'javascript-time-ago' // Load locale-specific relative date/time formatting rules. import en from 'javascript-time-ago/locale/en' import {withConfigContext} from "../../context/ConfigContext"; - -const {Text} = Typography; - -let config = null; -let apiUrl; - -const columns = [ - { - title: 'User Name', - dataIndex: 'username', - width: 100, - } -]; +import AddRole from "./AddRole"; +import RoleAction from "./RoleAction"; const getTimeAgo = (time) => { const timeAgo = new TimeAgo('en-US'); @@ -45,23 +40,76 @@ const getTimeAgo = (time) => { class RolesTable extends React.Component { constructor(props) { super(props); - config = this.props.context; + this.config = this.props.context; TimeAgo.addLocale(en); this.state = { data: [], pagination: {}, loading: false, - selectedRows: [] + selectedRows: [], + userData: [], + users : [], + isEditRoleModalVisible: false, + isUserListModalVisible :false, }; } + rowSelection = { + onChange: (selectedRowKeys, selectedRows) => { + this.setState({ + selectedRows: selectedRows + }) + } + }; + componentDidMount() { this.fetchUsers(); } + openUserListModal = (event) => { + let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri + + this.config.serverConfig.invoker.deviceMgt + + "/roles/"+ event; + + //send request to the invokerss + axios.get(apiUrl).then(res => { + if (res.status === 200) { + this.setState({ + userData : res.data.data.users, + isUserListModalVisible: 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 users.", + }); + } + }); + }; + + handleOk = e => { + this.setState({ + isUserListModalVisible: false, + }); + }; + + handleCancel = e => { + this.setState({ + isUserListModalVisible: false, + }); + }; + //fetch data from api fetchUsers = (params = {}) => { - const config = this.props.context; + // const config = this.props.context; this.setState({loading: true}); // get current page @@ -75,8 +123,8 @@ class RolesTable extends React.Component { const encodedExtraParams = Object.keys(extraParams) .map(key => key + '=' + extraParams[key]).join('&'); - apiUrl = window.location.origin + config.serverConfig.invoker.uri + - config.serverConfig.invoker.deviceMgt + + let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri + + this.config.serverConfig.invoker.deviceMgt + "/roles"; //send request to the invokerss @@ -124,30 +172,77 @@ class RolesTable extends React.Component { render() { const {data, pagination, loading, selectedRows} = this.state; - const { Meta } = Card; - const itemCard = data.map((data) => - - , - ,]} - > - } - title={data} - /> - - - ); + const columns = [ + { + title: 'Role Name', + dataIndex: '', + key: "role", + width: "60%", + }, + { + title: 'View', + dataIndex: '', + key: 'users', + render: (id, row) => + + + }, + { + title: 'Action', + dataIndex: 'id', + key: 'action', + render: (id, row) => ( + + + + ), + }, + + ]; return ( -
- - {itemCard} - +
+
+ +
+
+ (record)} + dataSource={data} + pagination={{ + ...pagination, + size: "small", + // position: "top", + showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} groups` + // showQuickJumper: true + }} + loading={loading} + onChange={this.handleTableChange} + rowSelection={this.rowSelection} + /> + +
+ +
+ {item}}/> +
+ +
+ ); } } diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UserActions.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UserActions.js new file mode 100644 index 00000000000..7236e657b50 --- /dev/null +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UserActions.js @@ -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[i]}); + } + 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 ( +
+
+ + + + + + + + + + + + + +
+ +
+ + Cancel + , + , + ]}> +
+
+ + {getFieldDecorator( + 'password', + { + rules: [ + { + required: true, + message: 'This field is required', + }, + ], + })()} + + + {getFieldDecorator( + 'confirmPassword', + { + rules: [ + { + required: true, + message: 'This field is required', + }, + { + validator: this.compareToFirstPassword, + }, + ], + })()} + + +
+ +
+ +
+ + Cancel + , + , + ]}> +
+

Create new user on IoT Server.

+
+ + {getFieldDecorator('userStoreDomain', { + initialValue : 'PRIMARY' + })( + + )} + + + {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.', + }, + ], + })()} + + + {getFieldDecorator('firstName', { + initialValue: this.props.data.firstname, + rules: [ + { + required: true, + message: 'This field is required', + }, + ], + })()} + + + {getFieldDecorator('lastName', { + initialValue: this.props.data.lastname, + rules: [ + { + required: true, + message: 'This field is required', + }, + ], + })()} + + + {getFieldDecorator('email', { + initialValue: this.props.data.emailAddress, + rules: [ + { + type: 'email', + message: 'Invalid Email Address', + }, + { + required: true, + message: 'This field is required', + }, + ], + })()} + + + {getFieldDecorator('userRoles', { + initialValue: this.state.rolesData, + })()} + + +
+ +
+
+ ); + } +} + +export default withConfigContext(Form.create({name: 'user-actions'})(UserActions)); \ No newline at end of file diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js index 6010b683fe4..d2bf0b0036f 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js +++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js @@ -25,7 +25,8 @@ import en from 'javascript-time-ago/locale/en' import {withConfigContext} from "../../context/ConfigContext"; import UsersDevices from "./UsersDevices"; import AddUser from "./AddUser"; - +import UserActions from "./UserActions"; +const ButtonGroup = Button.Group const {Text} = Typography; let config = null; @@ -42,6 +43,7 @@ class UsersTable extends React.Component { loading: false, selectedRows: [], rolesModalVisible: false, + devicesModalVisible: false, rolesData: [], user:'' }; @@ -88,6 +90,8 @@ class UsersTable extends React.Component { data: res.data.data.users, pagination, }); + + console.log(res.data.data) } }).catch((error) => { @@ -107,7 +111,6 @@ class UsersTable extends React.Component { }); }; - //fetch data from api fetchRoles = (username) => { const config = this.props.context; @@ -120,7 +123,6 @@ class UsersTable extends React.Component { config.serverConfig.invoker.deviceMgt + "/users/" + username + "/roles"; - //send request to the invokerss axios.get(apiUrl).then(res => { if (res.status === 200) { this.setState({ @@ -163,15 +165,23 @@ class UsersTable extends React.Component { handleOk = e => { this.setState({ rolesModalVisible: false, + devicesModalVisible: false }); }; handleCancel = e => { this.setState({ rolesModalVisible: false, + devicesModalVisible: false }); }; + openDeviceListModal = e =>{ + this.setState({ + devicesModalVisible: true, + }) + }; + render() { const {data, pagination, loading, selectedRows} = this.state; const { Panel } = Collapse; @@ -180,38 +190,52 @@ class UsersTable extends React.Component { { title: 'User Name', dataIndex: 'username', - width: 150, key: "username", }, { title: 'First Name', - width: 150, dataIndex: 'firstname', key: 'firstname', }, { title: 'Last Name', - width: 150, dataIndex: 'lastname', key: 'lastname', }, { title: 'Email', - width: 100, dataIndex: 'emailAddress', key: 'emailAddress', }, { - title: '', + title: 'View', dataIndex: 'username', key: 'roles', render: (username) => - - } + + + + + }, + { + title: 'Action', + dataIndex: 'id', + key: 'action', + render: (id, row) => ( + + + + ), + }, + ]; return (
@@ -237,40 +261,31 @@ class UsersTable extends React.Component {
- - - - Roles - - } - key="1" - > + onCancel={this.handleCancel} > +
{item}} - /> - - - - Enrolled Devices - - } - key="2" - > - - - + renderItem={item => {item}}/> +
+ +
+ +
+ +
+ +