Add page for security keys with stubbed data

This adds a new platform admin settings row, leading a page which
shows any existing keys and allows a new one to be registered. Until
the APIs for this are implemented, the user API client just returns
some stubbed data for manual testing.

This also includes a basic JavaScript module to do the main work of
registering a new authenticator, to be implemented in the next commits.

Some more minor notes:

- Setting the headings in the mapping_table is necessary to get the
horizontal rule along the top (to match the design).

- Setting caption to False in the mapping_table is necessary to stop
an extra margin appearing at the top.

app/templates/views/user-profile/security-keys.html

@@ -0,0 +1,58 @@
+{% 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 mapping_table, row, field, row_heading %}
+
+{% set page_title = 'Security keys' %}
+{% set credentials = current_user.webauthn_credentials %}
+
+{% 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">
+      {% if credentials %}
+
+        {% call mapping_table(
+          caption=page_title,
+          field_headings=['Security key'],
+          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 %}
+            {% endcall %}
+          {% endfor %}
+        {% endcall %}
+
+      {% else %}
+
+        <p class="govuk-body">
+          Security keys are an alternative way of signing in to Notify.
+        </p>
+
+      {% endif %}
+
+      {{ govukButton({
+        "element": "button",
+        "text": "Register a key",
+        "classes": "govuk-button--secondary",
+        "attributes": {
+          "data-module": "register-security-key",
+        }
+      }) }}
+    </div>
+  </div>
+{% endblock %}