Initial Import

mfa/templates/TOTP/Add.html

@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+{% block head %}
+    <style>
+    #two-factor-steps {
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	padding: 15px;
+}
+    .row{
+        margin: 0px;
+    }
+    </style>
+    <script src="{{ STATIC_URL }}js/qrious.min.js" type="text/javascript"></script>
+    <script type="text/javascript">
+    var key="";
+    $(document).ready(function addToken() {
+        $.ajax({
+            "url":"{% url 'get_new_otop' %}",dataType:"JSON",
+            success:function (data) {
+                window.key=data.secret_key;
+                var qr = new QRious({
+          element: document.getElementById('qr'),
+          value: data.qr
+        });
+                $("#second_step").show()
+            }
+        })
+    });
+    function showKey() {
+        $("#modal-title").html("Your Secret Key")
+        $("#modal-body").html("<pre>"+window.key+"</pre")
+        $("#popUpModal").modal('show')
+    }
+    function verify() {
+        answer=$("#answer").val()
+        $.ajax({
+            "url":"{% url 'verify_otop' %}?key="+key+ "&answer="+answer,
+            success:function (data) {
+                if (data == "Error")
+                    alert("You entered wrong numbers, please try again")
+                else
+                {
+                    alert("Your authenticator is added successfully.")
+                    window.location.href="{% url 'mfa_home' %}"
+                }
+            }
+        })
+    }
+    function showTOTP() {
+        $("#modal-title").html("One Time Password Apps")
+        html="<div class='row'><ul>"+
+            "<li>Android: <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2' target='_blank'>Google Authenticator</a> | <a href='https://play.google.com/store/apps/details?id=com.authy.authy' target='_blank'>Authy</a></li>"
+        html+="<li>iPhone/iPad: <a href='https://itunes.apple.com/us/app/authy/id494168017' target='_blank'>Authy</a></li> "
+        html+="<li>Chrome: <a href='https://chrome.google.com/webstore/detail/authenticator/bhghoamapcdpbohphigoooaddinpkbai?hl=en'>Google Authenticator</a> | <a href='https://chrome.google.com/webstore/detail/authy/gaedmjdfmmahhbjefcbgaolhhanlaolb?hl=en' target='_blank'>Authy</a></li>"
+        html+="</ul></div>"
+        $("#modal-body").html(html)
+        $('#popUpModal').modal('show')
+    }
+    </script>
+{% endblock %}
+{% block content %}
+    <div class="container">
+        <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
+            <div class="row" align="center">
+                <h4>Adding Authenticator</h4>
+            </div>
+    <div class="row">
+
+        <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a> phone/PC. If you can’t use a barcode,
+            <a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
+        </div>
+
+        <div class="row">
+
+        <div align="center" style="display: none" id="second_step">
+
+        <img id="qr"/>
+
+            </div>
+        <div class="row">
+
+                <p><b>Enter the six-digit code from the application</b></p>
+                <p style="color: #333333;font-size: 10px">After scanning the barcode image, the app will display a six-digit code that you can enter below. </p>
+
+        </div>
+            <div class="row">
+
+
+            <input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
+
+        </div>
+        <div class="row">
+            <div class="col-md-6" style="padding-left: 0px">
+                <button class="btn btn-success" onclick="verify()">Enable</button>
+            </div>
+            <div class="col-md-6" align="right" style="padding-right: 30px">
+                <a href="{% url 'mfa_home' %}"><button class="btn btn-default">Cancel</button></a>
+            </div>
+        </div>
+        </div>
+
+    </div>
+        </div>
+    {% include "modal.html" %}
+{% endblock %}