# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1539075798 -7200
# Node ID 78c54cb473cd4ba710a18f39b76ff965a6dd7a15
# Parent  1fd73fdaf4c66b2ea17a6a3535f119b871bc06ef
Add offline message

diff -r 1fd73fdaf4c6 -r 78c54cb473cd client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Tue Oct 09 10:52:23 2018 +0200
+++ b/client/src/components/Navbar.js	Tue Oct 09 11:03:18 2018 +0200
@@ -57,6 +57,18 @@
   );
 }
 
+const OffLineMessage = ({isAuthenticated}) => {
+  if (!isAuthenticated) {
+    return (
+        <span className="sticky-top text-info text-right float-right mr-4 offline-message">Vous êtes en mode Offline. N'oubliez pas de
+        vous connecter ou de créer un compte pour sauvegarder vos sessions</span>
+    );
+  }
+    return (
+      <span></span>
+  );
+}
+
 
 class AppNavbar extends Component {
   constructor(props) {
@@ -135,60 +147,63 @@
 
   render() {
     return (
-      <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
-        <div className="container-fluid">
-        <div className="navbar-header">
-        <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
-        <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-              <span className="navbar-toggler-icon"></span>
-              <span className="icon-bar"></span>
-              <span className="icon-bar"></span>
-              <span className="icon-bar"></span>
-            </button>
-          </div>
-          <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
-            <ul className="navbar-nav mr-auto">
-              <li className="nav-item">
-                <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Sessions</a>
-              </li>
-            </ul>
-            <ul className="navbar-nav navbar-center">
-                <li className="nav-item text-secondary">
-                  <CreateSession
-                    history={this.props.history}
-                    group={this.props.currentGroup}
-                    createSession={this.props.sessionsActions.createSession}
-                  />
+      <div>
+        <nav className="navbar navbar-expand-lg navbar-light bg-primary sticky-top">
+          <div className="container-fluid">
+          <div className="navbar-header">
+          <a className="navbar-brand" onClick={this.onClickHome} href="/">IRI Notes</a>
+          <button className="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"></span>
+                <span className="icon-bar"></span>
+                <span className="icon-bar"></span>
+                <span className="icon-bar"></span>
+              </button>
+            </div>
+            <div className="collapse navbar-collapse text-center" id="navbarSupportedContent">
+              <ul className="navbar-nav mr-auto">
+                <li className="nav-item">
+                  <a className="nav-link " onClick={this.onClickSessions} href="/sessions">Sessions</a>
                 </li>
-            </ul>
-            <ul className="nav navbar-nav ml-auto">
-              <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
-              <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
-              <Online {...this.props} />
-              <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
-            </ul>
+              </ul>
+              <ul className="navbar-nav navbar-center">
+                  <li className="nav-item text-secondary">
+                    <CreateSession
+                      history={this.props.history}
+                      group={this.props.currentGroup}
+                      createSession={this.props.sessionsActions.createSession}
+                    />
+                  </li>
+              </ul>
+              <ul className="nav navbar-nav ml-auto">
+                <NavbarGroup currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>
+                <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />
+                <Online {...this.props} />
+                <NavbarLogin {...this.props} onLogout={this.onClickLogout} />
+              </ul>
+            </div>
+            <Modal
+            className="Modal__Bootstrap modal-dialog modal-dialog-centered"
+            // closeTimeoutMS={150}
+            isOpen={this.state.modalIsOpen}
+            onRequestClose={this.handleModalCloseRequest}
+            >
+              <div id="logout-modal" className="modal-content">
+                <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+                <div className="modal-body text-center">
+                <span className="material-icons modal-warning text-info pb-5">warning</span>
+                  <p className="modal-text">
+                    Certaines sessions n'ont pas encore été sauvegardées.
+                    <br />
+                    Si vous continuez, elles seront perdues.
+                  </p>
+                <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
+                </div>
+              </div>
+            </Modal>
           </div>
-          <Modal
-          className="Modal__Bootstrap modal-dialog modal-dialog-centered"
-          // closeTimeoutMS={150}
-          isOpen={this.state.modalIsOpen}
-          onRequestClose={this.handleModalCloseRequest}
-          >
-            <div id="logout-modal" className="modal-content">
-              <span id="logout-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
-              <div className="modal-body text-center">
-              <span className="material-icons modal-warning text-info pb-5">warning</span>
-                <p className="modal-text">
-                  Certaines sessions n'ont pas encore été sauvegardées.
-                  <br />
-                  Si vous continuez, elles seront perdues.
-                </p>
-              <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 mb-3" id="logout-modal-button" onClick={ this.confirmLogout }>Confirmer</button>
-              </div>
-            </div>
-          </Modal>
-        </div>
-      </nav>
+        </nav>
+        <OffLineMessage isAuthenticated={this.props.isAuthenticated} />
+      </div>
     );
   }
 }