Show session restore errors on the login screen

If we are unable to load the matrix session on startup, don't just get stuck at
a spinner; instead, show the error on the login screen.

src/components/structures/MatrixChat.js

@@ -13,6 +13,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
+import q from 'q';
+
 var React = require('react');
 var Matrix = require("matrix-js-sdk");
 var Favico = require('favico.js');
@@ -164,6 +167,9 @@ module.exports = React.createClass({
         // their mind & log back in)
         this.guestCreds = null;
 
+        // if the automatic session load failed, the error
+        this.sessionLoadError = null;
+
         if (this.props.config.sync_timeline_limit) {
             MatrixClientPeg.opts.initialSyncLimit = this.props.config.sync_timeline_limit;
         }
@@ -191,13 +197,18 @@ module.exports = React.createClass({
         window.addEventListener('resize', this.handleResize);
         this.handleResize();
 
-        Lifecycle.loadSession({
-            realQueryParams: this.props.realQueryParams,
-            fragmentQueryParams: this.props.startingFragmentQueryParams,
-            enableGuest: this.props.enableGuest,
-            guestHsUrl: this.getCurrentHsUrl(),
-            guestIsUrl: this.getCurrentIsUrl(),
-            defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
+        q().then(() => {
+            return Lifecycle.loadSession({
+                realQueryParams: this.props.realQueryParams,
+                fragmentQueryParams: this.props.startingFragmentQueryParams,
+                enableGuest: this.props.enableGuest,
+                guestHsUrl: this.getCurrentHsUrl(),
+                guestIsUrl: this.getCurrentIsUrl(),
+                defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
+            });
+        }).catch((e) => {
+            console.error("Unable to load session", e);
+            this.sessionLoadError = e.message;
         }).done(()=>{
             // stuff this through the dispatcher so that it happens
             // after the on_logged_in action.
@@ -1085,7 +1096,7 @@ module.exports = React.createClass({
                     onLoginClick={this.onLoginClick} />
             );
         } else {
-            return (
+            var r = (
                 <Login
                     onLoggedIn={Lifecycle.setLoggedIn}
                     onRegisterClick={this.onRegisterClick}
@@ -1098,8 +1109,16 @@ module.exports = React.createClass({
                     onForgotPasswordClick={this.onForgotPasswordClick}
                     enableGuest={this.props.enableGuest}
                     onCancelClick={this.guestCreds ? this.onReturnToGuestClick : null}
-                    />
+                    initialErrorText={this.sessionLoadError}
+                />
             );
+
+            // we only want to show the session load error the first time the
+            // Login component is rendered. This is pretty hacky but I can't
+            // think of another way to achieve it.
+            this.sessionLoadError = null;
+
+            return r;
         }
     }
 });

src/components/structures/login/Login.js

@@ -52,12 +52,14 @@ module.exports = React.createClass({
         // login shouldn't care how password recovery is done.
         onForgotPasswordClick: React.PropTypes.func,
         onCancelClick: React.PropTypes.func,
+
+        initialErrorText: React.PropTypes.string,
     },
 
     getInitialState: function() {
         return {
             busy: false,
-            errorText: null,
+            errorText: this.props.initialErrorText,
             loginIncorrect: false,
             enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
             enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
@@ -116,7 +118,8 @@ module.exports = React.createClass({
     onHsUrlChanged: function(newHsUrl) {
         var self = this;
         this.setState({
-            enteredHomeserverUrl: newHsUrl
+            enteredHomeserverUrl: newHsUrl,
+            errorText: null, // reset err messages
         }, function() {
             self._initLoginLogic(newHsUrl);
         });
@@ -125,7 +128,8 @@ module.exports = React.createClass({
     onIsUrlChanged: function(newIsUrl) {
         var self = this;
         this.setState({
-            enteredIdentityServerUrl: newIsUrl
+            enteredIdentityServerUrl: newIsUrl,
+            errorText: null, // reset err messages
         }, function() {
             self._initLoginLogic(null, newIsUrl);
         });
@@ -160,7 +164,6 @@ module.exports = React.createClass({
             enteredHomeserverUrl: hsUrl,
             enteredIdentityServerUrl: isUrl,
             busy: true,
-            errorText: null, // reset err messages
             loginIncorrect: false,
         });
     },