ducky/web
ducky/web/src/components/validation-error.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™.
| paddy@2 | 1 import React from 'react' |
| paddy@2 | 2 |
| paddy@2 | 3 export default React.createClass({ |
| paddy@2 | 4 displayName: 'ValidationError', |
| paddy@2 | 5 |
| paddy@2 | 6 render () { |
| paddy@5 | 7 let fields = this.props.fields |
| paddy@5 | 8 if (this.props.field && !this.props.fields) { |
| paddy@5 | 9 fields = [this.props.field] |
| paddy@5 | 10 } |
| paddy@6 | 11 let notFields = this.props.notFields |
| paddy@6 | 12 if (this.props.notField && !this.props.notFields) { |
| paddy@6 | 13 notFields = [this.props.notField] |
| paddy@6 | 14 } |
| paddy@5 | 15 let params = this.props.params |
| paddy@5 | 16 if (this.props.param && !this.props.params) { |
| paddy@5 | 17 params = [this.props.param] |
| paddy@5 | 18 } |
| paddy@6 | 19 let notParams = this.props.notParams |
| paddy@6 | 20 if (this.props.notParam && !this.props.notParams) { |
| paddy@6 | 21 notParams = [this.props.notParam] |
| paddy@6 | 22 } |
| paddy@5 | 23 let headers = this.props.headers |
| paddy@5 | 24 if (this.props.header && !this.props.headers) { |
| paddy@5 | 25 headers = [this.props.header] |
| paddy@5 | 26 } |
| paddy@6 | 27 let notHeaders = this.props.notHeaders |
| paddy@6 | 28 if (this.props.notHeader && !this.props.notHeaders) { |
| paddy@6 | 29 notHeaders = [this.props.notHeader] |
| paddy@6 | 30 } |
| paddy@2 | 31 const outputs = this.props.outputs |
| paddy@2 | 32 const errors = this.props.errors |
| paddy@6 | 33 |
| paddy@2 | 34 return ( |
| paddy@2 | 35 <div className={errors.length ? '' : 'hidden' }> |
| paddy@2 | 36 {errors.map(error => { |
| paddy@2 | 37 let errorString = '' |
| paddy@6 | 38 if (!error.field && !notFields && !error.param && !notParams && !error.header && !notHeaders) { |
| paddy@4 | 39 return '' |
| paddy@4 | 40 } |
| paddy@5 | 41 if (fields && error.field && fields.indexOf(error.field) < 0) { |
| paddy@2 | 42 return '' |
| paddy@2 | 43 } |
| paddy@6 | 44 if (notFields && error.field && notFields.indexOf(error.field) >= 0) { |
| paddy@6 | 45 return '' |
| paddy@6 | 46 } |
| paddy@5 | 47 if (params && error.param && params.indexOf(error.param) < 0) { |
| paddy@2 | 48 return '' |
| paddy@2 | 49 } |
| paddy@6 | 50 if (notParams && error.param && notParams.indexOf(error.param) >= 0) { |
| paddy@6 | 51 return '' |
| paddy@6 | 52 } |
| paddy@5 | 53 if (headers && error.header && headers.indexOf(error.header) < 0) { |
| paddy@2 | 54 return '' |
| paddy@2 | 55 } |
| paddy@6 | 56 if (notHeaders && error.header && notHeaders.indexOf(error.header) >= 0) { |
| paddy@6 | 57 return '' |
| paddy@6 | 58 } |
| paddy@2 | 59 if (outputs[error.error] == undefined) { |
| paddy@2 | 60 errorString = 'An unknown error occurred. Please contact support. Sorry.' |
| paddy@2 | 61 } else { |
| paddy@2 | 62 errorString = outputs[error.error] |
| paddy@2 | 63 } |
| paddy@2 | 64 const id = [error.field, error.param, error.header, error.error].join("|") |
| paddy@2 | 65 return <div key={id} className="flash-error validation"><span>{errorString}</span></div> |
| paddy@2 | 66 })} |
| paddy@2 | 67 </div> |
| paddy@2 | 68 ) |
| paddy@2 | 69 } |
| paddy@2 | 70 }) |