SHARE
TWEET

Untitled

a guest Sep 6th, 2014 1,795 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /** @jsx React.DOM */
  2. var React         = require('react');
  3. var httpReq       = require('./httpRequest');
  4. var formValidator = require('./formValidator');
  5. var ERRORS        = {
  6.   FIRST_NAME_BLANK:  'First name is required.',
  7.   LAST_NAME_BLANK:   'Last name is required.',
  8.   MAIL_BLANK:        'email is required.',
  9.   MAIL_INVAILD:      'Invalid Email address',
  10.   MAIL_USED:         'Email has been occupied',
  11.   PASS_BLANK:        'Passowrd is required.',
  12.   PASS_INVALID:      'Please check the password length (8 to 32).',
  13.   PASS_DONTMATCH:    'Entered passwords difference.'
  14. };
  15.  
  16. module.exports = React.createClass({
  17.   getInitialState: function() {
  18.     return {
  19.       processing: false,
  20.       formError: {
  21.         firstName:       { isBlank: false },
  22.         lastName:        { isBlank: false },
  23.         mail:            { isBlank: false, isInvalidFormat: false, isUsed: false },
  24.         password:        { isBlank: false, isInvalidFormat: false },
  25.         confirmPassword: { dontMatch: false }
  26.       },
  27.       userInfo: {
  28.         firstName:        '',
  29.         lastName:         '',
  30.         mail:             '',
  31.         password:         '',
  32.         confirmPassword:  ''
  33.       }
  34.     };
  35.   },
  36.   validator: function(fieldName, value){
  37.     var formError = this.state.formError;
  38.     switch(fieldName) {
  39.       case 'firstName':
  40.         formError.firstName.isBlank = formValidator.isEmpty(value);
  41.         break;
  42.       case 'lastName':
  43.         formError.lastName.isBlank = formValidator.isEmpty(value);
  44.         break;
  45.       case 'mail':
  46.         formError.mail.isBlank = formValidator.isEmpty(value);
  47.         formError.mail.isInvalidFormat = formValidator.isInvalidMail(value);
  48.         break;
  49.       case 'password':
  50.         formError.password.isBlank = formValidator.isEmpty(value);
  51.         formError.password.isInvalidFormat = formValidator.isInvalidPassword(value);
  52.         break;
  53.       case 'confirmPassword':
  54.         formError.confirmPassword.dontMatch = (value !== this.state.userInfo.password);
  55.         break;
  56.     }
  57.     return formError;
  58.   },
  59.   render: function() {
  60.     var ft = this.props.footer || (
  61.         <div>
  62.            I already have an accounts,  <a href="/accounts/login">Login</a>
  63.         </div>
  64.         );
  65.     return (
  66.      <div>
  67.        <h2>{ this.props.title || 'Sigup' }</h2>
  68.        <div className="form-sigup">
  69.          <form onSubmit={this.handleSubmit}>
  70.          <div className="field field-name">
  71.            <input placeholder="First name" value={this.state.userInfo.firstName} onChange={this.handleInputFirstName} />
  72.            <input placeholder="Last name" value={this.state.userInfo.lastName} onChange={this.handleInputLastName} />
  73.          </div>
  74.          <div className="field-error">
  75.          { this.state.formError.firstName.isBlank ? ERRORS.FIRST_NAME_BLANK : ''}
  76.          { this.state.formError.lastName.isBlank ? ERRORS.LAST_NAME_BLANK : ''}
  77.          </div>
  78.          <div className="field">
  79.            <input placeholder="Email" value={this.state.userInfo.mail} onChange={this.handleInputMail} />
  80.          </div>
  81.          <div className="field-error">
  82.          { this.state.formError.mail.isBlank ? ERRORS.MAIL_BLANK : ''}
  83.          { this.state.formError.mail.isInvalidFormat ? ERRORS.MAIL_INVAILD : ''}
  84.          { this.state.formError.mail.isUsed ? ERRORS.MAIL_USED : ''}
  85.          </div>
  86.          <div className="field">
  87.            <input type="password" placeholder="Password (8 to 32 characters)" value={this.state.userInfo.password} onChange={this.handleInputPassword} />
  88.          </div>
  89.          <div className="field-error">
  90.          { this.state.formError.password.isBlank ? ERRORS.PASS_BLANK : ''}
  91.          { this.state.formError.password.isInvalidFormat ? ERRORS.PASS_INVALID : ''}
  92.          </div>
  93.          <div className="field">
  94.            <input type="password" placeholder="Confirm password" value={this.state.userInfo.confirmPassword} onChange={this.handleInputConfirmPassword} />
  95.          </div>
  96.          <div className="field-error">
  97.          { this.state.formError.confirmPassword.dontMatch ? ERRORS.PASS_DONTMATCH : ''}
  98.          </div>
  99.          <div className="field-submit">
  100.            <input type="submit" value="Sigup" />
  101.          </div>
  102.          </form>
  103.          <div className="form-ft">{ft}</div>
  104.        </div>
  105.      </div>
  106.    );
  107.   },
  108.   handleSubmit: function(e) {
  109.     e.preventDefault();
  110.     if (this.state.processing) return;
  111.     var userInfo = this.state.userInfo;
  112.     var formError;
  113.     for (var field in userInfo) {
  114.       if (userInfo.hasOwnProperty(field)) {
  115.         formError = this.validator(field, userInfo[field]);
  116.       }
  117.     }
  118.     this.setState({
  119.       formError: formError
  120.     });
  121.     var hasError = false;
  122.     (function _check(o) {
  123.       for (var i in o) {
  124.         if (o.hasOwnProperty(i)) {
  125.           if (typeof o[i] == 'object') {
  126.             _check(o[i]);
  127.           } else if (o[i]) {
  128.             hasError = true;
  129.             break;
  130.           }
  131.         }
  132.       }
  133.     })(formError);
  134.     if (hasError) {
  135.       return;
  136.     }
  137.     this.setState({
  138.       processing: true
  139.     });
  140.     httpReq('/accounts/sigup', this.state.userInfo, { method: 'post' })
  141.       .then(
  142.           function(e) {
  143.             if (e.error) {
  144.               var formError = this.state.formError;
  145.               formError[e.error.errorField][e.error.errorType] = true;
  146.               this.setState({ formError: formError, processing: false });
  147.               return;
  148.             }
  149.             self.location.href = '/accounts/login';
  150.           }.bind(this),
  151.           function(err) { console.log(err); }
  152.         )
  153.       .then(function() {
  154.         this.setState({
  155.           processing: false
  156.         });
  157.       }.bind(this));
  158.   },
  159.   handleInputFirstName: function(e) {
  160.     var userInfo = this.state.userInfo;
  161.     userInfo.firstName = e.target.value;
  162.     this.setState({
  163.       userInfo: userInfo
  164.     });
  165.   },
  166.   handleInputLastName: function(e) {
  167.     var userInfo = this.state.userInfo;
  168.     userInfo.lastName = e.target.value;
  169.     this.setState({
  170.       userInfo: userInfo
  171.     });
  172.   },
  173.   handleInputMail: function(e) {
  174.     var userInfo = this.state.userInfo;
  175.     var formError = this.state.formError;
  176.     userInfo.mail = e.target.value;
  177.     formError.mail.isUsed = false;
  178.     this.setState({
  179.       formError: formError,
  180.       userInfo: userInfo
  181.     });
  182.   },
  183.   handleInputPassword: function(e) {
  184.     var userInfo = this.state.userInfo;
  185.     userInfo.password = e.target.value;
  186.     this.setState({
  187.       userInfo: userInfo
  188.     });
  189.   },
  190.   handleInputConfirmPassword: function(e) {
  191.     var userInfo = this.state.userInfo;
  192.     userInfo.confirmPassword = e.target.value;
  193.     this.setState({
  194.       userInfo: userInfo
  195.     });
  196.   }
  197. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top