LogoutModal実装

Author: Rokt33r

browser/main/Components/HomeNavigator.jsx

@@ -14,6 +14,7 @@ var UserStore = require('../Stores/UserStore')
 var AboutModal = require('./AboutModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
 var TeamCreateModal = require('./TeamCreateModal')
+var LogoutModal = require('./LogoutModal')
 var ProfileImage = require('./ProfileImage')
 
 module.exports = React.createClass({
@@ -93,9 +94,7 @@ module.exports = React.createClass({
     this.setState({isProfilePopupOpen: false})
   },
   handleLogoutClick: function () {
-    localStorage.removeItem('currentUser')
-    localStorage.removeItem('token')
-    this.transitionTo('login')
+    this.openModal(LogoutModal, {transitionTo: this.transitionTo})
   },
   render: function () {
     var params = this.getParams()
@@ -180,7 +179,7 @@ module.exports = React.createClass({
             <button onClick={this.openAboutModal}><i className='fa fa-info-circle fa-fw'/> About this app</button>
           </li>
           <li>
-            <button onClick={this.handleLogoutClick}><i className='fa fa-sign-out fa-fw'/> Logout</button>
+            <button onClick={this.handleLogoutClick}><i className='fa fa-sign-out fa-fw'/> Log out</button>
           </li>
         </ul>
       </div>

browser/main/Components/LogoutModal.jsx

@@ -0,0 +1,27 @@
+/* global localStorage */
+
+var React = require('react')
+
+module.exports = React.createClass({
+  propTypes: {
+    transitionTo: React.PropTypes.func,
+    close: React.PropTypes.func
+  },
+  logout: function () {
+    localStorage.removeItem('currentUser')
+    localStorage.removeItem('token')
+    this.props.transitionTo('login')
+    this.props.close()
+  },
+  render: function () {
+    return (
+      <div className='LogoutModal modal'>
+        <div className='messageLabel'>Are you sure to log out?</div>
+        <div className='formControl'>
+          <button onClick={this.props.close}>Cancel</button>
+          <button className='logoutButton' onClick={this.logout}>Log out</button>
+        </div>
+      </div>
+    )
+  }
+})

browser/main/Components/PlanetNavigator.jsx

@@ -42,7 +42,7 @@ var PlanetNavigator = React.createClass({
         <button onClick={this.openLaunchModal} className='launchButton btn-primary btn-block'>
           <i className='fa fa-rocket fa-fw'/> Launch
         </button>
-        <nav>
+        <nav className='articleFilters'>
           <a className={usingCodeFilter && !usingNoteFilter ? 'active' : ''} onClick={this.props.toggleCodeFilter}>
             <i className='fa fa-code fa-fw'/> Codes
           </a>

browser/styles/shared/modal.styl

@@ -355,3 +355,21 @@
         border-radius 5px
         display block
         margin 0 auto 25px
+
+  .LogoutModal
+    padding 65px 0 45px
+    width 350px
+    .messageLabel
+      text-align center
+      font-size 1.1em
+      margin-bottom 35px
+    .formControl
+      text-align center
+      button
+        btnDefault()
+        border-radius 5px
+        height 44px
+        margin 15px 5px
+        padding 0 15px
+      button.logoutButton
+        btnPrimary()