ducky/web

Paddy 2015-05-31 Parent:a641906b8267

7:e6da0d35a533 Go to Latest

ducky/web/src/components/validation-error.jsx

Add error handling messages, clear server errors on validation. Add missing messages for error conditions that our server can return. Clear our server error messages when client-side validation occurs, so you aren't confusingly left with errors after you change the input that caused them. Ideally, this behaviour would be limited to just the errors that were caused by the updated field, but clearing all of them seems to be the more user-friendly behaviour than just leaving them. Baby steps. Fix a bug in our handling of error messages--ampersand-sync is kind of inconsistent, and parses our successful responses as JSON, but neglects to parse the error responses as JSON. So we need to manually parse our errors from JSON before we can work with them. We also added a handler for invalid_client error messages, which don't match our error objects (thanks OAuth2 spec!), so we translate it to one of our error objects and then add it to the server errors to be displayed.

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