Updates to Manage users section (#431)

This makes some changes:

* move the text about deactivating users after 90 days above the search
box, and use inset text, to make this stand out some more (as it will be
a new feature)
* Add a new 'Invited' tab, and move invited users who have not logged in
there rather than in 'Active'
* On the invited users table, add a link to resend invitation

## Before

<img width="1076" height="457" alt="Screenshot 2025-08-28 at 14 20 02"
src="https://github.com/user-attachments/assets/47598adc-9d0b-4db9-b72a-c4611e8c73a9"
/>

## After

<img width="1044" height="544" alt="Screenshot 2025-08-28 at 14 20 43"
src="https://github.com/user-attachments/assets/791fb95c-112b-4357-82e4-9695d7ea6503"
/>

<img width="1035" height="443" alt="Screenshot 2025-08-28 at 14 25 57"
src="https://github.com/user-attachments/assets/bccbb9cd-ab4d-43ed-8453-08c4fb9676cd"
/>

---------

Co-authored-by: Frankie Roberto <[email protected]>

Author: johnrimmer2

app.js

@@ -57,6 +57,7 @@ const appViews = [
   path.join(__dirname, 'node_modules/nhsuk-frontend/dist/nhsuk/macros'),
   path.join(__dirname, 'node_modules/nhsuk-frontend/dist/nhsuk'),
   path.join(__dirname, 'node_modules/nhsuk-frontend/dist'),
+  path.join(__dirname, 'node_modules/@x-govuk/govuk-prototype-components/src/x-govuk/components'),
   path.join(__dirname, 'app/components/'),
 ];
 

app/views/user-admin/_secondary-nav.html

@@ -0,0 +1,18 @@
+{% from 'secondary-navigation/macro.njk' import xGovukSecondaryNavigation %}
+
+{{ xGovukSecondaryNavigation({
+  visuallyHiddenTitle: "Secondary menu",
+  items: [{
+    text: "Invited (4)",
+    href: "/user-admin/invited",
+    current: (currentSubSection == "invited")
+  }, {
+    text: "Active (2)",
+    href: "/user-admin",
+    current: (currentSubSection == "active")
+  }, {
+    text: "Deactivated (3)",
+    href: "/user-admin/deactivated",
+    current: (currentSubSection == "deactivated")
+  }]
+}) }}

app/views/user-admin/change.html

@@ -6,7 +6,7 @@
 
 {% block beforeContent %}
   {{ backLink({
-    href: "/user-admin/index1",
+    href: "/user-admin",
     text: "Back"
   }) }}
 {% endblock %}

app/views/user-admin/deactivated.html

@@ -8,6 +8,8 @@
 
 
 {% set currentSection = "manage-users" %}
+{% set currentSubSection = "deactivated" %}
+
 
 {% block content %}
   <div class="nhsuk-grid-row">
@@ -19,6 +21,11 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
         "href": "/user-admin/add-user"
       }) }}
 
+      <div class="nhsuk-inset-text">
+        <span class="nhsuk-u-visually-hidden">Information: </span>
+
+            <p>For security, we deactivate users who have not logged in for 90 days. <a href="/user-admin/reactivate-all">Reactivate users (2)</a></p>
+      </div>
 
       <div class="app-filters nhsuk-u-margin-top-5">
         <form action="/user-admin" method="get" novalidate>
@@ -37,37 +44,17 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
       </div>
       <br>
 
-      <p>For security, we deactivate users who have not logged in for 90 days. <a href="/user-admin/reactivate-all">Reactivate users (2)</a></p>
-
-<br>
 
 
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-full">
 
-      <nav class="x-govuk-secondary-navigation" aria-label="Secondary menu">
-        <ul class="x-govuk-secondary-navigation__list">
-            <li class="x-govuk-secondary-navigation__list-item ">
-            <a class="x-govuk-secondary-navigation__link" href="/user-admin" aria-current=page>
-              Active (2)
-            </a>
-          </li>
-          <li class="x-govuk-secondary-navigation__list-item x-govuk-secondary-navigation__list-item--current">
-            <a class="x-govuk-secondary-navigation__link" href="/user-admin/deactivated">
-              Deactivated (3)
-            </a>
-          </li>
-
-        </ul>
-      </nav>
-
-
+          {% include "user-admin/_secondary-nav.html" %}
 
 
           <table class="nhsuk-table-responsive" role="table">
 
-            <br>
-
+          <br>
 
             <caption class="nhsuk-table__caption">3 Deactivated users</caption>
 
@@ -101,11 +88,11 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
 
               <tr role="row" class="nhsuk-table__row">
                 <td class="nhsuk-table__cell">
-                  Jane Doe
+                    Adam Atkins
               </td>
 
                 <td class="nhsuk-table__cell">
-                  jane.doe@nhs.net
+                  adam.atkins@nhs.net
               </td>
 
               <td class="nhsuk-table__cell">
@@ -125,13 +112,12 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
 
                 <tr role="row" class="nhsuk-table__row">
                     <td class="nhsuk-table__cell">
-                        Wallace West
+                        Alice Benson
                   </td>
 
                     <td class="nhsuk-table__cell">
-                    wallace.west@nhs.net
+                    alice.benson@nhs.net
                   </td>
-
                   <td class="nhsuk-table__cell">
                       Yes
                   </td>
@@ -144,8 +130,7 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
                   <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
                     <a class="nhsuk-link" href="/user-admin/reactivate">Reactivate</a>
                   </td>
-                    </tr>
-
+                </tr>
                 <tr role="row" class="nhsuk-table__row">
                     <td class="nhsuk-table__cell">
                       Zack Phillips
@@ -154,7 +139,6 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
                     <td class="nhsuk-table__cell">
                     [email protected]
                   </td>
-
                   <td class="nhsuk-table__cell">
                       Yes
                   </td>

app/views/user-admin/index.html

@@ -8,6 +8,7 @@
 
 
 {% set currentSection = "manage-users" %}
+{% set currentSubSection = "active" %}
 
 {% block content %}
   <div class="nhsuk-grid-row">
@@ -23,6 +24,12 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
         "href": "/user-admin/add-user"
       }) }}
 
+      <div class="nhsuk-inset-text">
+        <span class="nhsuk-u-visually-hidden">Information: </span>
+
+            <p>For security, we deactivate users who have not logged in for 90 days. <a href="/user-admin/reactivate-all">Reactivate users (2)</a></p>
+      </div>
+
 
       <div class="app-filters nhsuk-u-margin-top-5">
         <form action="/user-admin" method="get" novalidate>
@@ -42,28 +49,12 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
 
       <br>
 
-      <p>For security, we deactivate users who have not logged in for 90 days. <a href="/user-admin/reactivate-all">Reactivate users (2)</a></p>
 
-<br>
 
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-full">
 
-      <nav class="x-govuk-secondary-navigation" aria-label="Secondary menu">
-        <ul class="x-govuk-secondary-navigation__list">
-          <li class="x-govuk-secondary-navigation__list-item x-govuk-secondary-navigation__list-item--current">
-            <a class="x-govuk-secondary-navigation__link" href="/user-admin/index" aria-current=page>
-              Active ({{ totalUsers }})
-            </a>
-          </li>
-          <li class="x-govuk-secondary-navigation__list-item ">
-            <a class="x-govuk-secondary-navigation__link" href="/user-admin/deactivated">
-              Deactivated (3)
-            </a>
-          </li>
-
-        </ul>
-      </nav>
+          {% include "user-admin/_secondary-nav.html" %}
 
       {% if totalUsers > 0 %}