From 56ae21c512fe5f1176a19f8d916bd414443f73bf Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 22 Jan 2026 16:40:39 +0000 Subject: [PATCH 01/10] 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 02/10] 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 03/10] 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 04/10] 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 05/10] 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
    • From fb5d9091d79345e38067d23ddf7c8547e09b5139 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 16 Feb 2026 16:04:17 +0000 Subject: [PATCH 06/10] Apply suggestions from code review Co-authored-by: Anna-Sutton --- .../auth/keycloak-existing-account-new-login.html | 5 +++-- app/views/auth/keycloak-not-recognised.html | 10 ++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/views/auth/keycloak-existing-account-new-login.html b/app/views/auth/keycloak-existing-account-new-login.html index 33354397..18fe3872 100644 --- a/app/views/auth/keycloak-existing-account-new-login.html +++ b/app/views/auth/keycloak-existing-account-new-login.html @@ -11,7 +11,8 @@

    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:

    +

    If you want to log in with PharmaPMR, you need to log in with Okta first.

    +

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

    {{ button({ text: "Log in with Okta", @@ -41,7 +42,7 @@

    You previously logged in a different way

    -

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

    + diff --git a/app/views/auth/keycloak-not-recognised.html b/app/views/auth/keycloak-not-recognised.html index 109a8634..2b8b2938 100644 --- a/app/views/auth/keycloak-not-recognised.html +++ b/app/views/auth/keycloak-not-recognised.html @@ -7,13 +7,15 @@
    -

    You’re not a user of the service

    +

    We cannot find your RAVS account

    -

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

    +

    There is no RAVS account for {{ data.email }}.

    -

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

    +

    If you’ve previously used RAVS

    +

    It’s likely your account is linked to a different email. Try logging in with the option you used previously.

    -

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

    +

    If you have not used RAVS before

    +

    Ask a colleague at your organisation to add you to RAVS. Once you’ve received a welcome email from RAVS, you should be able to log in.

    From 3a7c810d46045558cf1b2afc0f830844cf0069e3 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 16 Feb 2026 16:04:37 +0000 Subject: [PATCH 07/10] Apply another change Co-authored-by: Anna-Sutton --- app/views/auth/keycloak-existing-account-new-login.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/auth/keycloak-existing-account-new-login.html b/app/views/auth/keycloak-existing-account-new-login.html index 18fe3872..c04abcbb 100644 --- a/app/views/auth/keycloak-existing-account-new-login.html +++ b/app/views/auth/keycloak-existing-account-new-login.html @@ -9,7 +9,7 @@

    You previously logged in a different way

    -

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

    +

    You previously logged in with Okta.

    If you want to log in with PharmaPMR, you need to log in with Okta first.

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

    From de0c4a5adac318506a61b8cffbc2e19f83ea85d1 Mon Sep 17 00:00:00 2001 From: Anna-Sutton Date: Mon, 16 Feb 2026 16:54:23 +0000 Subject: [PATCH 08/10] More content changes --- app/views/auth/keycloak-not-recognised.html | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/views/auth/keycloak-not-recognised.html b/app/views/auth/keycloak-not-recognised.html index 2b8b2938..5f309c8c 100644 --- a/app/views/auth/keycloak-not-recognised.html +++ b/app/views/auth/keycloak-not-recognised.html @@ -7,15 +7,13 @@
    -

    We cannot find your RAVS account

    +

    We cannot find a user with this email

    There is no RAVS account for {{ data.email }}.

    -

    If you’ve previously used RAVS

    -

    It’s likely your account is linked to a different email. Try logging in with the option you used previously.

    +

    If you’ve previously used RAVS, try logging in with the option you used last time.

    -

    If you have not used RAVS before

    -

    Ask a colleague at your organisation to add you to RAVS. Once you’ve received a welcome email from RAVS, you should be able to log in.

    +

    If you've never used RAVS before, you'll need an account before you can log in. Ask your organisation to add you as a user.

    From 93e0c7392f737a65038f5ffa99229e7294d5b450 Mon Sep 17 00:00:00 2001 From: Anna-Sutton Date: Mon, 16 Feb 2026 17:45:07 +0000 Subject: [PATCH 09/10] More content tweaks to keycloak-not-recognised.html --- app/views/auth/keycloak-not-recognised.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/auth/keycloak-not-recognised.html b/app/views/auth/keycloak-not-recognised.html index 5f309c8c..6e20d4e3 100644 --- a/app/views/auth/keycloak-not-recognised.html +++ b/app/views/auth/keycloak-not-recognised.html @@ -13,7 +13,7 @@

    We cannot find a user with this email

    If you’ve previously used RAVS, try logging in with the option you used last time.

    -

    If you've never used RAVS before, you'll need an account before you can log in. Ask your organisation to add you as a user.

    +

    If you've never used RAVS before, you'll need an account before you can log in. Check with your organisation that you've been added to RAVS.

    From 32296ea5b52775a59a9d4882bf1e208dca443705 Mon Sep 17 00:00:00 2001 From: Anna-Sutton Date: Mon, 16 Feb 2026 17:48:58 +0000 Subject: [PATCH 10/10] Update keycloak-not-recognised.html --- app/views/auth/keycloak-not-recognised.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/auth/keycloak-not-recognised.html b/app/views/auth/keycloak-not-recognised.html index 6e20d4e3..8083d8ca 100644 --- a/app/views/auth/keycloak-not-recognised.html +++ b/app/views/auth/keycloak-not-recognised.html @@ -13,7 +13,7 @@

    We cannot find a user with this email

    If you’ve previously used RAVS, try logging in with the option you used last time.

    -

    If you've never used RAVS before, you'll need an account before you can log in. Check with your organisation that you've been added to RAVS.

    +

    If you've never used RAVS before, you'll need an account before you can log in. Check with colleagues that you've been added to RAVS.