3 files changed, 99 insertions, 26 deletions

diff --git a/template/en/default/account/prefs/mfa.html.tmpl b/template/en/default/account/prefs/mfa.html.tmpl
index 5aed954f9..df272f7d3 100644
--- a/template/en/default/account/prefs/mfa.html.tmpl
+++ b/template/en/default/account/prefs/mfa.html.tmpl
@@ -23,7 +23,19 @@
 [% END %]
 
 <div id="mfa-container">
-  [% IF user.mfa %]
+  [% IF mfa_recovery_token %]
+    <input type="hidden" name="mfa_action" id="mfa-action" value="">
+
+    <p>
+      Here are your recovery codes.
+    </p>
+
+    [% INCLUDE recovery_blurb %]
+    <iframe id="mfa-recovery-frame" tabindex="-1"
+            src="userprefs.cgi?tab=mfa&frame=recovery&t=[% mfa_recovery_token FILTER uri %]">
+    </iframe>
+
+  [% ELSIF user.mfa %]
     <p>
       Two-factor authentication is currently <b>enabled</b> using
       <b>[% SWITCH user.mfa %]
@@ -32,30 +44,15 @@
     </p>
     <input type="hidden" name="mfa_action" id="mfa-action" value="disable">
 
-    <button type="button" id="mfa-disable">Disable Two-factor Authentication</button>
-    [% INCLUDE "mfa/protected.html.tmpl" %]
-
-    <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 disable 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" %]
-        <label class="mfa-totp">Code:</label>
-        <input type="text" name="code" id="mfa-totp-disable-code"
-               placeholder="123456" maxlength="6" pattern="\d{6}" size="10"
-               autocomplete="off" required autofocus>
-      [% END %]
-
+    <div id="mfa-buttons">
+      <div>
+        <button type="button" id="mfa-disable">Disable Two-factor Authentication</button>
+        [% INCLUDE "mfa/protected.html.tmpl" %]
+      </div>
+      <div>
+        <button type="button" id="mfa-recovery">Generate Printable Recovery Codes</button>
+        [% INCLUDE "mfa/protected.html.tmpl" %]
+      </div>
     </div>
 
     <p class="mfa-api-blurb">
@@ -75,6 +72,38 @@
       [% END %]
     </p>
 
+    <div id="mfa-recovery-container" style="display:none">
+      <p>
+        Your current password and verification code is required to generate
+        recovery codes.
+      </p>
+      <ul>
+        <li><b>Generating recovery codes obsoletes previously generated ones</b></li>
+      </ul>
+      [% INCLUDE recovery_blurb %]
+    </div>
+
+    <div id="mfa-disable-container" style="display:none">
+      <p>
+        Your current password and verification code is required to disable
+        two-factor authentication.
+      </p>
+    </div>
+
+    <div id="mfa-auth-container" style="display:none">
+      <p>
+        <label class="mfa-totp">Current Password:</label>
+        <input type="password" name="password" id="mfa-password" required>
+      </p>
+
+      [% IF user.mfa == "TOTP" %]
+        <label class="mfa-totp">Code:</label>
+        <input type="text" name="code"
+               placeholder="123456" maxlength="9" pattern="\d{6,9}" size="10"
+               autocomplete="off" required autofocus>
+      [% END %]
+    </div>
+
   [% ELSE %]
     <p>
       Two-factor authentication is currently <b>disabled</b>.
@@ -163,3 +192,12 @@
   </div>
 
 </div>
+
+[% BLOCK recovery_blurb %]
+  <ul>
+    <li>These codes can be used in case you lose your second factor</li>
+    <li>Please store them safely in a locked cabinet at home</li>
+    <li>If in doubt, generate and print new recovery codes</li>
+    <li><b>Do not store these codes electronically</b></li>
+  </ul>
+[% END %]
diff --git a/template/en/default/mfa/recovery.html.tmpl b/template/en/default/mfa/recovery.html.tmpl
new file mode 100644
index 000000000..b76d53ae9
--- /dev/null
+++ b/template/en/default/mfa/recovery.html.tmpl
@@ -0,0 +1,35 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[% css = BLOCK %]
+
+#codes {
+  font-size: 100%;
+  font-family: monospace;
+}
+
+[% END %]
+
+[%
+  PROCESS global/header.html.tmpl
+    style_urls = ['skins/standard/admin.css']
+    no_body    = 1
+    style      = css
+%]
+<body id="mfa-recovery-embedded">
+  [% IF codes.size %]
+    <div id="codes">
+      [% FOREACH code IN codes %]
+        [% code FILTER html %]<br>
+      [% END %]
+    </div>
+  [% ELSE %]
+    <i>Codes already generated</i>
+  [% END %]
+</body>
+</html>
diff --git a/template/en/default/mfa/totp/verify.html.tmpl b/template/en/default/mfa/totp/verify.html.tmpl
index e61ee3866..ad75dc6bc 100644
--- a/template/en/default/mfa/totp/verify.html.tmpl
+++ b/template/en/default/mfa/totp/verify.html.tmpl
@@ -22,7 +22,7 @@
     <input type="hidden" name="[% field FILTER html %]" value="[% postback.fields.item(field) FILTER html %]">
   [% END %]
   <input type="text" name="code" id="code"
-        placeholder="123456" maxlength="6" pattern="\d{6}" size="10"
+        placeholder="123456" maxlength="9" pattern="\d{6,9}" size="10"
         autocomplete="off" required autofocus><br>
   <br>
   <input type="submit" value="Submit">