recovery codes

mfa/templates/MFA.html

@@ -82,28 +82,40 @@
                <th>Status</th>
                <th>Delete</th>
            </tr>
-        {% for key in keys %}
-           <tr>
+        {% if keys %}
+            {% for key in keys %}
+            <tr>
 
-               <td>{{ key.key_type }}</td>
-               <td>{{ key.added_on }}</td>
-               <td>{{ key.expires }}</td>
-               <td>{% if key.device %}{{ key.device }}{% endif %}</td>
-               <td>{{ key.last_used }}</td>
-                {% if key.key_type in HIDE_DISABLE %}
-                    <td>{% if key.enabled %}On{% else %} Off{% endif %}</td>
-                {% else %}
-                    <td><input type="checkbox" id="toggle_{{ key.id }}" {% if key.enabled %}checked{% endif %} data-onstyle="success" data-offstyle="danger"  onchange="toggleKey({{ key.id }})" data-toggle="toggle" class="status_chk"></td>
-                {% endif %}
-               <td>{% if key.key_type in HIDE_DISABLE %}
-                   ----
-                   {% else %}
-                    <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash fa-solid fa-trash-can bi bi-trash-fill"></span></a></td>
+                <td>{{ key.key_type }}</td>
+                <td>{{ key.added_on }}</td>
+                <td>{{ key.expires }}</td>
+                <td>{% if key.device %}{{ key.device }}{% endif %}</td>
+                <td>{{ key.last_used }}</td>
+                    {% if key.key_type in HIDE_DISABLE %}
+                        <td>{% if key.enabled %}On{% else %} Off{% endif %}</td>
+                    {% else %}
+                        <td><input type="checkbox" id="toggle_{{ key.id }}" {% if key.enabled %}checked{% endif %} data-onstyle="success" data-offstyle="danger"  onchange="toggleKey({{ key.id }})" data-toggle="toggle" class="status_chk"></td>
                     {% endif %}
-           </tr>
-       {% empty %}
+                <td>{% if key.key_type in HIDE_DISABLE %}
+                    ----
+                    {% else %}
+                        <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash fa-solid fa-trash-can bi bi-trash-fill"></span></a></td>
+                        {% endif %}
+            </tr>
+            {% endfor %}
+            <tr>
+
+                <td>RECOVERY</td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td>On</td>
+                <td><a href="{% url 'manage_recovery_codes' %}"> <span class="fa fa-wrench fa-solid fa-wrench bi bi-wrench-fill"></span></a></td>
+            </tr>
+        {% else %}
            <tr><td colspan="7" align="center">You didn't have any keys yet.</td> </tr>
-       {% endfor %}
+       {% endif %}
         </table>
     </div>
     </div>

mfa/templates/RECOVERY/Add.html

@@ -0,0 +1,88 @@
+
+{% extends "base.html" %}
+{% load static %}
+{% block head %}
+<style>
+    #two-factor-steps {
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	padding: 15px;
+    }
+    .row{
+        margin: 0px;
+    }
+    .crossed{
+        text-decoration: line-through;
+    }
+    </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>" + "<br>"
+                    }
+                    else 
+                    {
+                        htmlkey +="<pre>" +data.keys[i] + "</pre>" + "<br>"
+                    }
+                };
+                document.getElementById('tokens').innerHTML = htmlkey
+            }
+        })
+    };
+    function confirmRegenerateTokens() {
+        $("#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")
+        $("#popUpModal").modal('show')
+    }
+    function regenerateTokens() {
+        $.ajax({
+            "url":"{% url 'regen_recovery_tokens' %}",
+            success:function (data) {
+                console.warn("ksfvkjs")
+                listToken()
+                $("#popUpModal").modal('hide')
+            }
+        })
+    }
+    </script>
+{% endblock %}
+{% block content %}
+<br/>
+<br/>
+<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>Token List</h4>
+        </div>
+    
+        <div id="tokens">
+        
+        </div>
+
+        <div class="row" align="center">
+            <button onclick="confirmRegenerateTokens()" class="btn btn-default btn-secondary" role="button">Regenarate tokens</button>
+        </div>
+
+        <div class="row">
+
+            <div align="center" class="alert alert-success" style="display: none" id="return">
+
+                <a href="{{redirect_html}}"> {{reg_success_msg}}</a>
+
+            </div>
+        </div>
+
+    </div>
+</div>
+{% include "modal.html" %}
+{% endblock %}

mfa/templates/TOTP/recheck.html

@@ -40,7 +40,7 @@
       <fieldset>
       <div class="row">
       <div class="col-sm-12 col-md-12">
-        <p>Enter the 6-digits on your authenticator.</p>
+        <p>Enter the 6-digits on your authenticator. Or input a recovery code</p>
       </div>
       </div>