Sign in with multiple organisations (#106)

A design for enabling users who belong to multiple organisations to
choose which one they want to sign in with when they sign in.

<img width="1009" alt="Screenshot 2024-09-12 at 15 29 26"
src="https://github.com/user-attachments/assets/65ab7a9c-64b9-4a42-b962-a28f3255bc45">


🗂️ [Jira card](https://nhsd-jira.digital.nhs.uk/browse/RAVS-473)

app/routes.js

@@ -11,5 +11,6 @@ require('./routes/vaccines')(router)
 require('./routes/reports')(router)
 require('./routes/prototype-admin')(router)
 require('./routes/support')(router)
+require('./routes/auth')(router)
 
 module.exports = router;

app/routes/auth.js

@@ -0,0 +1,33 @@
+module.exports = router => {
+
+  router.post('/select-organisation', (req, res) => {
+    const organisationId = req.session.data.organisationId
+
+    if (organisationId) {
+      req.session.data.currentUserId = "12345";
+
+      // Reset data
+      delete req.session.data.organisationId
+      req.session.data.multiOrganisation = "no"
+
+      res.redirect('/find-a-patient')
+    } else {
+
+      const error = {
+        text: "Select an organisation",
+        href: "#organisationId-1"
+      }
+
+      res.render('select-organisation', {
+        error
+      })
+    }
+  })
+
+  router.get('/sign-out', (req, res) => {
+    req.session.data.currentUserId = null
+
+    res.redirect('/home')
+  })
+
+}

app/views/home.html

@@ -0,0 +1,27 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Record a vaccination
+{% endblock %}
+
+{% block header %}
+  {% include "includes/header-logged-out.html" %}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">Welcome to Record a vaccination service (RAVS)</h1>
+
+      <p>You are not signed in.</p>
+
+      {{ button({
+        text: "Log in",
+        href: "/okta-sign-in"
+      }) }}
+
+    </div>
+  </div>
+
+{% endblock %}

app/views/includes/header-logged-in-organisation.html

@@ -33,9 +33,9 @@
           classes: "app-header__navigation-item--right-aligned " + ("app-header__navigation-item--current" if currentSection == "user-profile")
         },
         {
-          url: '/',
+          url: '/sign-out',
           label: 'Log out'
         }
-      ]
+      ] if data.currentUserId
     })
   }}

app/views/includes/header-logged-in-region.html

@@ -13,7 +13,7 @@
         classes: "app-header__navigation-item--right-aligned " + ("app-header__navigation-item--current" if currentSection == "user-profile")
       },
       {
-        url: '/',
+        url: '/sign-out',
         label: 'Log out'
       }
     ]

app/views/includes/header-logged-in-support.html

@@ -18,7 +18,7 @@
         classes: "app-header__navigation-item--right-aligned " + ("app-header__navigation-item--current" if currentSection == "user-profile")
       },
       {
-        url: '/',
+        url: '/sign-out',
         label: 'Log out'
       }
     ]

app/views/index.html

@@ -38,6 +38,9 @@ <h1>
 
       <h2>Main interface</h2>
 
+      <p><a href="/home">Homepage</a></p>
+      <p><a href="/home?multiOrganisation=yes">Homepage - sign in as a user belonging to 2 organisations</a></p>
+
       <ul>
         <li><a href="/vaccines">Vaccines</a></li>
         <li><a href="/reports">Reports</a></li>

app/views/okta-sign-in.html

