HEEDLS-562 Add cancel link component and replace back links with it

DigitalLearningSolutions.Web/Styles/shared/components/cancelLink.scss

@@ -0,0 +1,15 @@
+@import "~nhsuk-frontend/packages/core/all";
+
+.nhsuk-back-link__link {
+  padding-left: 24px;
+}
+
+// Slightly modified version of the nhsuk-icon__chevron-left css used
+// for the NHS back link. Values so that the X svg lines up nicely
+.nhsuk-icon__close {
+  height: 24px;
+  left: -2px;
+  position: absolute;
+  top: -1px;
+  width: 24px;
+}

DigitalLearningSolutions.Web/ViewComponents/BackLinkViewComponent.cs

@@ -6,7 +6,12 @@
 
     public class BackLinkViewComponent : ViewComponent
     {
-        public IViewComponentResult Invoke(string aspController, string aspAction, Dictionary<string, string> aspAllRouteData, string linkText)
+        public IViewComponentResult Invoke(
+            string aspController,
+            string aspAction,
+            Dictionary<string, string> aspAllRouteData,
+            string linkText
+        )
         {
             return View(new LinkViewModel(aspController, aspAction, linkText, aspAllRouteData));
         }

DigitalLearningSolutions.Web/ViewComponents/CancelLinkViewComponent.cs

@@ -0,0 +1,18 @@
+namespace DigitalLearningSolutions.Web.ViewComponents
+{
+    using System.Collections.Generic;
+    using DigitalLearningSolutions.Web.ViewModels.Common.ViewComponents;
+    using Microsoft.AspNetCore.Mvc;
+
+    public class CancelLinkViewComponent : ViewComponent
+    {
+        public IViewComponentResult Invoke(
+            string aspController,
+            string aspAction,
+            Dictionary<string, string> aspAllRouteData
+        )
+        {
+            return View(new LinkViewModel(aspController, aspAction, "Cancel", aspAllRouteData));
+        }
+    }
+}

DigitalLearningSolutions.Web/ViewModels/Register/RegisterDelegateByCentre/SummaryViewModel.cs

@@ -30,6 +30,5 @@ public SummaryViewModel(DelegateRegistrationByCentreData data)
         public bool ShouldSendEmail => WelcomeEmailDate != null;
         public string? JobGroup { get; set; }
         public IEnumerable<CustomFieldViewModel> CustomFields { get; set; } = new List<CustomFieldViewModel>();
-        public string PreviousAction => ShouldSendEmail ? "WelcomeEmail" : "Password";
     }
 }

DigitalLearningSolutions.Web/Views/ChangePassword/Index.cshtml

@@ -54,6 +54,6 @@
       <button class="nhsuk-button" type="submit">Change password</button>
     </form>
 
-      <vc:back-link asp-controller="MyAccount" asp-action="Index" asp-all-route-data="@null" link-text="Cancel"/>
+    <vc:cancel-link asp-controller="MyAccount" asp-action="Index" asp-all-route-data="@null" />
   </div>
 </div>

DigitalLearningSolutions.Web/Views/LearningPortal/Current/RemoveCurrentCourseConfirmation.cshtml

@@ -11,7 +11,7 @@
 }
 
 @section NavMenuItems {
-  <partial name="Shared/_NavMenuItems"/>
+  <partial name="Shared/_NavMenuItems" />
 }
 
 <div>
@@ -33,6 +33,6 @@
       </button>
     </form>
   </div>
-  
-  <vc:back-link asp-controller="LearningPortal" asp-action="Current" link-text="Cancel" />
+
+  <vc:cancel-link asp-controller="LearningPortal" asp-action="Current" />
 </div>

DigitalLearningSolutions.Web/Views/LearningPortal/Current/SetCompleteByDate.cshtml

