Survey respondent help journey: Edit account details

api.md

@@ -121,7 +121,6 @@ This page documents the Fronstage ui endpoints that can be hit.
 `/account`
 * GET and POST
 * GET and POST `/change-password`
-* POST `/change-account-email-address`
 * GET and POST `/change-account-details`
 * GET `/something-else` Gets the something else once the option is selected
 * POST `/something-else` Sends secure message for the something else pages

frontstage/models.py

@@ -288,30 +288,38 @@ class ContactDetailsChangeForm(FlaskForm):
     first_name = StringField(
         _("First name"),
         validators=[
-            DataRequired(_("First name is required")),
+            DataRequired(_("Enter your first name")),
             Length(max=254, message=_("Your first name must be less than 254 " "characters")),
         ],
     )
     last_name = StringField(
         _("Last name"),
         validators=[
-            DataRequired(_("Last name is required")),
+            DataRequired(_("Enter your last name")),
             Length(max=254, message=_("Your last name must be less than 254 characters")),
         ],
     )
     phone_number = StringField(
         _("Telephone number"),
         validators=[
-            DataRequired(_("Phone number is required")),
-            Length(min=9, max=15, message=_("This should be a valid phone number between 9 and 15 " "digits")),
+            DataRequired(_("Enter a phone number")),
+            Length(min=9, max=15, message=_("Enter a 9 to 15 digit number")),
         ],
         default=None,
     )
     email_address = StringField(
         _("Email address"),
         validators=[
-            DataRequired(_("Email address is required")),
-            Email(message=_("Invalid email address")),
+            DataRequired(_("Enter an email address")),
+            Email(message=_("Enter an email address in the correct format, for example, name@example.com")),
+            Length(max=254, message=_("Your email must have fewer than 254 characters")),
+        ],
+    )
+    confirm_email_address = StringField(
+        _("Confirm email address"),
+        validators=[
+            DataRequired(_("Enter email addresses that match")),
+            EqualTo("email_address", "Enter email addresses that match"),
             Length(max=254, message=_("Your email must have fewer than 254 characters")),
         ],
     )

frontstage/templates/account/account-contact-detail-change.html

@@ -8,14 +8,9 @@
 {% set page_title = "Change contact details" %}
 {% set breadcrumbsData = [
     {
-        "text": "Surveys",
-        "url": "/surveys/todo",
-        "id": "b-item-1"
-    },
-    {
-        "text": "Account",
+        "text": "Back",
         "url": "/my-account",
-        "id": "b-item-2"
+        "id": "b-item-1"
     }
 ] %}
 
@@ -31,25 +26,18 @@
 
 {% block main %}
     {% if errors|length > 0 %}
-        {% if errors|length == 1 %}
-            {% set errorTitle = 'There is 1 error on this page' %}
-        {% elif errors|length > 1 %}
-            {% set errorTitle = 'There are ' ~ errors|length ~ ' errors on this page' %}
-        {% endif %}
         {% call
             onsPanel({
                 "variant": "error",
                 "classes": "ons-u-mb-s",
-                "title": errorTitle
+                "title": "There is a problem with your answer"
             })
         %}
-            <p>These <strong>must be corrected</strong> to continue.</p>
             {% set errorData = [] %}
             {% for error in errors %}
-                {% set error_text =  error %}
                 {% do errorData.append(
                     {
-                        "text": 'Problem with the ' ~ error_text.replace('_', ' '),
+                        "text": error[0],
                         "url": "#" ~ error ~ '_error',
                         "classes": "ons-js-inpagelink"
                     }
@@ -117,6 +105,22 @@ <h1 class="ons-u-fs-xl">Enter your new contact details</h1>
                 "value": emailAddress,
             })
         }}
+        {% if errors.email_address %}
+            {% set confirmErrorEmailAddress = { "text": errors['confirm_email_address'][0],  "id": 'confirm_email_address_error' } %}
+            {% set confirmEmailAddress = form.confirm_email_address.data %}
+        {% endif %}
+        {{
+            onsInput({
+                "id": "confirm_email_address",
+                "name": "confirm_email_address",
+                "type": "text",
+                "label": {
+                    "text": 'Confirm email address'
+                },
+                "error": errorConfirmEmailAddress,
+                "value": confirmEmailAddress,
+            })
+        }}
         {% set phoneNumber = respondent.telephone %}
         {% if errors.phone_number %}
             {% set errorPhoneNumber = { "text": errors['phone_number'][0],  "id": 'phone_number_error' } %}
@@ -130,7 +134,8 @@ <h1 class="ons-u-fs-xl">Enter your new contact details</h1>
                 "autocomplete": "tel",
                 "classes": "input--w-8",
                 "label": {
-                    "text": 'Phone number'
+                    "text": "Phone number",
+                    "description": "We will use this number if we need to contact you about your answers. </br>For international numbers include the country code."
                 },
                 "error": errorPhoneNumber,
                 "value": phoneNumber
@@ -139,20 +144,11 @@ <h1 class="ons-u-fs-xl">Enter your new contact details</h1>
         <div class="ons-field ons-u-mt-l">
             {{
                 onsButton({
-                    "text": "Save",
+                    "text": "Change details",
                     "id": "btn-option-save",
                     "submitType": "timer"
                 })
             }}
-            {{
-                onsButton({
-                    "id": "btn-account-change-detail-cancel",
-                    "url": url_for('account_bp.account'),
-                    "text": 'Cancel',
-                    "variants": 'secondary',
-                    "noIcon": true
-                })
-            }}
         </div>
     </form>
 {% endblock main %}

frontstage/templates/account/account.html

@@ -6,8 +6,40 @@
 {% from "components/details/_macro.njk" import onsDetails %}
 
 {% block main %}
-{% include "radio-option-select-error-panel.html" %}
 <div class=" ons-push-1@m">
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+            {% for category, message in messages %}
+                {% if category == "error" %}
+                    {% call onsPanel({
+                        "variant": 'error',
+                        "id": 'error-id',
+                        "iconType": 'lock',
+                        "classes": 'ons-u-mb-m'
+                    }) %}
+                        <p class="ons-u-fs-r" id="flashed-error-message-{{ loop.index }}">{{ message }}</p>
+                    {% endcall %}
+                {% elif category == "warn" %}
+                    {% call onsPanel({
+                        "variant": 'warn',
+                        "id": 'info-id',
+                        "classes": 'ons-u-mb-m'
+                    }) %}
+                        <p class="ons-u-fs-r" id="flashed-error-message-{{ loop.index }}"><b>{{ message }}</b></p>
+                    {% endcall %}
+                {% else %}
+                    {% call onsPanel({
+                        "variant": 'success',
+                        "id": 'success-id',
+                        "iconType": 'check',
+                        "classes": 'ons-u-mb-m'
+                    }) %}
+                        <p class="ons-u-fs-r" id="flashed-message-{{ loop.index }}">{{ message }}</p>
+                    {% endcall %}
+                {% endif %}
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
 <h1 class="ons-u-fs-xl">My Account</h1>
 {{
     onsDescriptionList({