Improve authentication UX.

BUG=None
TEST=Manual

Review URL: http://codereview.chromium.org/7542030

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@95293 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 92 insertions, 123 deletions

diff --git a/remoting/webapp/me2mom/_locales/en/messages.json b/remoting/webapp/me2mom/_locales/en/messages.json
index 91b9f6b..a0d51dc 100644
--- a/remoting/webapp/me2mom/_locales/en/messages.json
+++ b/remoting/webapp/me2mom/_locales/en/messages.json
@@ -7,10 +7,6 @@
     "message": "This access code will expire in",
     "description": "Text preceding the access code timer"
   },
-  "authenticateButton": {
-    "message": "Get OAuth2 Token…",
-    "description": "Label for the authenticate button"
-  },
   "cancel": {
     "message": "Cancel",
     "description": "Label for general-purpose Cancel buttons"
@@ -19,6 +15,10 @@
     "message": "Connect",
     "description": "Label for the connect button"
   },
+  "continueButton": {
+    "message": "Continue",
+    "description": "Label for the continue button on the pre-authorization page"
+  },
   "debugButton": {
     "message": "Debug Log",
     "description": "Label for the debug log button"
@@ -33,11 +33,7 @@
   },
   "disconnectButton": {
     "message": "Disconnect",
-    "description": "Label for the debug log button"
-  },
-  "emailLabel": {
-    "message": "Email:",
-    "description": "Label to the left of the user's email address"
+    "description": "Label for the disconnect button"
   },
   "errorGeneric": {
     "message": "An error occurred.",
@@ -56,7 +52,7 @@
     "description": "Error displayed if an XHR request comes back empty"
   },
   "errorOAuthFailed": {
-    "message": "Unable to fetch OAuth2 token. Try revoking the token and authenticating again.",
+    "message": "Unable to fetch OAuth2 token. Try logging out and re-authorizing.",
     "description": "Error displayed if the OAuth2 token cannot be refreshed"
   },
   "footerClient1": {
@@ -103,6 +99,14 @@
     "message": "Connected:",
     "description": "String displayed in front of the host in the in-session toolbar"
   },
+  "logoutButton": {
+    "message": "Logout",
+    "description": "Logout button, visible if the user has authenticated"
+  },
+  "messageAuthorize": {
+    "message": "In order to use IT2Me you must first grant extended access permissions to your computer. Click Continue to authorize. You only have to do this once.",
+    "description": "Text shown when the app first starts, or if the access token is invalidated"
+  },
   "messageGenerating": {
     "message": "Generating access code…",
     "description": "Text shown while generating an access code"
@@ -121,17 +125,17 @@
       }
     }
   },
-  "modeShare": {
-    "message": "Share",
-    "description": "Sub-title for the host app"
+  "modeAuthorize": {
+    "message": "Authorize",
+    "description": "Sub-title for the one-time authorization step"
   },
   "modeConnect": {
     "message": "Connect",
     "description": "Sub-title for the client app"
   },
-  "oauth2TokenLabel": {
-    "message": "OAuth2 Token:",
-    "description": "Label to the left of the authenticate/revoke button"
+  "modeShare": {
+    "message": "Share",
+    "description": "Sub-title for the host app"
   },
   "ok": {
     "message": "OK",
@@ -141,10 +145,6 @@
     "message": "Chromoting",
     "description": "Title of the main page"
   },
-  "revokeButton": {
-    "message": "Revoke",
-    "description": "Label for the revoke button"
-  },
   "scaleButton": {
     "message": "Fit Screen",
     "description": "Label for the scaling button"
diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index 4c7597a..eeb360d 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -72,15 +72,6 @@ label {
   padding: 0px 6px;
 }
 
-.auth-status-control {
-  /* Class used to denote controls that affect authorization status. */
-}
-
-.auth-status-label {
-  color: black;
-  font-weight: bold;
-}
-
 .big-button {
   height: 2em;
   font-size: 16px;
@@ -147,16 +138,25 @@ label {
   margin-bottom: 10px;
 }
 
+.top-left {
+  font-size: 14px;
+  position: absolute;
+  top: 0.5em;
+  left: 0.5em;
+}
+
+.top-right {
+  font-size: 14px;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+}
+
 .waiting {
   color: rgb(180, 180, 180);
 }
 
 /* Ids */
-#control-panel {
-  border-bottom: 2px solid gray;
-  padding: 5px 10px;
-}
-
 #access-code-countdown-container {
   height: 50px;
   text-align: center;
@@ -183,14 +183,6 @@ label {
   text-align: center;
 }
 
-#choice-mode {
-  color: rgb(115, 115, 115);
-  font-size: 16px;
-  margin: 100px auto 0 auto;
-  padding: 10px;
-  width: 640px;
-}
-
 #cancel-button {
   float: right;
 }
@@ -220,8 +212,12 @@ label {
   width: 64px;
 }
 
-#oauth2-entry {
-  width: 400px;
+#main {
+  color: rgb(115, 115, 115);
+  font-size: 16px;
+  margin: 100px auto 0 auto;
+  padding: 10px;
+  width: 640px;
 }
 
 #session-mode {
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index 485df8c..815882a 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -37,28 +37,20 @@ found in the LICENSE file.
       <em>Loading&hellip;</em>
     </section> <!-- loading-mode -->
 
