diff options
| -rw-r--r-- | js/account.js | 6 | ||||
| -rw-r--r-- | skins/standard/admin.css | 7 | ||||
| -rw-r--r-- | 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> |