--- a/client/src/actions/sessionsActions.js	Thu Aug 03 17:33:00 2017 +0200
+++ b/client/src/actions/sessionsActions.js	Thu Aug 03 19:11:06 2017 +0200
@@ -58,15 +58,3 @@
 export const resetActionSession = (session) => {
   return { type: types.RESET_ACTION_SESSION, session };
 }
-
-export const createGroupAndUpdateSession = (session, name) => {
-  const group = {
-    name
-  };
-
-  return {
-    type: types.GROUP_CREATE_AND_UPDATE_ASYNC,
-    session,
-    group,
-  };
-}

--- a/client/src/components/GroupForm.js	Thu Aug 03 17:33:00 2017 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,107 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { FormGroup, FormControl, Button, InputGroup, HelpBlock, Glyphicon } from 'react-bootstrap';
-import * as authActions from '../actions/authActions';
-import * as sessionsActions from '../actions/sessionsActions';
-import { getOnline, getCreateGroup } from '../selectors/authSelectors';
-
-class GroupForm extends Component {
-
-  state = {
-    createGroup: false,
-    groupName: ''
-  }
-
-  toggleCreateGroup = (e) => {
-    e.preventDefault();
-    const { createGroup } = this.state;
-    this.setState({ createGroup: !createGroup });
-  }
-
-  onClickCreateGroup = (e) => {
-    e.preventDefault();
-    const groupName = this.state.groupName;
-    this.props.sessionsActions.createGroupAndUpdateSession(this.props.session, groupName);
-    this.setState({
-      createGroup: false,
-      groupName: ''
-    })
-  }
-
-  handleInputChange = (e) => {
-    const target = e.target;
-    const value = target.value;
-    const name = target.name;
-
-    this.setState({
-      [name]: value
-    });
-  }
-
-
-  render = () => {
-    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"
-              onChange={this.handleInputChange}
-              name="groupName"
-              value={this.state.groupName} />
-            <InputGroup.Button>
-              <Button bsStyle="primary" onClick={ this.onClickCreateGroup }>Create</Button>
-            </InputGroup.Button>
-          </InputGroup>
-          { errors }
-          <hr />
-          <Button onClick={ this.toggleCreateGroup }>Cancel</Button>
-        </FormGroup>
-      )
-    }
-
-    if(this.props.online) {
-      return (
-        <FormGroup>
-          <Button className="pull-right" bsSize="small" onClick={ this.toggleCreateGroup }>
-            <Glyphicon glyph="plus" />  Create a new group
-          </Button>
-        </FormGroup>
-      )
-    }
-    return null;
-  }
-
-}
-
-function mapStateToProps(state, props) {
-
-  return {
-    createGroup: getCreateGroup(state),
-    online: getOnline(state),
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    sessionsActions: bindActionCreators(sessionsActions, dispatch),
-    authActions: bindActionCreators(authActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(GroupForm);

--- a/client/src/components/SessionForm.js	Thu Aug 03 17:33:00 2017 +0200
+++ b/client/src/components/SessionForm.js	Thu Aug 03 19:11:06 2017 +0200
@@ -1,17 +1,18 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
-import GroupForm from './GroupForm';
+import { Panel, FormGroup, ControlLabel, FormControl, Collapse } from 'react-bootstrap';
 import '../App.css';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as authActions from '../actions/authActions';
 import _ from 'lodash';
+import './SessionForm.css';
 
 class SessionForm extends Component {
 
   state = {
-    createGroup: false
+    createGroup: false,
+    protocolOpen: false
   }
 
   onChange = (e) => {
@@ -38,6 +39,13 @@
     }
   }
 
+  toggleProtocol = (e) => {
+    e.preventDefault();
+    this.setState({
+      protocolOpen: !this.state.protocolOpen
+    });
+  }
+
   render() {
 
     if (!this.props.currentSession) {
@@ -71,18 +79,13 @@
           </FormGroup>
           <FormGroup>
             <ControlLabel>Group</ControlLabel>
-            <FormControl
-              name="group"
-              componentClass="select"
-              value={ this.props.group ? this.props.group.get('name') : '' }
-              onChange={ this.onGroupChange }>
-              { this.props.groups.map((group, key) =>
-                <option key={ key } value={ group.get('name') }>{ group.get('name') }</option>
-              ) }
-            </FormControl>
+            <p>{this.props.currentSession.group}</p>
           </FormGroup>
-           <FormGroup>
-            <GroupForm session={this.props.session} />
+          <FormGroup>
+            <ControlLabel onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</ControlLabel>
+            <Collapse in={this.state.protocolOpen}>
+            <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
+            </Collapse>
           </FormGroup>
         </form>
       </Panel>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SessionForm.scss	Thu Aug 03 19:11:06 2017 +0200
@@ -0,0 +1,4 @@
+.material-icons.protocol-toggle {
+    font-size: 1rem;
+    cursor: pointer;
+}

--- a/client/src/constants/actionTypes.js	Thu Aug 03 17:33:00 2017 +0200
+++ b/client/src/constants/actionTypes.js	Thu Aug 03 19:11:06 2017 +0200
@@ -37,7 +37,6 @@
 export const AUTH_DEAUTHENTICATE = 'AUTH_DEAUTHENTICATE';
 
 export const GROUP_CREATE_ASYNC = 'GROUP_CREATE_ASYNC';
-export const GROUP_CREATE_AND_UPDATE_ASYNC = 'GROUP_CREATE_AND_UPDATE_ASYNC';
 export const GROUP_CREATE_SUCCESS = 'GROUP_CREATE_SUCCESS';
 export const GROUP_CREATE_ERROR = 'GROUP_CREATE_ERROR';
 export const GROUP_SET_GROUP = 'GROUP_SET_GROUP';

--- a/client/src/sagas/groupSaga.js	Thu Aug 03 17:33:00 2017 +0200
+++ b/client/src/sagas/groupSaga.js	Thu Aug 03 19:11:06 2017 +0200
@@ -1,7 +1,6 @@
 import { put, take, all } from 'redux-saga/effects'
 import * as types from '../constants/actionTypes';
 import { groupCreateSuccess, groupCreateError, groupLoadSucess, groupLoadError } from '../actions/groupActions';
-import { updateSession } from '../actions/sessionsActions';
 
 function* watchCreateGroup(context) {
   while (true) {
@@ -17,25 +16,6 @@
   }
 }
 
-function* watchCreateGroupAndUpdateSession(context) {
-  while (true) {
-    const { session, group } = yield take(types.GROUP_CREATE_AND_UPDATE_ASYNC);
-    const client = context.client;
-    try {
-      const response = yield client.post('/api/auth/group/', group);
-
-      const actions = [
-        groupCreateSuccess(response),
-        updateSession(session, {group: response.name, protocol: response.protocol})
-      ];
-      yield all(actions.map(action => put(action)));
-
-    } catch (e) {
-      yield put(groupCreateError(e));
-    }
-  }
-}
-
 function* watchLoadGroups(context) {
   const client = context.client;
   while (true) {
@@ -52,7 +32,6 @@
 export default function* rootSaga(context) {
   yield all([
     watchCreateGroup(context),
-    watchCreateGroupAndUpdateSession(context),
     watchLoadGroups(context),
   ])
 }

--- a/client/src/sass/_material-font.scss	Thu Aug 03 17:33:00 2017 +0200
+++ b/client/src/sass/_material-font.scss	Thu Aug 03 19:11:06 2017 +0200
@@ -36,3 +36,10 @@
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
+
+.material-icons {
+    &.md-18 { font-size: 18px; }
+    &.md-24 { font-size: 24px; }
+    &.md-36 { font-size: 36px; }
+    &.md-48 { font-size: 48px; }
+}