Index: src/components/UserForm.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/components/UserForm.js	(revision 014fbc30c349feca497916c6912e8da37bdc2af9)
+++ src/components/UserForm.js	(date 1542208132427)
@@ -47,10 +47,15 @@
     '&:nth-child(6)': {
       gridArea: 'lastName'
     }
+  },
+  roleListGrid: {
+    display: 'grid',
+    gridColumnGap: '15px',
+    gridTemplateColumns: '1fr 1fr'
   }
 });

-export default withStyles(styles)(({ classes, handleInputChange, handleSubmit, mode, onTabChange, selectedTab, submitButtonText }) => (
+export default withStyles(styles)(({ classes, handleInputChange, handleSubmit, mode, onTabChange, roles, permissions, uniqueResources, selectedTab, submitButtonText }) => (
   <form
     autoComplete={"off"}
     className={classes.form}
@@ -127,8 +132,15 @@
         className={classes.textField}
       />
     </Typography>}
-    {selectedTab === 1 && <RoleList />}
-    {selectedTab === 2 && <PermissionList />}
+    {selectedTab === 1 && <div className={classes.roleListGrid}>
+      <RoleList selectButton resources={uniqueResources} roles={roles} />
+      <RoleList removeButton resources={uniqueResources} roles={roles} />
+    </div>
+      }
+    {selectedTab === 2 && <div className={classes.roleListGrid}>
+      <PermissionList selectButton permissions={permissions} />
+      <PermissionList removeButton permissions={permissions} />
+    </div>}
     <Button
       type={"submit"}
       color={"primary"}
Index: src/containers/UserFormContainer.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/containers/UserFormContainer.js	(date 1542208042637)
+++ src/containers/UserFormContainer.js	(date 1542208042637)
@@ -0,0 +1,154 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+import { findUniqueResources, createPermissions } from '../services/permission-set.service';
+import rolesService from '../services/roles.service';
+import UserForm from '../components/UserForm';
+
+const styles = theme => ({
+  paper: {
+    width: 1024,
+    margin: '64px auto',
+    padding: `${theme.spacing.unit * 3}px`
+  }
+});
+
+class UserFormContainer extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      form: {
+        client: '',
+        emailAddress: '',
+        password: '',
+        replicatedPassword: '',
+        firstName: '',
+        lastName: ''
+      },
+      modeConfiguration: {
+        cardTitle: '',
+        submitButtonText: ''
+      },
+      selectedTab: 0,
+      selectedUser: {
+        id: '',
+        client: '',
+        emailAddress: '',
+        password: '',
+        firstName: '',
+        lastName: '',
+        permissions: {
+          roleSet: [],
+          customPermissionSet: [],
+          isSuperAdmin: false
+        }
+      },
+      roles: {
+        data: [],
+        loaded: false,
+        loading: false
+      },
+      permissions: [],
+      uniqueResources: []
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.mode === 'create') {
+      const modeConfiguration = this.state.modeConfiguration;
+      modeConfiguration.paperTitle = 'Create user';
+      modeConfiguration.submitButtonText = 'Create';
+
+      this.setState({
+        modeConfiguration: modeConfiguration
+      });
+    }
+
+    if (this.props.mode === 'edit') {
+      const modeConfiguration = this.state.modeConfiguration;
+      modeConfiguration.paperTitle = 'Edit user';
+      modeConfiguration.submitButtonText = 'Edit';
+
+      this.setState({
+        modeConfiguration: modeConfiguration
+      });
+    }
+
+    rolesService.fetchAll()
+      .then(roles => {
+        const rolesState = this.state.roles;
+        rolesState.data = roles;
+        rolesState.loaded = true;
+
+        let uniqueResourcesState = findUniqueResources(roles);
+
+        this.setState({
+          roles: rolesState,
+          uniqueResources: uniqueResourcesState
+        });
+      });
+
+    this.setState({
+      permissions: createPermissions()
+    })
+  }
+
+  handleInputChange = event => {
+    const name = event.target.name;
+    const value = event.target.value;
+
+    const form = this.state.form;
+    form[ name ] = value;
+
+    this.setState({
+      form: form
+    });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+
+    if (this.props.mode === 'create') {
+      this.handleCreateModeSubmit();
+    }
+
+    if (this.props.mode === 'edit') {
+      this.handleEditModeSubmit();
+    }
+  };
+
+  handleTabChange = (event, value) => {
+    this.setState({ selectedTab: value });
+  };
+
+  handleCreateModeSubmit() {
+  }
+
+  handleEditModeSubmit() {
+  }
+
+  render() {
+    return (
+      <Paper className={this.props.classes.paper}>
+        <Typography
+          component={"h1"}
+          variant={"h5"}>{this.state.modeConfiguration.paperTitle}
+        </Typography>
+        <UserForm
+          roles={this.state.roles.data}
+          permissions={this.state.permissions}
+          submitButtonText={this.state.modeConfiguration.submitButtonText}
+          uniqueResources={this.state.uniqueResources}
+          onTabChange={this.handleTabChange}
+          selectedTab={this.state.selectedTab}
+        />
+      </Paper>
+    );
+  }
+}
+
+export default withStyles(styles)(UserFormContainer);
Index: src/routers/UserRouter.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/routers/UserRouter.js	(revision 014fbc30c349feca497916c6912e8da37bdc2af9)
+++ src/routers/UserRouter.js	(date 1542198830500)
@@ -3,6 +3,7 @@

 import NavigationBar from '../components/NavigationBar';

+import UserFormContainer from '../containers/UserFormContainer';
 import UserListContainer from '../containers/UserListContainer';

 export default () => (
@@ -10,8 +11,8 @@
     <NavigationBar title={"Users"} />
     <Switch>
       <Route exact path={"/users"} component={UserListContainer} />
-      <Route path={"/users/add"} render={{}} />
-      <Route path={"/users/detail/:id"} render={{}} />
+      <Route path={"/users/add"} render={props => <UserFormContainer mode={"create"} {...props} />} />
+      <Route path={"/users/detail/:id"} render={props => <UserFormContainer mode={"edit"} {...props} />} />
     </Switch>
   </React.Fragment>
 );