Token delete formdata fix method

mfa/static/mfa/css/mfa.css

@@ -0,0 +1,29 @@
+.alert-pr{
+    align-items: center;
+}
+.alert-pr>p.success,#res>p.success,.row>success{
+    color:green;
+}
+
+.panel-body>.paragraph{
+    padding-left: 15px;
+}
+.panel-body{
+    align-items: center;
+}
+#popUpModal{
+    top: 40px;
+}
+#popUpModal>.modal-dialog{
+    height: 80%;
+    width: 80%;
+}
+#two-factor-steps {
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	padding: 15px;
+}
+#two-factor-steps>.row{
+        margin: 0px;
+        align-items: center;
+}

mfa/static/mfa/js/FIDO2/add.js

@@ -0,0 +1,49 @@
+function begin_reg(){
+    var formData = new FormData($('#fido2_form')) 
+    fetch(formData.get('begin'),{}).then(function(response) {
+      if(response.ok)
+      {
+          return response.arrayBuffer();
+      }
+      throw new Error('Error getting registration data!');
+    }).then(CBOR.decode).then(function(options) {
+        options.publicKey.attestation="direct"
+        console.log(options)
+
+      return navigator.credentials.create(options);
+    }).then(function(attestation) {
+      return fetch(formData.get('complete'), {
+        method: 'POST',
+        headers: {'Content-Type': 'application/cbor'},
+        body: CBOR.encode({
+          "attestationObject": new Uint8Array(attestation.response.attestationObject),
+          "clientDataJSON": new Uint8Array(attestation.response.clientDataJSON),
+        })
+      });
+    }).then(function(response) {
+
+        var stat = response.ok ? 'successful' : 'unsuccessful';
+        return response.json()
+    }).then(function (res)
+        {
+      if (res["status"] =='OK')
+            $("#res").html("<div class='alert alert-success'>Registered Successfully, <a href='"+formData.get('redirect')+"'> "+formData.get('success')+"</a></div>")
+        else
+            $("#res").html("<div class='alert alert-danger'>Registeration Failed as " + res["message"] + ", <a href='javascript:void(0)' onclick='begin_reg()'> try again or <a href='"+formData.get('home')+"'> Go to Security Home</a></div>")
+
+
+    }, function(reason) {
+       $("#res").html("<div class='alert alert-danger'>Registeration Failed as " +reason +", <a href='javascript:void(0)' onclick='begin_reg()'> try again </a> or <a href='"+formData.get('home')+"'> Go to Security Home</a></div>")
+    })
+    }
+    $(document).ready(function (){
+        ua=new UAParser().getResult()
+        if (ua.browser.name == "Safari")
+        {
+                $("#res").html("<button class='btn btn-success' onclick='begin_reg()'>Start...</button>")
+        }
+        else
+        {
+            setTimeout(begin_reg, 500)
+        }
+    })

mfa/static/mfa/js/FIDO2/recheck.js

@@ -0,0 +1,65 @@
+function authen()
+{
+const begin_url = $('#begin').value;
+const complete_url = $('u2f_login').attr('action');
+const mode = $('u2f_login').attr('name') === 'complete'?'auth':'recheck';
+fetch(begin_url, {
+method: 'GET',
+}).then(function(response) {
+if(response.ok) return response.arrayBuffer();
+throw new Error('No credential available to authenticate!');
+}).then(CBOR.decode).then(function(options) {
+console.log(options)
+return navigator.credentials.get(options);
+}).then(function(assertion) {
+res=CBOR.encode({
+  "credentialId": new Uint8Array(assertion.rawId),
+  "authenticatorData": new Uint8Array(assertion.response.authenticatorData),
+  "clientDataJSON": new Uint8Array(assertion.response.clientDataJSON),
+  "signature": new Uint8Array(assertion.response.signature)
+});
+
+return fetch(complete_url, {
+
+method: 'POST',
+headers: {'Content-Type': 'application/cbor'},
+body:res,
+
+}).then(function (response) {if (response.ok) return res = response.json()}).then(function (res) {
+  if (res.status=="OK")
+  {
+    $("#msgdiv").addClass("alert alert-success").removeClass("alert-danger")
+    $("#msgdiv").html("Verified....please wait")
+    if(mode == "auth"){
+      window.location.href=res.redirect;
+    }
+    else if(mode === "recheck"){
+      mfa_success_function();
+    }
+
+  }
+  else {
+      $("#msgdiv").addClass("alert alert-danger").removeClass("alert-success")
+        $("#msgdiv").html("Verification Failed as " + res.message + ", <a href='javascript:void(0)' onclick='authen())'> try again</a> or <a href='javascript:void(0)' onclick='history.back()'> Go Back</a>")
+
+        if(mode === "recheck"){
+        mfa_failed_function();
+        }
+  }
+})
+
+         })
+
+}
+$(document).ready(function () {
+if (location.protocol != 'https:') {
+    $("#main_paragraph").addClass("alert alert-danger")
+    $("#main_paragraph").html("FIDO2 must work under secure context")
+} else {
+    ua=new UAParser().getResult()
+    if (ua.browser.name == "Safari")
+        $("#res").html("<button class='btn btn-success' onclick='authen()'>Authenticate...</button>")
+    else
+        authen()
+}
+});