-    <div id="control-panel" data-ui-mode="client host" hidden>
+    <div class="top-left"
+         data-ui-mode="client.unconnected host.unshared"
+         hidden>
       <span id="email-status">
-        <span class="auth-status-label" i18n-content="emailLabel"></span>
         <span id="current-email"></span>
-      </span> <!-- email-status -->
-
-      <span id="oauth2-entry">
-        <span class="auth-status-label"
-              i18n-content="oauth2TokenLabel"></span>
-        <button id="oauth2-token-button" type="button"
-                onclick="remoting.oauth2.doAuthRedirect();"
-                i18n-content="authenticateButton"></button>
-        <button id="oauth2-clear-button" type="button"
-                onclick="remoting.clearOAuth2();"
-                i18n-content="revokeButton"></button>
-      </span> <!-- oauth2-entry -->
-
-      <span id="debug-enable">
-        <button type="button" onclick="remoting.toggleDebugLog();"
-                i18n-content="debugButton"></button>
-      </span> <!-- debug-enable -->
-    </div> <!-- control-panel -->
+        (<a href="#" onclick="remoting.clearOAuth2();"
+                i18n-content="logoutButton"></a>)
+      </span>
+    </div>
+
+    <div class="top-right" data-ui-mode="auth client host">
+      <a href="#" onclick="remoting.toggleDebugLog();"
+         i18n-content="debugButton"></a>
+    </div>
 
     <div id="session-toolbar"
          data-ui-mode="in-session"
@@ -81,27 +73,36 @@ found in the LICENSE file.
       </div>
     </div> <!-- session-toolbar -->
 
-    <section id="choice-mode" data-ui-mode="host client" hidden>
+    <div id="main" data-ui-mode="auth host client" hidden>
+
       <header class="choice-header">
         <img id="icon" src="chromoting128.png">
-        <h1 data-ui-mode="host" class="icon-label">
-          <span i18n-content="pageTitle">
-          </span>&nbsp;&rsaquo;&nbsp;<span i18n-content="modeShare">
-          </span>
-        </h1>
-        <h1 data-ui-mode="client" class="icon-label">
+        <h1 class="icon-label">
           <span i18n-content="pageTitle">
-          </span>&nbsp;&rsaquo;&nbsp;<span i18n-content="modeConnect">
+          </span>&nbsp;&rsaquo;&nbsp;<span i18n-content="modeAuthorize"
+                                           data-ui-mode="auth">
+          </span><span i18n-content="modeConnect" data-ui-mode="client">
+          </span><span i18n-content="modeShare" data-ui-mode="host">
           </span>
         </h1>
         <img id="divider-top" src="dividertop.png">
       </header>
 
+      <div id="auth-panel" data-ui-mode="auth">
+        <div class="description" i18n-content="messageAuthorize"></div>
+        <div class="centered-button">
+          <button id="auth-button" class="big-button"
+                  type="button" onclick="remoting.oauth2.doAuthRedirect();"
+                  i18n-content="continueButton"></button>
+        </div>
+      </div> <!-- auth-panel -->
+
       <div id="host-panel" data-ui-mode="host">
+
         <div data-ui-mode="host.unshared">
           <div class="description" i18n-content="descriptionShare"></div>
           <div class="centered-button">
-            <button id="share-button" class="auth-status-control big-button"
+            <button id="share-button" class="big-button"
                     type="button" onclick="remoting.tryShare();"
                     i18n-content="shareButton"></button>
           </div>
@@ -145,6 +146,9 @@ found in the LICENSE file.
             </button>
           </div>
         </div> <!-- host.share-failed -->
+
+        <div id="host-plugin-container"></div>
+
       </div> <!-- host-panel -->
 
       <div id="client-panel" data-ui-mode="client">
@@ -152,11 +156,9 @@ found in the LICENSE file.
           <div class="description" i18n-content="descriptionConnect"></div>
           <div id="access-code-entry-row">
             <form action="" onsubmit="remoting.tryConnect(); return false;">
-              <label class="auth-status-control" for="access-code-entry"
-                     i18n-content="accessCode"></label>
-              <input id="access-code-entry" class="auth-status-control"
-                     type="text"/>
-              <button id="connect-button" class="auth-status-control big-button"
+              <label for="access-code-entry" i18n-content="accessCode"></label>
+              <input id="access-code-entry" type="text"/>
+              <button id="connect-button" class="big-button"
                       type="submit" i18n-content="connectButton"></button>
             </form>
           </div> <!-- code-entry-row -->
@@ -187,6 +189,7 @@ found in the LICENSE file.
                                remoting.AppMode.CLIENT_UNCONNECTED);">
           </button>
         </div>
