umbraco · iOvergaard · Oct 23, 2023 · Jul 19, 2023 · Jul 19, 2023 · Jul 20, 2023
diff --git a/build/azure-pipelines.yml b/build/azure-pipelines.yml
@@ -88,6 +88,20 @@ stages:
               gulpFile: src/Umbraco.Web.UI.Client/gulpfile.js
               targets: coreBuild
               workingDirectory: src/Umbraco.Web.UI.Client
+          - task: npm@1
+            displayName: Run npm ci
+            inputs:
+              command: custom
+              workingDir: src/Umbraco.Web.UI.Login
+              verbose: false
+              customCommand: ci
+          - task: npm@1
+            displayName: Run npm build
+            inputs:
+              command: custom
+              workingDir: src/Umbraco.Web.UI.Login
+              verbose: false
+              customCommand: run build
           - task: UseDotNet@2
             displayName: Use .NET $(dotnetVersion)
             inputs:

diff --git a/src/Umbraco.Cms.StaticAssets/Umbraco.Cms.StaticAssets.csproj b/src/Umbraco.Cms.StaticAssets/Umbraco.Cms.StaticAssets.csproj
@@ -25,6 +25,8 @@
   <Target Name="BuildBelle">
     <Exec WorkingDirectory="$(ProjectDir)..\Umbraco.Web.UI.Client\" Command="npm ci --no-fund --no-audit --prefer-offline" />
     <Exec WorkingDirectory="$(ProjectDir)..\Umbraco.Web.UI.Client\" Command="npm run build:skip-tests" />
+    <Exec WorkingDirectory="$(ProjectDir)..\Umbraco.Web.UI.Login\" Command="npm ci --no-fund --no-audit --prefer-offline" />
+    <Exec WorkingDirectory="$(ProjectDir)..\Umbraco.Web.UI.Login\" Command="npm run build" />
   </Target>
 
   <Target Name="CleanBellePreconditions" AfterTargets="Clean" Condition="'$(UmbracoBuild)' == ''">

diff --git a/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoBackOffice/AuthorizeUpgrade.cshtml b/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoBackOffice/AuthorizeUpgrade.cshtml
@@ -56,15 +56,6 @@
 
     @await Html.BareMinimumServerVariablesScriptAsync(backOfficeServerVariables)
 
-    <script type="text/javascript">
-    document.angularReady = function (app) {
-
-        @await Html.AngularValueExternalLoginInfoScriptAsync(externalLogins, ViewData.GetExternalSignInProviderErrors()!)
-        @Html.AngularValueResetPasswordCodeInfoScript(ViewData[ViewDataExtensions.TokenPasswordResetCode]!)
-
-    }
-    </script>
-
     @*And finally we can load in our angular app*@
     <script type="text/javascript" src="lib/lazyload-js/LazyLoad.min.js"></script>
     <script src="@Url.GetUrlWithCacheBust("Application", "BackOffice", null!, hostingEnvironment, umbracoVersion, runtimeMinifier)"></script>

diff --git a/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoBackOffice/Default.cshtml b/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoBackOffice/Default.cshtml
@@ -1,12 +1,10 @@
 @using Microsoft.Extensions.Options;
 @using System.Globalization
-@using Umbraco.Cms.Core
 @using Umbraco.Cms.Core.Configuration
 @using Umbraco.Cms.Core.Configuration.Models
 @using Umbraco.Cms.Core.Hosting
 @using Umbraco.Cms.Core.Logging
 @using Umbraco.Cms.Core.Routing
-@using Umbraco.Cms.Core.Services
 @using Umbraco.Cms.Core.WebAssets
 @using Umbraco.Cms.Infrastructure.WebAssets
 @using Umbraco.Cms.Web.BackOffice.Controllers
@@ -18,7 +16,6 @@
 @inject IOptions<GlobalSettings> globalSettings
 @inject IRuntimeMinifier runtimeMinifier
 @inject IProfilerHtml profilerHtml
