Explicit endpoints returning the Login and BackOffice logos and background (#17696)

* Created explicit endpoints returning the login image instead of leaking the configuration. Thereby some hardcoded values have been changed, but the url will now be the same every time.

* Remove magic concatenation for action lookup

* remove unused backoffice asset (login.jpg)

* remove unused umbraco logo assets

* add manifest handlers

* add mock handlers for the `security/back-office/graphics` endpoints to the backoffice

* add mock handlers for the `security/back-office/graphics` endpoints to the login screen

* chore: update msw service worker

* feat: make static assets available for consumption without copying them from the login project

* update consts with new location for static assets

* feat: prefix login assets with `login-`

* remove unused asset `logo.png`

* feat: introduce a `/back-office/graphics/logo` endpoint to serve the logo "mark" used throughout all applications

* feat: use the alternative logo for disabled javascript warning

* feat: use the umbraco logo on the NoNodes.cshtml page

* Do not expose the new readme in the package

* feat: add logo.svg

* feat: add `umb-app-logo` element to display the backoffice logo including server url and appropriate tags

* feat: use the new `umb-app-logo` element relevant places and make sure to add the serverUrl in front of other graphics

* feat: move logic to connectedCallback to prevent error from non-existing element

* revert usage of HideBackOfficeLogo

* feat: add alt text to logos

* feat: add obsolete message and a hint to use BackOfficeLogo insted

---------

Co-authored-by: Sven Geusens <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

src/Umbraco.Cms.Api.Management/Controllers/Security/BackOfficeGraphicsController.cs

@@ -0,0 +1,74 @@
+using Asp.Versioning;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.StaticFiles;
+using Microsoft.Extensions.Options;
+using Umbraco.Cms.Api.Management.Routing;
+using Umbraco.Cms.Core;
+using Umbraco.Cms.Core.Configuration.Models;
+
+namespace Umbraco.Cms.Api.Management.Controllers.Security;
+
+[ApiVersion("1.0")]
+[VersionedApiBackOfficeRoute(Common.Security.Paths.BackOfficeApi.EndpointTemplate + "/graphics")]
+[ApiExplorerSettings(IgnoreApi = true)]
+public class BackOfficeGraphicsController : Controller
+{
+    public const string LogoRouteName = nameof(BackOfficeGraphicsController) + "." + nameof(Logo);
+    public const string LoginBackGroundRouteName = nameof(BackOfficeGraphicsController) + "." + nameof(LoginBackground);
+    public const string LoginLogoRouteName = nameof(BackOfficeGraphicsController) + "." + nameof(LoginLogo);
+    public const string LoginLogoAlternativeRouteName = nameof(BackOfficeGraphicsController) + "." + nameof(LoginLogoAlternative);
+
+    private readonly IOptions<ContentSettings> _contentSettings;
+    private readonly IContentTypeProvider _contentTypeProvider;
+    private readonly IWebHostEnvironment _webHostEnvironment;
+
+    public BackOfficeGraphicsController(IOptions<ContentSettings> contentSettings, IOptions<StaticFileOptions> staticFileOptions, IWebHostEnvironment webHostEnvironment)
+    {
+        _contentSettings = contentSettings;
+        _webHostEnvironment = webHostEnvironment;
+        _contentTypeProvider = staticFileOptions.Value.ContentTypeProvider ?? new FileExtensionContentTypeProvider();
+    }
+
+    [HttpGet("login-background", Name = LoginBackGroundRouteName)]
+    [AllowAnonymous]
+    [MapToApiVersion("1.0")]
+    public IActionResult LoginBackground() => HandleFileRequest(_contentSettings.Value.LoginBackgroundImage);
+
+    [HttpGet("logo", Name = LogoRouteName)]
+    [AllowAnonymous]
+    [MapToApiVersion("1.0")]
+    public IActionResult Logo() => HandleFileRequest(_contentSettings.Value.BackOfficeLogo);
+
+    [HttpGet("login-logo", Name = LoginLogoRouteName)]
+    [AllowAnonymous]
+    [MapToApiVersion("1.0")]
+    public IActionResult LoginLogo() => HandleFileRequest(_contentSettings.Value.LoginLogoImage);
+
+    [HttpGet("login-logo-alternative", Name = LoginLogoAlternativeRouteName)]
+    [AllowAnonymous]
+    [MapToApiVersion("1.0")]
+    public IActionResult LoginLogoAlternative() => HandleFileRequest(_contentSettings.Value.LoginLogoImageAlternative);
+
+    private IActionResult HandleFileRequest(string virtualPath)
+    {
+        var filePath = Path.Combine(Constants.SystemDirectories.Umbraco, virtualPath).TrimStart(Constants.CharArrays.Tilde);
+        var fileInfo = _webHostEnvironment.WebRootFileProvider.GetFileInfo(filePath);
+
+        if (fileInfo.PhysicalPath is null)
+        {
+            return NotFound();
+        }
+
+        if (_contentTypeProvider.TryGetContentType(fileInfo.PhysicalPath, out var contentType))
+        {
+            Stream fileStream = fileInfo.CreateReadStream();
+            return File(fileStream, contentType);
+        }
+
+        return StatusCode(StatusCodes.Status412PreconditionFailed);
+    }
+}

src/Umbraco.Cms.StaticAssets/Umbraco.Cms.StaticAssets.csproj

@@ -72,6 +72,10 @@
     <Content Remove="$(LoginAssetsPath)\**" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Remove="wwwroot\umbraco\assets\README.md" />
+  </ItemGroup>
+
   <Target Name="RestoreLogin" Inputs="$(LoginProjectDirectory)package-lock.json" Outputs="$(LoginProjectDirectory)node_modules/.package-lock.json">
     <Message Importance="high" Text="Restoring Login NPM packages..." />
     <Exec Command="npm ci --no-fund --no-audit --prefer-offline" WorkingDirectory="$(LoginProjectDirectory)" />

src/Umbraco.Cms.StaticAssets/umbraco/UmbracoBackOffice/Index.cshtml

@@ -1,4 +1,5 @@
 @using Microsoft.Extensions.Options
+@using Umbraco.Cms.Api.Management.Controllers.Security
 @using Umbraco.Cms.Api.Management.Extensions
 @using Umbraco.Cms.Core.Configuration.Models
 @using Umbraco.Cms.Core.Logging
@@ -11,13 +12,12 @@
 @inject IJsonSerializer JsonSerializer
 @inject IProfilerHtml ProfilerHtml
 @inject IOptions<GlobalSettings> GlobalSettings
-@inject IOptions<ContentSettings> ContentSettings
 
 @{
     bool.TryParse(Context.Request.Query["umbDebug"], out var isDebug);
     var backOfficePath = BackOfficePathGenerator.BackOfficePath;
     var backOfficeAssetsPath = BackOfficePathGenerator.BackOfficeAssetsPath;
-    var loginLogoImage = ContentSettings.Value.LoginLogoImage;
+    var loginLogoImageAlternative = Url.RouteUrl(BackOfficeGraphicsController.LoginLogoAlternativeRouteName, new {Version= "1"});
 }
 
 <!DOCTYPE html>
@@ -54,8 +54,8 @@
         }
     </style>
     <div id="noscript-container">
