Index: src/components/RoleList.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/components/RoleList.js	(date 1542022707035)
+++ src/components/RoleList.js	(date 1542022707035)
@@ -0,0 +1,1 @@
+import React from 'react';
Index: src/components/UserForm.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/components/UserForm.js	(date 1542022707036)
+++ src/components/UserForm.js	(date 1542022707036)
@@ -0,0 +1,1 @@
+import React from 'react';
Index: src/containers/UserFormContainer.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/containers/UserFormContainer.js	(date 1542026856188)
+++ src/containers/UserFormContainer.js	(date 1542026856188)
@@ -0,0 +1,124 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import Typography from '@material-ui/core/Typography';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+const styles = theme => ({
+  paper: {
+    width: 1024,
+    margin: '64px auto',
+    padding: `${theme.spacing.unit * 3}px`
+  },
+  tabs: {
+    marginTop: theme.spacing.unit * 7
+  }
+});
+
+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
+        }
+      }
+    };
+  }
+
+  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
+      });
+    }
+  }
+
+  handleInputChange = event => {
+    const name = event.target.name;
+    const value = event.target.value;
+
+    const form = this.state.form;
+    form[ name ] = value;
+
+    this.setState({
+      form: form
+    });
+  };
+
+  handleTabChange = (event, value) => {
+    this.setState({ selectedTab: value });
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+
+    if (this.props.mode === 'create') {
+      this.handleCreateModeSubmit();
+    }
+
+    if (this.props.mode === 'edit') {
+      this.handleEditModeSubmit();
+    }
+  };
+
+  handleCreateModeSubmit() {
+  }
+
+  handleEditModeSubmit() {
+  }
+
+  render = () => (
+    <Paper className={this.props.classes.paper}>
+      <Typography variant={"h5"} component={"h3"}>
+        {this.state.modeConfiguration.paperTitle}
+      </Typography>
+      <Tabs value={this.state.selectedTab} className={this.props.classes.tabs} onChange={this.handleTabChange}>
+        <Tab label={"General Information"} />
+        <Tab label={"Roles"} />
+        <Tab label={"Custom permissions"} />
+      </Tabs>
+    </Paper>
+  );
+}
+
+export default withStyles(styles)(UserFormContainer);
Index: src/components/PermissionList.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/components/PermissionList.js	(date 1542022707034)
+++ src/components/PermissionList.js	(date 1542022707034)
@@ -0,0 +1,1 @@
+import React from 'react';
Index: src/routers/UserRouter.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/routers/UserRouter.js	(revision f96042b33a71505f37e535a4bfb9a0546e59ce3e)
+++ src/routers/UserRouter.js	(date 1542024456121)
@@ -3,6 +3,7 @@

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

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

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