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

Debug: Tray Icon, PopUpWindow, Menuがいつの間にか消える
2025-12-13 17:56:25 +00:00 · 2015-07-29 22:43:27 +09:00
parent 90c2ff7480
commit c6ef86cbbe
8 changed files with 194 additions and 34 deletions
--- a/browser/finder/Components/FinderList.jsx
+++ b/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
    }
--- a/browser/main/Containers/LoginContainer.jsx
+++ b/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>
--- a/browser/main/Containers/RegisterContainer.jsx
+++ b/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>
--- a/browser/main/Stores/AuthStore.js
+++ b/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)
-            this.trigger(null)
+            console.error(res)
+            this.trigger({
+              status: 'failedToRegister',
+              data: res
+            })
            return
          }

--- a/browser/styles/main/containers/LoginContainer.styl
+++ b/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
--- a/browser/styles/mixins/alert.styl
+++ b/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
--- a/browser/styles/shared/modal.styl
+++ b/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
-            color successTextColor
+            alertSuccess()
          .alertError
-            background-color errorBackgroundColor
-            color errorTextColor
+            alertError()
          .alertInfo
-            background-color infoBackgroundColor
-            color infoTextColor
+            alertInfo()
          .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
-            color successTextColor
+            alertSuccess()
          .alertError
-            background-color errorBackgroundColor
-            color errorTextColor
+            alertError()
          .alertInfo
-            background-color infoBackgroundColor
-            color infoTextColor
+            alertInfo()
      .info
        text-align left
        .infoLabel
--- a/main.js
+++ b/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,