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

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

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({
-      email: this.state.email,
-      password: this.state.password
+    this.setState({
+      authenticationFailed: false,
+      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({
-      email: this.state.email,
-      password: this.state.password,
-      name: this.state.name,
-      profileName: this.state.profileName
+    this.setState({
+      connectionFailed: false,
+      emailConflicted: false,
+      nameConflicted: false,
+      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>