{% extends "base.html" %}
|
|
{% load compress static hc_extras %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row">
|
|
<form
|
|
id="add-credential-form"
|
|
class="col-sm-6 col-sm-offset-3"
|
|
data-options="{{ options }}"
|
|
method="post"
|
|
encrypt="multipart/form-data">
|
|
<h1>Add Security Key</h1>
|
|
|
|
{% csrf_token %}
|
|
<input id="attestation_object" type="hidden" name="attestation_object">
|
|
<input id="client_data_json" type="hidden" name="client_data_json">
|
|
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="name"
|
|
name="name"
|
|
required>
|
|
<div class="help-block">
|
|
Give this credential a descriptive name. Example: "My primary Yubikey"
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group text-right">
|
|
<button
|
|
id="name-next"
|
|
class="btn btn-default" type="button">
|
|
Confirm Name and Continue
|
|
</button>
|
|
</div>
|
|
|
|
<div id="waiting" class="hide">
|
|
<h2>Waiting for security key</h2>
|
|
<p>
|
|
Follow your browser's steps to register your security key
|
|
with {% site_name %}.
|
|
</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 class="form-group text-right">
|
|
<input
|
|
id="add-credential-submit"
|
|
class="btn btn-primary"
|
|
type="submit"
|
|
name=""
|
|
value="Save Security Key">
|
|
</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/add_credential.js' %}"></script>
|
|
{% endcompress %}
|
|
{% endblock %}
|