Implement warm-fuzzy success dialog for SetMxIdDialog

src/components/views/dialogs/SetMxIdDialog.js

@@ -53,6 +53,9 @@ export default React.createClass({
             doingUIAuth: false,
             // Indicate error with auth
             authError: '',
+
+            // Indicate success of setting mxid
+            success: false,
         };
     },
 
@@ -95,6 +98,10 @@ export default React.createClass({
         });
     },
 
+    onSuccessContinue: function() {
+        this.props.onFinished(true, this._registeredCreds);
+    },
+
     _doUsernameCheck: function() {
         // Check if username is available
         return this._matrixClient.isUsernameAvailable(this.state.username).then(
@@ -162,7 +169,7 @@ export default React.createClass({
         // XXX Implement RTS /register here
         const teamToken = null;
 
-        this.props.onFinished(true, {
+        this._registeredCreds = {
             userId: response.user_id,
             deviceId: response.device_id,
             homeserverUrl: this._matrixClient.getHomeserverUrl(),
@@ -170,6 +177,11 @@ export default React.createClass({
             accessToken: response.access_token,
             password: this._generatedPassword,
             teamToken: teamToken,
+        };
+
+        // Before continuing, show a warm-fuzzy success and only submit onSuccessContinue
+        this.setState({
+            success: true,
         });
     },
 
@@ -219,6 +231,30 @@ export default React.createClass({
             !this.state.usernameError &&
             !this.state.usernameBusy;
 
+        if (this.state.success) {
+            return (
+                <BaseDialog className="mx_SetMxIdDialog"
+                    title="You have successfully picked a username!"
+                >
+                    <div className="mx_Dialog_content">
+                        <p>
+                            You have successfully
+                            picked <b>{ this.state.username }</b> as your
+                            username and you now have access to the full
+                            set of features on Riot.
+                        </p>
+                    </div>
+                    <div className="mx_Dialog_buttons">
+                        <input className="mx_Dialog_primary"
+                            type="submit"
+                            value="Continue"
+                            onClick={this.onSuccessContinue}
+                        />
+                    </div>
+                </BaseDialog>
+            );
+        }
+
         return (
             <BaseDialog className="mx_SetMxIdDialog"
                 onFinished={this.props.onFinished}