--- a/client/src/components/SessionForm.js	Tue Jun 27 18:11:40 2017 +0200
+++ b/client/src/components/SessionForm.js	Tue Jun 27 18:12:10 2017 +0200
@@ -1,13 +1,30 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
+import { Panel, FormGroup, ControlLabel, FormControl, Button, InputGroup, HelpBlock } from 'react-bootstrap';
 import '../App.css';
 import * as sessionsActions from '../actions/sessionsActions';
+import * as authActions from '../actions/authActions';
 import _ from 'lodash';
 
 class SessionForm extends Component {
 
+  state = {
+    createGroup: false
+  }
+
+  toggleCreateGroup = (e) => {
+    e.preventDefault();
+    const { createGroup } = this.state;
+    this.setState({ createGroup: !createGroup });
+  }
+
+  onClickCreateGroup = (e) => {
+    e.preventDefault();
+    const groupName = this.groupName.value;
+    this.props.authActions.createGroup(groupName);
+  }
+
   onChange = (e) => {
     const { name, value } = e.target;
     const changes = { [name]: value }
@@ -18,6 +35,46 @@
     this.props.sessionsActions.updateSession(this.props.currentSession, changes);
   }, 750)
 
+  renderCreateGroup = () => {
+    const { createGroup } = this.props;
+    const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name');
+
+    let errors = [];
+    if (hasErrors) {
+      const errorMessages = createGroup.get('errorMessages').toArray();
+      errors = errorMessages.map((message, key) => {
+        return (
+          <HelpBlock key={ key }>{ message }</HelpBlock>
+        )
+      })
+    }
+
+    if (this.state.createGroup) {
+      return (
+        <FormGroup validationState={ hasErrors ? 'error' : null }>
+          <InputGroup>
+            <FormControl
+              type="text"
+              placeholder="Enter a name for your group"
+              inputRef={ ref => { this.groupName = ref; } } />
+            <InputGroup.Button>
+              <Button bsStyle="primary" onClick={ this.onClickCreateGroup }>Create</Button>
+            </InputGroup.Button>
+          </InputGroup>
+          { errors }
+          <hr />
+          <Button onClick={ this.toggleCreateGroup }>Cancel</Button>
+        </FormGroup>
+      )
+    }
+
+    return (
+      <FormGroup>
+        <Button onClick={ this.toggleCreateGroup }>Create a group</Button>
+      </FormGroup>
+    )
+  }
+
   render() {
 
     if (!this.props.currentSession) {
@@ -51,6 +108,9 @@
               inputRef={ ref => { this.description = ref; } }
             />
           </FormGroup>
+          <FormGroup>
+            { this.renderCreateGroup() }
+          </FormGroup>
         </form>
       </Panel>
     );
@@ -60,12 +120,14 @@
 function mapStateToProps(state, props) {
   return {
     currentSession: props.session,
+    createGroup: state.createGroup
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     sessionsActions: bindActionCreators(sessionsActions, dispatch),
+    authActions: bindActionCreators(authActions, dispatch),
   }
 }