Commit Graph

7 Commits

Author SHA1 Message Date
Chris Hill-Scott
c63313e839 Give WebAuthn illustration a fixed size
The browser uses the `width` and `height` attributes of the image tag to
allocate space on the page for the image.

If these aren’t provided then the browser will assume the image takes up
no space, until it’s downloaded it and had a look at what the file’s
dimensions are. This causes the layout of the page to jump once the
image downloads.

`149 × 150px` is the native size of the image. But we don’t want it to
display at that size, so this commit also adds some extra CSS which
keeps it looking the same, namely:
- the full width of the 1/4 page column on desktop
- the full width of the column minus a `40px` gutter either side on
  mobile (by using `box-sizing: border-box` the `40px` of padding is
  subtracted from the 100% width, rather than added to it)
2021-09-30 14:19:27 +01:00
Leo Hemsted
2c55f4d0ce hard-code html error message for errorBanner
turns out that we're only using errorBanner with a static message, and
it's also full of rich html content. This means that it's probably
better to put it in the html templates with other content, rather than
hidden away in js files if we can help it.

Since there are two places, had to dupe the error message but i think
that's fine as i don't anticipate this error message being used in
significantly more places.

making it a string is a bit gross and means we don't get nice syntax
highlighting on it, but as it needs to be passed in to a jinja macro
that's the way it has to go unfortunately.
2021-09-14 18:43:27 +01:00
Leo Hemsted
0b27d7e0a9 show error message in banner rather than an alert
the banner is a nicer user experience, and consistent with how we
display errors elsewhere in notify. For now pass through the error
message from JS, but we'll probably want to change that since the erorr
messages themselves are often a bit cryptic and unhelpful
2021-09-14 18:43:26 +01:00
Katie Smith
1860b2b690 Move back link above main content for straightforward cases
This moves the back link to be above the `<main>` tag by making use of
the new `backLink` block. This doesn't change the pages which are using
a back link as part of the `page_header` macro yet.
2021-08-03 11:28:15 +01:00
Ben Thorner
06789b8564 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
2021-06-15 14:04:53 +01:00
Chris Hill-Scott
5de7c6981f Add image and content to security key 2FA page
This reinforces the graphic from when you registered the key. ‘Check’ is
language we use on the test message two factor page.
2021-06-03 14:01:07 +01:00
Leo Hemsted
907a7dc363 create webauthn 2fa page
if user has `webauthn_auth` as their auth type, then redirect them to an
interstitial that prompts them to click on a button which right now just
logs to the JS console, but in a future commit will open up the webauthn
browser prompt

content is unsurprisingly not final.
2021-06-01 18:44:54 +01:00