mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-16 20:49:00 -04:00
0b27d7e0a9
the banner is a nicer user experience, and consistent with how we display errors elsewhere in notify. For now pass through the error message from JS, but we'll probably want to change that since the erorr messages themselves are often a bit cryptic and unhelpful
102 lines
3.3 KiB
HTML
102 lines
3.3 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 backLink %}
|
||
{{ govukBackLink({ "href": url_for('.user_profile') }) }}
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
|
||
{% set webauthn_button %}
|
||
{{ 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(),
|
||
}
|
||
}) }}
|
||
|
||
{{ 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."
|
||
}) }}
|
||
{% endset %}
|
||
|
||
<div class="govuk-grid-row">
|
||
|
||
{{ govukErrorMessage({
|
||
"classes": "banner-dangerous govuk-!-display-none",
|
||
"text": "There was a javascript error.",
|
||
"attributes": {
|
||
"aria-live": "polite",
|
||
"tabindex": '-1'
|
||
}
|
||
}) }}
|
||
|
||
{% if credentials %}
|
||
<div class="govuk-grid-column-five-sixths">
|
||
{{ page_header(page_title) }}
|
||
<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>
|
||
{{ webauthn_button }}
|
||
</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>
|
||
{{ webauthn_button }}
|
||
</div>
|
||
<div class="govuk-grid-column-one-quarter">
|
||
<img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration">
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|