Log in options

app/assets/sass/components/_button.scss

@@ -3,6 +3,10 @@
   min-width: 80px;
 }
 
+.app-button--min-width-2 {
+  min-width: 300px;
+}
+
 // Make buttons full width on mobile
 // This is temporary until https://github.com/nhsuk/nhsuk-frontend/pull/1309 is merged
 .nhsuk-button {

app/routes/auth.js

@@ -6,7 +6,13 @@ module.exports = router => {
     const email = data.email || "jane.smith@nhs.net"
     const user = data.users.find((user) => user.email === email)
 
-    if (!user) {
+    if (email === 'freda.pink@nhs.net') {
+      res.redirect('/auth/user-not-recognised')
+      return
+    } else if (email === 'james.blue@nhs.net') {
+      res.redirect('/auth/keycloak-existing-account-new-login')
+      return
+    } else if (!user) {
       res.redirect('/auth/okta-sign-in')
       return
     }

app/views/auth/keycloak-existing-account-new-login.html

@@ -0,0 +1,24 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">You previously logged in a different way</h1>
+
+      <p>Your email address <b>{{ data.email }}</b> is linked to a different log in option.</p>
+
+      <p>You need to log in with the option you used previously.</p>
+
+      <p>We will then link both options to your RAVS account, and in future you will be able to log in with either.</p>
+
+      {{ button({
+        text: "Continue",
+        href: "/auth/log-in"
+      }) }}
+
+    </div>
+  </div>
+{% endblock %}

app/views/auth/log-in-radios.html

@@ -0,0 +1,52 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+
+      <form action="/auth/log-in-answer" method="post">
+
+        {{ radios({
+          fieldset: {
+            legend: {
+              text: "How do you want to log in?",
+              size: "l",
+              isPageHeading: true
+            }
+          },
+          items: [
+            {
+              text: "Okta"
+            },
+            {
+              divider: "or"
+            },
+            {
+              text: "MediCare"
+            },
+            {
+              text: "PharmaPMR"
+            },
+            {
+              text: "PharmacyPlus+"
+            },
+            {
+              text: "Phoenix"
+            }
+          ]
+        }) }}
+
+        {{ button({
+          text: "Continue"
+        }) }}
+
+
+      </form>
+
+    </div>
+  </div>
+
+{% endblock %}

app/views/auth/log-in.html

@@ -0,0 +1,53 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Log in" %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-6">Log in</h1>
+
+      {{ button({
+        text: "Log in with Okta",
+        classes: "app-button--min-width-2",
+        href: "/auth/okta-sign-in"
+      }) }}
+
+      <p>or</p>
+
+      <div>
+        {{ button({
+          text: "Log in with MediCare",
+          classes: "nhsuk-button--secondary app-button--min-width-2",
+          href: "/auth/medicare-sign-in"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with PharmaPMR",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with PharmacyPlus+",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with Phoenix",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+
+
+    </div>
+  </div>
+
+{% endblock %}

app/views/auth/medicare-authorise.html

@@ -0,0 +1,111 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+
+{% block header %}
+<header>
+  <div class="service-name">
+    <span class="logo">+</span>
+    MediCare
+  </div>
+</header>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+
+{% block content %}
+<style>
+  * { box-sizing: border-box; }
+  html, body { background-color: cornsilk; }
+  body {
+    margin: 0; padding: 0;
+  }
+  header {
+    margin: 0; padding: 40px;
+    color: snow;
+    background-color: darkred;
+  }
+
+  h1, p {
+    max-width: 750px;
+  }
+
+  .logo {
+    font-size: 60px;
+    font-weight: bold;
+    line-height: 50px;
+    color: salmon;
+  }
+  .service-name {
+    font-size: 40px;
+    font-weight: bold;
+  }
+
+  label {
+    display: block;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  input[type=text],
+  input[type=password] {
+    font-size: 18px;
+    padding: 5px;
+    border-radius: 0;
+    border: 2px solid black;
+    width: 400px;
+  }
+
+  .field {
+    margin-bottom: 40px;
+  }
+
+  button {
+    font-size: 30px;
+    padding: 10px;
+    border: 0px;
+    border-radius: 5px;
+    background-color: darkred;
+    color: snow;
+    margin-right: 40px;
+  }
+
+  .allow {
+    background-color: green;
+  }
+
+  .deny {
+    background-color: darkred;
+  }
+
+  form {
+    display: inline-block;
+  }
+</style>
+
+<main>
+
+
+    <h1>NHS Record a vaccination would like to connect your account</h1>
+
+    <p>If you grant access, the application will be able to access your email address and account ID.</p>
+
+
+    <form action="/auth/sign-in" method="post">
+      <button type="submit" class="allow">Allow</button>
+    </form>
+
+    <form action="/auth/medicare-unauthorised" method="post">
+      <button type="submit" class="deny">Deny</button>
+    </form>
+
+  </form>
+
+</main>
+
+
+{% endblock %}

app/views/auth/medicare-sign-in.html

@@ -0,0 +1,121 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+
+{% block header %}
+<header>
+  <div class="service-name">
+    <span class="logo">+</span>
+    MediCare
+  </div>
+</header>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+
+{% block content %}
+<style>
+  * { box-sizing: border-box; }
+  html, body { background-color: cornsilk; }
+  body {
+    margin: 0; padding: 0;
+  }
+  header {
+    margin: 0; padding: 40px;
+    color: snow;
+    background-color: darkred;
+  }
+  .logo {
+    font-size: 60px;
+    font-weight: bold;
+    line-height: 50px;
+    color: salmon;
+  }
+  .service-name {
+    font-size: 40px;
+    font-weight: bold;
+  }
+
+  label {
+    display: block;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  input[type=text],
+  input[type=password] {
+    font-size: 18px;
+    padding: 5px;
+    border-radius: 0;
+    border: 2px solid black;
+    width: 400px;
+  }
+
+  .field {
+    margin-bottom: 40px;
+  }
+
+  button {
+    font-size: 30px;
+    padding: 10px;
+    border: 0px;
+    border-radius: 5px;
+    background-color: darkred;
+    color: snow;
+  }
+</style>
+
+<main>
+
+  <form action="/auth/medicare-authorise" method="post">
+
+    <h1>Sign in with your MediCare account</h1>
+
+    <div class="field">
+      <label for="email">Email</label>
+      <input type="text" id="email" name="email">
+    </div>
+
+    <div class="field">
+      <label for="password">Password</label>
+      <input type="text" id="password" name="password">
+    </div>
+
+    <button type="submit">Log in</button>
+
+  </form>
+
+</main>
+</div>
+</div>
+
+
+<div style="background-color: #d8dde0; padding: 30px;">
+  <h2 class="nhsuk-heading-s">Testing area</h2>
+  <p>Log in as:</p>
+
+  <ul>
+    <li><a href="#" data-email="paulina.sloan@nhs.net" data-module="prefill-email">Lead admin at a small chain of pharmacies</a></li>
+    <li><a href="#" data-email="amanda.white@nhs.net" data-module="prefill-email">Lead admin for a large chain of pharmacies with the same name</a></li>
+    <li><a href="#" data-email="freda.pink@nhs.net" data-module="prefill-email">A MediCare user who has not used RAVS before</a></li>
+    <li><a href="#" data-email="james.blue@nhs.net" data-module="prefill-email">A user who has only used RAVS via a different login method</a></li>
+  </ul>
+</div>
+
+<script>
+
+  const prefillLinks = document.querySelectorAll('a[data-module=prefill-email]')
+
+  for (link of prefillLinks) {
+    link.addEventListener('click', function(event) {
+      const email = event.target.getAttribute('data-email');
+      document.getElementById('email').setAttribute('value', email);
+    })
+  }
+</script>
+
+{% endblock %}