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/keycloak-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/_layouts/keycloak.html

@@ -0,0 +1,14 @@
+{% extends "../layout.html" %}
+
+{% block header %}
+  {{ header({
+    service: {
+      text: "RAVS Login"
+    }
+  }) }}
+{% endblock %}
+
+{% block footer %}
+  {{ footer({
+  }) }}
+{% endblock %}

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

@@ -0,0 +1,49 @@
+{% extends '_layouts/keycloak.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 {{ data.email }} is associated with a different log in method.</p>
+
+      <p>If you would like to be able to use both log in methods, first sign in using the way you used before:</p>
+
+      {{ button({
+        text: "Log in with Okta",
+        classes: "app-button--min-width-2",
+        href: "/auth/okta-sign-in"
+      }) }}
+
+      <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>
+
+
+      <p>We will then link both log in methods to your account and in future you can log in either way.</p>
+
+
+    </div>
+  </div>
+{% endblock %}

app/views/auth/keycloak-not-recognised.html

@@ -0,0 +1,20 @@
+{% extends '_layouts/keycloak.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’re not a user of the service</h1>
+
+      <p>Your email address {{ data.email }} is not associated with an account on Record a vaccination.</p>
+
+      <p>If you have not previously used the service, ask a colleague at your organisation to add you as user.</p>
+
+      <p>If you have used the service, <a href="/auth/log-in">log in</a> using the account you used before.</p>
+
+    </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 %}