@@ -15,21 +15,18 @@
 }
 
 @{
-  var exampleDate = @DateTime.Today + TimeSpan.FromDays(7);
+  var exampleDate = DateTime.Today + TimeSpan.FromDays(7);
   string prefillDay;
   string prefillMonth;
   string prefillYear;
-  if (Model.CompleteByValidationResult?.DateValid == false)
-  {
+  if (Model.CompleteByValidationResult?.DateValid == false) {
     prefillDay = Model.CompleteByValidationResult?.Day.ToString() ?? "";
     prefillMonth = Model.CompleteByValidationResult?.Month.ToString() ?? "";
     prefillYear = Model.CompleteByValidationResult?.Year.ToString() ?? "";
     prefillDay = prefillDay == "0" ? "" : prefillDay;
     prefillMonth = prefillMonth == "0" ? "" : prefillMonth;
     prefillYear = prefillYear == "0" ? "" : prefillYear;
-  }
-  else
-  {
+  } else {
     prefillDay = Model.CompleteByDate?.Day.ToString() ?? "";
     prefillMonth = Model.CompleteByDate?.Month.ToString() ?? "";
     prefillYear = Model.CompleteByDate?.Year.ToString() ?? "";
@@ -50,14 +47,12 @@
         <span class="nhsuk-hint" id="example-hint">
           For example, @exampleDate.Day @exampleDate.Month @exampleDate.Year. Leave the boxes blank to clear the complete by date.
         </span>
-        @if (Model is CurrentCourseViewModel)
-        {
+        @if (Model is CurrentCourseViewModel) {
           <span class="nhsuk-hint">
             Activities with a complete by date will remain on your 'Current courses' list until completed. Activities with no complete by date will be removed after 6 months of inactivity.
           </span>
         }
-        @if (Model.CompleteByValidationResult?.DateValid == false)
-        {
+        @if (Model.CompleteByValidationResult?.DateValid == false) {
           <span class="nhsuk-error-message" id="validation-message" role="alert">
             <span class="nhsuk-u-visually-hidden">Error:</span>@Model.CompleteByValidationResult?.ErrorMessage
           </span>
@@ -88,17 +83,14 @@
             </div>
           </div>
         </div>
-        @if (Model is CurrentCourseViewModel)
-        {
+        @if (Model is CurrentCourseViewModel) {
           <input name="progressId" type="hidden" value="@Model.ProgressId" />
-        }
-        else
-        {
+        } else {
           <input name="selfAssessmentId" type="hidden" value="@Model.Id" />
         }
       </fieldset>
       <button class="nhsuk-button nhsuk-u-margin-top-5" id="save-button" type="submit">Save changes</button>
     </form>
   </div>
-  <vc:back-link asp-controller="LearningPortal" asp-action="Current" link-text="Cancel" />
+  <vc:cancel-link asp-controller="LearningPortal" asp-action="Current" />
 </div>

DigitalLearningSolutions.Web/Views/MyAccount/EditDetails.cshtml

@@ -147,6 +147,6 @@
 </form>
 <div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-full">
-    <vc:back-link asp-controller="MyAccount" asp-action="Index" link-text="Cancel" />
+    <vc:cancel-link asp-controller="MyAccount" asp-action="Index" />
   </div>
 </div>

DigitalLearningSolutions.Web/Views/NotificationPreferences/UpdateNotificationPreferences.cshtml

@@ -1,6 +1,5 @@
 @using DigitalLearningSolutions.Web.Helpers
 @using DigitalLearningSolutions.Web.ViewModels.MyAccount
-
 @model UpdateNotificationPreferencesViewModel
 
 <link rel="stylesheet" href="@Url.Content("~/css/myAccount/updateNotificationPreferences.css")" asp-append-version="true">
@@ -9,8 +8,7 @@
   ViewData["Title"] = "Update Notification Preferences";
 }
 
-@if (User.IsDelegateOnlyAccount())
-{
+@if (User.IsDelegateOnlyAccount()) {
   ViewData["Application"] = "Learning Portal";
   @section NavMenuItems {
     <partial name="../LearningPortal/Shared/_NavMenuItems" />
@@ -30,8 +28,7 @@
         <div class="nhsuk-fieldset" aria-describedby="notification-hint">
           <div class="nhsuk-hint update-notification-hint" id="notification-hint">Please tick the boxes for all the notifications you would like to receive.</div>
           <div class="nhsuk-checkboxes">
-            @foreach (var (notification, index) in Model.Notifications.Select((item, index) => (item, index)))
-            {
+            @foreach (var (notification, index) in Model.Notifications.Select((item, index) => (item, index))) {
               <div class="nhsuk-checkboxes__item">
                 <input class="nhsuk-checkboxes__input"
                        id="notification-@index.ToString()"
@@ -55,7 +52,6 @@
       </div>
     </form>
 
-    <vc:back-link asp-controller="NotificationPreferences" asp-action="Index" link-text="Cancel" />
+    <vc:cancel-link asp-controller="NotificationPreferences" asp-action="Index" />
   </div>
 </div>
-

DigitalLearningSolutions.Web/Views/Register/LearnerInformation.cshtml

@@ -21,13 +21,13 @@
                                                    nameof(Model.Answer4),
                                                    nameof(Model.Answer5),
                                                    nameof(Model.Answer6)
-                                                 })"/>
+                                                 })" />
     }
-      
+
     <h1 class="nhsuk-heading-xl">Learner information</h1>
 
     <form class="nhsuk-u-margin-bottom-3" method="post" asp-action="LearnerInformation">
-      
+
       <vc:select-list
         asp-for="JobGroup"
         label="Job Group"
@@ -62,9 +62,10 @@
         }
       }
 
+      <a class="nhsuk-button nhsuk-button--secondary" asp-controller="Register" asp-action="PersonalInformation" role="button">Back</a>
       <button class="nhsuk-button" type="submit">Next</button>
     </form>
 
-    <vc:back-link asp-controller="Register" asp-action="PersonalInformation" link-text="Go back" />
+    <vc:cancel-link asp-controller="Home" asp-action="Index" />
   </div>
 </div>

DigitalLearningSolutions.Web/Views/Register/Password.cshtml

@@ -13,36 +13,35 @@
 <div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-full">
     @if (errorHasOccurred) {
-      <vc:error-summary order-of-property-names="@(new[] { nameof(Model.Password), nameof(Model.ConfirmPassword) })"/>
+      <vc:error-summary order-of-property-names="@(new[] { nameof(Model.Password), nameof(Model.ConfirmPassword) })" />
     }
 
     <h1 class="nhsuk-heading-xl">Create password</h1>
-
-    <form class="nhsuk-u-margin-bottom-3" method="post" asp-action="Password">
 
-      <vc:text-input
-        asp-for="Password"
-        label="Password"
-        populate-with-current-value="false"
-        type="password"
-        spell-check="false"
-        autocomplete="new-password"
-        hint-text="Your new password should have a minimum of 8 characters with at least 1 letter, 1 number and 1 symbol."
-        css-class="nhsuk-u-width-one-half" />
-
-      <vc:text-input
-        asp-for="ConfirmPassword"
-        label="Re-type password"
-        populate-with-current-value="false"
-        type="password"
-        spell-check="false"
-        autocomplete="new-password"
-        hint-text=""
-        css-class="nhsuk-u-width-one-half" />
+    <form class="nhsuk-u-margin-bottom-3" method="post" asp-action="Password">
 
+      <vc:text-input asp-for="Password"
+                     label="Password"
+                     populate-with-current-value="false"
+                     type="password"
+                     spell-check="false"
+                     autocomplete="new-password"
+                     hint-text="Your new password should have a minimum of 8 characters with at least 1 letter, 1 number and 1 symbol."
+                     css-class="nhsuk-u-width-one-half" />
+
+      <vc:text-input asp-for="ConfirmPassword"
+                     label="Re-type password"
+                     populate-with-current-value="false"
+                     type="password"
+                     spell-check="false"
+                     autocomplete="new-password"
+                     hint-text=""
+                     css-class="nhsuk-u-width-one-half" />
+
+      <a class="nhsuk-button nhsuk-button--secondary" asp-controller="Register" asp-action="LearnerInformation" role="button">Back</a>
       <button class="nhsuk-button" type="submit">Next</button>
     </form>
 
-    <vc:back-link asp-controller="Register" asp-action="LearnerInformation" link-text="Go back" />
+    <vc:cancel-link asp-controller="Home" asp-action="Index" />
   </div>
 </div>

DigitalLearningSolutions.Web/Views/Register/Summary.cshtml

@@ -28,11 +28,11 @@
           @Model.Centre
         </dd>
         <dd class="nhsuk-summary-list__actions">
-        @if (!Model.IsCentreSpecificRegistration) {
-          <a asp-action="PersonalInformation">
-            Change<span class="nhsuk-u-visually-hidden"> centre</span>
-          </a>
-        }
+          @if (!Model.IsCentreSpecificRegistration) {
+            <a asp-action="PersonalInformation">
+              Change<span class="nhsuk-u-visually-hidden"> centre</span>
+            </a>
+          }
         </dd>
       </div>
       <div class="nhsuk-summary-list__row">
@@ -106,7 +106,8 @@
 
     <form method="post" asp-action="Summary">
       <vc:terms-conditions asp-for="Terms" />
-      <button class="nhsuk-button" type="submit">Register</button>
+      <button class="nhsuk-button" type="submit">Submit</button>
     </form>
+    <vc:cancel-link asp-controller="Home" asp-action="Index" />
   </div>
 </div>

DigitalLearningSolutions.Web/Views/RegisterAdmin/LearnerInformation.cshtml

@@ -30,9 +30,10 @@
         default-option="Select a job group"
         select-list-options="@Model.JobGroupOptions" />
 
+      <a class="nhsuk-button nhsuk-button--secondary" asp-controller="RegisterAdmin" asp-action="PersonalInformation" role="button">Back</a>
       <button class="nhsuk-button" type="submit">Next</button>
     </form>
 
-    <vc:back-link asp-controller="RegisterAdmin" asp-action="PersonalInformation" link-text="Go back" />
+    <vc:cancel-link asp-controller="Home" asp-action="Index" />
   </div>
 </div>

DigitalLearningSolutions.Web/Views/RegisterAdmin/Password.cshtml

@@ -20,29 +20,28 @@
 
     <form class="nhsuk-u-margin-bottom-3" method="post" asp-action="Password">
 
-      <vc:text-input
-        asp-for="Password"
-        label="Password"
-        populate-with-current-value="false"
-        type="password"
-        spell-check="false"
-        autocomplete="new-password"
-        hint-text="Your new password should have a minimum of 8 characters with at least 1 letter, 1 number and 1 symbol."
-        css-class="nhsuk-u-width-one-half" />
-
-      <vc:text-input
-        asp-for="ConfirmPassword"
-        label="Re-type password"
-        populate-with-current-value="false"
-        type="password"
-        spell-check="false"
-        autocomplete="new-password"
-        hint-text=""
-        css-class="nhsuk-u-width-one-half" />
-
+      <vc:text-input asp-for="Password"
+                     label="Password"
+                     populate-with-current-value="false"
+                     type="password"
+                     spell-check="false"
+                     autocomplete="new-password"
+                     hint-text="Your new password should have a minimum of 8 characters with at least 1 letter, 1 number and 1 symbol."
+                     css-class="nhsuk-u-width-one-half" />
+
+      <vc:text-input asp-for="ConfirmPassword"
+                     label="Re-type password"
+                     populate-with-current-value="false"
+                     type="password"
+                     spell-check="false"
+                     autocomplete="new-password"
+                     hint-text=""
+                     css-class="nhsuk-u-width-one-half" />
+
+      <a class="nhsuk-button nhsuk-button--secondary" asp-controller="RegisterAdmin" asp-action="LearnerInformation" role="button">Back</a>
       <button class="nhsuk-button" type="submit">Next</button>
     </form>
 
-    <vc:back-link asp-controller="RegisterAdmin" asp-action="LearnerInformation" link-text="Go back" />
+    <vc:cancel-link asp-controller="Home" asp-action="Index" />
   </div>
 </div>

DigitalLearningSolutions.Web/Views/RegisterAdmin/Summary.cshtml

@@ -86,7 +86,8 @@
 
     <form method="post" asp-action="Summary">
       <vc:terms-conditions asp-for="Terms" />
-      <button class="nhsuk-button" type="submit">Register</button>
+      <button class="nhsuk-button" type="submit">Submit</button>
     </form>
+    <vc:cancel-link asp-controller="Home" asp-action="Index" />
   </div>
 </div>