--- a/client/src/components/SessionForm.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionForm.js	Mon Oct 08 04:09:19 2018 +0200
@@ -11,26 +11,37 @@
 
   state = {
     createGroup: false,
-    protocolOpen: false
-  }
-
-  onChange = (e) => {
-    const { name, value } = e.target;
-    const changes = { [name]: value }
-    this.onChangeThrottle(changes);
+    protocolOpen: false,
+    titleEditMode: false,
+    descriptionEditMode: false,
+    enterKeyValue: false,
   }
 
-  onChangeThrottle = _.debounce((changes) => {
-    this.props.sessionsActions.updateSession(this.props.currentSession, changes);
-  }, 750)
+onChange = (e) => {
+  const { name, value } = e.target;
+  const changes = { [name]: value }
+  this.onChangeThrottle(changes);
+}
+
+onChangeThrottle = _.debounce((changes) => {
+  this.props.sessionsActions.updateSession(this.props.currentSession, changes);
+}, 750)
+
+onGroupChange = (e) => {
+  const groupName = e.target.value;
 
-  onGroupChange = (e) => {
-    const groupName = e.target.value;
+  const group = this.props.groups.find((g) => g.get('name') === groupName);
+
+  this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
+}
 
-    const group = this.props.groups.find((g) => g.get('name') === groupName);
+componentDidMount() {
+  document.addEventListener('mousedown', this.handleClickOutside);
+}
 
-    this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
-  }
+componentWillUnmount() {
+  document.removeEventListener('mousedown', this.handleClickOutside);
+}
 
   componentWillUpdate = (nextProps, nextState) => {
     if (nextState.createGroup && nextProps.createGroup.get('success')) {
@@ -45,6 +56,129 @@
     });
   }
 
+  toggleOnTitleEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      titleEditMode: true,
+    });
+  }
+
+  toggleOnDescriptionEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      descriptionEditMode: true,
+    });
+  }
+
+  toggleOffTitleEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      titleEditMode: false,
+    });
+  }
+
+  toggleOffDescriptionEditMode = (e) => {
+    e.preventDefault();
+    this.setState({
+      descriptionEditMode: false,
+    });
+  }
+
+  handleClickOutside = (e) => {
+    if (this.title && !this.title.contains(e.target)) {
+      this.toggleOffTitleEditMode(e)
+    }
+
+    if (this.desc && !this.desc.contains(e.target)) {
+      this.toggleOffDescriptionEditMode(e)
+    }
+  }
+
+  saveEdit = (e) => {
+
+    e.preventDefault();
+
+    if (e.key === 'Enter') {
+      this.setState({enterKeyValue: true})
+    }
+
+    if (e.key !== 'Enter') {
+      this.setState({enterKeyValue: false})
+    }
+
+    if (e.key === 'Enter' && this.state.enterKeyValue === true) {
+
+      e.preventDefault();
+      this.setState({
+        enterKeyValue: false,
+        titleEditMode: false,
+        descriptionEditMode: false,
+      })
+    }
+  }
+
+  titleEditMode = () => {
+
+    if (this.state.titleEditMode === false) {
+      return (
+      <div
+        onClick={this.toggleOnTitleEditMode}
+        className='session-page-title border-0 bg-success text-muted ml-3'
+      >
+        { this.props.currentSession.title || 'Espace titre' }
+      </div>
+    );
+    }
+
+    if (this.state.titleEditMode === true) {
+    return (
+    <div className="form-group pr-5">
+      <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3'
+        onKeyDown={ this.saveEdit }
+        onChange={ this.onChange }
+        type="textarea"
+        name="title"
+        defaultValue={ this.props.currentSession.title || 'Espace titre' }
+        placeholder="Espace titre"
+        ref={title => this.title = title}
+      >
+      </textarea>
+    </div>
+    );
+    }
+  }
+
+  descriptionEditMode = () => {
+
+  if (this.state.descriptionEditMode === false) {
+    return (
+    <div
+      onClick={this.toggleOnDescriptionEditMode}
+      className="session-page-description border-0 bg-success text-muted ml-3"
+    >
+      { this.props.currentSession.description || 'Espace description' }
+    </div>
+  );
+  }
+
+  if (this.state.descriptionEditMode === true) {
+  return (
+    <div className="form-group mt-2 pb-2">
+    <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3"
+      onKeyDown={ this.saveEdit }
+      onChange={ this.onChange }
+      type="textarea"
+      name="description"
+      defaultValue={ this.props.currentSession.description || 'Espace description' }
+      placeholder="Espace description"
+      ref={desc => this.desc = desc}
+    >
+    </textarea>
+  </div>
+  );
+  }
+}
+
   render() {
 
     if (!this.props.currentSession) {
@@ -54,39 +188,21 @@
     }
 
     return (
-        <div className="panel-default">
-          <div className="card-body">
+        <div className="session-page-panel panel-default sticky-top">
+          <div className="session-page-card card-body bg-secondary pr-5">
             <form onSubmit={ e => { e.preventDefault() } }>
-              <div className="form-group">
-                <label className="col-form-label text-primary">Titre</label>
-                <input className="form-control"
-                  name="title"
-                  defaultValue={ this.props.currentSession.title }
-                  onChange={ this.onChange }
-                  type="text"
-                  placeholder="Entrez un titre"
-                />
-              </div>
-              <div className="form-group">
-                <label className="col-form-label text-primary">Description</label>
-                <input className="form-control"
-                  type="textarea"
-                  name="description"
-                  defaultValue={ this.props.currentSession.description }
-                  onChange={ this.onChange }
-                  placeholder="Entrez une description"
-                />
-              </div>
-              <div className="form-group">
+              {this.titleEditMode()}
+              {this.descriptionEditMode()}
+              {/* <div className="form-group">
                 <label className="col-form-label">Group</label>
                 <p>{this.props.currentSession.group}</p>
-              </div>
-              <div className="form-group">
+              </div> */}
+              {/* <div className="form-group">
                 <label className="col-form-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>
-                <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
+                <div className={ "collapse" + (this.state.protocolOpen?'in':'')} >
                   <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre>
                 </div>
-              </div>
+              </div> */}
             </form>
           </div>
         </div>