Index: src/components/UserForm.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/components/UserForm.js	(date 1542033676279)
+++ src/components/UserForm.js	(date 1542033676279)
@@ -0,0 +1,32 @@
+import React from 'react';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+const styles = theme => ({
+  form: {
+    width: '100%',
+    marginTop: theme.spacing.unit * 5
+  }
+});
+
+export default withStyles(styles)(({ classes, handleInputChange, handleSubmit, onTabChange, selectedTab, submitButtonText, value }) => {
+  return (
+    <form
+      autoComplete={"off"}
+      className={classes.form}
+      onSubmit={handleSubmit}>
+      <Tabs
+        indicatorColor={"primary"}
+        textColor={"primary"}
+        value={selectedTab}
+        onChange={onTabChange}>
+        <Tab label={"General Information"} />
+        <Tab label={"Roles"} />
+        <Tab label={"Custom permissions"} />
+      </Tabs>
+    </form>
+  );
+});
Index: src/containers/UserFormContainer.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/containers/UserFormContainer.js	(date 1542033424799)
+++ src/containers/UserFormContainer.js	(date 1542033424799)
@@ -0,0 +1,120 @@
+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 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
+        }
+      }
+    };
+  }
+
+  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
+    });
+  };
+
+  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 onTabChange={this.handleTabChange} selectedTab={this.state.selectedTab}/>
+      </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 1542031217603)
+++ src/components/PermissionList.js	(date 1542031217603)
@@ -0,0 +1,1 @@
+import React from 'react';
Index: src/components/RoleList.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/components/RoleList.js	(date 1542031217605)
+++ src/components/RoleList.js	(date 1542031217605)
@@ -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 1542032932224)
@@ -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>