Add face id error + email login

app/assets/sass/components/_ios-alert-modal.scss

@@ -0,0 +1,96 @@
+$font-color: #000;
+$primary-color: #007AFF;
+$ios-border-color: hsla(240,6%,25%,.36);
+$ios-border: .5px solid $ios-border-color;
+$ios-border-radius: 14px;
+
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: table;
+  transition: opacity 0.3s ease;
+  color: $font-color;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 270px;
+  margin: 0px auto;
+  background-color: rgba(white, .75);
+  border-radius: $ios-border-radius;
+  transition: all 0.3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.modal-header {
+  padding: 20px 30px 0 30px;
+  text-align: center;
+  font-weight: 700;
+  text-transform: capitalize;
+  font-size: 19px;
+}
+
+.modal-body {
+  padding: 10px 30px 20px 30px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: $ios-border;
+}
+
+.modal-footer {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-column: repeat(2,1fr);
+}
+
+.modal-default-button {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  cursor: pointer;
+  transition: 0.3s ease;
+  font-size: 16px;
+  color: $primary-color;
+  padding: 15px 0;
+  border-right: $ios-border;
+  outline: none;
+
+  &:hover {
+    background-color: hsla(0,0%,0%,.1);
+  }
+
+  &:last-child {
+    border-right: none;
+    border-bottom-right-radius: $ios-border-radius;
+  }
+
+  &:first-child {
+    border-bottom-left-radius: $ios-border-radius;
+    border-radius: 0;
+  }
+}
+
+.modal-img {
+  margin-bottom: 10px;
+}
+
+.modal-footer--full-width {
+  grid-auto-flow: row;
+
+  .modal-default-button {
+    border-right: 0;
+    border-top: $ios-border;
+
+    &:first-child {
+      border-top: 0;
+    }
+  }
+}

app/assets/sass/components/_login-native.scss

@@ -68,5 +68,6 @@ $app-login-face-id-height: 236px;
   bottom: 50px;
   left: 0;
   position: absolute;
+  text-align: center;
   width: 100%;
 }

app/assets/sass/main.scss

@@ -19,6 +19,7 @@
 @import 'components/app-bottom-navigation';
 @import 'components/bottom-sheet';
 @import 'components/action-sheet';
+@import 'components/ios-alert-modal';
 @import 'components/add-to-wallet';
 @import 'components/buttons';
 @import 'components/card';

app/data/session-data-defaults.js

@@ -64,8 +64,12 @@ module.exports = {
   // Upcoming and past appointments
   "appointments": 4,
 
+  // Login
+  "faceIDOn": "yes",
+
   // Errors
   "loginError": "no",
   "gpAppointmentError": "no",
+  "faceIDError": "no",
 
 }

app/views/data-settings.html

@@ -80,7 +80,53 @@ <h1>{{ pageHeading }}</h1>
 
         <hr>
 
-        <h2 class="nhsuk-heading-m nhsuk-u-margin-bottom-3">Errors</h2>
+        <h2 class="nhsuk-heading-m nhsuk-u-margin-bottom-3">Login</h2>
+
+        {{ radios({
+          "idPrefix": "faceIDOn",
+          "name": "faceIDOn",
+          "fieldset": {
+            "legend": {
+              "text": "Face ID turned on",
+              "classes": "nhsuk-label"
+            }
+          },
+          "items": [
+            {
+              "value": "yes",
+              "text": "Yes",
+              checked: checked("faceIDOn", "yes")
+            },
+            {
+              "value": "no",
+              "text": "No",
+              checked: checked("faceIDOn", "no")
+            }
+          ]
+        }) }}
+
+        {{ radios({
+          "idPrefix": "faceIDError",
+          "name": "faceIDError",
+          "fieldset": {
+            "legend": {
+              "text": "Face ID error",
+              "classes": "nhsuk-label"
+            }
+          },
+          "items": [
+            {
+              "value": "yes",
+              "text": "Yes",
+              checked: checked("faceIDError", "yes")
+            },
+            {
+              "value": "no",
+              "text": "No",
+              checked: checked("faceIDError", "no")
+            }
+          ]
+        }) }}
 
         {{ radios({
           "idPrefix": "loginError",
@@ -105,6 +151,10 @@ <h2 class="nhsuk-heading-m nhsuk-u-margin-bottom-3">Errors</h2>
           ]
         }) }}
 
