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.

tests/app/main/views/test_user_profile.py

@@ -11,9 +11,10 @@ from tests.conftest import create_api_user_active, url_for_endpoint_with_token
 def test_should_show_overview_page(
     client_request,
 ):
-    page = client_request.get(('main.user_profile'))
+    page = client_request.get('main.user_profile')
     assert page.select_one('h1').text.strip() == 'Your profile'
     assert 'Use platform admin view' not in page
+    assert 'Security keys' not in page
 
 
 def test_overview_page_shows_disable_for_platform_admin(
@@ -21,12 +22,28 @@ def test_overview_page_shows_disable_for_platform_admin(
     platform_admin_user
 ):
     client_request.login(platform_admin_user)
-    page = client_request.get(('main.user_profile'))
+    page = client_request.get('main.user_profile')
     assert page.select_one('h1').text.strip() == 'Your profile'
     disable_platform_admin_row = page.select('tr')[-1]
     assert ' '.join(disable_platform_admin_row.text.split()) == 'Use platform admin view Yes Change'
 
 
+@pytest.mark.parametrize('has_keys', [False, True])
+def test_overview_page_shows_security_keys_for_platform_admin(
+    mocker,
+    client_request,
+    platform_admin_user,
+    has_keys,
+    webauthn_credential,
+):
+    client_request.login(platform_admin_user)
+    credentials = [webauthn_credential] if has_keys else []
+    mocker.patch('app.user_api_client.get_webauthn_credentials_for_user', return_value=credentials)
+    page = client_request.get('main.user_profile')
+    security_keys_row = page.select_one('#security-keys')
+    assert ' '.join(security_keys_row.text.split()) == f'Security keys {len(credentials)} Change'
+
+
 def test_should_show_name_page(
     client_request
 ):
@@ -320,3 +337,33 @@ def test_can_reenable_platform_admin(client_request, platform_admin_user):
 
     with client_request.session_transaction() as session:
         assert session['disable_platform_admin_view'] is False
+
+
+def test_normal_user_doesnt_see_security_keys(client_request):
+    client_request.get(
+        '.user_profile_security_keys',
+        _expected_status=403,
+    )
+
+
+def test_should_show_security_keys_page(
+    mocker,
+    client_request,
+    platform_admin_user,
+    webauthn_credential,
+):
+    client_request.login(platform_admin_user)
+
+    mocker.patch(
+        'app.user_api_client.get_webauthn_credentials_for_user',
+        return_value=[webauthn_credential],
+    )
+
+    page = client_request.get('.user_profile_security_keys')
+    assert page.select_one('h1').text.strip() == 'Security keys'
+
+    credential_row = page.select('tr')[-1]
+    assert 'Test credential' in credential_row.text
+
+    register_button = page.select_one("[data-module='register-security-key']")
+    assert register_button.text.strip() == 'Register a key'

tests/app/notify_client/test_user_client.py

@@ -238,3 +238,8 @@ def test_add_user_to_service_calls_correct_endpoint_and_deletes_keys_from_cache(
         call('service-{service_id}-template-folders'.format(service_id=service_id)),
         call('service-{service_id}'.format(service_id=service_id)),
     ]
+
+
+def test_get_webauthn_credentials_for_user_returns_stubbed_data():
+    credentials = user_api_client.get_webauthn_credentials_for_user('id')
+    assert credentials[0]['name'] == 'Ben test'

tests/app/test_navigation.py

@@ -310,6 +310,7 @@ EXCLUDED_ENDPOINTS = tuple(map(Navigation.get_endpoint_with_blueprint, {
     'user_profile_mobile_number_confirm',
     'user_profile_name',
     'user_profile_password',
+    'user_profile_security_keys',
     'using_notify',
     'verify',
     'verify_email',

tests/conftest.py

@@ -4479,3 +4479,11 @@ def mock_get_invited_org_user_by_id(mocker, sample_org_invite):
         'app.org_invite_api_client.get_invited_user',
         side_effect=_get,
     )
+
+
+@pytest.fixture
+def webauthn_credential():
+    return {
+        'name': 'Test credential',
+        'created_at': '2017-10-18T16:57:14.154185Z',
+    }

tests/javascripts/registerSecurityKey.test.js

@@ -0,0 +1,26 @@
+beforeAll(() => {
+  require('../../app/assets/javascripts/registerSecurityKey.js');
+})
+
+afterAll(() => {
+  require('./support/teardown.js');
+})
+
+describe('Register security key', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <a href="#" role="button" draggable="false" class="govuk-button govuk-button--secondary" data-module="register-security-key">
+        Register a key
+      </a>`;
+  })
+
+  test('it is not implemented yet', () => {
+    window.GOVUK.modules.start();
+    jest.spyOn(window, 'alert').mockImplementation(() => {});
+
+    button = document.querySelector('[data-module="register-security-key"]');
+    button.click();
+
+    expect(window.alert).toBeCalledWith('not implemented')
+  })
+})