diff --git a/app/assets/images/security-key.svg b/app/assets/images/security-key.svg new file mode 100644 index 000000000..f848b7a89 --- /dev/null +++ b/app/assets/images/security-key.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss index 3e0de527e..7f47049b0 100644 --- a/app/assets/stylesheets/views/webauthn.scss +++ b/app/assets/stylesheets/views/webauthn.scss @@ -23,3 +23,13 @@ display: block; } } + +.webauthn-illustration { + + @include media-down(mobile) { + margin: govuk-spacing(6) govuk-spacing(9) 0 govuk-spacing(9); + } + + margin: govuk-spacing(9) auto 0 auto; + +} diff --git a/app/templates/views/user-profile.html b/app/templates/views/user-profile.html index 25f60cf2f..4044a707c 100644 --- a/app/templates/views/user-profile.html +++ b/app/templates/views/user-profile.html @@ -48,7 +48,10 @@ {% if current_user.platform_admin %} {% call row(id='security-keys') %} {{ text_field('Security keys') }} - {{ text_field(current_user.webauthn_credentials|length) }} + {{ optional_text_field( + ('{} registered'.format(current_user.webauthn_credentials|length)) if current_user.webauthn_credentials else None, + default='None registered' + ) }} {{ edit_field('Change', url_for('.user_profile_security_keys')) }} {% endcall %} {% endif %} diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html index c1df142a8..95799c710 100644 --- a/app/templates/views/user-profile/security-keys.html +++ b/app/templates/views/user-profile/security-keys.html @@ -18,14 +18,35 @@ {% endblock %} {% block maincolumn_content %} - {{ page_header( - page_title, - back_link=url_for('.user_profile') - ) }} +{% set webauthn_button %} + {{ 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(), + } + }) }} + + {{ 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." + }) }} +{% endset %} + + + {{ govukBackLink({ "href": url_for('.user_profile') }) }}
-
- {% if credentials %} + {% if credentials %} +
+ {{ page_header(page_title) }}
{% call mapping_table( caption=page_title, @@ -44,34 +65,25 @@ {% endfor %} {% endcall %}
- - {% else %} - + {{ webauthn_button }} +
+ {% else %} +
+ {{ page_header(page_title) }}

- 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

- +

+ You can buy any key that’s compatible with the WebAuthn + standard. +

+ {{ webauthn_button }} +
+
+ +
{% endif %} - - {{ 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." - }) }} - - {{ 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(), - } - }) }}
{% endblock %} diff --git a/tests/app/main/views/test_user_profile.py b/tests/app/main/views/test_user_profile.py index 277a70ef9..e2cac7438 100644 --- a/tests/app/main/views/test_user_profile.py +++ b/tests/app/main/views/test_user_profile.py @@ -37,20 +37,25 @@ def test_overview_page_shows_disable_for_platform_admin( assert ' '.join(disable_platform_admin_row.text.split()) == 'Use platform admin view Yes Change' -@pytest.mark.parametrize('has_keys', [False, True]) +@pytest.mark.parametrize('key_count, expected_row_text', [ + (0, 'Security keys None registered Change'), + (1, 'Security keys 1 registered Change'), + (2, 'Security keys 2 registered Change'), +]) def test_overview_page_shows_security_keys_for_platform_admin( mocker, client_request, platform_admin_user, - has_keys, webauthn_credential, + key_count, + expected_row_text, ): client_request.login(platform_admin_user) - credentials = [webauthn_credential] if has_keys else [] + credentials = [webauthn_credential for _ in range(key_count)] 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' + assert ' '.join(security_keys_row.text.split()) == expected_row_text def test_should_show_name_page(