-@inject IIconService IconService
 @inject IBackOfficeExternalLoginProviders externalLogins
 @{
     bool.TryParse(Context.Request.Query["umbDebug"], out bool isDebug);
@@ -27,7 +24,7 @@
 
 <!DOCTYPE html>
 
-<html lang="@CultureInfo.CurrentCulture.Name">
+<html lang="@CultureInfo.CurrentCulture.Name.ToLowerInvariant()">
 <head>
     <base href="@backOfficePath.EnsureEndsWith('/')" />
     <meta charset="utf-8">
@@ -41,9 +38,11 @@
 
     @Html.Raw(await runtimeMinifier.RenderCssHereAsync(BackOfficeWebAssets.UmbracoInitCssBundleName))
 
+    <link rel="stylesheet" href="~/umbraco/login/style.css" asp-append-version="true" />
+    <script type="module" src="~/umbraco/login/external.js" asp-append-version="true"></script>
+    <script type="module" src="~/umbraco/login/index.js" asp-append-version="true"></script>
 </head>
 <body ng-class="{'touch':touchDevice, 'emptySection':emptySection, 'umb-drawer-is-visible':drawer.show, 'umb-tour-is-visible': tour.show, 'tabbing-active':tabbingActive}" ng-controller="Umbraco.MainController" id="umbracoMainPageBody">
-
     <noscript>
         <div class="flex flex-wrap flex-column items-center justify-center" style="height: 100%">
             <h1 class="h3">
@@ -59,62 +58,64 @@
         </div>
     </noscript>
 
-    <div ng-hide="!authenticated" ng-cloak>
-
-        <div style="display: none;" id="mainwrapper" class="clearfix">
+    <umb-backoffice-icon-registry>
+        <div ng-hide="!authenticated" ng-cloak>
 
-            <umb-app-header></umb-app-header>
+            <div style="display: none;" id="mainwrapper" class="clearfix">
 
-            <div class="umb-app-content">
+                <umb-app-header></umb-app-header>
 
-                <umb-navigation></umb-navigation>
+                <div class="umb-app-content">
 
-                <section id="contentwrapper">
+                    <umb-navigation></umb-navigation>
 
-                    <div id="contentcolumn">
-                        <div class="umb-editor" ng-view></div>
-                    </div>
+                    <section id="contentwrapper">
 
-                </section>
+                        <div id="contentcolumn">
+                            <div class="umb-editor" ng-view></div>
+                        </div>
 
-            </div>
-
-        </div>
+                    </section>
 
-        <umb-tour ng-if="tour.show"
-                  model="tour">
-        </umb-tour>
+                </div>
 
-        <!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px  -->
-        <umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
-
-        <umb-search ng-attr-umb-focus-lock="true" ng-if="search.show" on-close="closeSearch()"></umb-search>
-
-    </div>
+            </div>
 
-    <umb-notifications></umb-notifications>
+            <umb-tour ng-if="tour.show"
+                      model="tour">
+            </umb-tour>
 
-    <umb-backdrop ng-if="backdrop.show || infiniteMode"
-                  backdrop-opacity="backdrop.opacity"
-                  highlight-element="backdrop.element"
-                  highlight-prevent-click="backdrop.elementPreventClick"
-                  disable-events-on-click="backdrop.disableEventsOnClick">
-    </umb-backdrop>
+            <!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px  -->
+            <umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
 
-    <umb-overlay ng-if="overlay.show"
-                 model="overlay"
-                 position="{{overlay.position}}"
-                 size="overlay.size"
-                 view="overlay.view"
-                 name="overlay.name"
-                 parent-scope="overlay.parentScope">
-    </umb-overlay>
+            <umb-search ng-attr-umb-focus-lock="true" ng-if="search.show" on-close="closeSearch()"></umb-search>
 
-    <umb-editors ng-show="infiniteMode"></umb-editors>
+        </div>
 
-    <umb-login ng-if="login.show"
-               on-login="hideLoginScreen()">
-    </umb-login>
+        <umb-notifications></umb-notifications>
+
+        <umb-backdrop ng-if="backdrop.show || infiniteMode"
+                      backdrop-opacity="backdrop.opacity"
+                      highlight-element="backdrop.element"
+                      highlight-prevent-click="backdrop.elementPreventClick"
+                      disable-events-on-click="backdrop.disableEventsOnClick">
+        </umb-backdrop>
+
+        <umb-overlay ng-if="overlay.show"
+                     model="overlay"
+                     position="{{overlay.position}}"
+                     size="overlay.size"
+                     view="overlay.view"
+                     name="overlay.name"
+                     parent-scope="overlay.parentScope">
+        </umb-overlay>
+
+        <umb-editors ng-show="infiniteMode"></umb-editors>
+
+        <umb-login ng-if="login.show"
+                   on-login="hideLoginScreen()">
+        </umb-login>
+    </umb-backoffice-icon-registry>
 
     @await Html.BareMinimumServerVariablesScriptAsync(backOfficeServerVariables)
 

diff --git a/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoLogin/Index.cshtml b/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoLogin/Index.cshtml
@@ -0,0 +1,76 @@
+@using System.Globalization
+@using Microsoft.AspNetCore.Routing
+@using Microsoft.Extensions.Options;
+@using Umbraco.Cms.Core
+@using Umbraco.Cms.Core.Configuration.Models
+@using Umbraco.Cms.Core.Hosting
+@using Umbraco.Cms.Core.Mail
+@using Umbraco.Cms.Web.BackOffice.Controllers
+@using Umbraco.Cms.Web.BackOffice.Security
+@using Umbraco.Extensions
+@inject IOptions<ContentSettings> ContentSettings
+@inject IOptions<SecuritySettings> SecuritySettings
+@inject IEmailSender EmailSender
+@inject IHostingEnvironment HostingEnvironment
+@inject IOptions<GlobalSettings> GlobalSettings
+@inject IBackOfficeExternalLoginProviders ExternalLogins
+@inject LinkGenerator LinkGenerator
+@{
+    var backOfficePath = GlobalSettings.Value.GetBackOfficePath(HostingEnvironment);
+    var loginLogoImage = ContentSettings.Value.LoginLogoImage;
+    var loginBackgroundImage = ContentSettings.Value.LoginBackgroundImage;
+    var usernameIsEmail = SecuritySettings.Value.UsernameIsEmail;
+    var allowUserInvite = EmailSender.CanSendRequiredEmail();
+    var allowPasswordReset = SecuritySettings.Value.AllowPasswordReset && EmailSender.CanSendRequiredEmail();
+    var disableLocalLogin = ExternalLogins.HasDenyLocalLogin();
+    var externalLoginsUrl = LinkGenerator.GetPathByAction(nameof(BackOfficeController.ExternalLogin), ControllerExtensions.GetControllerName<BackOfficeController>(), new { area = Constants.Web.Mvc.BackOfficeArea });
+    var externalLoginProviders = await ExternalLogins.GetBackOfficeProvidersAsync();
+}
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
+<!DOCTYPE html>
+<html lang="@CultureInfo.CurrentCulture.Name.ToLowerInvariant()">
+    <head>
+        <meta charset="UTF-8"/>
+        <base href="@backOfficePath.EnsureEndsWith('/')"/>
+        <link rel="icon" type="image/svg+xml" href="~/umbraco/login/favicon.svg"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>Umbraco</title>
+        <link rel="stylesheet" href="~/umbraco/login/style.css" asp-append-version="true" />
+        <script type="module" src="~/umbraco/login/external.js" asp-append-version="true"></script>
+        <script type="module" src="~/umbraco/login/index.js" asp-append-version="true"></script>
+        <style>
+          body {
+            margin: 0;
+            padding: 0;
+          }
+        </style>
+    </head>
+
+    <body class="uui-font uui-text" style="margin: 0; padding: 0; overflow: hidden">
+        <umb-backoffice-icon-registry>
+            <umb-auth
+                return-url="@backOfficePath"
+                logo-image="@loginLogoImage"
+                background-image="@loginBackgroundImage"
+                username-is-email="@usernameIsEmail"
+                allow-user-invite="@allowUserInvite"
+                allow-password-reset="@allowPasswordReset"
+                disable-local-login="@disableLocalLogin">
+                @foreach (var provider in externalLoginProviders)
+                {
+                    <umb-external-login-provider
+                        slot="external"
+                        display-name="@provider.AuthenticationScheme.DisplayName"
+                        provider-name="@provider.ExternalLoginProvider.AuthenticationType"
+                        icon="@provider.ExternalLoginProvider.Options.Icon"
+                        external-login-url="@externalLoginsUrl"
+                        button-look="@provider.ExternalLoginProvider.Options.ButtonLook.ToString().ToLowerInvariant()"
+                        button-color="@provider.ExternalLoginProvider.Options.ButtonColor.ToString().ToLowerInvariant()"
+                        custom-view="@provider.ExternalLoginProvider.Options.CustomBackOfficeView">
+                    </umb-external-login-provider>
+                }
+            </umb-auth>
+        </umb-backoffice-icon-registry>
+    </body>
+</html>
diff --git a/src/Umbraco.Core/Constants-Web.cs b/src/Umbraco.Core/Constants-Web.cs
@@ -54,6 +54,7 @@ public const string
             public const string BackOfficeArea = "UmbracoBackOffice"; // Used for area routes of non-api controllers
             public const string BackOfficeApiArea = "UmbracoApi"; // Same name as v8 so all routing remains the same
             public const string BackOfficeTreeArea = "UmbracoTrees"; // Same name as v8 so all routing remains the same
+            public const string BackOfficeLoginArea = "UmbracoLogin"; // Used for area routes of non-api controllers for login
         }
 
         public static class Routing

diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/da.xml b/src/Umbraco.Core/EmbeddedResources/Lang/da.xml
@@ -834,6 +834,7 @@
     <key alias="sort">Sortér</key>
     <key alias="status">Status</key>
     <key alias="submit">Indsend</key>
+    <key alias="success">Succes</key>
     <key alias="type">Type</key>
     <key alias="typeToSearch">Skriv for at søge...</key>
     <key alias="under">under</key>
@@ -1022,6 +1023,7 @@
     <key alias="instruction">Log ind nedenfor</key>
     <key alias="signInWith">Log ind med</key>
     <key alias="timeout">Din session er udløbet</key>
+    <key alias="userFailedLogin">Ups! Vi kunne ikke logge dig ind. Tjek at dit brugernavn og adgangskode er korrekt og prøv igen.</key>
     <key alias="bottomText">
       <![CDATA[<p style="text-align:right;">&copy; 2001 - %0% <br /><a href="https://umbraco.com" style="text-decoration: none" target="_blank" rel="noopener">umbraco.com</a></p> ]]></key>
     <key alias="forgottenPassword">Glemt adgangskode?</key>

diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
@@ -1075,6 +1075,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="instruction">Log in below</key>
     <key alias="signInWith">Sign in with</key>
     <key alias="timeout">Session timed out</key>
