90 lines
2.8 KiB
HTML
90 lines
2.8 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block media %}
|
||
|
|
<style>
|
||
|
|
.inline-header {
|
||
|
|
font-size: 1.1em;
|
||
|
|
padding: 4px 8px;
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.block-header {
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.block-header:first-of-type {
|
||
|
|
padding-top: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#center-float {
|
||
|
|
position: relative;
|
||
|
|
margin: 0 auto auto -28.5em;
|
||
|
|
left: 50%;
|
||
|
|
width: 700px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#totp-enable-form {
|
||
|
|
border: none;
|
||
|
|
background: none;
|
||
|
|
max-width: 700px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totp-qr-code img, .totp-qr-code canvas {
|
||
|
|
width: 400px;
|
||
|
|
max-width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: block;
|
||
|
|
-ms-interpolation-mode: nearest-neighbor;
|
||
|
|
image-rendering: -webkit-optimize-contrast;
|
||
|
|
image-rendering: -webkit-crisp-edges;
|
||
|
|
image-rendering: -o-crisp-edges;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
image-rendering: -moz-crisp-edges;
|
||
|
|
image-rendering: crisp-edges;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block js_media %}
|
||
|
|
<script>
|
||
|
|
$(function () {
|
||
|
|
if (window.navigator.userAgent.indexOf('Edge') >= 0) {
|
||
|
|
var $qr = $('.totp-qr-code');
|
||
|
|
var $canvas = $('<canvas width="400" height="400">').appendTo($qr);
|
||
|
|
var ctx = $canvas[0].getContext('2d');
|
||
|
|
$qr.find('img').on('load', function () {
|
||
|
|
ctx.msImageSmoothingEnabled = false;
|
||
|
|
ctx.imageSmoothingEnabled = false;
|
||
|
|
ctx.drawImage(this, 0, 0, 400, 400);
|
||
|
|
$(this).hide();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<div id="center-float">
|
||
|
|
<form id="totp-enable-form" action="" method="post" class="form-area">
|
||
|
|
{% csrf_token %}
|
||
|
|
|
||
|
|
<div class="block-header">{{ _('Scan this code with your authenticator app:') }}</div>
|
||
|
|
<div class="totp-qr-code"><img src="{{ qr_code }}" alt="{{ _('QR code') }}"></div>
|
||
|
|
<div class="inline-header">{{ _('Or enter this code manually:') }}
|
||
|
|
<code class="totp-code">{{ totp_key }}</code>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
{% if form.totp_token.errors %}
|
||
|
|
<div class="form-errors">
|
||
|
|
{{ form.totp_token.errors }}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div>
|
||
|
|
<label class="inline-header grayed">{{ _('Enter the 6-digit code generated by your app:') }}</label>
|
||
|
|
<span class="fullwidth">{{ form.totp_token }}</span>
|
||
|
|
</div>
|
||
|
|
<button style="margin-top: 0.5em" class="button" type="submit">{{ _('Enable Two Factor Authentication') }}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|