--- 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>
);
}
}