verification screens

dwp · Oct 31, 2024 · 2665476 · 2665476
1 parent b18ae67
commit 2665476
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 1 deletion.
diff --git a/app/views/preferences/customer-view/verify/email-verified.html b/app/views/preferences/customer-view/verify/email-verified.html
@@ -0,0 +1,40 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Content page template – {{ serviceName }} – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block beforeContent %}
+
+{% endblock %}
+
+{% block content %}
+
+<div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+          <div class="govuk-notification-banner__header">
+            <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
+              Success
+            </h2>
+          </div>
+          <div class="govuk-notification-banner__content">
+            <h3 class="govuk-notification-banner__heading">
+              Email verification complete
+            </h3>
+            <p class="govuk-body">You have successfully verified the email example@email.com.</p>
+          </div>
+        </div>
+
+
+        <h2 class="govuk-heading-m">What happens next</h2>
+        <p class="govuk-body">We have sent you a confirmation email to example@email.com.</p>
+        <p class="govuk-body">You can now <a href="#" class="govuk-link">exit this page</a>.</p>
+      </div>
+    </div>
+  </main>
+</div>
+
+{% endblock %}
diff --git a/app/views/preferences/customer-view/verify/mobile-phone-number-verified.html b/app/views/preferences/customer-view/verify/mobile-phone-number-verified.html
@@ -0,0 +1,40 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Content page template – {{ serviceName }} – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block beforeContent %}
+
+{% endblock %}
+
+{% block content %}
+
+<div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+          <div class="govuk-notification-banner__header">
+            <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
+              Success
+            </h2>
+          </div>
+          <div class="govuk-notification-banner__content">
+            <h3 class="govuk-notification-banner__heading">
+              Phone number verification complete
+            </h3>
+            <p class="govuk-body">You have successfully verified the phone number 07123 456 789.</p>
+          </div>
+        </div>
+
+
+        <h2 class="govuk-heading-m">What happens next</h2>
+        <p class="govuk-body">We have sent you a confirmation text message to 07123 456 789.</p>
+        <p class="govuk-body">You can now <a href="#" class="govuk-link">exit this page</a>.</p>
+      </div>
+    </div>
+  </main>
+</div>
+
+{% endblock %}
diff --git a/app/views/preferences/customer-view/verify/verify-your-email.html b/app/views/preferences/customer-view/verify/verify-your-email.html
@@ -0,0 +1,46 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Content page template – {{ serviceName }} – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block beforeContent %}
+
+{% endblock %}
+
+{% block content %}
+
+<div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-l">Verify your email</h1>
+        <p class="govuk-body">We have sent a 6 digit code to example@email.com. The 6 digit code will expire in 30 minutes.</p>
+
+        <p>Enter it into the box below to verify your email.</p>
+
+
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="one-quarter">
+            6 digit code
+          </label>
+          <input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="oneQuarter" type="text">
+        </div>
+
+        <p><a href="resend-code">Resend email</a></p>
+        <p><a href="resend-code">I did not get an email</a></p>
+
+        <div class="govuk-!-padding-bottom-2"></div>
+
+        <div class="govuk-button-group">
+          <button type="submit" class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+        </div>
+
+      </div>
+    </div>
+    </main>
+</div>
+
+{% endblock %}
diff --git a/app/views/preferences/customer-view/verify/verify-your-mobile-phone-number.html b/app/views/preferences/customer-view/verify/verify-your-mobile-phone-number.html
@@ -0,0 +1,46 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Content page template – {{ serviceName }} – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block beforeContent %}
+
+{% endblock %}
+
+{% block content %}
+
+<div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-l">Verify your phone number</h1>
+        <p class="govuk-body">We have sent a text message with a 6 digit code to 07123456789. The 6 digit code will expire in 30 minutes.</p>
+
+        <p>Enter it into the box below to verify your phone number.</p>
+
+
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="one-quarter">
+            6 digit code
+          </label>
+          <input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="oneQuarter" type="text">
+        </div>
+
+        <p><a href="resend-code">Resend text message</a></p>
+        <p><a href="resend-code">I did not get a text message</a></p>
+
+        <div class="govuk-!-padding-bottom-2"></div>
+
+        <div class="govuk-button-group">
+          <button type="submit" class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+        </div>
+
+      </div>
+    </div>
+    </main>
+</div>
+
+{% endblock %}
diff --git a/app/views/preferences/menu.html b/app/views/preferences/menu.html
@@ -51,6 +51,17 @@ <h2 class="govuk-heading-m">
 <p class="govuk-body">For the consideration of the developers we have includes some additional screens of interest, note that they are just for reference and will have limited functionality:</p>
 
 
+<h4 class="govuk-heading-s">
+  Verify your email and mobile phone number
+  </h4>
+
+  <ul class="govuk-list govuk-list--bullet">
+    <li><a href="customer-view/verify/verify-your-email">Verify your email</a></li>
+    <li><a href="customer-view/verify/email-verified">Email verified</a></li>
+    <li><a href="customer-view/verify/verify-your-mobile-phone-number">Verify your mobile phone number</a></li>
+    <li><a href="customer-view/verify/mobile-phone-number-verified">Mobile phone number verified</a></li>
+    </ul>
+
 <h4 class="govuk-heading-s">
   Sign out
   </h4>

diff --git a/app/views/round-8/menu.html b/app/views/round-8/menu.html
@@ -56,7 +56,7 @@ <h4 class="govuk-heading-s">
   UR testing scenarios
   </h4>
 
-  <p><a href="e5/start.html"><b>Scenario 1:</b> Happy path</a>.</p>
+  <p><a href="e5/start.html"><b>Scenario 1:</b> Happy path for two evidence-types</a>.</p>
   <ul class="govuk-list govuk-list--bullet">
     <li>run through happy path</li> 
     <li>what would they do if they needed to upload another doc</li>