From f70eec62d18fb282fefc8d037dae88647c82ea95 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 15 Mar 2016 18:35:09 +0000
Subject: [PATCH] let registering guests either upgrade or create a new account
 by specifying a new username. fixes
 https://github.com/vector-im/vector-web/issues/1161

---
 src/components/structures/MatrixChat.js       |  1 -
 .../structures/login/Registration.js          |  8 ++++--
 .../views/login/RegistrationForm.js           | 25 ++++++++++++-------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index df27d38172..c0e344049d 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1033,7 +1033,6 @@ module.exports = React.createClass({
                     idSid={this.state.register_id_sid}
                     email={this.props.startingQueryParams.email}
                     username={this.state.upgradeUsername}
-                    disableUsernameChanges={Boolean(this.state.upgradeUsername)}
                     guestAccessToken={this.state.guestAccessToken}
                     defaultHsUrl={this.props.config.default_hs_url}
                     defaultIsUrl={this.props.config.default_is_url}
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index cf9adee1bb..e52a49c823 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -43,7 +43,6 @@ module.exports = React.createClass({
         email: React.PropTypes.string,
         username: React.PropTypes.string,
         guestAccessToken: React.PropTypes.string,
-        disableUsernameChanges: React.PropTypes.bool,
         // registration shouldn't know or care how login is done.
         onLoginClick: React.PropTypes.func.isRequired
     },
@@ -108,6 +107,12 @@ module.exports = React.createClass({
             errorText: "",
             busy: true
         });
+
+        if (formVals.username !== this.props.username) {
+            // don't try to upgrade if we changed our username
+            this.registerLogic.setGuestAccessToken(null);
+        }
+
         this.onProcessingRegistration(this.registerLogic.register(formVals));
     },
 
@@ -205,7 +210,6 @@ module.exports = React.createClass({
                         showEmail={true}
                         defaultUsername={this.props.username}
                         defaultEmail={this.props.email}
-                        disableUsernameChanges={this.props.disableUsernameChanges}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
                         onRegisterClick={this.onFormSubmit} />
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index 469deb890a..727bb2c1ff 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -38,7 +38,6 @@ module.exports = React.createClass({
         defaultUsername: React.PropTypes.string,
         showEmail: React.PropTypes.bool,
         minPasswordLength: React.PropTypes.number,
-        disableUsernameChanges: React.PropTypes.bool,
         onError: React.PropTypes.func,
         onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
     },
@@ -56,7 +55,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             email: this.props.defaultEmail,
-            username: this.props.defaultUsername,
+            username: null,
             password: null,
             passwordConfirm: null,
             fieldValid: {}
@@ -78,7 +77,7 @@ module.exports = React.createClass({
 
         if (this.allFieldsValid()) {
             var promise = this.props.onRegisterClick({
-                username: this.refs.username.value.trim(),
+                username: this.refs.username.value.trim() || this.props.defaultUsername,
                 password: this.refs.password.value.trim(),
                 email: this.refs.email.value.trim()
             });
@@ -120,13 +119,14 @@ module.exports = React.createClass({
                 break;
             case FIELD_USERNAME:
                 // XXX: SPEC-1
-                if (encodeURIComponent(this.refs.username.value) != this.refs.username.value) {
+                var username = this.refs.username.value.trim() || this.props.defaultUsername;
+                if (encodeURIComponent(username) != username) {
                     this.markFieldValid(
                         field_id,
                         false,
                         "RegistrationForm.ERR_USERNAME_INVALID"
                     );
-                } else if (this.refs.username.value == '') {
+                } else if (username == '') {
                     this.markFieldValid(
                         field_id,
                         false,
@@ -199,7 +199,7 @@ module.exports = React.createClass({
         if (this.props.showEmail) {
             emailSection = (
                 <input className="mx_Login_field" type="text" ref="email"
-                    autoFocus={true} placeholder="Email address"
+                    autoFocus={true} placeholder="Email address (optional)"
                     defaultValue={this.state.email}
                     style={this._styleField(FIELD_EMAIL)}
                     onBlur={function() {self.validateField(FIELD_EMAIL)}} />
@@ -211,17 +211,24 @@ module.exports = React.createClass({
             );
         }
 
+        var placeholderUserName = "User name";
+        if (this.props.defaultUsername) {
+            placeholderUserName += " (default: " + this.props.defaultUsername + ")"
+        }
+
         return (
             <div>
                 <form onSubmit={this.onSubmit}>
                     {emailSection}
                     <br />
                     <input className="mx_Login_field" type="text" ref="username"
-                        placeholder="User name" defaultValue={this.state.username}
+                        placeholder={ placeholderUserName } defaultValue={this.state.username}
                         style={this._styleField(FIELD_USERNAME)}
-                        onBlur={function() {self.validateField(FIELD_USERNAME)}}
-                        disabled={this.props.disableUsernameChanges} />
+                        onBlur={function() {self.validateField(FIELD_USERNAME)}} />
                     <br />
+                    { this.props.defaultUsername ?
+                        <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)}}