forked from community/device-mgt-core
Add new user function for device-mgt react app See merge request entgra/carbon-device-mgt!375feature/appm-store/pbac
Dharmakeerthi Lasantha
5 years ago
commit
b529ffc418
@ -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))
|
||||||
Loading…
Reference in new issue