--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ReadOnlySession.js	Tue Oct 09 10:52:23 2018 +0200
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Note from './Note';
+import Navbar from './Navbar';
+import SessionForm from './SessionForm';
+import { getSession, getSessionNotes } from '../selectors/coreSelectors';
+import './ReadOnlySession.css';
+
+
+
+class ReadOnlySession extends Component {
+
+  onClickSession = (e) => {
+    e.preventDefault();
+    this.props.history.push('/sessions/' +  this.props.match.params.id)
+  }
+
+  render() {
+
+    return (
+          <div>
+            <Navbar history={this.props.history} />
+            <div className="ml-4">
+              <SessionForm session={this.props.currentSession} />
+              <a className="text-primary font-weight-bold float-left" onClick={this.onClickSession} href="/sessions">Atteindre la session</a>
+              <div>
+                {this.props.notes.map((note) =>
+                  <Note
+                    note={ note }
+                    key={ note._id}
+                    annotationCategories={this.props.annotationCategories} />
+                )}
+              </div>
+            </div>
+          </div>
+    );
+  }
+};
+
+
+function mapStateToProps(state, props) {
+
+  const sessionId = props.match.params.id;
+
+  const currentSession = getSession(sessionId, state);
+  const currentNotes = getSessionNotes(sessionId, state);
+
+  return {
+    currentSession,
+    notes: currentNotes,
+  };
+}
+
+export default connect(mapStateToProps)(ReadOnlySession);
+
+

--- a/client/src/components/Session.js	Mon Oct 08 04:09:19 2018 +0200
+++ b/client/src/components/Session.js	Tue Oct 09 10:52:23 2018 +0200
@@ -8,6 +8,7 @@
 import NotesList from './NotesList';
 import SessionForm from './SessionForm';
 import SessionSummary from './SessionSummary';
+import ProtocolSummary from './ProtocolSummary';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as notesActions from '../actions/notesActions';
 import * as userActions from '../actions/userActions';
@@ -16,13 +17,21 @@
 import { extractAnnotationCategories, defaultAnnotationsCategories } from '../constants';
 
 class Session extends Component {
+
+  onClickReadOnly = (e) => {
+    e.preventDefault();
+    this.props.history.push('/read-only/' + this.props.match.params.id);
+  }
+
   render() {
+
     return (
       <div>
         <Navbar history={this.props.history} />
         <div className="session-container">
           <div className="session-notes">
           <div className="notes-affix">
+            <a onClick={this.onClickReadOnly} href="/read-only"><span className="material-icons text-primary">remove_red_eye</span></a>
             <SessionSummary notes={this.props.notes} />
           </div>
             <div className="notes-list">

--- a/client/src/components/SessionList.js	Mon Oct 08 04:09:19 2018 +0200
+++ b/client/src/components/SessionList.js	Tue Oct 09 10:52:23 2018 +0200
@@ -55,14 +55,23 @@
   showSessionsNumber = () => {
     if (this.props.sessions.size === 1)
     return (
-     <span>{this.props.sessions.size} session</span>
+     <span className="pb-5">{this.props.sessions.size} session</span>
     );
     return (
-      <span>{this.props.sessions.size} sessions</span>
+      <span className="pb-5">{this.props.sessions.size} sessions</span>
      )
 
   }
 
+  emptyListMessage = () => {
+
+      if (this.props.sessions.size === 0) {
+      return (
+       <h1 className="text-primary text-center mt-5 pt-5">vous n'avez créé aucune session pour le moment</h1>
+      );
+    }
+  }
+
   deleteSession = () => {
     const { sessionToDelete } = this.state;
 
@@ -81,11 +90,12 @@
         <div className="container-fluid">
           <div className="session-count fixed-top bg-secondary font-weight-bold text-danger pl-4 pb-3 mb-3 mt-5 pt-3">
           {this.showSessionsNumber()}
+          {this.emptyListMessage()}
           </div>
-          <div className="row mt-4 justify-content-end">
+          <div className="row mt-5 justify-content-start">
                 {this.props.sessions.map((session) =>
-                  <div className="session col-lg-5" key={session.get('_id')}>
-                      <div className="col-md-auto m-2 p-2">
+                  <div className="session col-lg-3" key={session.get('_id')}>
+                      <div className="col-md-auto w-100 m-2 p-2">
                         <a className="sessions" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
                           <span className="session-title text-primary">{session.title || 'Session sans titre'}<br /></span>
                           <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
@@ -94,6 +104,9 @@
                         <button type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }>
                           <span className="material-icons delete text-dark">delete</span>
                         </button>
+                        <button type="button" className="btn btn-link float-left" onClick={() => this.props.history.push('/read-only/' + session.get('_id'))}>
+                          <span className="material-icons delete text-dark">remove_red_eye</span>
+                        </button>
                       </div>
                   </div>
                 )}

--- a/client/src/index.js	Mon Oct 08 04:09:19 2018 +0200
+++ b/client/src/index.js	Tue Oct 09 10:52:23 2018 +0200
@@ -10,6 +10,7 @@
 import Session from './components/Session';
 import Login from './components/Login';
 import CreateGroup from './components/CreateGroup';
+import ReadOnlySession from './components/ReadOnlySession';
 import Register from './components/Register';
 import Settings from './components/Settings';
 import './index.css';
@@ -32,6 +33,7 @@
         <Route exact path="/register" component={Register} />
         <Route exact path="/login" component={Login} />
         <Route exact path="/create-group" component={CreateGroup} />
+        <Route exact path="/read-only/:id" component={ReadOnlySession} />
         <AuthenticatedRoute exact path="/settings" component={Settings} store={store} />
         <Route exact path="/" component={App} />
       </Switch>