Fix up remoting UI to make it closer to spec

remoting/webapp/me2mom/remoting.js

Index: remoting/webapp/me2mom/remoting.js
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index 7b1adde5664331059037091d671a2cf2db79c05c..53dbc3849af782e6e9eb4ac943ce1c20d527a00d 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -4,23 +4,28 @@
 
 // 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';
@@ -39,11 +44,16 @@ function updateAuthStatus_() {
   }
   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';
   }
 }
 
@@ -146,13 +156,20 @@ function authorizeXmpp(form) {
   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() {
@@ -160,6 +177,16 @@ function clearOAuth2() {
   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_();
@@ -182,11 +209,37 @@ function init() {
   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) {
@@ -310,14 +363,15 @@ function resolveSupportId(support_id) {
     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;
   }