add-auth-app.njk

{% extends "common/layout/base-page.njk" %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
{% set pageTitleName = 'pages.addBackupApp.title' | translate %}

{% block pageContent %}
  <h1 class="govuk-heading-l">{{ 'pages.addBackupApp.title' | translate }}</h1>
  <ol class="govuk-list">
    <li>
      <p class="govuk-body">{{ 'pages.addBackupApp.step1.text' | translate }}</p>
      {% set detailsHtml %}
      {% set paragraphs =  "pages.addBackupApp.step1.hintText" | translate({ returnObjects: true }) %}
        {% for paragraph in paragraphs %}
          <p class="govuk-body">{{ paragraph }}</p>
        {% endfor %}
      {% endset %}
      {{ govukDetails({
          summaryText: "pages.addBackupApp.step1.hintTitle" | translate,
          html: detailsHtml
      }) }}
    </li>
    <li>
      <p class="govuk-body">{{ 'pages.addBackupApp.step2.text' | translate }}</p>
      <img id="qr-code" src="{{ qrCode }}" alt="{{ 'pages.addBackupApp.step2.altText' | translate }}">
      {{ govukDetails({
        summaryText: "pages.addBackupApp.step2.hintTitle" | translate,
        html: "pages.addBackupApp.step2.hintText" | translate | safe | replace ("[secretKey]", formattedSecret)
      }) }}
    </li>
    <li>
      <p class="govuk-body">{{ 'pages.addBackupApp.step3.text' | translate }}</p>
    </li>
    <li>
      <form method="post" action="{{ formAction }}">
        <input type="hidden" name="_csrf" value="{{ csrfToken }}"/>
        <input type="hidden" name="authAppSecret" value="{{ authAppSecret }}"/>
        {{ govukInput({
          label: {
            text: 'pages.addBackupApp.step4.text' | translate
          },
          hint: {
            text: 'pages.addBackupApp.step4.hint' | translate
          },
          classes: "govuk-input--width-10 govuk-!-font-weight-bold",
          name: "code",
          inputmode: "numeric",
          spellcheck: false,
          autocomplete: "one-time-code",
          errorMessage: {
            text: errors['code'].text
          } if (errors['code'])
        })}}
        {{ govukButton({
          text: "general.continue.label" | translate,
          preventDoubleClick: true
        })}}
      </form>
    </li>
  </ol>
  <a href="{{ cancelAMJourneyHref }}" class="govuk-link govuk-body">
    {{ cancelAMJourneyTextKey | translate }}
  </a>
{% endblock %}