recovery code hashing

mfa/templates/RECOVERY/Add.html

@@ -25,39 +25,36 @@
     </style>
 <script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
 <script type="text/javascript">
-    $(document).ready(function addToken() {
-        listToken()
-    });
-    function listToken() {
-        $.ajax({
-            "url":"{% url 'get_recovery_tokens' %}",dataType:"JSON",
-            success:function (data) {
-                let htmlkey="";
-                for (let i = 0; i < data.keys.length; i++) {
-                    if (data.enable[i] == 0)
-                    {
-                        htmlkey +="<pre class='crossed'>" +data.keys[i] + "</pre>"
-                    }
-                    else 
-                    {
-                        htmlkey +="<pre>" +data.keys[i] + "</pre>"
-                    }
-                };
-                document.getElementById('tokens').innerHTML = htmlkey
+    $(document).ready(function checkTokenLeft() {
+        $.ajax({"url":"{% url 'get_recovery_token_left' %}", dataType:"JSON",
+        success:function (data) {
+            tokenLeft = data.left
+            let html
+            if (tokenLeft == 0) {
+                html = "<h6>You don't have any backup code left, please generate new ones !</h6>"
+                
             }
-        })
-    };
+            else {
+                html = "<p>You still have "+tokenLeft+" backup code left."
+            }
+            document.getElementById('tokens').innerHTML = html
+        }})
+    });
     function confirmRegenerateTokens() {
+        htmlModal = "<h6>Caution! you can only note these token now, else you will need to generate new ones.</h6><button onclick='regenerateTokens()' class='btn btn-success'>Regenerate</button>"
         $("#modal-title").html("Are you sure you want to regenerate your recovery tokens?")
-        $("#modal-body").html("<button onclick='regenerateTokens()' class='btn btn-success'>Regenerate</button>")
+        $("#modal-body").html(htmlModal)
         $("#popUpModal").modal('show')
     }
     function regenerateTokens() {
         $.ajax({
-            "url":"{% url 'regen_recovery_tokens' %}",
+            "url":"{% url 'regen_recovery_tokens' %}", dataType:"JSON",
             success:function (data) {
-                console.warn("ksfvkjs")
-                listToken()
+                let htmlkey="";
+                for (let i = 0; i < data.keys.length; i++) {
+                        htmlkey +="<pre>" +data.keys[i] + "</pre>"
+                }
+                document.getElementById('tokens').innerHTML = htmlkey
                 $("#popUpModal").modal('hide')
             }
         })

mfa/templates/TOTP/recheck.html

@@ -22,10 +22,11 @@
         })
     }
     function tryToAuth() {
-        if ($("#otp").val().length == 6) {
-            document.getElementById("formLogin").submit();     
+        const otp_length = $("#otp").val().length
+        if (otp_length == 6) {
+            document.getElementById("formLogin").submit();
         }
-        else if ($("#otp").val().length == 10) {
+        else if (otp_length == 11) {
             const form = document.getElementById("formLogin");
             form.setAttribute("ACTION", "{% url 'recovery_auth' %}")
             form.submit();
@@ -70,7 +71,7 @@
 		<span class="input-group-addon input-group-text">
 		<i class="glyphicon glyphicon-lock bi bi-lock"></i>
 		</span>
-		<input class="form-control" size="6" MaxLength="10" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
+		<input class="form-control" size="6" MaxLength="11" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
 
 	      </div>
 	    </div>