{% extends "withoutnav_template.html" %}
{% from "components/page-header.html" import page_header %}
{% from "components/button/macro.njk" import govukButton %}

{% set page_title = 'Security keys' %}

{% block per_page_title %}
  {{ page_title }}
{% endblock %}

{% block maincolumn_content %}
  {{ page_header(
    page_title,
    back_link=url_for('.user_profile')
  ) }}

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-five-sixths">
    <p class="govuk-body">Security key</p>
    <p class="govuk-body">When you are ready to authenticate, press the button below.</p>

      {{ govukButton({
        "element": "button",
        "text": "Webauthn authenticate click me click me",
        "classes": "govuk-button--secondary",
        "attributes": {
          "data-module": "authenticate-security-key",
          "data-csrf-token": csrf_token(),
        }
      }) }}
    </div>
  </div>
{% endblock %}

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

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

{% block per_page_title %}
  {{ page_title }}
{% endblock %}

{% block maincolumn_content %}

  {{ govukBackLink({ "href": url_for('.user_profile') }) }}
  <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",
        "attributes": {
          "data-module": "authenticate-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="webauthn-illustration">
    </div>
  </div>
{% endblock %}

Add image and content to security key 2FA page
Add image and content to security key 2FA page

This reinforces the graphic from when you registered the key. ‘Check’ is
language we use on the test message two factor page.
