show 'logging in...' during login process.

rhapsodyai · Mar 16, 2015 · ccc6688 · ccc6688
1 parent 2566bdb
commit ccc6688
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/components/sidebar.jsx b/components/sidebar.jsx
@@ -30,14 +30,16 @@ var Login = React.createClass({
   componentDidMount: function() {
     var teachAPI = new TeachAPI();
     teachAPI.on('error', this.handleApiError);
+    teachAPI.on('cancel-login', this.handleApiCancelLogin);
     teachAPI.on('login', this.handleApiLogin);
     teachAPI.on('logout', this.handleApiLogout);
     this.teachAPI = teachAPI;
     this.setState({username: this.getUsername()});
   },
   getInitialState: function() {
     return {
-      username: null
+      username: null,
+      loggingIn: false
     };
   },
   getUsername: function() {
@@ -46,13 +48,15 @@ var Login = React.createClass({
   },
   handleLoginClick: function(e) {
     e.preventDefault();
+    this.setState({loggingIn: true});
     this.teachAPI.startLogin();
   },
   handleLogoutClick: function(e) {
     e.preventDefault();
     this.teachAPI.logout();
   },
   handleApiError: function(err) {
+    this.setState({loggingIn: false});
     console.log("Teach API error", err);
     if (err.hasNoWebmakerAccount) {
       window.alert("An error occurred when logging in. Are you sure you " +
@@ -63,24 +67,41 @@ var Login = React.createClass({
       this.teachAPI.logout();
     }
   },
+  handleApiCancelLogin: function() {
+    this.setState({loggingIn: false});
+  },
   handleApiLogin: function(info) {
-    this.setState({username: this.getUsername()});
+    this.setState({username: this.getUsername(), loggingIn: false});
   },
   handleApiLogout: function() {
-    this.setState({username: null});
+    this.setState({username: null, loggingIn: false});
   },
   render: function() {
-    var username = this.state.username;
+    var content;
+
+    if (this.state.loggingIn) {
+      content = (
+        <span>
+          Logging in&hellip;
+        </span>
+      );
+    } else if (this.state.username) {
+      content = (
+        <span>
+          Logged in as {this.state.username} | <a href="" onClick={this.handleLogoutClick}>Logout</a>
+        </span>
+      );
+    } else {
+      content = (
+        <span>
+          <Link to="join">Create an account</Link> | <a href="" onClick={this.handleLoginClick}>Log in</a>
+        </span>
+      );
+    }
 
     return (
       <div className="sidebar-login">
-        {username
-         ? <span>
-             Logged in as {username} | <a href="" onClick={this.handleLogoutClick}>Logout</a>
-           </span>
-         : <span>
-             <Link to="join">Create an account</Link> | <a href="" onClick={this.handleLoginClick}>Log in</a>
-           </span>}
+        {content}
       </div>
     );
   }

diff --git a/lib/teach-api.js b/lib/teach-api.js
@@ -33,7 +33,7 @@ _.extend(TeachAPI.prototype, {
     }
     window.navigator.id.get(function(assertion) {
       if (!assertion) {
-        return;
+        return this.emit('cancel-login');
       }
 
       request

diff --git a/test/browser/teach-api.test.js b/test/browser/teach-api.test.js
@@ -66,12 +66,15 @@ describe('TeachAPI', function() {
       delete window.navigator.id;
     });
 
-    it('does nothing if given no assertion', function() {
+    it('does nothing if given no assertion', function(done) {
       var api = new TeachAPI({storage: storage});
 
       api.startLogin();
+      api.on('cancel-login', function() {
+        requests.should.eql([]);
+        done();
+      });
       personaCb(null);
-      requests.should.eql([]);
     });
 
     it('emits error if navigator.id is falsy', function(done) {