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/assets/javascripts/registerSecurityKey.js

@@ -0,0 +1,14 @@
+(function(window) {
+  "use strict";
+
+  window.GOVUK.Modules.RegisterSecurityKey = function() {
+    this.start = function(component) {
+
+      $(component)
+        .on('click', function(event) {
+          event.preventDefault();
+          alert('not implemented');
+        });
+    };
+  };
+})(window);

app/main/views/user_profile.py

@@ -23,7 +23,11 @@ from app.main.forms import (
     TwoFactorForm,
 )
 from app.models.user import User
-from app.utils import user_is_gov_user, user_is_logged_in
+from app.utils import (
+    user_is_gov_user,
+    user_is_logged_in,
+    user_is_platform_admin,
+)
 
 NEW_EMAIL = 'new-email'
 NEW_MOBILE = 'new-mob'
@@ -225,3 +229,11 @@ def user_profile_disable_platform_admin_view():
         'views/user-profile/disable-platform-admin-view.html',
         form=form
     )
+
+
+@main.route("/user-profile/security-keys", methods=['GET'])
+@user_is_platform_admin
+def user_profile_security_keys():
+    return render_template(
+        'views/user-profile/security-keys.html',
+    )

app/models/user.py

@@ -10,6 +10,7 @@ from app.models.roles_and_permissions import (
     all_permissions,
     translate_permissions_from_db_to_admin_roles,
 )
+from app.models.webauthn_credential import WebAuthnCredential
 from app.notify_client import InviteTokenError
 from app.notify_client.invite_api_client import invite_api_client
 from app.notify_client.org_invite_api_client import org_invite_api_client
@@ -343,6 +344,11 @@ class User(JSONModel, UserMixin):
             '@nhs.uk', '.nhs.uk', '@nhs.net', '.nhs.net',
         ))
 
+    @property
+    def webauthn_credentials(self):
+        return [WebAuthnCredential(json) for json in
+                user_api_client.get_webauthn_credentials_for_user(self.id)]
+
     def serialize(self):
         dct = {
             "id": self.id,

app/models/webauthn_credential.py

@@ -0,0 +1,11 @@
+from app.models import JSONModel
+
+
+class WebAuthnCredential(JSONModel):
+    ALLOWED_PROPERTIES = {
+        'id',
+        'name',
+        'credential_data',
+        'created_at',
+        'updated_at'
+    }

app/notify_client/user_api_client.py

@@ -191,5 +191,13 @@ class UserApiClient(NotifyAdminAPIClient):
         endpoint = '/user/{}/organisations-and-services'.format(user_id)
         return self.get(endpoint)
 
+    def get_webauthn_credentials_for_user(self, user_id):
+        from datetime import datetime
+
+        return [{
+            'name': 'Ben test',
+            'created_at': datetime.now().strftime("%Y-%m-%dT%H:%M:%S.%fZ")
+        }]
+
 
 user_api_client = UserApiClient()

app/templates/views/user-profile.html

@@ -45,6 +45,14 @@
         {{ edit_field('Change', url_for('.user_profile_password')) }}
       {% endcall %}
 
+      {% if current_user.platform_admin %}
+        {% call row(id='security-keys') %}
+          {{ text_field('Security keys') }}
+          {{ text_field(current_user.webauthn_credentials|length) }}
+          {{ edit_field('Change', url_for('.user_profile_security_keys')) }}
+        {% endcall %}
+      {% endif %}
+
       {% if current_user.platform_admin or session.get('disable_platform_admin_view') %}
         {% call row() %}
           {{ text_field('Use platform admin view') }}

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