From 06789b856409d069df153ba74435ee4de9b6fa7b Mon Sep 17 00:00:00 2001
From: Ben Thorner <ben.thorner@digital.cabinet-office.gov.uk>
Date: Tue, 15 Jun 2021 14:02:15 +0100
Subject: [PATCH] Show an error if user cannot login with WebAuthn

This follows the same approach as for registration [1]. None of
this code is tested, as:

- We don't have a way to test inline JS.
- The risk of this code not working is low.
- We might change the approach in future [2].

[1]: https://github.com/alphagov/notifications-admin/pull/3886
[2]: https://github.com/alphagov/notifications-admin/pull/3886#issuecomment-841128380
---
 app/templates/views/two-factor-webauthn.html | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/templates/views/two-factor-webauthn.html b/app/templates/views/two-factor-webauthn.html
index 054b38cd5..729e7f07e 100644
--- a/app/templates/views/two-factor-webauthn.html
+++ b/app/templates/views/two-factor-webauthn.html
@@ -2,9 +2,15 @@
 {% 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 %}
@@ -15,18 +21,30 @@
   <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",
+        "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">