mfa/static/mfa/js/U2F/add.js

@@ -0,0 +1,18 @@
+$(document).ready(function addToken() {
+    const form = $('#u2f_form');
+    var formData = new FormData(form);
+    data=JSON.parse(formData.get('token'));
+    u2f.register(data.appId,data.registerRequests,data.registeredKeys,function (response) {
+        $.ajax({
+            "url":form.attr('action'),method:"POST",
+            data:{"csrfmiddlewaretoken":formData.get('csrf_token'),"response":JSON.stringify(response)},
+            success:function (data) {
+                if (data == "OK")
+                {
+                    alert(formData.get('success'))
+                    window.location.href=formData.get('redirect')
+                }
+            }
+        })
+    },5000)
+})

mfa/static/mfa/js/U2F/recheck.js

@@ -0,0 +1,56 @@
+$(document).ready(function () {
+    const form = $('#u2f_form');
+    var formData = new FormData(form);
+    if (location.protocol != 'https:')
+    {
+        $("#main_paragraph").addClass("alert alert-danger")
+        $("#main_paragraph").html(formData.get('protocol_message'))
+    }
+    else {
+
+
+        data = JSON.parse(formData.get('token'))
+        console.log(data)
+        u2f.sign(data.appId, data.challenge, data.registeredKeys, function (response) {
+            console.log(response)
+            if (response.hasOwnProperty("errorCode") && response.errorCode != 0  )
+            {
+             if (response.errorCode == 4)
+             {
+                 alert("Invalid Security Key, this security isn't linked to your account")
+             }
+             else if (response.errorCode == 5)
+             {
+                 alert("Verification Timeout, please refresh the page to try again")
+             }
+             else
+             {
+                 alert("Unspecified error, please try again later or try another browser.")
+             }
+            }
+            else if(formData.get('mode') === 'auth')
+           {
+                $("#response").val(JSON.stringify(response))
+                $("#u2f_login").submit();
+            }
+            else if(formData.get('mode') === 'recheck') {
+                $.ajax({
+                    "url":"{% url 'u2f_recheck' %}",
+                    method: "POST",
+                    data: {"csrfmiddlewaretoken":formData.get('csrfmiddlewaretoken'),"response":JSON.stringify(response)},
+                    success:function (data) {
+                        if (data["recheck"]) {
+                            mfa_success_function();
+                        }
+                        else {
+                            mfa_failed_function();
+                        }
+                    }
+
+                })
+
+            }
+
+        }, 5000)
+    }
+    })

mfa/static/mfa/js/delete-token.js

@@ -0,0 +1,32 @@
+function confirmDel(id,confirm_url) {
+    $.ajax({
+        url:confirm_url,
+        data:{"id":id},
+        success:function (data) {
+            alert(data)
+            window.location.reload();
+        }
+    })
+}
+function deleteKey(id,name,confirm_url)
+{
+    $("#modal-title").html("Confirm Delete")
+    $("#modal-body").html("Are you sure you want to delete '"+name+"'? you may lose access to your system if this your only 2FA.");
+    $("#actionBtn").remove()
+    $("#modal-footer").prepend("<button id='actionBtn' class='btn btn-danger' onclick='confirmDel("+id+","+confirm_url+")'>Confirm Deletion</button>")
+    $("#popUpModal").modal()
+}
+
+function toggleKey(id,toggle_url) {
+    $.ajax({
+        url:toggle_url,
+        success:function (data) {
+            if (data == "Error")
+                $("#toggle_"+id).toggle()
+
+        },
+        error:function (data) {
+            $("#toggle_"+id).toggle()
+        }
+    })
+}

