Add image of security key

When referring to something that’s not part of the Notify system, like a
spreadsheet or a paper letter or a security key we’ve found it’s helpful
to give people a visual representation of it. This commit does the same
for security keys.

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

@@ -18,14 +18,16 @@
 {% 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 %}
+
+  {{ govukBackLink({ "href": url_for('.user_profile') }) }}
+  <div class="govuk-grid-row govuk-clearfix">
+    {% if credentials %}
+      <div class="govuk-grid-column-five-sixths">
+        {{ page_header(
+          page_title,
+          back_link=url_for('.user_profile')
+        ) }}
         <div class="body-copy-table">
           {% call mapping_table(
             caption=page_title,
@@ -45,11 +47,44 @@
           {% endcall %}
         </div>
 
-      {% else %}
+        {{ govukButton({
+          "element": "button",
+          "text": "Register a key",
+          "classes": "govuk-button--secondary webauthn__api-required",
+          "attributes": {
+            "data-module": "register-security-key",
+            "data-csrf-token": csrf_token(),
+          }
+        }) }}
 
+      </div>
+    {% else %}
+      <div class="govuk-grid-column-one-half">
+        {{ page_header(page_title) }}
         <p class="govuk-body">
-          Security keys are an alternative way of signing in to Notify.
+          Security keys are an alternative way of signing in to Notify,
+          instead of getting a code in a text message
         </p>
+        <p class="govuk-body">
+          You can buy any key that’s compatible with the WebAuthn
+          standard.
+        </p>
+        {{ govukButton({
+          "element": "button",
+          "text": "Register a key",
+          "classes": "govuk-button--secondary webauthn__api-required",
+          "attributes": {
+            "data-module": "register-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="govuk-!-margin-top-9">
+      </div>
+    </div>
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-five-sixths">
 
       {% endif %}
 
@@ -63,15 +98,6 @@
         "text": "JavaScript is not available for this page. Security keys need JavaScript to work."
       }) }}
 
-      {{ govukButton({
-        "element": "button",
-        "text": "Register a key",
-        "classes": "govuk-button--secondary webauthn__api-required",
-        "attributes": {
-          "data-module": "register-security-key",
-          "data-csrf-token": csrf_token(),
-        }
-      }) }}
     </div>
   </div>
 {% endblock %}