-        <h1 class="uui-h3" style="display: inline-flex; align-items: center; gap: 10px">
-            <img aria-hidden="true" alt="logo" src="@loginLogoImage" style="width: 100%" />
+        <h1 aria-hidden="true" class="uui-h3" style="display: inline-flex; align-items: center; gap: 10px">
+            <img alt="logo" src="@loginLogoImageAlternative" style="width: 100%" />
         </h1>
         <p>For full functionality of Umbraco CMS it is necessary to enable JavaScript.</p>
         <p>Here are the <a href="https://www.enable-javascript.com/" target="_blank" rel="noopener" style="text-decoration: underline;">instructions how to enable JavaScript in your web browser</a>.</p>

src/Umbraco.Cms.StaticAssets/umbraco/UmbracoLogin/Index.cshtml

@@ -1,5 +1,6 @@
 @using Microsoft.AspNetCore.Mvc.TagHelpers
 @using Microsoft.Extensions.Options;
+@using Umbraco.Cms.Api.Management.Controllers.Security
 @using Umbraco.Cms.Api.Management.Extensions
 @using Umbraco.Cms.Api.Management.Security
 @using Umbraco.Cms.Core.Configuration.Models
@@ -10,7 +11,6 @@
 @using Umbraco.Cms.Core.Serialization
 @using Umbraco.Cms.Web.Common.Hosting
 @using Umbraco.Extensions
-@inject IOptions<ContentSettings> ContentSettings
 @inject IOptions<SecuritySettings> SecuritySettings
 @inject IEmailSender EmailSender
 @inject IHostingEnvironment HostingEnvironment