mfa/static/mfa/js/mfa-check.js

@@ -0,0 +1,27 @@
+mfa_success_function=null;
+mfa_failed_function=null;
+
+function recheck_mfa(success_func,fail_func,must_mfa) {
+    if (!must_mfa) success_func()
+    window.mfa_success_function=success_func;
+    window.mfa_failed_function=fail_func;
+    $.ajax({
+        "url":"{% url 'mfa_recheck' %}",
+        success:function (data) {
+            if (data.hasOwnProperty("res")) {
+                if (data["res"])
+                    success_func();
+                else fail_func();
+            }
+            else
+            {
+                $("#modal-title").html("Recheck Indentity")
+                $("#modal-body").html(data["html"])
+                $("#popUpModal").modal()
+            }
+
+
+
+        }
+    })
+}

mfa/templates/FIDO2/Add.html

@@ -1,58 +1,10 @@
 {% extends "base.html" %}
 {% load static %}
+{% load i18n %}
 {% block head %}
     <script type="application/javascript" src="{% static 'mfa/js/cbor.js'%}"></script>
     <script type="application/javascript" src="{% static 'mfa/js/ua-parser.min.js'%}"></script>
-    <script type="application/javascript">
-    function begin_reg(){
-    fetch('{% url 'fido2_begin_reg' %}',{}).then(function(response) {
-      if(response.ok)
-      {
-          return response.arrayBuffer();
-      }
-      throw new Error('Error getting registration data!');
-    }).then(CBOR.decode).then(function(options) {
-        options.publicKey.attestation="direct"
-        console.log(options)
-
-      return navigator.credentials.create(options);
-    }).then(function(attestation) {
-      return fetch('{% url 'fido2_complete_reg' %}', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/cbor'},
-        body: CBOR.encode({
-          "attestationObject": new Uint8Array(attestation.response.attestationObject),
-          "clientDataJSON": new Uint8Array(attestation.response.clientDataJSON),
-        })
-      });
-    }).then(function(response) {
-
-        var stat = response.ok ? 'successful' : 'unsuccessful';
-        return response.json()
-    }).then(function (res)
-        {
-      if (res["status"] =='OK')
-            $("#res").html("<div class='alert alert-success'>Registered Successfully, <a href='{{redirect_html}}'> {{reg_success_msg}}</a></div>")
-        else
-            $("#res").html("<div class='alert alert-danger'>Registeration Failed as " + res["message"] + ", <a href='javascript:void(0)' onclick='begin_reg()'> try again or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
-
-
-    }, function(reason) {
-       $("#res").html("<div class='alert alert-danger'>Registeration Failed as " +reason +", <a href='javascript:void(0)' onclick='begin_reg()'> try again </a> or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
-    })
-    }
-    $(document).ready(function (){
-        ua=new UAParser().getResult()
-        if (ua.browser.name == "Safari")
-        {
-                $("#res").html("<button class='btn btn-success' onclick='begin_reg()'>Start...</button>")
-        }
-        else
-        {
-            setTimeout(begin_reg, 500)
-        }
-    })
-    </script>
+    <script type="application/javascript" src="{% static 'mfa/js/FIDO2/add.js' %}"></script>
 
 {% endblock %}
 {% block content %}
@@ -61,13 +13,19 @@
      <div class="container">
      <div class="panel panel-default">
       <div class="panel-heading">
-	      <strong> FIDO2 Security Key</strong>
+	      <strong> {% trans 'FIDO2 Security Key' %}</strong>
       </div>
       <div class="panel-body">
-
-
-    <div class="row alert alert-pr" id="res" align="center">
-    <p style="color: green">Your browser should ask you to confirm you identity.</p>
+        <form action="#" id="fido2_form" method="post" hidden>
+          <input type=hidden value="{{ redirect_html }}" id="id_redirect" name="redirect">
+          <input type=hidden value="{% trans 'Your device is added successfully.' %}" id="id_success" name="success">
+          <input type=hidden value="{% url 'fido2_begin_reg' %}" id="id_begin" name="rbegin">
+          <input type=hidden value="{% url 'fido2_complete_reg' %}" id="id_complete" name="complete">
+
+      </form>
+
+    <div class="row alert alert-pr" id="res">
+    <p class="success">{% trans 'Your browser should ask you to confirm you identity.' %}</p>
 
     </div>
         </div>