In this blog post, we are going to implement the functionality to change role of an user from the Admin section of Skills CMS Web-app. The SUSI Server has multiple user role levels with different access levels and functions. We will see how to facilitate the change in roles.
The UI interacts with the back-end server via the following API –
- Endpoint URL – https://api.susi.ai/cms/getSkillFeedback.json
- The minimal user role for hitting the API is ADMIN
- It takes 4 parameters –
- user – The email of the user.
- role – The new role of the user. It can take only selected values that are accepted by the server and whose roles have been defined by the server. They are – USER, REVIEWER, OPERATOR, ADMIN, SUPERADMIN.
- access_token – The access token of the user who is making the request
Implementation on the CMS Admin
- Firstly, a dialog box containing a drop-down was added in the Admin section which contains a list of possible User roles. The dialog box is shown when Edit is clicked, present in each row of the User table.
- The UI of the dialog box is as follows –
- The implementation of the UI is done as follows –
…. <Dialog title="Change User Role" actions={actions} // Contains 2 buttons for Change and Cancel modal={true} open={this.state.showEditDialog} > <div> Select new User Role for <span style={{ fontWeight: 'bold', marginLeft: '5px' }}> {this.state.userEmail} </span> </div> <div> <DropDownMenu selectedMenuItemStyle={blueThemeColor} onChange={this.handleUserRoleChange} value={this.state.userRole} autoWidth={false} > <MenuItem primaryText="USER" value="user" className="setting-item" /> /* Similarly for REVIEWER, OPERATOR, ADMIN, SUPERADMIN Add Menu Items */ </DropDownMenu> </div> </Dialog> …. . . .
- In the above UI immplementation the Material-UI compoenents namely Dialog, DropDownMenu, MenuItems, FlatButton is used.
- When the Drop down value is changed the handleUserRoleChange function is executed. The function changes the value of the state variables and the definition is as follows –
handleUserRoleChange = (event, index, value) => { this.setState({ userRole: value, }); };
- Once, the correct user role to be changed has been selected, the on click handlers for the action button comes into picture.
- The handler for clicking the Cancel button simply closes the dialog box, whereas the handler for the Change button, makes an API call that changes the user role on the Server.
- The click handlers for both the buttons is as follows –
// Handler for ‘Change’ button onChange = () => { let url = `${urls.API_URL}/aaa/changeRoles.json?user=${this.state.userEmail}& role=${this.state.userRole}&access_token=${cookies.get('loggedIn')}`; let self = this; $.ajax({ url: url, dataType: 'jsonp', crossDomain: true, timeout: 3000, async: false, success: function(response) { self.setState({ changeRoleDialog: true }); }, error: function(errorThrown) { console.log(errorThrown); }, }); this.handleClose(); }; // Handler for ‘Cancel’ button handleClose = () => { this.setState({ showEditDialog: false, }); };
- In the first function above, the URL endpoint is hit, and on success the Success Dialog is shown and the previous dialog is hidden.
- In the second function above, only the Dialog box is hidden.
- The cross domain in the AJAX call is kept as true to enable API usage from multiple domain names and the data type set as jsonp also deals with the same issue.
Resources
- Material UI library documentation – https://v0.material-ui.com