Adding Touch ID to Django 1.8

mfa/templates/FIDO2/Add.html

@@ -2,6 +2,7 @@
 {% load static %}
 {% 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) {
@@ -40,7 +41,17 @@
        $("#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(setTimeout(begin_reg,500))
+    $(document).ready(function (){
+        ua=new UAParser()
+        if (ua.getBrowser().name == "Safari")
+        {
+                $("#res").html("<button class='btn btn-primary' onclick='begin_reg()'>Start...</button>")
+        }
+        else
+        {
+            setTimeout(begin_reg, 500)
+        }
+    })
     </script>
 
 {% endblock %}
@@ -56,7 +67,7 @@
 
 
     <div class="row alert alert-pr" id="res">
-    <p style="color: green">Your broswer should ask you to confirm you indentity.</p>
+    <p style="color: green">Your browser should ask you to confirm you identity.</p>
 
     </div>
         </div>

mfa/templates/FIDO2/recheck.html

@@ -1,5 +1,6 @@
 {%  load static %}
 <script type="application/javascript" src="{% static 'mfa/js/cbor.js' %}"></script>
+<script type="application/javascript" src="{% static 'mfa/js/us-parser.min.js' %}"></script>
 <div class="row">
 
 <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">
@@ -17,7 +18,9 @@
                     <br/>
 
             {% endif %}
-                <p style="color: green">please press the button on your security key to prove it is you.</p>
+                <div id="res">
+                    <p style="color: green">please press the button on your security key to prove it is you.</p>
+                </div>
                 <div id="msgdiv"></div>
                 {% if mode == "auth" %}
                     <form id="u2f_login" action="{% url 'fido2_complete_auth' %}" method="post" enctype="multipart/form-data">
@@ -101,7 +104,11 @@
             $("#main_paragraph").addClass("alert alert-danger")
             $("#main_paragraph").html("FIDO2 must work under secure context")
         } else {
-            authen()
+            ua=UAParser()
+            if (ua.getBrowser().name == "Safari")
+                $("#res").html("<button class='btn btn-success' onclick='authen()'>Authenticate...</button>")
+            else
+                authen()
         }
     });