Fix up remoting UI to make it closer to spec

remoting/webapp/me2mom/remoting.js

 // Copyright (c) 2011 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.
 
 // TODO(ajwong): This seems like a bad idea to share the exact same object
 // with the background page.  Why are we doing it like this?
+
+"use strict";
+
 var remoting = chrome.extension.getBackgroundPage().remoting;
+remoting.CLIENT_MODE='client';
+remoting.HOST_MODE='host';
 
-XMPP_LOGIN_NAME = 'xmpp_login';
-XMPP_TOKEN_NAME = 'xmpp_token';
-HOST_PLUGIN_ID = 'host_plugin_id';
+var XMPP_LOGIN_NAME = 'xmpp_login';
+var XMPP_TOKEN_NAME = 'xmpp_token';
+var HOST_PLUGIN_ID = 'host_plugin_id';
 
 function updateAuthStatus_() {
-  var oauth2_status = document.getElementById('oauth2_status');
   if (remoting.oauth2.isAuthenticated()) {
-    oauth2_status.innerText = 'OK';
-    oauth2_status.style.color = 'green';
+    document.getElementById('oauth2_code').style.display = 'none';
+    document.getElementById('oauth2_submit_button').style.display = 'none';
     document.getElementById('oauth2_code_button').style.display = 'none';
     document.getElementById('oauth2_clear_button').style.display = 'inline';
-    document.getElementById('oauth2_form').style.display = 'none';
+    document.getElementById('oauth2_form').style.display = 'inline';
   } else {
-    oauth2_status.innerText = 'Unauthorized';
-    oauth2_status.style.color = 'red';
+    document.getElementById('oauth2_code').value = "";
+    document.getElementById('oauth2_code').style.display = 'inline';
+    document.getElementById('oauth2_submit_button').style.display = 'none';
     document.getElementById('oauth2_code_button').style.display = 'inline';
     document.getElementById('oauth2_clear_button').style.display = 'none';
     document.getElementById('oauth2_form').style.display = 'inline';
   }
   var xmpp_status = document.getElementById('xmpp_status');
   if (remoting.getItem(XMPP_TOKEN_NAME) && remoting.getItem(XMPP_LOGIN_NAME)) {
     document.getElementById('xmpp_clear').style.display = 'inline';
     document.getElementById('xmpp_form').style.display = 'none';
     xmpp_status.innerText = 'OK';
     xmpp_status.style.color = 'green';
   } else {
     document.getElementById('xmpp_clear').style.display = 'none';
     document.getElementById('xmpp_form').style.display = 'inline';
     xmpp_status.innerText = 'Unauthorized';
     xmpp_status.style.color = 'red';
   }
   var current_email = document.getElementById('current_email');
   if (remoting.getItem(XMPP_LOGIN_NAME)) {
-    oauth2_status.style.color = 'green';
     current_email.innerText = remoting.getItem(XMPP_LOGIN_NAME);
+    current_email.style.display = 'inline';
+    document.getElementById('new_email').style.display = 'none';
+    document.getElementById('email_submit_button').style.display = 'none';
+    document.getElementById('change_email_button').style.display = 'inline';
   } else {
-    oauth2_status.style.color = 'red';
-    current_email.innerText = 'missing e-mail';
+    current_email.style.display = 'none';
+    document.getElementById('new_email').style.display = 'inline';
+    document.getElementById('email_submit_button').style.display = 'inline';
+    document.getElementById('change_email_button').style.display = 'none';
   }
 }
 
 function clientLoginError_(xhr) {
   // If there's an error URL, load it into an iframe.
   var url_line = xhr.responseText.match('Url=.*');
   if (url_line) {
     url = url_line[0].substr(4);
     var error_frame = document.getElementById('xmpp_error');
     error_frame.src = url;
@@ skipping 82 matching lines @@
       '&Email=' + encodeURIComponent(form['xmpp_username'].value) +
       '&Passwd=' + encodeURIComponent(form['xmpp_password'].value);
 
   if (captcha_result[0]) {
     post_data += '&logintoken=' + encodeURIComponent(captcha_result[0]) +
         '&logincaptcha=' + encodeURIComponent(captcha_result[1]);
   }
   xhr.send(post_data);
 }
 
-function setEmail(form) {
-  remoting.setItem(XMPP_LOGIN_NAME, form['new_email'].value);
+function setEmail(value) {
+  remoting.setItem(XMPP_LOGIN_NAME, value);
+  updateAuthStatus_();
+}
+
+function exchangedCodeForToken_() {
+  if (!remoting.oauth2.isAuthenticated()) {
+    alert("Your OAuth2 token was invalid. Please try again.");
+  }
   updateAuthStatus_();
 }
 
 function authorizeOAuth2(code) {
-  remoting.oauth2.exchangeCodeForToken(code, updateAuthStatus_);
+  remoting.oauth2.exchangeCodeForToken(code, exchangedCodeForToken_);
 }
 
 function clearOAuth2() {
   remoting.oauth2.clear();
   updateAuthStatus_();
 }
 
+function handleOAuth2CodeChange() {
+  if (document.getElementById('oauth2_code').value.length > 0) {
+    document.getElementById('oauth2_submit_button').style.display = 'inline';
+    document.getElementById('oauth2_code_button').style.display = 'none';
+  } else {
+    document.getElementById('oauth2_submit_button').style.display = 'none';
+    document.getElementById('oauth2_code_button').style.display = 'inline';
+  }
+}
+
 function clearXmpp() {
   remoting.removeItem(XMPP_TOKEN_NAME);
   updateAuthStatus_();
 }
 
 // Show the div with id |mode| and hide those with other ids in |modes|.
 function setMode_(mode, modes) {
   for (var i = 0; i < modes.length; ++i) {
     var div = document.getElementById(modes[i]);
     if (mode == modes[i]) {
       div.style.display = 'block';
     } else {
       div.style.display = 'none';
     }
   }
 }
 
 function init() {
   initBackgroundFuncs_();
   initAuthPanel_();
   setHostMode('unshared');
   setClientMode('unconnected');
-  setGlobalMode(remoting.getItem('startup-mode', 'host'));
+  setGlobalMode(remoting.getItem('startup-mode', remoting.HOST_MODE));
 }
 
 function setGlobalMode(mode) {
-  setMode_(mode, ['host', 'client']);
+  var elementsToShow = [];
+  var elementsToHide = [];
+  var hostElements = [
+    { id:'host_section', display:'block' },
+    { id:'host_header', display:'inline' },
+    { id:'host_footer', display:'block'}
+  ];
+  var clientElements = [
+    { id:'client_section', display:'block' },
+    { id:'client_header', display:'inline' },
+    { id:'client_footer', display:'block'}
+  ];
+  if (mode == remoting.HOST_MODE) {
+    elementsToShow = hostElements;
+    elementsToHide = clientElements;
+  } else {
+    elementsToShow = clientElements;
+    elementsToHide = hostElements;
+  }
+  for (var i = 0; i < elementsToShow.length; ++i) {
+    var div = document.getElementById(elementsToShow[i].id);
+    div.style.display = elementsToShow[i].display;
+  }
+  for (var i = 0; i < elementsToHide.length; ++i) {
+    var div = document.getElementById(elementsToHide[i].id);
+    div.style.display = 'none';
+  }
 }
 
 function setGlobalModePersistent(mode) {
   setGlobalMode(mode);
   remoting.setItem('startup-mode', mode);
 }
 
 function setHostMode(mode) {
   setMode_(mode, ['unshared',
                   'preparing_to_share',
@@ skipping 103 matching lines @@
 
     xhr.open('GET',
              'https://www.googleapis.com/chromoting/v1/support-hosts/' +
                  encodeURIComponent(support_id),
              true);
     xhr.setRequestHeader('Authorization',
                          'OAuth ' + remoting.oauth2.getAccessToken());
     xhr.send(null);
 }
 
-function tryConnect(accessCode) {
+function tryConnect() {

[Jamie, 2011/05/31 18:11:49]

Why not pass the access code in as before? That way, the place where you need to
know the id is right next to the id itself and the two are easier to keep in
sync.

[dmac, 2011/06/01 23:01:58]

Because currently it doesn't work with the "form" hack to get buttons centered.

+  var accessCode = document.getElementById('access_code_entry').value;
   if (remoting.oauth2.needsNewAccessToken()) {
     remoting.oauth2.refreshAccessToken(function() {
       if (remoting.oauth2.needsNewAccessToken()) {
         // If we still need it, we're going to infinite loop.
         throw "Unable to get access token";
       }
-      tryConnect(accessCode);
+      tryConnect();
     });
     return;
   }
 
   remoting.accessCode = accessCode;
   // TODO(jamiewalch): Since the mapping from (SupportId, HostSecret) to
   // AccessCode is not yet defined, assume it's hyphen-separated for now.
   var parts = remoting.accessCode.split('-');
   if (parts.length != 2) {
     showConnectError_(404);
   } else {
     setClientMode('connecting');
     resolveSupportId(parts[0]);
   }
 }
 
 function cancelConnect() {
   remoting.accessCode = '';
   setClientMode('unconnected');
 }