Add new user function for device-mgt react app

merge-requests/382/merge
Kaveesha Mihirangi 5 years ago committed by Dharmakeerthi Lasantha
parent 76ff05d153
commit 5c06b1b0ab

@ -0,0 +1,215 @@
import React from 'react';
import {Button, Form, Select, Input, message, Modal, notification, Typography} from "antd";
import axios from "axios";
import {withConfigContext} from "../../context/ConfigContext";
const { Option } = Select;
const {Text} = Typography;
class AddUser extends React.Component {
constructor(props) {
super(props);
this.config = this.props.context;
this.state = {
isModalVisible: false,
roles : []
}
}
componentDidMount() {
this.getRole();
}
openAddModal = () => {
this.setState({
isModalVisible:true
});
};
onSubmitHandler = e => {
this.props.form.validateFields((err, values) => {
if (!err) {
this.onConfirmAddUser(values);
}
});
};
onConfirmAddUser = (value) =>{
const userData = {
username : value.userStoreDomain +"/"+value.userName,
firstname : value.firstName,
lastname : value.lastName,
emailAddress : value.email,
roles : value.userRoles
};
axios.post(
window.location.origin + this.config.serverConfig.invoker.uri +
this.config.serverConfig.invoker.deviceMgt +
"/users",
userData,
{headers: {'Content-Type' : 'application-json'}}
).then(res => {
if (res.status === 201) {
this.props.fetchUsers();
this.setState({
isModalVisible: false,
});
notification["success"]({
message: "Done",
duration: 4,
description:
"Successfully added 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 add user.",
});
}
});
};
onCancelHandler = e => {
this.setState({
isModalVisible: false,
});
};
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.",
});
}
})
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<div>
<Button type="primary" icon="plus" size={"default"} onClick={this.openAddModal} style={{marginBottom : '10px'}}>
Add User
</Button>
</div>
<div>
<Modal
title="ADD NEW USER"
width="40%"
visible={this.state.isModalVisible}
onOk={this.onSubmitHandler}
onCancel={this.onCancelHandler}
footer={[
<Button key="cancel" onClick={this.onCancelHandler}>
Cancel
</Button>,
<Button key="submit" type="primary" onClick={this.onSubmitHandler}>
Submit
</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="User Name" style={{display:"block"}}>
{getFieldDecorator('userName', {
rules: [
{
required: true,
message: 'This field is required. Username should be at least 3 characters long with no white spaces.',
},
],
})(<Input/>)}
</Form.Item>
<Form.Item label="First Name" style={{display:"block"}}>
{getFieldDecorator('firstName', {
rules: [
{
required: true,
message: 'This field is required',
},
],
})(<Input/>)}
</Form.Item>
<Form.Item label="Last Name" style={{display:"block"}}>
{getFieldDecorator('lastName', {
rules: [
{
required: true,
message: 'This field is required',
},
],
})(<Input/>)}
</Form.Item>
<Form.Item label="Email Address" style={{display:"block"}}>
{getFieldDecorator('email', {
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', {
})(<Select
mode="multiple"
style={{ width: '100%' }}>
{this.state.roles}
</Select>)}
</Form.Item>
</Form>
</div>
</Modal>
</div>
</div>
);
}
}
export default withConfigContext(Form.create({name: 'add-user'})(AddUser))

@ -24,6 +24,7 @@ import TimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en'
import {withConfigContext} from "../../context/ConfigContext";
import UsersDevices from "./UsersDevices";
import AddUser from "./AddUser";
const {Text} = Typography;
@ -214,6 +215,9 @@ class UsersTable extends React.Component {
];
return (
<div>
<div style={{background: '#f0f2f5'}}>
<AddUser fetchUsers={this.fetchUsers}/>
</div>
<div>
<Table
columns={columns}

Loading…
Cancel
Save