Error on registration if email taken

Use the new register-specific request token endpoint (https://github.com/matrix-org/matrix-js-sdk/pull/147) and catch the error that it gives if the email is already in use. Also add initial values to the registration form so we can reload it after the error without all the values disappearing, and split out the guest username parameter which was previously called defaultUsername.

src/Signup.js

@@ -152,7 +152,10 @@ class Register extends Signup {
                         console.log("Active flow => %s", JSON.stringify(flow));
                         var flowStage = self.firstUncompletedStage(flow);
                         if (flowStage != self.activeStage) {
-                            return self.startStage(flowStage);
+                            return self.startStage(flowStage).catch(function(err) {
+                                self.setStep('START');
+                                throw err;
+                            });
                         }
                     }
                 }

src/SignupStages.js

@@ -170,7 +170,7 @@ class EmailIdentityStage extends Stage {
                        encodeURIComponent(this.signupInstance.getServerData().session);
 
         var self = this;
-        return this.client.requestEmailToken(
+        return this.client.requestRegisterEmailToken(
             this.signupInstance.email,
             this.clientSecret,
             1, // TODO: Multiple send attempts?
@@ -186,8 +186,8 @@ class EmailIdentityStage extends Stage {
             var e = {
                 isFatal: true
             };
-            if (error.errcode == 'THREEPID_IN_USE') {
+            if (error.errcode == 'M_THREEPID_IN_USE') {
-                e.message = "Email in use";
+                e.message = "This email address is already registered";
             } else {
                 e.message = 'Unable to contact the given identity server';
             }

src/components/structures/login/Registration.js

@@ -54,6 +54,9 @@ module.exports = React.createClass({
         return {
             busy: false,
             errorText: null,
+            formVals: {
+                email: this.props.email,
+            },
         };
     },
 
@@ -108,7 +111,8 @@ module.exports = React.createClass({
         var self = this;
         this.setState({
             errorText: "",
-            busy: true
+            busy: true,
+            formVals: formVals,
         });
 
         if (formVals.username !== this.props.username) {
@@ -228,11 +232,15 @@ module.exports = React.createClass({
                 break; // NOP
             case "Register.START":
             case "Register.STEP_m.login.dummy":
+                // NB. Our 'username' prop is specifically for upgrading
+                // a guest account
                 registerStep = (
                     <RegistrationForm
                         showEmail={true}
-                        defaultUsername={this.props.username}
+                        defaultUsername={this.state.formVals.username}
-                        defaultEmail={this.props.email}
+                        defaultEmail={this.state.formVals.email}
+                        defaultPassword={this.state.formVals.password}
+                        guestUsername={this.props.username}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
                         onRegisterClick={this.onFormSubmit} />

src/components/views/login/RegistrationForm.js

@@ -37,6 +37,8 @@ module.exports = React.createClass({
     propTypes: {
         defaultEmail: React.PropTypes.string,
         defaultUsername: React.PropTypes.string,
+        defaultPassword: React.PropTypes.string,
+        guestUsername: React.PropTypes.string,
         showEmail: React.PropTypes.bool,
         minPasswordLength: React.PropTypes.number,
         onError: React.PropTypes.func,
@@ -55,10 +57,6 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            email: this.props.defaultEmail,
-            username: null,
-            password: null,
-            passwordConfirm: null,
             fieldValid: {}
         };
     },
@@ -103,7 +101,7 @@ module.exports = React.createClass({
 
     _doSubmit: function() {
         var promise = this.props.onRegisterClick({
-            username: this.refs.username.value.trim() || this.props.defaultUsername,
+            username: this.refs.username.value.trim() || this.props.guestUsername,
             password: this.refs.password.value.trim(),
             email: this.refs.email.value.trim()
         });
@@ -144,7 +142,7 @@ module.exports = React.createClass({
                 break;
             case FIELD_USERNAME:
                 // XXX: SPEC-1
-                var username = this.refs.username.value.trim() || this.props.defaultUsername;
+                var username = this.refs.username.value.trim() || this.props.guestUsername;
                 if (encodeURIComponent(username) != username) {
                     this.markFieldValid(
                         field_id,
@@ -225,7 +223,7 @@ module.exports = React.createClass({
             emailSection = (
                 <input className="mx_Login_field" type="text" ref="email"
                     autoFocus={true} placeholder="Email address (optional)"
-                    defaultValue={this.state.email}
+                    defaultValue={this.props.defaultEmail}
                     style={this._styleField(FIELD_EMAIL)}
                     onBlur={function() {self.validateField(FIELD_EMAIL)}} />
             );
@@ -237,8 +235,8 @@ module.exports = React.createClass({
         }
 
         var placeholderUserName = "User name";
-        if (this.props.defaultUsername) {
+        if (this.props.guestUsername) {
-            placeholderUserName += " (default: " + this.props.defaultUsername + ")"
+            placeholderUserName += " (default: " + this.props.guestUsername + ")"
         }
 
         return (
@@ -247,23 +245,23 @@ module.exports = React.createClass({
                     {emailSection}
                     <br />
                     <input className="mx_Login_field" type="text" ref="username"
-                        placeholder={ placeholderUserName } defaultValue={this.state.username}
+                        placeholder={ placeholderUserName } defaultValue={this.props.defaultUsername}
                         style={this._styleField(FIELD_USERNAME)}
                         onBlur={function() {self.validateField(FIELD_USERNAME)}} />
                     <br />
-                    { this.props.defaultUsername ?
+                    { this.props.guestUsername ?
                         <div className="mx_Login_fieldLabel">Setting a user name will create a fresh account</div> : null
                     }
                     <input className="mx_Login_field" type="password" ref="password"
                         style={this._styleField(FIELD_PASSWORD)}
                         onBlur={function() {self.validateField(FIELD_PASSWORD)}}
-                        placeholder="Password" defaultValue={this.state.password} />
+                        placeholder="Password" defaultValue={this.props.defaultPassword} />
                     <br />
                     <input className="mx_Login_field" type="password" ref="passwordConfirm"
                         placeholder="Confirm password"
                         style={this._styleField(FIELD_PASSWORD_CONFIRM)}
                         onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM)}}
-                        defaultValue={this.state.passwordConfirm} />
+                        defaultValue={this.props.defaultPassword} />
                     <br />
                     {registerButton}
                 </form>