+        <hr>
+
+        <h2 class="nhsuk-heading-m nhsuk-u-margin-bottom-3">Errors</h2>
+
         {{ radios({
           "idPrefix": "gpAppointmentError",
           "name": "gpAppointmentError",

app/views/layout-nhs-login.html

@@ -0,0 +1,60 @@
+{% extends 'layout.html' %}
+
+{% block bodyStart %}
+<div class="nhsuk-u-padding-bottom-2 nhsuk-u-padding-top-3">
+  <div class="nhsuk-width-container">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-full">
+        <p class="nhsuk-u-margin-bottom-0">
+          <a href="/pages/login-continue" class="app-link--with-icon nhsuk-link--no-visited-state nhsuk-u-margin-bottom-0">
+            <svg class="nhsuk-icon nhsuk-icon__close nhsapp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" height="34" width="34">
+              <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
+            </svg>
+            Close
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}
+
+<!-- Edit the header -->
+<!-- Header code examples can be found at https://service-manual.nhs.uk/design-system/components/header -->
+{% block header %}
+  {{ header({
+    "service": {
+        "name": "NHS login",
+        "href": "#"
+      },
+      "showNav": "false",
+      "showSearch": "false"
+    })
+  }}
+{% endblock %}
+
+<!-- Edit the footer -->
+<!-- Footer code examples can be found at https://service-manual.nhs.uk/design-system/components/footer -->
+{% block footer %}
+  {{ footer({
+    "links": [
+      {
+        "URL": "#",
+        "label": "Terms of use"
+      },
+      {
+        "URL": "#",
+        "label": "Cookies"
+      },
+      {
+        "URL": "#",
+        "label": "Accessibility"
+      },
+      {
+        "URL": "#",
+        "label": "Help Centre"
+      }
+    ]
+  })}}
+{% endblock %}

app/views/pages/index.html

@@ -30,6 +30,9 @@ <h2 class="nhsuk-heading-m">Layouts</h2>
         <li>
           <a href="/layout-app-not-signed-in">Not signed in (blue header)</a>
         </li>
+        <li>
+          <a href="/layout-nhs-login">NHS login</a>
+        </li>
       </ul>
 
       <hr>
@@ -40,12 +43,21 @@ <h2 class="nhsuk-heading-m">Login</h2>
         <li>
           <a href="/pages/login">Login screen</a>
         </li>
+        <li>
+          <a href="/pages/login-continue">Login screen - continue</a>
+        </li>
         <li>
           <a href="/pages/login-face-id">Login - face id</a>
         </li>
         <li>
           <a href="/pages/login-face-id-success">Login - face id success</a>
         </li>
+        <li>
+          <a href="/pages/login-face-id-error">Login - face id error</a>
+        </li>
+        <li>
+          <a href="/pages/login-email">Login - email</a>
+        </li>
         <li>
           <a href="/pages/logged-out">Login - logged out</a>
         </li>

app/views/pages/logged-out.html

@@ -11,7 +11,7 @@
 
       <form id="form" method="post" action="/pages/login" novalidate="novalidate">
 
-        <h1 class="nhsuk-heading-s">You have logged out</h1>
+        <h1 class="nhsuk-heading-m">You have logged out</h1>
 
         <input type="hidden" name="login" value="false">
 

app/views/pages/login-continue.html

@@ -0,0 +1,45 @@
+{% extends 'layout-app-splash-screen.html' %}
+
+{% set pageHeading = "Sign in to the NHS App" %}
+
+{% block content %}
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
+        <path class="nhsuk-logo__background" fill="#fff" d="M0 0h40v16H0z"></path>
+        <path class="nhsuk-logo__text" fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+      </svg>
+
+      <div class="app-login-actions">
+
+        {% if data['faceIDOn'] === "yes" %}
+          <form id="form" method="post" action="/pages/login-face-id" novalidate="novalidate">
+        {% else %}
+          <form id="form" method="post" action="/pages/login-email" novalidate="novalidate">
+        {% endif %}
+
+          <h1 class="nhsuk-heading-m">Access your services</h1>
+
+          <input type="hidden" name="login" value="false">
+
+          {{ button({
+            text: "Continue",
+            classes: "nhsapp-button nhsuk-button--reverse"
+          }) }}
+
+        </form>
+
+        <p>{{ data['version'] }}</p>
+
+      </div>
+
+    </div>
+  </div>
+
+{% endblock %}
+
+
+
+

app/views/pages/login-email.html

@@ -0,0 +1,44 @@
+{% extends 'layout-nhs-login.html' %}
+
+{% set pageHeading = "Enter your email address" %}
+
+{% block content %}
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
+
+      <p>If you have used the NHS App or other websites, you should enter the email address you used to register for them.</p>
+
+      <p>We will check if you have an NHS login. If not, you can set one up.</p>
+
+      <form id="form" method="post" action="/pages/home-p9" novalidate="novalidate">
+
+        {{ input({
+          label: {
+            text: "Email address"
+          },
+          id: "nhs-login-email",
+          name: "nhs-login-email",
+          type: "email"
+        }) }}
+
+
+        {{ button({
+          text: "Continue",
+          classes: "nhsapp-button"
+        }) }}
+
+      </form>
+
+      {{ insetText({
+        html: "<h2 class='nhsuk-heading-m'>What is NHS login?</h2><p>NHS login allows you to securely access health websites and apps with just your email address and a password.</p>",
+        classes: "nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-3"
+      }) }}
+
+    </div>
+  </div>
+
+{% endblock %}
+