display recovery code options on mfa and fido page

app/auth/templates/auth/fido.html

@@ -28,11 +28,20 @@
       </div>
 
       {% if enable_otp %}
-        <div class="text-center text-muted mb-6" style="margin-top: 1em;">
+        <hr>
+        <div class="text-muted mt-5" style="margin-top: 1em;">
           Don't have your key with you? <br> <a href="{{ url_for('auth.mfa') }}">Verify by One-Time Password</a>
         </div>
       {% endif %}
 
+      <hr>
+
+      <div class="mt-5">
+        If you have troubles with your authentication app, you can use the recovery code to login. <br>
+        <a href="{{ url_for('auth.recovery_route', next=next_url) }}">Use Recovery Codes</a>
+      </div>
+
+
       <script>
         async function verifyKey() {
           $("#btnVerifyKey").prop('disabled', true);
@@ -65,7 +74,7 @@
       {% if auto_activate %}
         <script>$('document').ready(verifyKey());</script>
       {% endif %}
-        
+
     </div>
   </div>
 

app/auth/templates/auth/mfa.html

@@ -20,7 +20,7 @@
         <input type="hidden" name="form-name" value="create">
 
         <div class="font-weight-bold mt-5">Token</div>
-        <div class="small-text">Please enter the 6-digit number displayed in your MFA application
+        <div class="small-text mb-3">Please enter the 6-digit number displayed in your MFA application
           (Google Authenticator, Authy, MyDigiPassword, etc) here
         </div>
 
@@ -30,11 +30,20 @@
       </form>
 
       {% if enable_fido %}
-        <div class="text-center text-muted mb-6" style="margin-top: 1em;">
+        <hr>
+        <div class="text-muted mt-5" style="margin-top: 1em;">
           Having trouble with your authenticator? <br> <a href="{{ url_for('auth.fido') }}">Verify by your security
           key</a>
         </div>
       {% endif %}
+
+      <hr>
+      <div class="mt-5">
+        If you have troubles with your authentication app, you can use the recovery code to login. <br>
+        <a href="{{ url_for('auth.recovery_route', next=next_url) }}">Use Recovery Codes</a>
+      </div>
+
+
     </div>
   </div>
 

app/auth/views/fido.py

@@ -104,4 +104,5 @@ def fido():
         webauthn_assertion_options=webauthn_assertion_options,
         enable_otp=user.enable_otp,
         auto_activate=auto_activate,
+        next_url=next_url
     )

app/auth/views/mfa.py

@@ -59,4 +59,5 @@ def mfa():
         "auth/mfa.html",
         otp_token_form=otp_token_form,
         enable_fido=(user.fido_enabled()),
+        next_url=next_url
     )