@@ -0,0 +1,31 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Sign in
+{% endblock %}
+
+{% block header %}
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+{% block content %}
+
+<div id="signin-container"><main data-se="auth-container" tabindex="-1" id="okta-sign-in" class="auth-container main-container" style=""><div class="okta-sign-in-header auth-header"><h1><img src="https://op1static.oktacdn.com/assets/img/logos/okta-logo.1e146cad5713da744492be95eb0f7793.png" class="auth-org-logo" alt="NHS Improvement 2 logo logo" aria-label="NHS Improvement 2 logo logo"></h1><div data-type="beacon-container" class="beacon-container"></div></div><div class="auth-content"><div class="auth-content-inner"><div class="siw-main-view reset-authenticator--okta_password forgot-password"><div class="siw-main-header"><div><div><div data-type="beacon-container" class="beacon-container" style="transform: scale(1, 1); text-indent: 1px;"><div class="beacon-blank auth-beacon"><div class="beacon-blank js-blank-beacon-border auth-beacon-border"></div></div><div class="bg-helper auth-beacon auth-beacon-factor mfa-okta-password" data-se="factor-beacon"><div class="okta-sign-in-beacon-border auth-beacon-border"></div></div></div></div></div></div><div class="siw-main-body"><form autocomplete="off" novalidate data-se="o-form" slot="content" id="form45" class="password-authenticator o-form o-form-edit-mode"><div data-se="o-form-content" class="o-form-content o-form-theme clearfix">
+
+<div data-se="o-form-content" class="o-form-content o-form-theme clearfix"><h2 data-se="o-form-head" class="okta-form-title o-form-head">NHS Sign In</h2><div class="o-form-info-container"></div><div class="o-form-error-container" data-se="o-form-error-container" role="alert"></div><div class="o-form-fieldset-container" data-se="o-form-fieldset-container"><div data-se="o-form-fieldset-identifier" class="o-form-fieldset o-form-label-top" style="margin-bottom: 20px;">
+
+  <div data-se="o-form-label" class="okta-form-label o-form-label"><label for="input28">Email&nbsp;</label></div>
+
+  <div data-se="o-form-input-container" class="o-form-input"><span data-se="o-form-input-identifier" class="o-form-input-name-identifier o-form-control okta-form-input-field input-fix"><input type="text" placeholder="" name="identifier" id="input28" value="" aria-label="" autocomplete="username"></span></div></div><div data-se="o-form-fieldset-credentials.passcode" class="o-form-fieldset o-form-label-top"><div data-se="o-form-label" class="okta-form-label o-form-label"><label for="input36">Password&nbsp;</label></div><div data-se="o-form-input-container" class="o-form-input"><span data-se="o-form-input-credentials.passcode" class="o-form-input-name-credentials.passcode o-form-control okta-form-input-field input-fix"><input type="password" placeholder="" name="credentials.passcode" id="input36" value="" aria-label="" autocomplete="current-password" class="password-with-toggle" style="margin-bottom: 20px;"><span class="password-toggle"><span class="eyeicon visibility-16 button-show"></span><span class="eyeicon visibility-off-16 button-hide"></span></span></span></div></div><div data-se="o-form-fieldset-rememberMe" class="o-form-fieldset o-form-label-top"><div data-se="o-form-input-container" class="o-form-input"><span data-se="o-form-input-rememberMe" class="o-form-input-name-rememberMe"><div class="custom-checkbox"><input type="checkbox" name="rememberMe" id="input44"><label for="input44" data-se-for-name="rememberMe">Keep me signed in</label></div></span></div></div></div></div>
+
+    {{ button({
+      classes: "app-button--okta nhsuk-u-margin-top-5",
+      text: "Sign in",
+      href: ("/select-organisation" if data.multiOrganisation == "yes" else "/find-a-patient")
+    }) }}
+
+  </div></form></div><div class="siw-main-footer"><div class="auth-footer"></div></div></div></div></div></main></div>
+
+{% endblock %}

app/views/select-organisation.html

@@ -0,0 +1,63 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Sign in
+{% endblock %}
+
+{% block header %}
+  {% include "includes/header-logged-out.html" %}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+    {% if error %}
+      {{ errorSummary({
+        titleText: "There is a problem",
+        errorList: [error]
+      }) }}
+    {% endif %}
+
+    <form action="/select-organisation" method="post">
+
+      {{ radios({
+        name: "organisationId",
+        fieldset: {
+          legend: {
+            text: "Choose your organisation",
+            classes: "nhsuk-fieldset__legend--l nhsuk-u-margin-bottom-5",
+            isPageHeading: true
+          }
+        },
+        errorMessage: {
+          text: error.text
+        } if error,
+        items: [
+          {
+            value: "FA424",
+            text: "Pickfords Pharmacy",
+            hint: {
+              text: "8 Spencer Court, Corby, NN17 1NU"
+            }
+          },
+          {
+            value: "FAH83",
+            text: "Claygate Pharmacy",
+            hint: {
+              text: "35 The Parade, Claygate, Esher, KT10 0PD"
+            }
+          }
+        ]
+      }) }}
+
+      {{ button({
+        text: "Continue"
+      }) }}
+    </form>
+
+
+    </div>
+  </div>
+
+{% endblock %}