Add: Log in / Sign upの時にエラーが出たらAlertを表示する

Debug: Tray Icon, PopUpWindow, Menuがいつの間にか消える

browser/finder/Components/FinderList.jsx

@@ -12,7 +12,7 @@ module.exports = React.createClass({
     var index = this.props.articles.indexOf(this.props.currentArticle)
     var el = React.findDOMNode(this)
     var li = el.querySelectorAll('li')[index]
-    
+
     if (li == null) {
       return
     }

browser/main/Containers/LoginContainer.jsx

@@ -4,6 +4,8 @@ var Link = ReactRouter.Link
 
 var AuthActions = require('../Actions/AuthActions')
 
+var AuthStore = require('../Stores/AuthStore')
+
 var OnlyGuest = require('../Mixins/OnlyGuest')
 
 module.exports = React.createClass({
@@ -11,14 +13,50 @@ module.exports = React.createClass({
   getInitialState: function () {
     return {
       email: '',
-      password: ''
+      password: '',
+      authenticationFailed: false,
+      connectionFailed: false,
+      isSending: false
+    }
+  },
+  componentDidMount: function () {
+    this.unsubscribe = AuthStore.listen(this.onListen)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onListen: function (res) {
+    if (res.status === 'failedToLogIn') {
+      if (res.data.status === 401) {
+        // Wrong E-mail or Password
+        this.setState({
+          authenticationFailed: true,
+          connectionFailed: false,
+          isSending: false
+        })
+        return
+      }
+      // Connection Failed or Whatever
+      this.setState({
+        authenticationFailed: false,
+        connectionFailed: true,
+        isSending: false
+      })
+      return
     }
   },
   handleSubmit: function (e) {
-    AuthActions.login({
+    this.setState({
-      email: this.state.email,
+      authenticationFailed: false,
-      password: this.state.password
+      connectionFailed: false,
+      isSending: true
+    }, function () {
+      AuthActions.login({
+        email: this.state.email,
+        password: this.state.password
+      })
     })
+
     e.preventDefault()
   },
   render: function () {
@@ -46,6 +84,19 @@ module.exports = React.createClass({
           <div className='form-group'>
             <input className='stripInput' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
           </div>
+
+          {this.state.isSending ? (
+            <p className='alertInfo'>Logging in...</p>
+          ) : null}
+
+          {this.state.connectionFailed ? (
+            <p className='alertError'>Please try again.</p>
+          ) : null}
+
+          {this.state.authenticationFailed ? (
+            <p className='alertError'>Wrong E-mail or Password.</p>
+          ) : null}
+
           <div className='form-group'>
             <button className='logInButton' type='submit'>Log In</button>
           </div>

browser/main/Containers/RegisterContainer.jsx

@@ -4,6 +4,8 @@ var Link = ReactRouter.Link
 
 var AuthActions = require('../Actions/AuthActions')
 
+var AuthStore = require('../Stores/AuthStore')
+
 var OnlyGuest = require('../Mixins/OnlyGuest')
 
 module.exports = React.createClass({
@@ -13,15 +15,74 @@ module.exports = React.createClass({
       email: '',
       password: '',
       name: '',
-      profileName: ''
+      profileName: '',
+      connectionFailed: false,
+      emailConflicted: false,
+      nameConflicted: false,
+      validationFailed: false,
+      isSending: false
+    }
+  },
+  componentDidMount: function () {
+    this.unsubscribe = AuthStore.listen(this.onListen)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onListen: function (res) {
+    if (res.status === 'failedToRegister') {
+      if (res.data.status === 409) {
+        // Confliction
+        var emailConflicted = res.data.body.errors[0].path === 'email'
+        var nameConflicted = res.data.body.errors[0].path === 'name'
+
+        this.setState({
+          connectionFailed: false,
+          emailConflicted: emailConflicted,
+          nameConflicted: nameConflicted,
+          validationFailed: false,
+          isSending: false
+        })
+        return
+      } else if (res.data.status === 422) {
+        this.setState({
+          connectionFailed: false,
+          emailConflicted: false,
+          nameConflicted: false,
+          validationFailed: {
+            errors: res.data.body.errors.map(function (error) {
+              return error.path
+            })
+          },
+          isSending: false
+        })
+        return
+      }
+      // Connection Failed or Whatever
+      this.setState({
+        connectionFailed: true,
+        emailConflicted: false,
+        nameConflicted: false,
+        validationFailed: false,
+        isSending: false
+      })
+      return
     }
   },
   handleSubmit: function (e) {
-    AuthActions.register({
+    this.setState({
-      email: this.state.email,
+      connectionFailed: false,
-      password: this.state.password,
+      emailConflicted: false,
-      name: this.state.name,
+      nameConflicted: false,
-      profileName: this.state.profileName
+      validationFailed: false,
+      isSending: true
+    }, function () {
+      AuthActions.register({
+        email: this.state.email,
+        password: this.state.password,
+        name: this.state.name,
+        profileName: this.state.profileName
+      })
     })
 
     e.preventDefault()
@@ -57,6 +118,27 @@ module.exports = React.createClass({
           <div className='form-group'>
             <input className='stripInput' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
           </div>
+
+          {this.state.isSending ? (
+            <p className='alertInfo'>Signing up...</p>
+          ) : null}
+
+          {this.state.connectionFailed ? (
+            <p className='alertError'>Please try again.</p>
+          ) : null}
+
+          {this.state.emailConflicted ? (
+            <p className='alertError'>E-mail already exists.</p>
+          ) : null}
+
+          {this.state.nameConflicted ? (
+            <p className='alertError'>Username already exists.</p>
+          ) : null}
+
+          {this.state.validationFailed ? (
+            <p className='alertError'>Please fill every field correctly: {this.state.validationFailed.errors.join(', ')}</p>
+          ) : null}
+
           <div className='form-group'>
             <button className='logInButton' type='submit'>Sign Up</button>
           </div>

browser/main/Stores/AuthStore.js

@@ -23,7 +23,10 @@ var AuthStore = Reflux.createStore({
         .end(function (err, res) {
           if (err) {
             console.error(err)
-            this.trigger(null)
+            this.trigger({
+              status: 'failedToLogIn',
+              data: res
+            })
             return
           }
 
@@ -44,8 +47,11 @@ var AuthStore = Reflux.createStore({
         .set('Accept', 'application/json')
         .end(function (err, res) {
           if (err) {
-            console.error(err)
+            console.error(res)
-            this.trigger(null)
+            this.trigger({
+              status: 'failedToRegister',
+              data: res
+            })
             return
           }
 

browser/styles/main/containers/LoginContainer.styl

@@ -54,8 +54,18 @@
   form
     width 400px
     margin 0 auto 45px
+    .alertInfo, .alertError
+      margin-top 15px
+      margin-bottom 15px
+      height 44px
+      text-align center
+      border-radius 22px
+    .alertInfo
+      alertInfo()
+    .alertError
+      alertError()
     div.form-group:last-child
-      margin-top 45px
+      margin-top 15px
       button.logInButton
         btnPrimary()
         height 44px

browser/styles/mixins/alert.styl

@@ -0,0 +1,18 @@
+alert()
+  line-height 44px
+  border-radius 5px
+
+alertSuccess()
+  alert()
+  background-color successBackgroundColor
+  color successTextColor
+
+alertError()
+  alert()
+  background-color errorBackgroundColor
+  color errorTextColor
+
+alertInfo()
+  alert()
+  background-color infoBackgroundColor
+  color infoTextColor

browser/styles/shared/modal.styl

@@ -175,8 +175,6 @@
             width 250px
           .alertSuccess, .alertError, .alertInfo
             float right
-            line-height 44px
-            border-radius 5px
             transition 0.1s
             overflow hidden
             white-space nowrap
@@ -185,14 +183,11 @@
             &.hide
               width 0
           .alertSuccess
-            background-color successBackgroundColor
+            alertSuccess()
-            color successTextColor
           .alertError
-            background-color errorBackgroundColor
+            alertError()
-            color errorTextColor
           .alertInfo
-            background-color infoBackgroundColor
+            alertInfo()
-            color infoTextColor
           .saveButton
             float right
       .contact
@@ -213,8 +208,6 @@
             float right
           .alertSuccess, .alertError, .alertInfo
             float right
-            line-height 44px
-            border-radius 5px
             transition 0.1s
             overflow hidden
             white-space nowrap
@@ -223,14 +216,11 @@
             &.hide
               width 0
           .alertSuccess
-            background-color successBackgroundColor
+            alertSuccess()
-            color successTextColor
           .alertError
-            background-color errorBackgroundColor
+            alertError()
-            color errorTextColor
           .alertInfo
-            background-color infoBackgroundColor
+            alertInfo()
-            color infoTextColor
       .info
         text-align left
         .infoLabel

main.js

@@ -6,6 +6,9 @@ var Tray = require('tray')
 require('crash-reporter').start()
 
 var mainWindow = null
+var appIcon = null
+var menu = null
+var popUpWindow = null
 
 // app.on('window-all-closed', function () {
 //   if (process.platform !== 'darwin') app.quit()
@@ -15,11 +18,11 @@ app.on('ready', function () {
   // menu start
   var template = require('./modules/menu-template')
 
-  var menu = Menu.buildFromTemplate(template)
+  menu = Menu.buildFromTemplate(template)
 
   Menu.setApplicationMenu(menu)
   // menu end
-  var appIcon = new Tray(__dirname + '/tray-icon.png')
+  appIcon = new Tray(__dirname + '/tray-icon.png')
   appIcon.setToolTip('This is my application.')
   appIcon.on('clicked', function () {
     if (mainWindow == null) {
@@ -38,7 +41,7 @@ app.on('ready', function () {
     mainWindow.show()
   })
 
-  var popUpWindow = new BrowserWindow({
+  popUpWindow = new BrowserWindow({
     width: 600,
     height: 400,
     show: false,