jumpserver/apps/users/templates/users/user_otp_enable_bind.html

60 lines
1.9 KiB
Python

{% extends 'users/_base_otp.html' %}
{% load static %}
{% load i18n %}
{% block small_title %}
{% trans 'Bind one-time password authenticator' %}
{% endblock %}
{% block content %}
<div class="verify">
<p style="margin:20px auto;">
<strong style="color: #000000">
{% trans 'Use the MFA Authenticator application to scan the following qr code for a 6-bit verification code' %}
</strong>
</p>
<div id="qr_code"></div>
<div style="display: block; margin: 0">Secret: {{ otp_secret_key }}</div>
<form id="bind-form" class="" role="form" method="post" action="">
{% csrf_token %}
<div class="form-input">
<input type="text" class="" name="otp_code" placeholder="{% trans 'Six figures' %}" required="">
</div>
<a type="submit" class="next button" onclick="submitForm()">{% trans 'Next' %}</a>
{% if 'otp_code' in form.errors %}
<p style="color: #ed5565">{{ form.otp_code.errors.as_text }}</p>
{% endif %}
</form>
</div>
<script>
$('.change-color li:eq(1) i').css('color', '{{ INTERFACE.primary_color }}');
$('.change-color li:eq(2) i').css('color', '{{ INTERFACE.primary_color }}');
function submitForm() {
$('#bind-form').submit()
}
$(document).ready(function() {
// 生成用户绑定otp的二维码
var qrcode = new QRCode(document.getElementById('qr_code'), {
text: "{{ otp_uri|safe}}",
width: 190 ,
height: 190,
colorDark: '#000000',
colorLight: '#ffffff',
correctlevel: QRCode.CorrectLevel.H
});
document.getElementById('qr_code').removeAttribute("title");
})
</script>
{% endblock %}