ducky/web

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

6:a641906b8267 Go to Latest

ducky/web/src/pages/register.jsx

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™.

History
     1.1 --- a/src/pages/register.jsx	Sun May 31 17:20:32 2015 -0400
     1.2 +++ b/src/pages/register.jsx	Sun May 31 17:39:19 2015 -0400
     1.3 @@ -45,6 +45,9 @@
     1.4      'invalid_value': 'Oops! Those passphrases don’t match. Maybe double-check them?',
     1.5    },
     1.6  
     1.7 +  catchAllValidationOutputs: {
     1.8 +  },
     1.9 +
    1.10    debouncedValidateForm (event) {
    1.11      this._validateForm(event)
    1.12    },
    1.13 @@ -188,6 +191,8 @@
    1.14                <label htmlFor='passphraseConfirmationInput'>Verify Passphrase</label>
    1.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} />
    1.16                <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} field='/passphrase_confirmation' outputs={this.passphraseConfirmationValidationOutputs} />
    1.17 +
    1.18 +              <ValidationError errors={this.state.clientErrors.concat(this.state.serverErrors)} notFields={['/email', '/email_confirmation', '/passphrase', '/passphrase_confirmation']} notHeaders={[]} notParams={[]} outputs={this.catchAllValidationOutputs} />
    1.19              </div>
    1.20              <div className='actionbuttons'>
    1.21                <button onClick={this.onBackClick} disabled={this.state.active} type='button' className='ladda-button'>Back</button>