+    <key alias="userFailedLogin">Oops! We couldn't log you in. Please check your credentials and try again.</key>
     <key alias="bottomText">
       <![CDATA[<p style="text-align:right;">&copy; 2001 - %0% <br /><a href="https://umbraco.com" style="text-decoration: none" target="_blank" rel="noopener">Umbraco.com</a></p> ]]></key>
     <key alias="forgottenPassword">Forgotten password?</key>

diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
@@ -1104,6 +1104,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="instruction">Log in below</key>
     <key alias="signInWith">Sign in with</key>
     <key alias="timeout">Session timed out</key>
+    <key alias="userFailedLogin">Oops! We couldn't log you in. Please check your credentials and try again.</key>
     <key alias="bottomText">
       <![CDATA[<p style="text-align:right;">&copy; 2001 - %0% <br /><a href="https://umbraco.com" style="text-decoration: none" target="_blank" rel="noopener">Umbraco.com</a></p> ]]></key>
     <key alias="forgottenPassword">Forgotten password?</key>

diff --git a/src/Umbraco.Core/Models/UuiButtonColor.cs b/src/Umbraco.Core/Models/UuiButtonColor.cs
@@ -0,0 +1,15 @@
+namespace Umbraco.Cms.Core.Models;
+
+/// <summary>
+///     Option to set the color of a uui-button element.
+/// </summary>
+/// <remarks>
+///     See the UUI documentation for more details: https://uui.umbraco.com/?path=/story/uui-button--looks-and-colors.
+/// </remarks>
+public enum UuiButtonColor
+{
+    Default,
+    Positive,
+    Warning,
+    Danger
+}
diff --git a/src/Umbraco.Core/Models/UuiButtonLook.cs b/src/Umbraco.Core/Models/UuiButtonLook.cs
@@ -0,0 +1,16 @@
+namespace Umbraco.Cms.Core.Models;
+
+/// <summary>
+///     Option to set the look of a uui-button element.
+/// </summary>
+/// <remarks>
+///     See the UUI documentation for more details: https://uui.umbraco.com/?path=/story/uui-button--looks-and-colors.
+/// </remarks>
+public enum UuiButtonLook
+{
+    Default,
+    Primary,
+    Secondary,
+    Outline,
+    Placeholder
+}
diff --git a/src/Umbraco.Infrastructure/WebAssets/BackOfficeWebAssets.cs b/src/Umbraco.Infrastructure/WebAssets/BackOfficeWebAssets.cs
@@ -59,8 +59,6 @@ public void CreateBundles()
             BundlingOptions.NotOptimizedAndComposite,
             FormatPaths(
                 "assets/css/umbraco.min.css",
-                "lib/umbraco-ui/uui-css/dist/custom-properties.css",
-                "lib/umbraco-ui/uui-css/dist/uui-text.css",
                 "lib/bootstrap-social/bootstrap-social.css",
                 "lib/font-awesome/css/font-awesome.min.css"));
 

diff --git a/src/Umbraco.Infrastructure/WebAssets/JsInitialize.js b/src/Umbraco.Infrastructure/WebAssets/JsInitialize.js
@@ -1,5 +1,5 @@
 [
-    
+
     'lib/jquery/jquery.min.js',
     'lib/jquery-ui/jquery-ui.min.js',
     'lib/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js',
@@ -35,8 +35,6 @@
     'lib/umbraco/NamespaceManager.js',
     'lib/umbraco/LegacySpeechBubble.js',
 
-    'lib/umbraco-ui/uui/dist/uui.min.js',
-
     'js/utilities.min.js',
 
     'js/app.min.js',
@@ -48,5 +46,5 @@
     'js/umbraco.interceptors.min.js',
     'js/umbraco.controllers.min.js',
     'js/routes.min.js',
-    'js/init.min.js'    
+    'js/init.min.js'
 ]