Make UIAuth Dialog show an error

when auth fails

src/components/structures/InteractiveAuth.js

@@ -41,11 +41,12 @@ export default React.createClass({
         // callback
         makeRequest: React.PropTypes.func.isRequired,
 
-        // callback called when the auth process has finished
+        // callback called when the auth process has finished,
+        // successfully or unsuccessfully.
         // @param {bool} status True if the operation requiring
         //     auth was completed sucessfully, false if canceled.
         // @param result The result of the authenticated call
-        onFinished: React.PropTypes.func.isRequired,
+        onAuthFinished: React.PropTypes.func.isRequired,
 
         // Inputs provided by the user to the auth process
         // and used by various stages. As passed to js-sdk
@@ -87,9 +88,9 @@ export default React.createClass({
         });
 
         this._authLogic.attemptAuth().then((result) => {
-            this.props.onFinished(true, result);
+            this.props.onAuthFinished(true, result);
         }).catch((error) => {
-            this.props.onFinished(false, error);
+            this.props.onAuthFinished(false, error);
             console.error("Error during user-interactive auth:", error);
             if (this._unmounted) {
                 return;
@@ -179,7 +180,7 @@ export default React.createClass({
     },
 
     _onAuthStageFailed: function(e) {
-        this.props.onFinished(false, e);
+        this.props.onAuthFinished(false, e);
     },
     _setEmailSid: function(sid) {
         this._authLogic.setEmailSid(sid);

src/components/structures/login/Registration.js

@@ -338,7 +338,7 @@ module.exports = React.createClass({
                 <InteractiveAuth
                     matrixClient={this._matrixClient}
                     makeRequest={this._makeRegisterRequest}
-                    onFinished={this._onUIAuthFinished}
+                    onAuthFinished={this._onUIAuthFinished}
                     inputs={this._getUIAuthInputs()}
                     makeRegistrationUrl={this.props.makeRegistrationUrl}
                     sessionId={this.props.sessionId}

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -52,23 +52,62 @@ export default React.createClass({
         };
     },
 
+    getInitialState: function() {
+        return {
+            authError: null,
+        }
+    },
+
+    _onAuthFinished: function(success, result) {
+        if (success) {
+            this.props.onFinished(true);
+        } else {
+            this.setState({
+                authError: result,
+            });
+        }
+    },
+
+    _onDismissClick: function() {
+        this.props.onFinished(false);
+    },
+
     render: function() {
         const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
-        return (
-            <BaseDialog className="mx_InteractiveAuthDialog"
-                onFinished={this.props.onFinished}
-                title={this.props.title}
+        let content;
+        if (this.state.authError) {
+            content = (
+                <div>
+                    <div>{this.state.authError.message || this.state.authError.toString()}</div>
+                    <br />
+                    <AccessibleButton onClick={this._onDismissClick}
+                        className="mx_UserSettings_button"
                     >
+                        Dismiss
+                    </AccessibleButton>
+                </div>
+            );
+        } else {
+            content = (
                 <div>
                     <InteractiveAuth ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
                         makeRequest={this.props.makeRequest}
-                        onFinished={this.props.onFinished}
+                        onAuthFinished={this._onAuthFinished}
                     />
                 </div>
+            );
+        }
+
+        return (
+            <BaseDialog className="mx_InteractiveAuthDialog"
+                onFinished={this.props.onFinished}
+                title={this.state.authError ? 'Error' : this.props.title}
+            >
+                {content}
             </BaseDialog>
         );
     },