+
       </div> <!-- client-panel -->
 
       <footer class="choice-footer">
@@ -220,13 +223,11 @@ found in the LICENSE file.
           </button>
         </div> <!-- waiting-footer -->
       </footer>
-    </section> <!-- choice-mode -->
 
-    <section id="session-mode" data-ui-mode="in-session client" hidden>
-    </section> <!-- session-mode -->
+    </div> <!-- main -->
 
-    <div id="host-plugin-container" data-ui-mode="host" hidden>
-    </div> <!-- host-plugin-container -->
+    <div id="session-mode" data-ui-mode="in-session client" hidden>
+    </div> <!-- session-mode -->
 
     <section id="debug-log" hidden>
       <div id="statistics">
diff --git a/remoting/webapp/me2mom/debug_log.css b/remoting/webapp/me2mom/debug_log.css
index 8463082..bfc7fac 100644
--- a/remoting/webapp/me2mom/debug_log.css
+++ b/remoting/webapp/me2mom/debug_log.css
@@ -30,7 +30,3 @@
   margin: 0.35em;
   padding: 0;
 }
-
-#debug-enable {
-  float: right;
-}
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index ae99b3d..8947e59 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -19,6 +19,7 @@ function pluginLostFocus_() {
 
 /** @enum {string} */
 remoting.AppMode = {
+  UNAUTHENTICATED: 'auth',
   CLIENT: 'client',
     CLIENT_UNCONNECTED: 'client.unconnected',
     CLIENT_CONNECTING: 'client.connecting',
@@ -83,7 +84,8 @@ function retrieveEmail_(access_token) {
   var onResponse = function(xhr) {
     if (xhr.status != 200) {
       // TODO(ajwong): Have a better way of showing an error.
-      window.alert('Unable to get e-mail');
+      remoting.debug.log('Unable to get email');
+      document.getElementById('current-email').innerText = '???';
       return;
     }
 
@@ -102,40 +104,9 @@ function refreshEmail_() {
   }
 }
 
-// This code moved into this subroutine (instead of being inlined in
-// updateAuthStatus_() because of bug in V8.
-// http://code.google.com/p/v8/issues/detail?id=1423
-function updateControls_(disable) {
-  var authStatusControls =
-      document.getElementsByClassName('auth-status-control');
-  for (var i = 0; i < authStatusControls.length; ++i) {
-    authStatusControls[i].disabled = disable;
-  }
-}
-
-function updateAuthStatus_() {
-  var oauthValid = remoting.oauth2.isAuthenticated();
-  document.getElementById('oauth2-token-button').hidden = oauthValid;
-  document.getElementById('oauth2-clear-button').hidden = !oauthValid;
-
-  var loginName = getEmail();
-  document.getElementById('current-email').innerText = loginName || '';
-
-  var disableControls = !(loginName && oauthValid);
-  var controlPanel = document.getElementById('control-panel');
-  // TODO(ajwong): Do this via a style, or remove if the new auth flow is
-  // implemented.
-  if (disableControls) {
-    controlPanel.style.backgroundColor = 'rgba(204, 0, 0, 0.15)';
-  } else {
-    controlPanel.style.backgroundColor = 'rgba(0, 204, 102, 0.15)';
-  }
-  updateControls_(disableControls);
-}
-
 function setEmail(value) {
   window.localStorage.setItem(KEY_EMAIL_, value);
-  updateAuthStatus_();
+  document.getElementById('current-email').innerText = value;
 }
 
 /**
@@ -151,14 +122,13 @@ function exchangedCodeForToken_() {
   }
   remoting.oauth2.callWithToken(function(token) {
       retrieveEmail_(token);
-      updateAuthStatus_();
   });
 }
 
 remoting.clearOAuth2 = function() {
   remoting.oauth2.clear();
   window.localStorage.removeItem(KEY_EMAIL_);
-  updateAuthStatus_();
+  remoting.setMode(remoting.AppMode.UNAUTHENTICATED);
 }
 
 remoting.toggleDebugLog = function() {
@@ -177,8 +147,11 @@ remoting.init = function() {
   remoting.debug =
       new remoting.DebugLog(document.getElementById('debug-messages'));
 
-  updateAuthStatus_();
   refreshEmail_();
+  var email = getEmail();
+  if (email) {
+    document.getElementById('current-email').innerText = email;
+  }
   remoting.setMode(getAppStartupMode());
   if (isHostModeSupported()) {
     var unsupported = document.getElementById('client-footer-text-cros');
@@ -569,6 +542,9 @@ remoting.setAppMode = function(mode) {
  * @return {remoting.AppMode} The mode (client or host) to start in.
  */
 function getAppStartupMode() {
+  if (!remoting.oauth2.isAuthenticated()) {
+    return remoting.AppMode.UNAUTHENTICATED;
+  }
   if (isHostModeSupported()) {
     var mode = window.localStorage.getItem(KEY_APP_MODE_);
     if (mode == remoting.AppMode.CLIENT) {