From fa1c48e480e897ca3ad52132e7f05d49aee7bcd9 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Thu, 20 Aug 2015 14:44:57 +0900
Subject: [PATCH] =?UTF-8?q?LogoutModal=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/Components/HomeNavigator.jsx   |  7 +++---
 browser/main/Components/LogoutModal.jsx     | 27 +++++++++++++++++++++
 browser/main/Components/PlanetNavigator.jsx |  2 +-
 browser/styles/shared/modal.styl            | 18 ++++++++++++++
 4 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 browser/main/Components/LogoutModal.jsx

diff --git a/browser/main/Components/HomeNavigator.jsx b/browser/main/Components/HomeNavigator.jsx
index f312c380..462853ed 100644
--- a/browser/main/Components/HomeNavigator.jsx
+++ b/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>
diff --git a/browser/main/Components/LogoutModal.jsx b/browser/main/Components/LogoutModal.jsx
new file mode 100644
index 00000000..9a6e542d
--- /dev/null
+++ b/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>
+    )
+  }
+})
diff --git a/browser/main/Components/PlanetNavigator.jsx b/browser/main/Components/PlanetNavigator.jsx
index 54a72e57..0df7b4f6 100644
--- a/browser/main/Components/PlanetNavigator.jsx
+++ b/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>
diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl
index bacb12b3..2054f57e 100644
--- a/browser/styles/shared/modal.styl
+++ b/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()