2 import React, { Component } from 'react'; |
2 import React, { Component } from 'react'; |
3 import { connect } from 'react-redux'; |
3 import { connect } from 'react-redux'; |
4 import { withRouter } from 'react-router'; |
4 import { withRouter } from 'react-router'; |
5 import { bindActionCreators } from 'redux'; |
5 import { bindActionCreators } from 'redux'; |
6 // import logo from './logo.svg'; |
6 // import logo from './logo.svg'; |
7 import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; |
7 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap'; |
8 import * as authActions from '../actions/authActions'; |
8 import * as authActions from '../actions/authActions'; |
9 |
9 |
10 const LoginNav = ({isAuthenticated, currentUser, history, authActions}) => { |
10 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => { |
11 |
11 |
12 const onClickSettings = (e) => { |
12 const onClickSettings = (e) => { |
13 e.preventDefault(); |
13 e.preventDefault(); |
14 history.push('/settings'); |
14 history.push('/settings'); |
15 } |
|
16 |
|
17 const onClickLogout = (e) => { |
|
18 e.preventDefault(); |
|
19 authActions.logout(); |
|
20 history.push('/'); |
|
21 } |
15 } |
22 |
16 |
23 const onClickLogin = (e) => { |
17 const onClickLogin = (e) => { |
24 e.preventDefault(); |
18 e.preventDefault(); |
25 history.push('/login'); |
19 history.push('/login'); |
26 } |
20 } |
27 |
21 |
28 |
|
29 if (isAuthenticated) { |
22 if (isAuthenticated) { |
30 return ( |
23 return ( |
31 <NavDropdown title={ currentUser.get('username') } id="user-dropdown"> |
24 <NavDropdown title={ currentUser.get('username') } id="user-dropdown"> |
32 <MenuItem onClick={onClickSettings}>Settings</MenuItem> |
25 <MenuItem onClick={onClickSettings}>Settings</MenuItem> |
33 <MenuItem onClick={onClickLogout}>Logout</MenuItem> |
26 <MenuItem onClick={onLogout}>Logout</MenuItem> |
34 </NavDropdown> |
27 </NavDropdown> |
35 ); |
28 ); |
36 } |
29 } |
37 return ( |
30 return ( |
38 <NavItem onClick={onClickLogin} href="/login">Login</NavItem> |
31 <NavItem onClick={onClickLogin} href="/login">Login</NavItem> |
47 ) |
40 ) |
48 } |
41 } |
49 |
42 |
50 class AppNavbar extends Component { |
43 class AppNavbar extends Component { |
51 |
44 |
|
45 state = { |
|
46 showModal: false |
|
47 } |
|
48 |
|
49 closeModal = () => { |
|
50 this.setState({ showModal: false }); |
|
51 } |
|
52 |
52 onClickHome = (e) => { |
53 onClickHome = (e) => { |
53 e.preventDefault(); |
54 e.preventDefault(); |
|
55 this.props.history.push('/'); |
|
56 } |
|
57 |
|
58 isOutboxEmpty = () => { |
|
59 return this.props.offline.outbox.length === 0; |
|
60 } |
|
61 |
|
62 onClickLogout = (e) => { |
|
63 e.preventDefault(); |
|
64 const isOutboxEmpty = this.isOutboxEmpty(); |
|
65 if (isOutboxEmpty) { |
|
66 this.logout(); |
|
67 } else { |
|
68 this.setState({ showModal: true }) |
|
69 } |
|
70 } |
|
71 |
|
72 confirmLogout = () => { |
|
73 const isOutboxEmpty = this.isOutboxEmpty(); |
|
74 if (!isOutboxEmpty) { |
|
75 this.props.authActions.purgeOutbox(); |
|
76 } |
|
77 this.logout(); |
|
78 this.closeModal(); |
|
79 } |
|
80 |
|
81 logout = () => { |
|
82 this.props.authActions.logout(); |
54 this.props.history.push('/'); |
83 this.props.history.push('/'); |
55 } |
84 } |
56 |
85 |
57 onClickSessions = (e) => { |
86 onClickSessions = (e) => { |
58 e.preventDefault(); |
87 e.preventDefault(); |
72 <Nav> |
101 <Nav> |
73 <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem> |
102 <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem> |
74 </Nav> |
103 </Nav> |
75 <Nav pullRight> |
104 <Nav pullRight> |
76 <Online {...this.props} /> |
105 <Online {...this.props} /> |
77 <LoginNav {...this.props} /> |
106 <LoginNav {...this.props} onLogout={this.onClickLogout} /> |
78 </Nav> |
107 </Nav> |
79 </Navbar.Collapse> |
108 </Navbar.Collapse> |
|
109 <Modal show={this.state.showModal} onHide={this.closeModal}> |
|
110 <Modal.Body> |
|
111 <p className="text-center"> |
|
112 Some data is not synchronized with server. |
|
113 <br /> |
|
114 If you continue, it will be lost. |
|
115 </p> |
|
116 </Modal.Body> |
|
117 <Modal.Footer> |
|
118 <Button bsStyle="primary" onClick={this.confirmLogout}>Confirm</Button> |
|
119 <Button onClick={this.closeModal}>Close</Button> |
|
120 </Modal.Footer> |
|
121 </Modal> |
80 </Navbar> |
122 </Navbar> |
81 ); |
123 ); |
82 } |
124 } |
83 } |
125 } |
84 |
126 |