Use shape when rendering Http errors to allow cusomization from the UI (

#14545)

src/OrchardCore.Modules/OrchardCore.Diagnostics/Controllers/DiagnosticsController.cs

@@ -1,27 +1,16 @@
-using System;
-using System.Net;
 using Microsoft.AspNetCore.Mvc;
+using OrchardCore.Diagnostics.ViewModels;
 
-namespace OrchardCore.Diagnostics.Controllers
+namespace OrchardCore.Diagnostics.Controllers;
+
+public class DiagnosticsController : Controller
 {
-    public class DiagnosticsController : Controller
+    [IgnoreAntiforgeryToken]
+    public IActionResult Error(int? status)
     {
-        [IgnoreAntiforgeryToken]
-        public IActionResult Error(int? status)
-        {
-            // Most commonly used error messages.
-            ViewData["StatusCode"] = status;
-            Enum.TryParse((status ?? 500).ToString(), true, out HttpStatusCode httpStatusCode);
-
+        // Most commonly used error messages.
+        ViewData["StatusCode"] = status;
 
-            return httpStatusCode switch
-            {
-                HttpStatusCode.Forbidden => View("Forbidden"),
-                HttpStatusCode.NotFound => View("NotFound"),
-                HttpStatusCode.BadRequest => View("BadRequest"),
-                HttpStatusCode.Unauthorized => View("Unauthorized"),
-                _ => View("Error"),
-            };
-        }
+        return View(new HttpErrorShapeViewModel(status));
     }
 }

src/OrchardCore.Modules/OrchardCore.Diagnostics/ViewModels/HttpErrorShapeViewModel.cs

@@ -0,0 +1,35 @@
+using System;
+using System.Net;
+using OrchardCore.DisplayManagement.Views;
+
+namespace OrchardCore.Diagnostics.ViewModels;
+
+public class HttpErrorShapeViewModel : ShapeViewModel
+{
+    private const string ShapeType = "HttpError";
+
+    public int? Code { get; set; }
+
+    public HttpStatusCode? HttpStatusCode { get; }
+
+    public HttpErrorShapeViewModel(int? code)
+    {
+        Code = code;
+
+        // The type name is 'HttpError', which means any Http status code will be handled by the 'HttpError.cshtml' or 'HttpError.liquid'.
+        Metadata.Type = ShapeType;
+
+        if (code.HasValue && Enum.TryParse<HttpStatusCode>(Code.ToString(), out var httpStatusCode))
+        {
+            HttpStatusCode = httpStatusCode;
+
+            // Assign an alternative for every status-code to enable the customization for each status.
+
+            // (ex. 'HttpError-404.cshtml' or 'HttpError-404.liquid')
+            Metadata.Alternates.Add($"{ShapeType}__{Code}");
+
+            // (ex. 'HttpError-NotFound.cshtml' or 'HttpError-NotFound.liquid')
+            Metadata.Alternates.Add($"{ShapeType}__{httpStatusCode}");
+        }
+    }
+}

src/OrchardCore.Modules/OrchardCore.Diagnostics/Views/Diagnostics/Error.cshtml

@@ -1 +1 @@
-<h1>@T["An error occurred while executing this request."]</h1>
+@await DisplayAsync(Model)

src/OrchardCore.Modules/OrchardCore.Diagnostics/Views/Diagnostics/BadRequest.cshtml → src/OrchardCore.Modules/OrchardCore.Diagnostics/Views/HttpError-BadRequest.cshtml

@@ -1 +1 @@
-<h1>@T["Your browser sent a request that this server could not understand."]</h1>
+<h1>@T["Your browser sent a request that this server could not understand."]</h1>

src/OrchardCore.Modules/OrchardCore.Diagnostics/Views/HttpError.cshtml

@@ -0,0 +1,3 @@
+@model OrchardCore.Diagnostics.ViewModels.HttpErrorShapeViewModel
+
+<h1>@T["An error occurred while executing this request."]</h1>

src/docs/reference/README.md

@@ -117,6 +117,7 @@ Here's a categorized overview of all built-in Orchard Core features at a glance.
 - [Email](modules/Email/README.md)
 - [Redis](modules/Redis/README.md)
 - [Deployment](modules/Deployment/README.md)
+- [Diagnostics](modules/Diagnostics/README.md)
 - [Remote Deployment](modules/Deployment.Remote/README.md)
 - [Sms](modules/Sms/README.md)
 

src/docs/reference/modules/Diagnostics/README.md

@@ -0,0 +1,34 @@
+# Diagnostics (`OrchardCore.Diagnostics`)
+
+## Purpose
+
+Enables you to present HTTP errors in a personalized style and offers a means to modify the response of particular HTML errors. By default, we utilizes the following templates.
+
+| Template | Description |
+| --------- | ----------- |
+| `HttpError__BadRequest` | Generates the `400` HTTP error page. You can adjust its appearance by modifying the `HttpError-BadRequest.cshtml` or `HttpError-BadRequest.liquid` views. |
+| `HttpError__Forbidden` | Generates the `403` HTTP error page. You can adjust its appearance by modifying the `HttpError-Forbidden.cshtml` or `HttpError-Forbidden.liquid` views. |
+| `HttpError__NotFound` | Generates the `404` HTTP error page. You can adjust its appearance by modifying the `HttpError-NotFound.cshtml` or `HttpError-NotFound.liquid` views. |
+| `HttpError__Unauthorized` | Generates the `401` HTTP error page. You can adjust its appearance by modifying the `HttpError-Unauthorized.cshtml` or `HttpError-Unauthorized.liquid` views. |
+| `HttpError__HttpStatusCode` | Fallback template which generates the HTTP error page when no explicit template defined (ex, `HttpError-MethodNotAllowed.cshtml`). You can adjust its appearance by modifying the `HttpError.cshtml` or `HttpError.liquid` views. |
+
+
+### Example
+
+To alter the presentation of a particular HTTP status code, you can easily create a template within your theme that corresponds to the HTTP status code. For instance, if you wish to customize the 404 error page, you can achieve this by creating a template in your theme named `HttpError-NotFound.cshtml` or `HttpError-NotFound.liquid` as outlined below.
+
+```
+<h1>@T["The page could not be found."]</h1>
+```
+
+We utilize a template named `HttpError` to structure the default output of the undefined error.
+
+## Utilizing the Templates Feature for Customizing Error Pages
+
+You can utilize the [Templates](../Templates/README.md) feature to modify the appearance of your error pages.
+
+To illustrate, if you want to alter the view of the `403 (Forbidden)` page using the Template feature, create a new Template named `HttpError__Forbidden` and insert your customized HTML as follows:
+
+```
+<h2 class="text-danger">{{ "You do not have access permission to this page." | t }}</h2>
+```

src/docs/releases/1.8.0.md

@@ -12,9 +12,9 @@ The `TheAdmin` theme was upgraded to Bootstrap 5.3.2. Here is a list of the brea
  - The `darkmode` theme is now called `dark`.
  - The `default` theme is now called `light`.
  - By default, the theme is set to `auto` which allows us to use the default device color preference.
- - Metrial-icons are no longer included.
+ - Material-icons are no longer included.
  - The `DarkModeService.cs` was replaced with `ThemeTogglerService`.
- - The prperty named `DisplayDarkMode` in `AdminSettings` was replaced with `DisplayThemeToggler`.
+ - The property named `DisplayDarkMode` in `AdminSettings` was replaced with `DisplayThemeToggler`.
  - Bootstrap is no longer compiled in `TheAdmin.css`. Bootstrap are loaded independently for performance and maintainability reasons.
 
 ### Workflow Module
@@ -32,6 +32,12 @@ A new option for restarting a specific Workflow instance has been incorporated,
 
  The `NavbarTop` zone is no longer used in the `TheAdmin` or `TheTheme` themes. Follow the Navbar details below on how to inject custom menu items in the navbar.
 
+### Diagnostics Module
+
+The HTTP error views are now in the form of shapes. If you've made customizations to error views within your theme, you should search for `BadRequest`, `Forbidden`, `NotFound`, and `Unauthorized` views in either `YourTheme/Views/OrchardCore.Diagnostics/Diagnostics` or `YourTheme/Views/Shared` and relocate them to `YourTheme/Views`. Afterwards, append `HttpError-` to their names. For instance, `NotFound.cshtml` should be renamed to `HttpError-NotFound.cshtml`.
+
+Additionally, if you've customized the `Error.cshtml` view, it should be renamed to `HttpError.cshtml` since it acts as the default template for error pages.
+
 ## Change Logs
 
 ### TheTheme Theme