mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-04-11 21:01:06 -04:00
c63313e839
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)
72 lines
2.3 KiB
HTML
72 lines
2.3 KiB
HTML
{% extends "withoutnav_template.html" %}
|
||
{% 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 %}
|
||
|
||
{% block backLink %}
|
||
{{ govukBackLink({ "href": url_for('.user_profile') }) }}
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
|
||
{{ govukErrorMessage({
|
||
"classes": "banner-dangerous govuk-!-display-none",
|
||
"html": (
|
||
'There’s a problem with your security key' +
|
||
'<p class="govuk-body">Check you have the right key and try again. ' +
|
||
'If this does not work, ' +
|
||
'<a class="govuk-link govuk-link--no-visited-state" href=' + url_for('main.support') + ">contact us</a>." +
|
||
'</p>'
|
||
),
|
||
"attributes": {
|
||
"aria-live": "polite",
|
||
"tabindex": '-1'
|
||
}
|
||
}) }}
|
||
|
||
<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 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" width="149" height="150">
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|