ducky/web

Paddy 2015-05-31 Parent:efdc78cbdac5 Child:e6da0d35a533

6:a641906b8267 Browse Files

Enable catch-all in our ValidationError component. We're doing this an ugly, hacky way. But it works, and right now, that's what counts. To match our params/fields/headers properties on the ValidationError component, we're going to add the notParams/notFields/notHeaders properties--they match any error _not_ targeting those params/fields/headers. Basically, "any error that wouldn't be caught by these filters". Which is an ugly, but workable, solution for a catch-all ValidationError--just tell it to catch anything but the params/fields/headers that are being handled by the other ValidationErrors. Our implementation of this in the RegisterPage component validates (ha!) that it's at least workable model, if not overly pretty. Also, I anticipate some human error bugs in the future, where one of the field-specific ValidationErrors gets updated and the catch-all ValidationError does not. But whatever. For now, this is Good Enough™.

src/components/validation-error.jsx src/pages/register.jsx 

     1.1 --- a/src/components/validation-error.jsx	Sun May 31 17:20:32 2015 -0400
     1.2 +++ b/src/components/validation-error.jsx	Sun May 31 17:39:19 2015 -0400
     1.3 @@ -8,32 +8,54 @@
     1.4      if (this.props.field && !this.props.fields) {
     1.5        fields = [this.props.field]
     1.6      }
     1.7 +    let notFields = this.props.notFields
     1.8 +    if (this.props.notField && !this.props.notFields) {
     1.9 +      notFields = [this.props.notField]
    1.10 +    }
    1.11      let params = this.props.params
    1.12      if (this.props.param && !this.props.params) {
    1.13        params = [this.props.param]
    1.14      }
    1.15 +    let notParams = this.props.notParams
    1.16 +    if (this.props.notParam && !this.props.notParams) {
    1.17 +      notParams = [this.props.notParam]
    1.18 +    }
    1.19      let headers = this.props.headers
    1.20      if (this.props.header && !this.props.headers) {
    1.21        headers = [this.props.header]
    1.22      }
    1.23 +    let notHeaders = this.props.notHeaders
    1.24 +    if (this.props.notHeader && !this.props.notHeaders) {
    1.25 +      notHeaders = [this.props.notHeader]
    1.26 +    }
    1.27      const outputs = this.props.outputs
    1.28      const errors = this.props.errors
    1.29 +
    1.30      return (
    1.31        <div className={errors.length ? '' : 'hidden' }>
    1.32          {errors.map(error => {
    1.33            let errorString = ''
    1.34 -          if (!error.field && !error.param && !error.header) {
    1.35 +          if (!error.field && !notFields && !error.param && !notParams && !error.header && !notHeaders) {
    1.36              return ''
    1.37            }
    1.38            if (fields && error.field && fields.indexOf(error.field) < 0) {
    1.39              return ''
    1.40            }
    1.41 +          if (notFields && error.field && notFields.indexOf(error.field) >= 0) {
    1.42 +            return ''
    1.43 +          }
    1.44            if (params && error.param && params.indexOf(error.param) < 0) {
    1.45              return ''
    1.46            }
    1.47 +          if (notParams && error.param && notParams.indexOf(error.param) >= 0) {
    1.48 +            return ''
    1.49 +          }
    1.50            if (headers && error.header && headers.indexOf(error.header) < 0) {
    1.51              return ''
    1.52            }
    1.53 +          if (notHeaders && error.header && notHeaders.indexOf(error.header) >= 0) {
    1.54 +            return ''
    1.55 +          }
    1.56            if (outputs[error.error] == undefined) {
    1.57              errorString = 'An unknown error occurred. Please contact support. Sorry.'
    1.58            } else {

     2.1 --- a/src/pages/register.jsx	Sun May 31 17:20:32 2015 -0400
     2.2 +++ b/src/pages/register.jsx	Sun May 31 17:39:19 2015 -0400
     2.3 @@ -45,6 +45,9 @@
     2.4      'invalid_value': 'Oops! Those passphrases don’t match. Maybe double-check them?',
     2.5    },
     2.6  
     2.7 +  catchAllValidationOutputs: {
     2.8 +  },
     2.9 +
    2.10    debouncedValidateForm (event) {
    2.11      this._validateForm(event)
    2.12    },
    2.13 @@ -188,6 +191,8 @@
    2.14                <label htmlFor='passphraseConfirmationInput'>Verify Passphrase</label>
    2.15                <input id='passphraseConfirmationInput' type='password' placeholder='Just to make sure you know it.' valueLink={this.linkState('passphraseConfirmation')} disabled={this.state.active} onInput={this.validateForm} />
    2.16                <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} field='/passphrase_confirmation' outputs={this.passphraseConfirmationValidationOutputs} />
    2.17 +
    2.18 +              <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} notFields={['/email', '/email_confirmation', '/passphrase', '/passphrase_confirmation']} notHeaders={[]} notParams={[]} outputs={this.catchAllValidationOutputs} />
    2.19              </div>
    2.20              <div className='actionbuttons'>
    2.21                <button onClick={this.onBackClick} disabled={this.state.active} type='button' className='ladda-button'>Back</button>