From 56ae21c512fe5f1176a19f8d916bd414443f73bf Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 22 Jan 2026 16:40:39 +0000 Subject: [PATCH 1/5] Log in options --- app/assets/sass/components/_button.scss | 4 ++ app/views/auth/log-in-radios.html | 52 ++++++++++++++++++++++++ app/views/auth/log-in.html | 54 +++++++++++++++++++++++++ app/views/includes/header.html | 2 +- app/views/product-page.html | 2 +- 5 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 app/views/auth/log-in-radios.html create mode 100644 app/views/auth/log-in.html diff --git a/app/assets/sass/components/_button.scss b/app/assets/sass/components/_button.scss index 29dc629f..9c2136f2 100644 --- a/app/assets/sass/components/_button.scss +++ b/app/assets/sass/components/_button.scss @@ -3,6 +3,10 @@ min-width: 80px; } +.app-button--min-width-2 { + min-width: 200px; +} + // Make buttons full width on mobile // This is temporary until https://github.com/nhsuk/nhsuk-frontend/pull/1309 is merged .nhsuk-button { diff --git a/app/views/auth/log-in-radios.html b/app/views/auth/log-in-radios.html new file mode 100644 index 00000000..3b52ede3 --- /dev/null +++ b/app/views/auth/log-in-radios.html @@ -0,0 +1,52 @@ +{% extends 'layout.html' %} + +{% set pageName = "Sign in" %} + +{% block content %} +
+
+ + +
+ + {{ 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" + }) }} + + +
+ +
+
+ +{% endblock %} diff --git a/app/views/auth/log-in.html b/app/views/auth/log-in.html new file mode 100644 index 00000000..3b00a175 --- /dev/null +++ b/app/views/auth/log-in.html @@ -0,0 +1,54 @@ +{% extends 'layout.html' %} + +{% set pageName = "Log in" %} + +{% block content %} +
+
+ +

Log in with

+ + +
+ + {{ button({ + text: "Okta", + classes: "app-button--min-width-2" + }) }} + +

or

+ +
+ {{ button({ + text: "MediCare", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ {{ button({ + text: "PharmaPMR", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ {{ button({ + text: "PharmacyPlus+", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ {{ button({ + text: "Phoenix", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ +
+
+ +{% endblock %} diff --git a/app/views/includes/header.html b/app/views/includes/header.html index af2c9c64..7b92876d 100644 --- a/app/views/includes/header.html +++ b/app/views/includes/header.html @@ -129,7 +129,7 @@ text: 'Log out' } if data.currentUserId, { - href: "/auth/okta-sign-in", + href: "/auth/log-in", text: "Log in" } if not data.currentUserId ] diff --git a/app/views/product-page.html b/app/views/product-page.html index 1df5ab52..63d40e6d 100644 --- a/app/views/product-page.html +++ b/app/views/product-page.html @@ -21,7 +21,7 @@

The simplest way to record v classes: "nhsuk-button--reverse" }) }} -

or log in

+

or log in

From 924be773f696c936d535843991f1ff32c39fed62 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 23 Jan 2026 15:17:41 +0000 Subject: [PATCH 2/5] Update log in buttons --- app/assets/sass/components/_button.scss | 2 +- app/views/auth/log-in.html | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/sass/components/_button.scss b/app/assets/sass/components/_button.scss index 9c2136f2..b5b27a83 100644 --- a/app/assets/sass/components/_button.scss +++ b/app/assets/sass/components/_button.scss @@ -4,7 +4,7 @@ } .app-button--min-width-2 { - min-width: 200px; + min-width: 300px; } // Make buttons full width on mobile diff --git a/app/views/auth/log-in.html b/app/views/auth/log-in.html index 3b00a175..c938cfc3 100644 --- a/app/views/auth/log-in.html +++ b/app/views/auth/log-in.html @@ -6,13 +6,13 @@
-

Log in with

+

Log in

{{ button({ - text: "Okta", + text: "Log in with Okta", classes: "app-button--min-width-2" }) }} @@ -20,28 +20,28 @@

Log in with

{{ button({ - text: "MediCare", + text: "Log in with MediCare", classes: "nhsuk-button--secondary app-button--min-width-2" }) }}
{{ button({ - text: "PharmaPMR", + text: "Log in with PharmaPMR", classes: "nhsuk-button--secondary app-button--min-width-2" }) }}
{{ button({ - text: "PharmacyPlus+", + text: "Log in with PharmacyPlus+", classes: "nhsuk-button--secondary app-button--min-width-2" }) }}
{{ button({ - text: "Phoenix", + text: "Log in with Phoenix", classes: "nhsuk-button--secondary app-button--min-width-2" }) }}
From b34fdc83ffbbb616b05b56b5852ed8f96f8c19ac Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 9 Feb 2026 13:22:48 +0000 Subject: [PATCH 3/5] Add MediCare example mockup --- app/views/auth/log-in.html | 67 ++++++------ app/views/auth/medicare-authorise.html | 111 ++++++++++++++++++++ app/views/auth/medicare-sign-in.html | 120 ++++++++++++++++++++++ app/views/auth/medicare-unauthorised.html | 101 ++++++++++++++++++ 4 files changed, 365 insertions(+), 34 deletions(-) create mode 100644 app/views/auth/medicare-authorise.html create mode 100644 app/views/auth/medicare-sign-in.html create mode 100644 app/views/auth/medicare-unauthorised.html diff --git a/app/views/auth/log-in.html b/app/views/auth/log-in.html index c938cfc3..03fc430a 100644 --- a/app/views/auth/log-in.html +++ b/app/views/auth/log-in.html @@ -8,45 +8,44 @@

Log in

+ {{ button({ + text: "Log in with Okta", + classes: "app-button--min-width-2", + href: "/auth/okta-sign-in" + }) }} - +

or

+
{{ button({ - text: "Log in with Okta", - classes: "app-button--min-width-2" + text: "Log in with MediCare", + classes: "nhsuk-button--secondary app-button--min-width-2", + href: "/auth/medicare-sign-in" }) }} +
+ +
+ {{ button({ + text: "Log in with PharmaPMR", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ {{ button({ + text: "Log in with PharmacyPlus+", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ {{ button({ + text: "Log in with Phoenix", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ -

or

- -
- {{ button({ - text: "Log in with MediCare", - classes: "nhsuk-button--secondary app-button--min-width-2" - }) }} -
- -
- {{ button({ - text: "Log in with PharmaPMR", - classes: "nhsuk-button--secondary app-button--min-width-2" - }) }} -
- -
- {{ button({ - text: "Log in with PharmacyPlus+", - classes: "nhsuk-button--secondary app-button--min-width-2" - }) }} -
- -
- {{ button({ - text: "Log in with Phoenix", - classes: "nhsuk-button--secondary app-button--min-width-2" - }) }} -
- -
diff --git a/app/views/auth/medicare-authorise.html b/app/views/auth/medicare-authorise.html new file mode 100644 index 00000000..209ff5c5 --- /dev/null +++ b/app/views/auth/medicare-authorise.html @@ -0,0 +1,111 @@ +{% extends 'layout.html' %} + +{% set pageName = "Sign in" %} + + +{% block header %} +
+
+ + MediCare +
+
+{% endblock %} + +{% block footer %} +{% endblock %} + + +{% block content %} + + +
+ + +

NHS Record a vaccination would like to connect your account

+ +

If you grant access, the application will be able to access your email address and account ID.

+ + +
+ +
+ +
+ +
+ + + +
+ + +{% endblock %} diff --git a/app/views/auth/medicare-sign-in.html b/app/views/auth/medicare-sign-in.html new file mode 100644 index 00000000..163c0e55 --- /dev/null +++ b/app/views/auth/medicare-sign-in.html @@ -0,0 +1,120 @@ +{% extends 'layout.html' %} + +{% set pageName = "Sign in" %} + + +{% block header %} +
+
+ + MediCare +
+
+{% endblock %} + +{% block footer %} +{% endblock %} + + +{% block content %} + + +
+ +
+ +

Sign in with your MediCare account

+ +
+ + +
+ +
+ + +
+ + + +
+ +
+ + + + +
+

Testing area

+

Log in as:

+ + +
+ + + +{% endblock %} diff --git a/app/views/auth/medicare-unauthorised.html b/app/views/auth/medicare-unauthorised.html new file mode 100644 index 00000000..f7e382f8 --- /dev/null +++ b/app/views/auth/medicare-unauthorised.html @@ -0,0 +1,101 @@ +{% extends 'layout.html' %} + +{% set pageName = "Sign in" %} + + +{% block header %} +
+
+ + MediCare +
+
+{% endblock %} + +{% block footer %} +{% endblock %} + + +{% block content %} + + +
+ +

You have denied access to NHS Record a vaccination

+ +

If you change your mind, go to Settings.

+ + + +
+ + +{% endblock %} From c5654d4b3adaf3c29a8d325a86423ca4e715974f Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 9 Feb 2026 16:58:14 +0000 Subject: [PATCH 4/5] Add not-recognised page --- app/routes/auth.js | 5 ++++- app/views/_layouts/keycloak.html | 14 ++++++++++++++ app/views/auth/keycloak-not-recognised.html | 20 ++++++++++++++++++++ 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 app/views/_layouts/keycloak.html create mode 100644 app/views/auth/keycloak-not-recognised.html diff --git a/app/routes/auth.js b/app/routes/auth.js index 7225ea4a..3708f2ce 100644 --- a/app/routes/auth.js +++ b/app/routes/auth.js @@ -6,7 +6,10 @@ 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 (!user) { res.redirect('/auth/okta-sign-in') return } diff --git a/app/views/_layouts/keycloak.html b/app/views/_layouts/keycloak.html new file mode 100644 index 00000000..8c8912cd --- /dev/null +++ b/app/views/_layouts/keycloak.html @@ -0,0 +1,14 @@ +{% extends "../layout.html" %} + +{% block header %} + {{ header({ + service: { + text: "RAVS Login" + } + }) }} +{% endblock %} + +{% block footer %} + {{ footer({ + }) }} +{% endblock %} diff --git a/app/views/auth/keycloak-not-recognised.html b/app/views/auth/keycloak-not-recognised.html new file mode 100644 index 00000000..2d10e429 --- /dev/null +++ b/app/views/auth/keycloak-not-recognised.html @@ -0,0 +1,20 @@ +{% extends '_layouts/keycloak.html' %} + +{% set pageName = "Sign in" %} + + +{% block content %} +
+
+ +

You’re not a user of the service

+ +

Your email address {{ data.email }} is not associated with an account on Record a vaccination.

+ +

If you have not previously used the service, ask a colleague at your organisation to add you as user.

+ +

If you have used the service, log in using the account you used before.

+ +
+
+{% endblock %} From 69431e3eea1de2d3b140fbb97dddd024f0868a51 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 10 Feb 2026 14:56:45 +0000 Subject: [PATCH 5/5] Add another Keycloak edge case --- app/routes/auth.js | 3 ++ .../keycloak-existing-account-new-login.html | 49 +++++++++++++++++++ app/views/auth/keycloak-not-recognised.html | 2 +- app/views/auth/medicare-sign-in.html | 1 + 4 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 app/views/auth/keycloak-existing-account-new-login.html diff --git a/app/routes/auth.js b/app/routes/auth.js index 3708f2ce..6f37a05b 100644 --- a/app/routes/auth.js +++ b/app/routes/auth.js @@ -9,6 +9,9 @@ module.exports = router => { 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 diff --git a/app/views/auth/keycloak-existing-account-new-login.html b/app/views/auth/keycloak-existing-account-new-login.html new file mode 100644 index 00000000..33354397 --- /dev/null +++ b/app/views/auth/keycloak-existing-account-new-login.html @@ -0,0 +1,49 @@ +{% extends '_layouts/keycloak.html' %} + +{% set pageName = "Sign in" %} + + +{% block content %} +
+
+ +

You previously logged in a different way

+ +

Your email address {{ data.email }} is associated with a different log in method.

+ +

If you would like to be able to use both log in methods, first sign in using the way you used before:

+ + {{ button({ + text: "Log in with Okta", + classes: "app-button--min-width-2", + href: "/auth/okta-sign-in" + }) }} + +
+ {{ button({ + text: "Log in with PharmaPMR", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ {{ button({ + text: "Log in with PharmacyPlus+", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ +
+ {{ button({ + text: "Log in with Phoenix", + classes: "nhsuk-button--secondary app-button--min-width-2" + }) }} +
+ + +

We will then link both log in methods to your account and in future you can log in either way.

+ + +
+
+{% endblock %} diff --git a/app/views/auth/keycloak-not-recognised.html b/app/views/auth/keycloak-not-recognised.html index 2d10e429..109a8634 100644 --- a/app/views/auth/keycloak-not-recognised.html +++ b/app/views/auth/keycloak-not-recognised.html @@ -7,7 +7,7 @@
-

You’re not a user of the service

+

You’re not a user of the service

Your email address {{ data.email }} is not associated with an account on Record a vaccination.

diff --git a/app/views/auth/medicare-sign-in.html b/app/views/auth/medicare-sign-in.html index 163c0e55..479a431b 100644 --- a/app/views/auth/medicare-sign-in.html +++ b/app/views/auth/medicare-sign-in.html @@ -102,6 +102,7 @@

Testing area

  • Lead admin at a small chain of pharmacies
  • Lead admin for a large chain of pharmacies with the same name
  • A MediCare user who has not used RAVS before
    • +
  • A user who has only used RAVS via a different login method