mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-16 20:49:00 -04:00
88e2cc93df
When referring to something that’s not part of the Notify system, like a spreadsheet or a paper letter or a security key we’ve found it’s helpful to give people a visual representation of it. This commit does the same for security keys.
104 lines
3.5 KiB
HTML
104 lines
3.5 KiB
HTML
{% extends "withoutnav_template.html" %}
|
||
{% from "components/page-header.html" import page_header %}
|
||
{% from "components/button/macro.njk" import govukButton %}
|
||
{% from "components/back-link/macro.njk" import govukBackLink %}
|
||
{% from "components/table.html" import edit_field, mapping_table, row, field, row_heading %}
|
||
{% from "components/webauthn-api-check.html" import webauthn_api_check %}
|
||
{% from "vendor/govuk-frontend/components/error-message/macro.njk" import govukErrorMessage %}
|
||
|
||
{% set page_title = 'Security keys' %}
|
||
{% set credentials = current_user.webauthn_credentials %}
|
||
|
||
{% block extra_javascripts_before_body %}
|
||
{{ webauthn_api_check() }}
|
||
{% endblock %}
|
||
|
||
{% block per_page_title %}
|
||
{{ page_title }}
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
|
||
|
||
{{ govukBackLink({ "href": url_for('.user_profile') }) }}
|
||
<div class="govuk-grid-row govuk-clearfix">
|
||
{% if credentials %}
|
||
<div class="govuk-grid-column-five-sixths">
|
||
{{ page_header(
|
||
page_title,
|
||
back_link=url_for('.user_profile')
|
||
) }}
|
||
<div class="body-copy-table">
|
||
{% call mapping_table(
|
||
caption=page_title,
|
||
field_headings=['Security key details', 'Action'],
|
||
field_headings_visible=False,
|
||
caption_visible=False,
|
||
) %}
|
||
{% for credential in credentials %}
|
||
{% call row() %}
|
||
{% call field() %}
|
||
<div class="govuk-body">{{ credential.name }}</div>
|
||
<div class="govuk-body hint">Registered {{ credential.created_at|format_delta }}</div>
|
||
{% endcall %}
|
||
{{ edit_field('Manage', url_for('.user_profile_manage_security_key', key_id=credential.id)) }}
|
||
{% endcall %}
|
||
{% endfor %}
|
||
{% endcall %}
|
||
</div>
|
||
|
||
{{ govukButton({
|
||
"element": "button",
|
||
"text": "Register a key",
|
||
"classes": "govuk-button--secondary webauthn__api-required",
|
||
"attributes": {
|
||
"data-module": "register-security-key",
|
||
"data-csrf-token": csrf_token(),
|
||
}
|
||
}) }}
|
||
|
||
</div>
|
||
{% else %}
|
||
<div class="govuk-grid-column-one-half">
|
||
{{ page_header(page_title) }}
|
||
<p class="govuk-body">
|
||
Security keys are an alternative way of signing in to Notify,
|
||
instead of getting a code in a text message
|
||
</p>
|
||
<p class="govuk-body">
|
||
You can buy any key that’s compatible with the WebAuthn
|
||
standard.
|
||
</p>
|
||
{{ govukButton({
|
||
"element": "button",
|
||
"text": "Register a key",
|
||
"classes": "govuk-button--secondary webauthn__api-required",
|
||
"attributes": {
|
||
"data-module": "register-security-key",
|
||
"data-csrf-token": csrf_token(),
|
||
}
|
||
}) }}
|
||
</div>
|
||
<div class="govuk-grid-column-one-quarter">
|
||
<img src="{{ asset_url('images/security-key.svg') }}" alt="" class="govuk-!-margin-top-9">
|
||
</div>
|
||
</div>
|
||
<div class="govuk-grid-row">
|
||
<div class="govuk-grid-column-five-sixths">
|
||
|
||
{% endif %}
|
||
|
||
{{ govukErrorMessage({
|
||
"classes": "webauthn__api-missing",
|
||
"text": "Your browser does not support security keys. Try signing in to Notify using a different browser."
|
||
}) }}
|
||
|
||
{{ govukErrorMessage({
|
||
"classes": "webauthn__no-js",
|
||
"text": "JavaScript is not available for this page. Security keys need JavaScript to work."
|
||
}) }}
|
||
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|