135 lines
4.6 KiB
HTML
135 lines
4.6 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% block head %}
|
|
<script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
|
|
<style>
|
|
#two-factor-steps {
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
padding: 15px;
|
|
}
|
|
.row{
|
|
margin: 0px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function (){
|
|
var qr = new QRious({
|
|
element: document.getElementById('qr'),
|
|
value: "{{ url }}?u={{ request.user.username }}&k={{ key }}"
|
|
});
|
|
})
|
|
function sendEmail() {
|
|
$("#modal-title").html("Send Link")
|
|
$("#modal-body").html("Sending Email, Please wait....");
|
|
$("#popUpModal").modal('show');
|
|
$.ajax({
|
|
"url":"{% url 'td_sendemail' %}",
|
|
success:function (data) {
|
|
alert(data);
|
|
$("#popUpModal").modal('toggle')
|
|
|
|
}
|
|
})
|
|
}
|
|
function failedMFA() {
|
|
$("#modal-body").html("<div class='alert alert-danger'>Failed to validate you, please <a href='javascript:void(0)' onclick='getUserAgent()'>try again</a></div>")
|
|
}
|
|
function checkMFA() {
|
|
recheck_mfa(trustDevice,failedMFA,true)
|
|
}
|
|
function trustDevice() {
|
|
|
|
$.ajax(
|
|
{
|
|
|
|
"url":"{% url 'td_trust_device' %}",
|
|
success: function (data) {
|
|
if (data == "OK")
|
|
{
|
|
alert("Your are done, your device should show final confirmation")
|
|
window.location.href="{% url 'mfa_home' %}"
|
|
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
function getUserAgent() {
|
|
$.ajax({
|
|
"url":"{% url 'td_get_useragent' %}",success: function(data)
|
|
{
|
|
if (data == "")
|
|
setTimeout('getUserAgent()',5000)
|
|
else
|
|
{
|
|
$("#modal-title").html("Confirm Trusted Device")
|
|
$("#actionBtn").remove();
|
|
$("#modal-footer").prepend("<button id='actionBtn' class='btn btn-success' onclick='checkMFA()'>Trust Device</button>")
|
|
$("#modal-body").html(data)
|
|
$("#popUpModal").modal('show');
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
$(document).ready(getUserAgent())
|
|
</script>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="col-lg-8 col-md-8 col-12 mx-auto">
|
|
<div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/keys.jpg'%}');">
|
|
<span class="mask bg-gradient-primary opacity-6"></span>
|
|
</div>
|
|
<div class="card mx-3 mx-md-4 mt-n6 h-100 z-index-0 fadeIn3 fadeInBottom " >
|
|
<div class="card-header pb-0 p-3">
|
|
<h6 class="mb-0">
|
|
Add Trusted Device
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if not_allowed %}
|
|
<div class="alert alert-danger">You can't add any more devices, you need to remove previously trusted devices first.</div>
|
|
{% else %}
|
|
<p style="color: green">Allow access from mobile phone and tables.</p><br/>
|
|
<br/>
|
|
<div class="row">
|
|
<h5>Steps:</h5>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Using Camera</h5>
|
|
<ol>
|
|
<li>Using your mobile/table, open Chrome/Firefox.</li>
|
|
<li>Scan the following barcode <br/>
|
|
<img id="qr"/> <br/>
|
|
</li>
|
|
<li>Confirm the consent and submit form.</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5>Manual</h5>
|
|
<ol>
|
|
<li>Using your mobile/table, open Chrome/Firefox.</li>
|
|
<li>Go to <b>{{ url }}</b> </li>
|
|
<li>Enter your username & following 6 digits<br/>
|
|
<span style="font-size: 16px;font-weight: bold; margin-left: 50px">{{ key|slice:":3" }} - {{ key|slice:"3:" }}</span>
|
|
</li>
|
|
<li>Confirm the consent and submit form.</li>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
This window will ask to confirm the device.
|
|
</div>
|
|
|
|
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include "modal.html" %}
|
|
{% include 'mfa_check.html' %}
|
|
{% endblock %} |