app/templates/views/manage-users/confirm-edit-user-email.html

{% extends "withnav_template.html" %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}

{% block per_page_title %}
  Confirm change of email address
{% endblock %}

{% block maincolumn_content %}

{{ page_header(
  'Confirm change of email address',
  url_for('.edit_user_email', service_id=service_id, user_id=user.id)
) }}

<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
  {% call form_wrapper() %}
    <p class="govuk-body">New email address:</p>
    <div class="panel panel-border-wide bottom-gutter">
      <p class="govuk-body">{{ new_email }}</p>
    </div>
    <p class="govuk-body">We will send {{ user.name }} an email to tell them about the change.</p>
    {{ page_footer('Confirm') }}
  {% endcall %}
  </div>
</div>

{% endblock %}
Content changes following consultation with content and design pros :) 2019-02-20 17:34:58 +00:00			`{% extends "withnav_template.html" %}`
Add GOV.UK Design System style back links The Design System has standardised on back links being at the top of the page, decorated with a small text-coloured arrow. I think this makes more sense than having them at the bottom, because it suggests, in some way, being able to go back before commiting to any of the forms on the page. Whereas the things at the bottom of the page should be performing actions on what’s in the page. The reason for making this change now is that it de-clutters the area around the green buttons. This was presenting a design challenge where multiple levels of interaction were happening in the same form. Moving these back links to the top of the page should mean that, in these complicated forms, there’s one fewer thing to compete for the user’s attention. I’ve componentised this into a `page_header` macro so that the change is easier to roll out and maintain. 2019-04-29 11:44:05 +01:00			`{% from "components/page-header.html" import page_header %}`
Confirm edit user email changes user email 2019-02-20 11:50:34 +00:00			`{% from "components/page-footer.html" import page_footer %}`
			`{% from "components/form.html" import form_wrapper %}`

			`{% block per_page_title %}`
Content changes following consultation with content and design pros :) 2019-02-20 17:34:58 +00:00			`Confirm change of email address`
Confirm edit user email changes user email 2019-02-20 11:50:34 +00:00			`{% endblock %}`

			`{% block maincolumn_content %}`

Add GOV.UK Design System style back links The Design System has standardised on back links being at the top of the page, decorated with a small text-coloured arrow. I think this makes more sense than having them at the bottom, because it suggests, in some way, being able to go back before commiting to any of the forms on the page. Whereas the things at the bottom of the page should be performing actions on what’s in the page. The reason for making this change now is that it de-clutters the area around the green buttons. This was presenting a design challenge where multiple levels of interaction were happening in the same form. Moving these back links to the top of the page should mean that, in these complicated forms, there’s one fewer thing to compete for the user’s attention. I’ve componentised this into a `page_header` macro so that the change is easier to roll out and maintain. 2019-04-29 11:44:05 +01:00			`{{ page_header(`
			`'Confirm change of email address',`
			`url_for('.edit_user_email', service_id=service_id, user_id=user.id)`
			`) }}`
Confirm edit user email changes user email 2019-02-20 11:50:34 +00:00
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class. 2020-02-19 11:57:15 +00:00			`<div class="govuk-grid-row">`
Replace the `.column-...` classes in _grids.scss We had 7 classes in _grids.scss named `.column-...` which were being used to give a certain column width. These worked by using `@include grid column()`, which is now deprecated. `.column-whole` and `.column-three-quarters` can be removed and replaced with `govuk-grid-column-full` and `govuk-grid-column-three-quarters` respectively. The other column classes don't have a direct replacment in GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width` SASS map in `extensions.scss` to add in extra widths, then use this with the `govuk-grid-column` mixin to create new classes in for our custom widths in `_grids.scss` 2020-02-20 16:55:56 +00:00			`<div class="govuk-grid-column-full">`
Confirm edit user email changes user email 2019-02-20 11:50:34 +00:00			`{% call form_wrapper() %}`
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future. 2020-05-29 17:11:01 +01:00			`<p class="govuk-body">New email address:</p>`
Content changes following consultation with content and design pros :) 2019-02-20 17:34:58 +00:00			`<div class="panel panel-border-wide bottom-gutter">`
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future. 2020-05-29 17:11:01 +01:00			`<p class="govuk-body">{{ new_email }}</p>`
Content changes following consultation with content and design pros :) 2019-02-20 17:34:58 +00:00			`</div>`
Don’t allow paragraphs without class attribute All paragraphs should have class="govuk-body", or be otherwise custom-styled. This commit adds some extra checks to our test fixture that looks for paragraphs that don’t have any styling. Our test coverage is pretty good, so this should check almost all pages, and prevent regressions. I’ve done this in such a way that it can be extended for other elements (e.g. links) in the future. 2020-05-29 17:11:01 +01:00			`<p class="govuk-body">We will send {{ user.name }} an email to tell them about the change.</p>`
Add GOV.UK Design System style back links The Design System has standardised on back links being at the top of the page, decorated with a small text-coloured arrow. I think this makes more sense than having them at the bottom, because it suggests, in some way, being able to go back before commiting to any of the forms on the page. Whereas the things at the bottom of the page should be performing actions on what’s in the page. The reason for making this change now is that it de-clutters the area around the green buttons. This was presenting a design challenge where multiple levels of interaction were happening in the same form. Moving these back links to the top of the page should mean that, in these complicated forms, there’s one fewer thing to compete for the user’s attention. I’ve componentised this into a `page_header` macro so that the change is easier to roll out and maintain. 2019-04-29 11:44:05 +01:00			`{{ page_footer('Confirm') }}`
Confirm edit user email changes user email 2019-02-20 11:50:34 +00:00			`{% endcall %}`
			`</div>`
			`</div>`

			`{% endblock %}`