Added Enforce Recovery Method

mfa/templates/TOTP/Add.html

@@ -38,13 +38,16 @@
         $.ajax({
             "url":"{% url 'verify_otop' %}?key="+key+ "&answer="+answer,
             success:function (data) {
-                if (data == "Error")
-                    alert("You entered wrong numbers, please try again")
-                else
-                {
-                    alert("Your authenticator is added successfully.")
-                    window.location.href="{{ redirect_html }}"
-                }
+            if (data =='Success')
+                $("#res").html("<div class='alert alert-success'>Your authenticator is registered successfully, <a href='{{redirect_html}}'> {{reg_success_msg}}</a></div>")
+      else if (data == "RECOVERY")
+      {
+         setTimeout(function (){location.href="{% url 'manage_recovery_codes' %}"},2500)
+        $("#res").html("<div class='alert alert-success'>Your authenticator is registered successfully, but <a href='{% url 'manage_recovery_codes' %}'>redirecting to {{ RECOVERY_METHOD }} method</a></div>")
+      }
+      else
+        $("#res").html("<div class='alert alert-danger'>The code provided doesn't match the key, please try again or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
+
             }
         })
     }
@@ -66,21 +69,24 @@
 <div class="container d-flex justify-content-center">
     <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
         <div class="row" align="center">
-            <h4>Adding Authenticator</h4>
+            <h4>Adding a new {{ method.name }}</h4>
         </div>
         <div class="row">
 
             <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a>. If you can’t use a barcode,
                 <a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
         </div>
+        <div id="res">
 
-        <div class="row">
+        </div>
+        <div class="row" style="text-align: center">
 
-            <div align="center" style="display: none" id="second_step">
+            <div align="center" style="display: none;text-align: center;align-content: center" id="second_step">
 
                 <img id="qr"/>
 
             </div>
+        </div>
             <div class="row">
 
                 <p><b>Enter the six-digit code from the application</b></p>
@@ -88,16 +94,13 @@
 
             </div>
             <div class="row">
-
-
+                <div class="offset-md-4 col-md-4">
                 <input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
-
+                </div>
             </div>
             <div class="row" style="padding-top: 10px;">
-                <div class="col-md-6" style="padding-left: 0px">
+                <div class="col-md-4 offset-md-4" style="padding-left: 0px">
                     <button class="btn btn-success" onclick="verify()">Enable</button>
-                </div>
-                <div class="col-md-6" align="right" style="padding-right: 30px">
                     <a href="{% url 'mfa_home' %}" class="btn btn-default btn-secondary" role="button">Cancel</a>
                 </div>
             </div>