ducky/web
ducky/web/src/pages/register.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.
1.1 --- a/src/pages/register.jsx Sun May 31 17:39:19 2015 -0400 1.2 +++ b/src/pages/register.jsx Sun May 31 19:08:58 2015 -0400 1.3 @@ -29,6 +29,7 @@ 1.4 'missing': 'We need to know how to contact you. We promise not to share it.', 1.5 'overflow': 'Hm, that’s a bit long. Do you have a shorter email address?', 1.6 'invalid_format': 'That doesn’t look like an email address… Double check it?', 1.7 + 'conflict': 'Hm, that email already has an account. Did you forget your password?', 1.8 }, 1.9 1.10 emailConfirmationValidationOutputs: { 1.11 @@ -46,6 +47,10 @@ 1.12 }, 1.13 1.14 catchAllValidationOutputs: { 1.15 + 'act_of_god': 'Hm, something went wrong. Try again? Or let support know.', 1.16 + 'invalid_form': 'Uh oh, things went really wrong. Let support know you saw the dreaded invalid_format error!', 1.17 + 'conflict': 'Something went wrong, but trying again will probably fix it.', 1.18 + 'access_denied': 'Oops, something’s gone awry. Let support know your client isn’t working.', 1.19 }, 1.20 1.21 debouncedValidateForm (event) { 1.22 @@ -74,7 +79,7 @@ 1.23 } 1.24 } 1.25 const errors = this.validate(fields, event == null) 1.26 - this.setState({clientErrors: errors}) 1.27 + this.setState({clientErrors: errors, serverErrors: []}) 1.28 return errors.length <= 0 1.29 }, 1.30 1.31 @@ -126,8 +131,12 @@ 1.32 }) 1.33 app.profiles.on('error', (moc, xhr, options) => { 1.34 let state = {active: false} 1.35 - if (xhr.errors && xhr.errors.length) { 1.36 - state.serverErrors = this.state.serverErrors.concat(xhr.errors) 1.37 + let resp = {} 1.38 + if (xhr && xhr.response) { 1.39 + resp = JSON.parse(xhr.response) 1.40 + } 1.41 + if (resp.errors && resp.errors.length) { 1.42 + state.serverErrors = resp.errors 1.43 } else { 1.44 state.serverErrors = [{'error': 'act_of_god'}] 1.45 } 1.46 @@ -142,8 +151,15 @@ 1.47 }) 1.48 app.me.on('error', (moc, xhr, options) => { 1.49 let state = {active: false} 1.50 - if (xhr.errors && xhr.errors.length) { 1.51 - state.serverErrors = this.state.serverErrors.concat(xhr.errors) 1.52 + let resp = {} 1.53 + if (xhr && xhr.response) { 1.54 + resp = JSON.parse(xhr.response) 1.55 + } 1.56 + console.log(resp) 1.57 + if (resp.errors && resp.errors.length) { 1.58 + state.serverErrors = resp.errors 1.59 + } else if (resp.error && resp.error == 'invalid_client') { 1.60 + state.serverErrors = [{'error': 'access_denied'}] 1.61 } else { 1.62 state.serverErrors = [{'error': 'act_of_god'}] 1.63 }