@@ -23,9 +23,9 @@
 @{
     bool.TryParse(Context.Request.Query["umbDebug"], out var isDebug);
     var backOfficePath = GlobalSettings.Value.GetBackOfficePath(HostingEnvironment);
-    var loginLogoImage = ContentSettings.Value.LoginLogoImage;
-    var loginLogoImageAlternative = ContentSettings.Value.LoginLogoImageAlternative;
-    var loginBackgroundImage = ContentSettings.Value.LoginBackgroundImage;
+    var loginLogoImage = Url.RouteUrl(BackOfficeGraphicsController.LoginLogoRouteName, new {Version= "1"});
+    var loginLogoImageAlternative = Url.RouteUrl(BackOfficeGraphicsController.LoginLogoAlternativeRouteName, new {Version= "1"});
+    var loginBackgroundImage = Url.RouteUrl(BackOfficeGraphicsController.LoginBackGroundRouteName, new {Version= "1"});
     var usernameIsEmail = SecuritySettings.Value.UsernameIsEmail;
     var allowUserInvite = EmailSender.CanSendRequiredEmail();
     var allowPasswordReset = SecuritySettings.Value.AllowPasswordReset && EmailSender.CanSendRequiredEmail();
@@ -73,8 +73,8 @@
         }
     </style>
     <div id="noscript-container">
-        <h1 class="uui-h3" style="display: inline-flex; align-items: center; gap: 10px">
-            <img aria-hidden="true" alt="logo" src="@loginLogoImage" style="width: 100%" />
+        <h1 aria-hidden="true" class="uui-h3" style="display: inline-flex; align-items: center; gap: 10px">
+            <img alt="logo" src="@loginLogoImageAlternative" style="width: 100%" />
         </h1>
         <p>For full functionality of Umbraco CMS it is necessary to enable JavaScript.</p>
         <p>Here are the <a href="https://www.enable-javascript.com/" target="_blank" rel="noopener" style="text-decoration: underline;">instructions how to enable JavaScript in your web browser</a>.</p>

src/Umbraco.Cms.StaticAssets/umbraco/UmbracoWebsite/NoNodes.cshtml

@@ -1,4 +1,5 @@
 @using Microsoft.Extensions.Options
+@using Umbraco.Cms.Api.Management.Controllers.Security
 @using Umbraco.Cms.Core.Configuration.Models
 @using Umbraco.Cms.Core.Hosting
 @using Umbraco.Cms.Core.Routing
@@ -8,6 +9,7 @@
 @inject IOptions<GlobalSettings> globalSettings
 @{
     var backOfficePath = globalSettings.Value.GetBackOfficePath(hostingEnvironment);
+    var logoImage = Url.RouteUrl(BackOfficeGraphicsController.LogoRouteName, new {Version= "1"});
 }
 <!doctype html>
 <html class="no-js" lang="en">
@@ -26,7 +28,7 @@
         <article>
             <div>
                 <div class="logo" aria-hidden="true">
-                    <img alt="Umbraco" src="umbraco/backoffice/assets/umbraco_logomark_white.svg" width="91" height="91" />
+                    <img alt="logo" src="@logoImage" height="91"/>
                 </div>
 
                 <h1>Welcome to your Umbraco installation</h1>

src/Umbraco.Cms.StaticAssets/wwwroot/umbraco/assets/README.md

@@ -0,0 +1,16 @@
+# Umbraco static assets
+
+The files in this directory are static assets that are used by the Umbraco backoffice, installer, public-facing sites, and login screen. These files are served by the Umbraco backend and are not intended to be used by the front-end of your website.
+
+## Structure
+
+The assets are structured in the following way:
+
+| Name | Description                                                        | Usage                                                                           |
+| ---- |--------------------------------------------------------------------|---------------------------------------------------------------------------------|
+| `login.jpg` | The background image for the login screen.                         | /umbraco/management/api/v1/security/back-office/graphics/login-background       |
+| `logo.svg` | The Umbraco logo for the Backoffice and other public facing sites. | /umbraco/management/api/v1/security/back-office/graphics/logo                   |
+| `logo_dark.svg` | The Umbraco logo in dark mode for the login screen.                | /umbraco/management/api/v1/security/back-office/graphics/login-logo-alternative |
+| `logo_light.svg` | The Umbraco logo in light mode for the login screen.               | /umbraco/management/api/v1/security/back-office/graphics/login-logo             |
+
+All assets are linked up through the BackOfficeGraphicsController which uses the constants defined in [ContentSettings](../../../../Umbraco.Core/Configuration/Models/ContentSettings.cs).