From 34e6b2e7cad19a2345328323fd81ac477e13e7eb Mon Sep 17 00:00:00 2001
From: Byron Jones <glob@mozilla.com>
Date: Wed, 2 Sep 2015 13:12:55 +0800
Subject: Bug 1200618 - Layout of the TOTP 2FA leads to missing the token time
 window and thus frustration

---
 js/account.js                                   |  6 ++--
 skins/standard/admin.css                        |  7 +++++
 template/en/default/account/prefs/mfa.html.tmpl | 42 ++++++++++++++++---------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/js/account.js b/js/account.js
index c287309d8..d68c3f550 100644
--- a/js/account.js
+++ b/js/account.js
@@ -80,7 +80,7 @@ $(function() {
                         iframe.find('#qr').attr('src', 'data:image/png;base64,' + data.png);
                         iframe.find('#secret').text(data.secret32);
                         $('#mfa-totp-issued').show();
-                        $('#mfa-totp-enable-code').focus();
+                        $('#mfa-password').focus();
                         $('#update').attr('disabled', false);
                     })
                     .error(function(data) {
@@ -100,8 +100,8 @@ $(function() {
             event.preventDefault();
             $('#mfa-disable-container').show();
             $('#mfa-confirm').show();
-            $('#mfa-api-blurb').hide();
-            $('#mfa-totp-disable-code').focus();
+            $('.mfa-api-blurb').hide();
+            $('#mfa-password').focus();
             $('#update').attr('disabled', false);
             $(this).hide();
         });
diff --git a/skins/standard/admin.css b/skins/standard/admin.css
index e45865490..44b474b8f 100644
--- a/skins/standard/admin.css
+++ b/skins/standard/admin.css
@@ -273,3 +273,10 @@ input[disabled] {
     background: none;
     padding: 0;
 }
+
+label.mfa-totp {
+    display: inline-block;
+    width: 155px;
+    text-align: right;
+    font-weight: bold;
+}
diff --git a/template/en/default/account/prefs/mfa.html.tmpl b/template/en/default/account/prefs/mfa.html.tmpl
index dcf480d9f..a94cb77b8 100644
--- a/template/en/default/account/prefs/mfa.html.tmpl
+++ b/template/en/default/account/prefs/mfa.html.tmpl
@@ -36,9 +36,20 @@
 
     <div id="mfa-disable-container" style="display:none">
 
+      <p>
+        Your current password and
+        [% IF user.mfa == "TOTP" %]
+          a TOTP verification code
+        [% END %]
+        is required to enable two-factor authentication.
+      </p>
+      <p>
+        <label class="mfa-totp">Current Password:</label>
+        <input type="password" name="password" id="mfa-password" required>
+      </p>
+
       [% IF user.mfa == "TOTP" %]
-        A verification code is required to confirm this change.<br><br>
-        <b>Code:</b>
+        <label class="mfa-totp">Code:</label>
         <input type="text" name="mfa_disable_code" id="mfa-totp-disable-code"
                placeholder="123456" maxlength="6" pattern="\d{6}" size="10"
                autocomplete="off" required autofocus>
@@ -46,7 +57,7 @@
 
     </div>
 
-    <p>
+    <p class="mfa-api-blurb">
       [% INCLUDE api_key_pref_blurb %]
     </p>
 
@@ -68,17 +79,25 @@
       [%# TOTP %]
       <div id="mfa-enable-totp" class="mfa-provider" style="display:none">
 
+        <p>
+          Your current password is required to enable two-factor authentication.
+        </p>
+        <p>
+          <label class="mfa-totp">Current Password:</label>
+          <input type="password" name="password" id="mfa-password" required>
+        </p>
+
         <div id="mfa-totp-throbber">
-          Working.. <img src="skins/standard/throbber.gif" width="16" height="11">
+          Generating new QR code.. <img src="skins/standard/throbber.gif" width="16" height="11">
         </div>
 
         <div id="mfa-totp-issued" style="display:none">
-          <iframe id="mfa-enable-totp-frame" src="userprefs.cgi?tab=mfa&frame=totp"></iframe>
+          <iframe id="mfa-enable-totp-frame" src="userprefs.cgi?tab=mfa&frame=totp" tabindex="-1"></iframe>
           <div id="mfa-totp-blurb">
             Scan this QR code with your <a href="#" id="mfa-totp-apps">TOTP App</a>,
             then enter the six digit code the app generates.<br>
             <br>
-            <b>Code:</b>
+            <label class="mfa-totp">Code:</label>
             <input type="text" name="mfa_enable_code" id="mfa-totp-enable-code"
                    placeholder="123456" maxlength="6" pattern="\d{6}" size="10"
                    autocomplete="off" required autofocus>
@@ -117,16 +136,11 @@
 
   <div id="mfa-confirm" style="display:none">
     <p>
-      Two-factor authentication settings will not be updated until you provide
-      your current password and <b>Submit Changes</b>.
-    </p>
-
-    <p>
-      <b>Current Password:</b>
-      <input type="password" name="password" required>
+      Two-factor authentication settings will not be updated until you
+      <b>Submit Changes</b>.
     </p>
 
-    <p id="mfa-api-blurb" style="display:none">
+    <p class="mfa-api-blurb" style="display:none">
       [% INCLUDE api_key_pref_blurb %]
     </p>
   </div>
-- 
cgit v1.2.3-24-g4f1b