Files
notifications-admin/app/templates/views/two-factor-webauthn.html
Jonathan Bobel f342e0fb6c Updating site to use USWDS styles (#509)
* Updated header and footer
* Updated fonts
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Adjusted grid templating
* Added images to assets
* Update app/templates/components/uk_components/footer/template.njk

Co-authored-by: Steven Reilly <stvnrlly@users.noreply.github.com>
2023-06-06 15:28:24 -04:00

72 lines
2.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "withoutnav_template.html" %}
{% from "components/page-header.html" import page_header %}
{% from "components/uk_components/button/macro.njk" import govukButton %}
{% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
{% from "components/webauthn-api-check.html" import webauthn_api_check %}
{% from "components/uk_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": (
'Theres a problem with your security key' +
'<p>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>
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 %}