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/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}
-                        defaultEmail={this.props.email}
+                        defaultUsername={this.state.formVals.username}
+                        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) {
-            placeholderUserName += " (default: " + this.props.defaultUsername + ")"
+        if (this.props.guestUsername) {
+            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>