Fixes and applied comments

mfa/templates/RECOVERY/Add.html

@@ -21,46 +21,24 @@
     .tooltip {
   position: relative;
   display: inline-block;
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 140px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  bottom: 150%;
-  left: 50%;
-  margin-left: -75px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #555 transparent transparent transparent;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
-    .return{
-        margin: 1px;
     }
-    </style>
+
+    .toolbtn {
+        border-radius: 7px;
+    }
+    .toolbtn:hover {
+        background-color: gray;
+        transition: 0.2s;
+    }
+    .toolbtn:active {
+        background-color: green;
+        transition: 0.2s;
+    }
+</style>
+
 <script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
 <script type="text/javascript">
+    var clearCodes;
     $(document).ready(function checkTokenLeft() {
         $.ajax({"url":"{% url 'get_recovery_token_left' %}", dataType:"JSON",
         success:function (data) {
@@ -93,18 +71,35 @@
                 <div class='row'><div class='offset-4 col-md-4' style='background-color:#f0f0f0;padding: 10px'>
                     <div class='row'>
                     <div class="col-6 offset-6">
-                    <span onclick='window.location.href="{% url 'download_recovery' %}"' class='fa fa-download' title="Download"
+                    <span onclick='download_recovery()' class='fa fa-download toolbtn' title="Download"
                     style='cursor:pointer'></span>&nbsp;&nbsp;
-                    <span class='fa fa-clipboard' title="Copy" onclick="copy()" style='cursor:pointer'></span>
+                    <span class='fa fa-clipboard toolbtn' title="Copy" onclick="copy()" style='cursor:pointer'></span>
                     </div></div><div id='recovery_codes'><pre>`;
                 for (let i = 0; i < data.keys.length; i++) {
                         htmlkey +="- " +data.keys[i] + "\n"
                 }
                 document.getElementById('tokens').innerHTML = htmlkey+"</pre></div></div></div>"
                 $("#popUpModal").modal('hide')
+                clearCodes = data.keys
             }
         })
     }
+    function download_recovery() {
+        var element = document.createElement('a');
+        var text = "";
+        for(let i = 0; i < clearCodes.length; i++)
+        {
+            text = text + clearCodes[i] 
+            if (i < clearCodes.length - 1) { text = text + "\n"}
+        }
+        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+        element.setAttribute('download', 'Recovery Codes.txt');
+        element.style.display = 'none';
+        document.body.appendChild(element);
+        element.click();
+        console.log(element.innerHTML)
+        document.body.removeChild(element);
+    }
     </script>
 {% endblock %}
 {% block content %}