Update Chromoting login UI

remoting/client/extension/client.js

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Flag to indicate whether or not to show offline hosts in the host list.
 chromoting.showOfflineHosts = true;
 
 // String to identify bad auth tokens.
 var BAD_AUTH_TOKEN = 'bad_token';
 
@@ skipping 31 matching lines @@
 // Update the login status region (at the bottom of the popup) with the
 // current account and links to sign in/out.
 function updateLoginStatus() {
   var username = getCookie('username');
 
   var loginDiv = document.getElementById('login_div');
   clear(loginDiv);
 
   if (!username) {
     var signinLink = document.createElement('a');
-    signinLink.setAttribute('href',
-        "javascript:window.open('login.html', 'Sign In', " +
-        "'width=400,height=200,scrollbars=no'); return false;");
+    signinLink.setAttribute('href', 'javascript:chromodir_login();');
     signinLink.appendChild(document.createTextNode('Sign In'));
     loginDiv.appendChild(signinLink);
   } else {
     var email = document.createElement('span');
     email.setAttribute('class', 'login_email');
     email.appendChild(document.createTextNode(username));
     loginDiv.appendChild(email);
 
     loginDiv.appendChild(document.createTextNode(' | '));
 
     var signoutLink = document.createElement('a');
-    signoutLink.setAttribute('href', 'javascript:logout(this.form);');
+    signoutLink.setAttribute('href', 'javascript:logout_reload(this.form);');
     signoutLink.appendChild(document.createTextNode('Sign Out'));
     loginDiv.appendChild(signoutLink);
   }
 }
 
+// Sign out the current user and reload the host list.
+function logout_reload(form) {

[Sergey Ulanov, 2011/02/15 22:06:43]

use mixedCase identifiers in JS. logoutAndReload()?

[garykac, 2011/02/16 18:43:06]

Done.

+  logout();
+  populateHostList();
+}
+
 // Sign out the current user by erasing the auth cookies.
