error step can show try again, or start over; limits to one retry

src/components/join-flow/join-flow.jsx

@@ -23,18 +23,23 @@ class JoinFlow extends React.Component {
         super(props);
         bindAll(this, [
             'handleAdvanceStep',
+            'handleErrorNext',
             'handleRegistrationError',
             'handlePrepareToRegister',
             'handleRegistrationResponse',
             'handleSubmitRegistration'
         ]);
         this.state = {
+            numAttempts: 0,
             formData: {},
             registrationError: null,
             step: 0,
             waiting: false
         };
     }
+    canTryAgain () {
+        return (this.state.numAttempts <= 1);
+    }
     handleRegistrationError (message) {
         if (!message) {
             message = this.props.intl.formatMessage({
@@ -64,7 +69,11 @@ class JoinFlow extends React.Component {
         //     "success": false
         //   }
         // ]
-        this.setState({waiting: false}, () => {
+        // username: 'username exists'
+        this.setState({
+            numAttempts: this.state.numAttempts + 1,
+            waiting: false
+        }, () => {
             let errStr = '';
             if (!err && res.statusCode === 200) {
                 if (body && body[0]) {
@@ -100,7 +109,9 @@ class JoinFlow extends React.Component {
         });
     }
     handleSubmitRegistration (formData) {
-        this.setState({waiting: true}, () => {
+        this.setState({
+            waiting: true
+        }, () => {
             api({
                 host: '',
                 uri: '/accounts/register_new_user/',
@@ -133,14 +144,32 @@ class JoinFlow extends React.Component {
             step: this.state.step + 1
         });
     }
+    handleErrorNext () {
+        if (this.canTryAgain()) {
+            this.handleSubmitRegistration(this.state.formData);
+        } else {
+            this.resetState();
+        }
+    }
+    resetState () {
+        // TODO: refactor this to have initial state live in one place only
+        this.setState({
+            numAttempts: 0,
+            formData: {},
+            registrationError: null,
+            step: 0,
+            waiting: false
+        });
+    }
     render () {
         return (
             <React.Fragment>
                 {this.state.registrationError ? (
                     <RegistrationErrorStep
+                        canTryAgain={this.canTryAgain()}
                         errorMsg={this.state.registrationError}
                         /* eslint-disable react/jsx-no-bind */
-                        onTryAgain={() => this.handleSubmitRegistration(this.state.formData)}
+                        onSubmit={this.handleErrorNext}
                         /* eslint-enable react/jsx-no-bind */
                     />
                 ) : (

src/components/join-flow/registration-error-step.jsx

@@ -19,14 +19,17 @@ class RegistrationErrorStep extends React.Component {
         // But here, we're not really submitting, so we need to prevent
         // the form from navigating away from the current page.
         e.preventDefault();
-        this.props.onTryAgain();
+        this.props.onSubmit();
     }
     render () {
         return (
             <JoinFlowStep
                 description={this.props.errorMsg}
                 innerClassName="join-flow-registration-error"
-                nextButton={this.props.intl.formatMessage({id: 'general.tryAgain'})}
+                nextButton={this.props.canTryAgain ?
+                    this.props.intl.formatMessage({id: 'general.tryAgain'}) :
+                    this.props.intl.formatMessage({id: 'general.startOver'})
+                }
                 title={this.props.intl.formatMessage({id: 'registration.generalError'})}
                 onSubmit={this.handleSubmit}
             />
@@ -35,9 +38,10 @@ class RegistrationErrorStep extends React.Component {
 }
 
 RegistrationErrorStep.propTypes = {
+    canTryAgain: PropTypes.bool,
     errorMsg: PropTypes.string,
     intl: intlShape,
-    onTryAgain: PropTypes.func
+    onSubmit: PropTypes.func
 };
 
 const IntlRegistrationErrorStep = injectIntl(RegistrationErrorStep);