Recovery Codes Work in Progress
This commit is contained in:
Mohamed ElKalioby
@@ -18,7 +18,43 @@
|
||||
.crossed{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@@ -41,20 +77,30 @@
|
||||
}})
|
||||
});
|
||||
function confirmRegenerateTokens() {
|
||||
htmlModal = "<h6>Caution! you can only note these token now, else you will need to generate new ones.</h6><button onclick='regenerateTokens()' class='btn btn-success'>Regenerate</button>"
|
||||
$("#modal-title").html("Are you sure you want to regenerate your recovery tokens?")
|
||||
htmlModal = "<h6>Caution! you can only view these token now, else you will need to generate new ones.</h6><div align='center'><button onclick='regenerateTokens()' class='btn btn-success'>Regenerate</button></div>"
|
||||
$("#modal-title").html("Regenerate your recovery Codes?")
|
||||
$("#modal-body").html(htmlModal)
|
||||
$("#popUpModal").modal('show')
|
||||
}
|
||||
function copy() {
|
||||
navigator.clipboard.writeText($("#recovery_codes").text());
|
||||
}
|
||||
function regenerateTokens() {
|
||||
$.ajax({
|
||||
"url":"{% url 'regen_recovery_tokens' %}", dataType:"JSON",
|
||||
success:function (data) {
|
||||
let htmlkey="";
|
||||
let htmlkey=`<p>Here are the recovery codes, you have to save them now as you won't able to view them again.</p>
|
||||
<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"
|
||||
style='cursor:pointer'></span>
|
||||
<span class='fa fa-clipboard' 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 +="<pre>" +data.keys[i] + "</pre>"
|
||||
htmlkey +="- " +data.keys[i] + "\n"
|
||||
}
|
||||
document.getElementById('tokens').innerHTML = htmlkey
|
||||
document.getElementById('tokens').innerHTML = htmlkey+"</pre></div></div></div>"
|
||||
$("#popUpModal").modal('hide')
|
||||
}
|
||||
})
|
||||
@@ -69,21 +115,23 @@
|
||||
|
||||
<div class="row">
|
||||
|
||||
<h4>Token List</h4>
|
||||
<h4>Recovery Codes List</h4>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tokenrow" id="tokens">
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6" style="padding-left: 0px">
|
||||
<div class="col-md-4 col-md-offset-4" style="padding-left: 0px" align="center">
|
||||
|
||||
<button onclick="confirmRegenerateTokens()" class="btn btn-success">Regenarate tokens</button>
|
||||
<button onclick="confirmRegenerateTokens()" class="btn btn-success">Regenerate</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6" align="right" style="padding-right: 30px">
|
||||
|
||||
<a href="{{redirect_html}}" class="btn btn-default btn-secondary" role="button"> {{reg_success_msg}}</a>
|
||||
|
||||
94
mfa/templates/RECOVERY/Auth.html
Normal file
94
mfa/templates/RECOVERY/Auth.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<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();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
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">
|
||||
|
||||
<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" %}
|
||||
99
mfa/templates/RECOVERY/recheck.html
Normal file
99
mfa/templates/RECOVERY/recheck.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<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();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
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">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="panel-body card-body">
|
||||
|
||||
<FORM METHOD="POST" ACTION="{% url 'totp_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 %}
|
||||
{% if quota %}
|
||||
<div class="alert alert-warning">
|
||||
{{ quota }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<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>
|
||||
</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="6" MaxLength="11" 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>
|
||||
</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" %}
|
||||
Reference in New Issue
Block a user