on Refactoring...

2025-12-13 17:56:25 +00:00 · 2015-08-17 01:10:08 +09:00
parent 932997259f
commit 23b8b49c00
59 changed files with 1960 additions and 2179 deletions
--- a/browser/main/Containers/SignupContainer.jsx
+++ b/browser/main/Containers/SignupContainer.jsx
@@ -0,0 +1,148 @@
+/* global localStorage */
+
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+var AuthFilter = require('../Mixins/AuthFilter')
+var LinkedState = require('../Mixins/LinkedState')
+var Hq = require('../Services/Hq')
+
+module.exports = React.createClass({
+  mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest],
+  getInitialState: function () {
+    return {
+      user: {},
+      connectionFailed: false,
+      emailConflicted: false,
+      nameConflicted: false,
+      validationFailed: false,
+      isSending: false
+    }
+  },
+  handleSubmit: function (e) {
+    this.setState({
+      connectionFailed: false,
+      emailConflicted: false,
+      nameConflicted: false,
+      validationFailed: false,
+      isSending: true
+    }, function () {
+      Hq.signup(this.state.user)
+        .then(function (res) {
+          localStorage.setItem('token', res.body.token)
+          localStorage.setItem('currentUser', JSON.stringify(res.body.user))
+
+          this.transitionTo('userHome', {userName: res.body.user.name})
+        }.bind(this))
+        .catch(function (err) {
+          var res = err.response
+          console.log(res)
+          console.log(err.status)
+          if (err.status === 409) {
+            // Confliction
+            var emailConflicted = res.body.errors[0].path === 'email'
+            var nameConflicted = res.body.errors[0].path === 'name'
+
+            this.setState({
+              connectionFailed: false,
+              emailConflicted: emailConflicted,
+              nameConflicted: nameConflicted,
+              validationFailed: false,
+              isSending: false
+            })
+            return
+          }
+
+          if (err.status === 422) {
+            // Validation Failed
+            this.setState({
+              connectionFailed: false,
+              emailConflicted: false,
+              nameConflicted: false,
+              validationFailed: {
+                errors: res.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
+        }.bind(this))
+    })
+
+    e.preventDefault()
+  },
+  render: function () {
+    return (
+      <div className='SignupContainer'>
+        <img className='logo' src='resources/favicon-230x230.png'/>
+
+        <nav className='authNavigator text-center'><Link to='login'>Log In</Link> / <Link to='signup'>Sign Up</Link></nav>
+
+        <div className='socialControl'>
+          <p>Connect with</p>
+          <button className='facebookBtn'><i className='fa fa-facebook fa-fw'/></button>
+          <button className='githubBtn'><i className='fa fa-github fa-fw'/></button>
+        </div>
+
+        <div className='divider'>
+          <hr/>
+          <div className='dividerLabel'>or</div>
+        </div>
+
+        <form onSubmit={this.handleSubmit}>
+          <div className='form-group'>
+            <input className='stripInput' valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>
+          </div>
+          <div className='form-group'>
+            <input className='stripInput' valueLink={this.linkState('user.password')} type='password' placeholder='Password'/>
+          </div>
+          <div className='form-group'>
+            <input className='stripInput' valueLink={this.linkState('user.name')} type='text' placeholder='name'/>
+          </div>
+          <div className='form-group'>
+            <input className='stripInput' valueLink={this.linkState('user.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>
+        </form>
+
+        <p className='alert'>会員登録することで、当サイトの利用規約及びCookieの使用を含むデータに関するポリシーに同意するものとします。</p>
+      </div>
+    )
+  }
+})