add Logout modal & update PlanetHeader

browser/main/Containers/UserSettingContainer.jsx

@@ -1,13 +1,51 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
 
+var ModalBase = require('../Components/ModalBase')
+
 var AuthActions = require('../Actions/AuthActions')
 
-var currentUser = {
-  name: 'testcat',
-  email: 'testcat@example.com',
-  profileName: 'Test Cat'
-}
+var AuthStore = require('../Stores/AuthStore')
+
+var LogOutModal = React.createClass({
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.cancel).focus()
+  },
+  submit: function () {
+    AuthActions.logout()
+  },
+  handleKeyDown: function (e) {
+    if (e.keyCode === 13 && e.metaKey) {
+      this.submit()
+      return
+    }
+    if (e.keyCode === 27) {
+      this.props.close()
+      return
+    }
+  },
+  render: function () {
+    return (
+      <div onKeyDown={this.handleKeyDown} className='logOutModal modal'>
+        <div className='modal-header'>
+          <h1>Logout</h1>
+        </div>
+        <div className='modal-body'>
+          <p>Are you sure to log out?</p>
+        </div>
+        <div className='modal-footer'>
+          <div className='modal-control'>
+            <button ref='cancel' onClick={this.props.close} className='btn-default'>Cancel</button>
+            <button onClick={this.submit} className='btn-primary'>Logout</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})
 
 var UserSettingNavigation = React.createClass({
   propTypes: {
@@ -17,13 +55,21 @@ var UserSettingNavigation = React.createClass({
     current: React.PropTypes.string,
     changeCurrent: React.PropTypes.func
   },
+  getInitialState: function () {
+    return {
+      isLogOutModalOpen: false
+    }
+  },
   changeFactory: function (current) {
     return function () {
       this.props.changeCurrent(current)
     }.bind(this)
   },
-  logOut: function () {
-    AuthActions.logout()
+  openLogOutModal: function () {
+    this.setState({isLogOutModalOpen: true})
+  },
+  closeLogOutModal: function () {
+    this.setState({isLogOutModalOpen: false})
   },
   render: function () {
     return (
@@ -34,8 +80,11 @@ var UserSettingNavigation = React.createClass({
           <a className={this.props.current === 'setting' ? 'active' : ''} onClick={this.changeFactory('setting')}><i className='fa fa-gears fa-fw'/> Setting</a>
           <a className={this.props.current === 'integration' ? 'active' : ''} onClick={this.changeFactory('integration')}><i className='fa fa-share-alt fa-fw'/> Integration</a>
           <a className={this.props.current === 'help' ? 'active' : ''} onClick={this.changeFactory('help')}><i className='fa fa-info-circle fa-fw'/> Help</a>
-          <a onClick={this.logOut}><i className='fa fa-sign-out fa-fw'/> Logout</a>
+          <a onClick={this.openLogOutModal}><i className='fa fa-sign-out fa-fw'/> Logout</a>
         </nav>
+        <ModalBase close={this.closeLogOutModal} isOpen={this.state.isLogOutModalOpen}>
+          <LogOutModal close={this.closeLogOutModal}/>
+        </ModalBase>
       </div>
     )
   }
@@ -112,6 +161,8 @@ module.exports = React.createClass({
     })
   },
   render: function () {
+    var currentUser = AuthStore.getUser()
+
     return (
       <div className='UserSettingContainer'>
         <UserSettingNavigation currentUser={currentUser} current={this.state.current} changeCurrent={this.changeCurrent}/>