notifications-admin/app/templates/views/two-factor-webauthn.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/webauthn-api-check.html" import webauthn_api_check %}
{% from "vendor/govuk-frontend/components/error-message/macro.njk" import govukErrorMessage %}

{% set page_title = 'Get your security key' %}

{% 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 %}

    {{ govukErrorMessage({
      "classes": "banner-dangerous govuk-!-display-none",
      "html": (
        'There’s a problem with your security key' +
        '<p class="govuk-body">Check you have the right key and try again. ' +
        'If this does not work, ' +
        '<a class="govuk-link govuk-link--no-visited-state" href=' + url_for('main.support') + ">contact us</a>." +
        '</p>'
      ),
      "attributes": {
        "aria-live": "polite",
        "tabindex": '-1'
      }
    }) }}

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-one-half">
      {{ page_header(page_title) }}

      <p class="govuk-body">
        You need to have your security key to sign in.
      </p>

      {{ govukButton({
        "element": "button",
        "text": "Check security key",
        "classes": "govuk-button--secondary webauthn__api-required",
        "attributes": {
          "data-module": "authenticate-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."
      }) }}
    </div>
    <div class="govuk-grid-column-one-quarter">
      <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration" width="149" height="150">
    </div>
  </div>
{% endblock %}