-function logout(form) {
+function logout() {
   setCookie('username', '', AUTH_EXPIRES);
   setCookie('chromoting_auth', '', AUTH_EXPIRES);
   setCookie('xmpp_auth', '', AUTH_EXPIRES);
 
   updateLoginStatus();
-  populateHostList();
 }
 
-function login(form) {
-  var status = document.getElementById('login_status');
-  clear(status);
-  doLogin(form.username.value, form.password.value, checkLogin);
+// Sign in to Chromoting Directory services.
+function chromodir_login() {

[Sergey Ulanov, 2011/02/15 22:06:43]

maybe showDirectoryLogin()?

[garykac, 2011/02/16 18:43:06]

Done.

+  document.getElementById("login_panel").style.display = "block";
+}
+
+function login() {
+  var username = document.getElementById("username").value;
+  var password = document.getElementById("password").value;
+
+  doLogin(username, password, checkLogin);
 }
 
 // Check to see if the login was successful.
 function checkLogin() {
   var username = getCookie('username');
   var cauth = getCookie('chromoting_auth');
   var xauth = getCookie('xmpp_auth');
 
   // Verify login and show login status.
-  var status = document.getElementById('login_status');
   if (cauth == BAD_AUTH_TOKEN || xauth == BAD_AUTH_TOKEN) {
-    appendMessage(status, '', 'Sign in failed!');
-    if (username) {
-      setCookie('username', '', AUTH_EXPIRES);
-    }
+    // Erase the username cookie.
+    setCookie('username', '', AUTH_EXPIRES);
+    showLoginError("Sign in failed!");
   } else {
-    appendMessage(status, '', 'Successfully signed in as ' + username);
+    // Successful login - update status and update host list.
+    updateLoginStatus();
+    populateHostList();
+
+    // Hide login dialog and clear out values.
+    document.getElementById('login_panel').style.display = "none";
+    document.getElementById('username').value = "";
+    document.getElementById('password').value = "";
   }
 }
 
 function doLogin(username, password, done) {
   // Don't call |done| callback until both login requests have completed.
   var count = 2;
   var barrier = function() {
     count--;
     if (done && count == 0) {
       done();
@@ skipping 26 matching lines @@
     }
   };
 
   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xhr.send('accountType=HOSTED_OR_GOOGLE&Email=' +
            encodeURIComponent(username) + '&Passwd=' +
            encodeURIComponent(password) + '&service=' +
            encodeURIComponent(service) + '&source=chromoclient');
 }
 
+function showLoginError() {
+  var errormsgDiv = document.getElementById('errormsg_div');

[Sergey Ulanov, 2011/02/15 22:06:43]

errorMsgDiv or errorDiv

[garykac, 2011/02/16 18:43:06]

Done.

+  clear(errormsgDiv);
+
+  errormsgDiv.appendChild(document.createTextNode(

[Sergey Ulanov, 2011/02/15 22:06:43]

I would write errormsgDiv.innerHTML = "...". It is much easier to read.

[garykac, 2011/02/16 18:43:06]

But it would be inconsistent with the style used throughout this file and we do
other appendChild calls onto this same node.

+    "The username or password you entered is incorrect ["));
+
+  var helpLink = document.createElement('a');
+  helpLink.setAttribute('href',
+      'http://www.google.com/support/accounts/bin/answer.py?answer=27444');
+  helpLink.setAttribute('target', '_blank');
+  helpLink.appendChild(document.createTextNode('?'));
+  errormsgDiv.appendChild(helpLink);
+
+  errormsgDiv.appendChild(document.createTextNode("]"));
+}
+
 function extractAuthToken(message) {
   var lines = message.split('\n');
   for (var i = 0; i < lines.length; i++) {
     if (lines[i].match('^Auth=.*')) {
       return lines[i].split('=')[1];
     }
   }
 
   console.log('Could not parse auth token in : "' + message + '"');
   return BAD_AUTH_TOKEN;
@@ skipping 57 matching lines @@
       appendHostLinks(parsed_response.data.items);
     } else {
       var errorResponse = JSON.parse(xhr.responseText);
 
       console.log('Error: Bad status on host list query: "' +
                   xhr.status + ' ' + xhr.statusText);
       console.log('Error code ' + errorResponse.error.code);
       console.log('Error message ' + errorResponse.error.message);
 
       clear(hostlistDiv);
-      appendMessage(hostlistDiv, 'message',
-                    'Unable to load host list for ' + username + '. ' +
-                    'Please try again later.');
-      appendMessage(hostlistDiv, 'message',
-                    'Error code: ' + errorResponse.error.code);
-      appendMessage(hostlistDiv, 'message',
-                    'Message: ' + errorResponse.error.message);
+      if (errorResponse.error.message == "Token expired") {
+        appendMessage(hostlistDiv, 'message',
+                      'The authentication token for ' + username +
+                      ' has expired. Please sign in again.');
+        logout();
+      } else if (errorResponse.error.message == "Token invalid") {
+        appendMessage(hostlistDiv, 'message',
+                      'Invalid authentication token for ' + username + '. ' +
+                      'Please sign in again.');
+        logout();
+      } else {
+        appendMessage(hostlistDiv, 'message',
+                      'Unable to load host list for ' + username + '. ' +
+                      'Please try again later.');
+        appendMessage(hostlistDiv, 'message',
+                      'Error code: ' + errorResponse.error.code);
+        appendMessage(hostlistDiv, 'message',
+                      'Message: ' + errorResponse.error.message);
+      }
     }
   };
 
   xhr.open('GET', 'https://www.googleapis.com/chromoting/v1/@me/hosts');
   xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
   xhr.setRequestHeader('Authorization', 'GoogleLogin auth=' + token);
   xhr.send(null);
 }
 
 // Populate the 'hostlist_div' element with the list of hosts for this user.
@@ skipping 73 matching lines @@
   hostStatus.appendChild(document.createTextNode(host.status));
   hostEntry.appendChild(hostStatus);
 
   var hostInfo = document.createElement('p');
   hostInfo.setAttribute('class', 'hostindent hostinfo');
   hostInfo.appendChild(document.createTextNode(host.jabberId));
   hostEntry.appendChild(hostInfo);
 
   return hostEntry;
 }