ducky/web
7:e6da0d35a533
Go to Latest
ducky/web/src/pages/onboard.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 import app from 'ampersand-app'
2 import React from 'react'
3 import localLinks from 'local-links'
4 import HeroUnit from '../components/hero'
5 import onboardStyles from '../styles/onboarding.scss'
7 export default React.createClass({
8 displayName: 'OnboardingPage',
10 onLoginClick (event) {
11 event.preventDefault()
12 app.router.navigate('/login')
15 onRegisterClick (event) {
16 event.preventDefault()
17 app.router.navigate('/register')
22 <div className='container'>
23 <HeroUnit title='Welcome to Ducky' settings='true'>Let’s get our ducks in a row.</HeroUnit>
24 <article className='onboarding'>
25 <p>We’re just as excited as you are, but we need some more information before we can do anything. Don’t worry, this won’t take long</p>
26 <p>First of all, who <em>are</em> you? If you have a Ducky account already, we need you to sign in. If you don’t have one, don’t sweat it. Click that fancy “Register” button below.</p>
27 <div className='actionbuttons'>
28 <button onClick={this.onLoginClick}>Sign in</button>
29 <button onClick={this.onRegisterClick}>Register</button>