{% extends "base.html" %}
|
|
{% load compress static hc_extras %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row">
|
|
<form
|
|
id="login-tfa-form"
|
|
class="col-sm-6 col-sm-offset-3"
|
|
data-options="{{ options }}"
|
|
method="post"
|
|
encrypt="multipart/form-data">
|
|
<h1>Two-factor Authentication</h1>
|
|
|
|
<div id="pick-method">
|
|
{% if totp_url %}
|
|
<p>Please select how you want to authenticate.</p>
|
|
{% else %}
|
|
<p>
|
|
Please authenticate using your security key.<br />
|
|
When you are ready, press the button below.
|
|
</p>
|
|
{% endif %}
|
|
|
|
<button
|
|
id="use-key-btn"
|
|
type="button"
|
|
class="btn btn-primary">Use security key</button>
|
|
{% if totp_url %}
|
|
<a href="{{ totp_url }}" class="btn btn-default">
|
|
Use authenticator app
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% csrf_token %}
|
|
<input id="credential_id" type="hidden" name="credential_id">
|
|
<input id="authenticator_data" type="hidden" name="authenticator_data">
|
|
<input id="client_data_json" type="hidden" name="client_data_json">
|
|
<input id="signature" type="hidden" name="signature">
|
|
|
|
<div id="waiting" class="hide">
|
|
<h2>Waiting for security key</h2>
|
|
<p>
|
|
Follow your browser's steps to authenticate with your security key.
|
|
</p>
|
|
|
|
<div class="spinner started">
|
|
<div class="d1"></div>
|
|
<div class="d2"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error" class="alert alert-danger hide">
|
|
<p>
|
|
<strong>Something went wrong.</strong>
|
|
</p>
|
|
<p id="error-text"></p>
|
|
|
|
<div class="text-right">
|
|
<button id="retry" type="button" class="btn btn-danger">
|
|
Try Again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="success" class="hide">
|
|
<div class="alert alert-success">
|
|
<strong>Success!</strong>
|
|
Credential acquired.
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{% compress js %}
|
|
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
|
|
<script src="{% static 'js/bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'js/cbor.js' %}"></script>
|
|
<script src="{% static 'js/login_tfa.js' %}"></script>
|
|
{% endcompress %}
|
|
{% endblock %}
|