Fixes and applied comments

2022-08-31 21:13:15 +02:00
parent cf4f6ed224
commit d0113dd2cc
9 changed files with 98 additions and 211 deletions
--- a/mfa/templates/MFA.html
+++ b/mfa/templates/MFA.html
@@ -60,10 +60,10 @@
                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
                    <li><a class="dropdown-item" href="{% url 'start_u2f' %}">Security Key</a></li>
                {% endif %}
-            {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
+                {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
                    <li><a class="dropdown-item" href="{% url 'start_fido2' %}">FIDO2 Security Key</a></li>
                {% endif %}
-            {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
+                {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
                    <li><a class="dropdown-item" href="{% url 'start_td' %}">Trusted Device</a></li>
                {% endif %}
            </ul>
--- a/mfa/templates/RECOVERY/Add.html
+++ b/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 %}
--- a/mfa/templates/RECOVERY/Auth.html
+++ b/mfa/templates/RECOVERY/Auth.html
@@ -1,94 +1,14 @@
-<script type="application/javascript">
-    $(document).ready(function showWarningLastBackup() {
-        {% if lastBackup %}
-        $("#modal-title").html("Last backup code used !")
-        $("#modal-body").html("Don't forget to regenerate new backup code after login !")
-        $('#modal-footer').html(`<FORM METHOD="GET" ACTION="{% url 'recovery_auth' %}" Id="confirmLogin" onSubmit="" name="recoveryLastBackupConfirm">
-        <input type='submit'class='btn btn-lg btn-success btn-block' value='Continue'>`)
-        $("#popUpModal").modal('show')
-        {% endif %}
-        return
-    });
-    function send_totp() {
-        $.ajax({"url":"{% url 'totp_recheck' %}", method:"POST",dataType:"JSON",
-            data:{"csrfmiddlewaretoken":"{{ csrf_token }}","otp":$("#otp").val()},
-         success:function (data) {
-                            if (data["recheck"])
-                                mfa_success_function();
-                            else {
-                                mfa_failed_function();
-                            }
-                        }
-        })
+{% extends "mfa_auth_base.html" %}
+{% block head %}
+    <style>
+    .row{
+        margin-left: 15px;
    }
-    function tryToAuth() {
-        const otp_length = $("#otp").val().length
-        if (otp_length == 6) {
-            document.getElementById("formLogin").submit();
-        }
-        else if (otp_length == 11) {
-            const form = document.getElementById("formLogin");
-            form.setAttribute("ACTION", "{% url 'recovery_auth' %}")
-            form.submit();
-        }
-    }
-</script>
-<div class='container'>
-<div class="row">
+    </style>
+{% endblock %}
+{% block content %}
+<br/>
+<br/>
+{% include "RECOVERY/recheck.html" with mode='auth' %}

-<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
-	      <strong>Recovery Code</strong>
-      </div>
-      <div class="panel-body card-body">
-
-      <FORM METHOD="POST" ACTION="{% url 'recovery_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
-
-
-      {% csrf_token %}
-          {%  if invalid %}
-          <div class="alert alert-danger">
-              Sorry, The provided token is not valid.
-          </div>
-          {% endif %}
-      <fieldset>
-      <div class="row">
-      <div class="col-sm-12 col-md-12">
-        <p>Enter enter your next recovery code</p>
-      </div>
-      </div>
-
-      <div class="row">
-	  <div class="col-sm-12 col-md-12">
-	    <div class="form-group">
-	      <div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-lock bi bi-lock"></i>
-		</span>
-		<input class="form-control" size="11"  value="" placeholder="e.g npXiX-7dZgK" name="otp" type="text" id="otp" autofocus>
-
-	      </div>
-	    </div>
-
-          <div class="form-group d-grid gap-2">
-
-	      <input type="button" onclick="{% if mode == "recheck" %} send_totp() {% else %} tryToAuth() {% endif %}" class="btn btn-lg btn-success btn-block" value="Sign in">
-	      </div>
-      </div>
-      </fieldset>
-      </FORM>
-      </div>
-        <div class="row">
-        <div class="col-md-12 mb-3" style="padding-left: 25px">
-            {% if request.session.mfa_methods|length > 1 %}
-                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
-            {% endif %}
-        </div>
-        </div>
-	      </div>
-              </div>
-	      </div>
-	      </div>
-</div>
-{% include "modal.html" %}
+  {% endblock %}
--- a/mfa/templates/RECOVERY/recheck.html
+++ b/mfa/templates/RECOVERY/recheck.html
@@ -9,9 +9,9 @@
        {% endif %}
        return
    });
-    function send_totp() {
-        $.ajax({"url":"{% url 'totp_recheck' %}", method:"POST",dataType:"JSON",
-            data:{"csrfmiddlewaretoken":"{{ csrf_token }}","otp":$("#otp").val()},
+    function send_recovery() {
+        $.ajax({"url":"{% url 'recovery_recheck' %}", method:"POST",dataType:"JSON",
+            data:{"csrfmiddlewaretoken":"{{ csrf_token }}","recovery":$("#recovery").val()},
         success:function (data) {
                            if (data["recheck"])
                                mfa_success_function();
@@ -21,17 +21,6 @@
                        }
        })
    }
-    function tryToAuth() {
-        const otp_length = $("#otp").val().length
-        if (otp_length == 6) {
-            document.getElementById("formLogin").submit();
-        }
-        else if (otp_length == 11) {
-            const form = document.getElementById("formLogin");
-            form.setAttribute("ACTION", "{% url 'recovery_auth' %}")
-            form.submit();
-        }
-    }
 </script>
 <div class='container'>
 <div class="row">
@@ -39,17 +28,17 @@
 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
 <div class="panel panel-default card">
      <div class="panel-heading card-header">
-	      <strong> One Time Password</strong>
+	      <strong> Recovery code</strong>
      </div>
      <div class="panel-body card-body">

-      <FORM METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">
+      <FORM METHOD="POST" ACTION="{% url 'recovery_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">


      {% csrf_token %}
          {%  if invalid %}
          <div class="alert alert-danger">
-              Sorry, The provided token is not valid.
+              Sorry, The provided code is not valid.
          </div>
          {% endif %}
      {% if quota %}
@@ -60,7 +49,7 @@
      <fieldset>
      <div class="row">
      <div class="col-sm-12 col-md-12">
-        <p>Enter the 6-digits on your authenticator. Or input a recovery code</p>
+        <p>Enter the 11-digits on your authenticator. Or input a recovery code</p>
      </div>
      </div>

@@ -71,14 +60,14 @@
 		<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="11" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
+		<input class="form-control" size="11" MaxLength="11" value="" placeholder="e.g abcde-fghij" name="recovery" type="text" id="recovery" autofocus>

 	      </div>
 	    </div>

          <div class="form-group d-grid gap-2">

-	      <input type="button" onclick="{% if mode == "recheck" %} send_totp() {% else %} tryToAuth() {% endif %}" class="btn btn-lg btn-success btn-block" value="Sign in">
+            <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_recovery()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
 	      </div>
      </div>
      </fieldset>
--- a/mfa/templates/TOTP/recheck.html
+++ b/mfa/templates/TOTP/recheck.html
@@ -1,14 +1,4 @@
 <script type="application/javascript">
-    $(document).ready(function showWarningLastBackup() {
-        {% if lastBackup %}
-        $("#modal-title").html("Last backup code used !")
-        $("#modal-body").html("Don't forget to regenerate new backup code after login !")
-        $('#modal-footer').html(`<FORM METHOD="GET" ACTION="{% url 'recovery_auth' %}" Id="confirmLogin" onSubmit="" name="recoveryLastBackupConfirm">
-        <input type='submit'class='btn btn-lg btn-success btn-block' value='Continue'>`)
-        $("#popUpModal").modal('show')
-        {% endif %}
-        return
-    });
    function send_totp() {
        $.ajax({"url":"{% url 'totp_recheck' %}", method:"POST",dataType:"JSON",
            data:{"csrfmiddlewaretoken":"{{ csrf_token }}","otp":$("#otp").val()},
@@ -21,17 +11,6 @@
                        }
        })
    }
-    function tryToAuth() {
-        const otp_length = $("#otp").val().length
-        if (otp_length == 6) {
-            document.getElementById("formLogin").submit();
-        }
-        else if (otp_length == 11) {
-            const form = document.getElementById("formLogin");
-            form.setAttribute("ACTION", "{% url 'recovery_auth' %}")
-            form.submit();
-        }
-    }
 </script>
 <div class='container'>
 <div class="row">
@@ -60,7 +39,7 @@
      <fieldset>
      <div class="row">
      <div class="col-sm-12 col-md-12">
-        <p>Enter the 6-digits on your authenticator. Or input a recovery code</p>
+        <p>Enter the 6-digits on your authenticator</p>
      </div>
      </div>

@@ -71,15 +50,14 @@
 		<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="11" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
+		<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>

 	      </div>
 	    </div>

          <div class="form-group d-grid gap-2">

-	      <input type="button" onclick="{% if mode == "recheck" %} send_totp() {% else %} tryToAuth() {% endif %}" class="btn btn-lg btn-success btn-block" value="Sign in">
-	      </div>
+            <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">	      </div>
      </div>
      </fieldset>
      </FORM>