V16-RC: Login screen cannot load public manifests (#19453)

* chore: disable notifications for global manifest loads

* fix: registers required contexts to load public manifests

* fix: specifically for localizations, load with the same cultures and weights as the backoffice itself does

* fix: set weight to +100 to make sure custom localization extensions are loaded first

* fix: remove 'welcome' fallback to avoid a flash of unlocalized content (FO"U"C)

* fix: starting <li> tag

Author: iOvergaard

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -16,7 +16,7 @@ export default {
 			'In order to improve Umbraco and add new functionality based on as relevant information as possible, we would like to collect system- and usage information from your installation.<br>Aggregate data will be shared on a regular basis as well as learnings from these metrics.<br>Hopefully, you will help us collect some valuable data.<br><br>We <strong>WILL NOT</strong> collect any personal data such as content, code, user information, and all data will be fully anonymized.',
 		basicLevelDescription: 'We will send an anonymized site ID, Umbraco version, and packages installed',
 		detailedLevelDescription:
-			'We will send: <ul>li>Anonymized site ID, Umbraco version, and packages installed.</li><li>Number of: Root nodes, Content nodes, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, Backoffice external login providers, and Property Editors in use.</li><li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li><li>Configuration settings: ModelsBuilder mode, if custom Umbraco path exists, ASP environment, whether the delivery API is enabled, and allows public access, and if you are in debug mode.</li></ul><em>We might change what we send on the Detailed level in the future. If so, it will be listed above.<br>By choosing "Detailed" you agree to current and future anonymized information being collected.</em>',
+			'We will send: <ul><li>Anonymized site ID, Umbraco version, and packages installed.</li><li>Number of: Root nodes, Content nodes, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, Backoffice external login providers, and Property Editors in use.</li><li>System information: Webserver, server OS, server framework, server OS language, and database provider.</li><li>Configuration settings: ModelsBuilder mode, if custom Umbraco path exists, ASP environment, whether the delivery API is enabled, and allows public access, and if you are in debug mode.</li></ul><em>We might change what we send on the Detailed level in the future. If so, it will be listed above.<br>By choosing "Detailed" you agree to current and future anonymized information being collected.</em>',
 		minimalLevelDescription: 'We will only send an anonymized site ID to let us know that the site exists.',
 	},
 	blockEditor: {

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/server-extension-registrator.controller.ts

@@ -34,7 +34,9 @@ export class UmbServerExtensionRegistrator extends UmbControllerBase {
 	 * @remark Users must have the BACKOFFICE_ACCESS permission to access this method.
 	 */
 	public async registerPrivateExtensions() {
-		const { data: packages } = await tryExecute(this, ManifestService.getManifestManifestPrivate());
+		const { data: packages } = await tryExecute(this, ManifestService.getManifestManifestPrivate(), {
+			disableNotifications: true,
+		});
 		if (packages) {
 			await this.#loadServerPackages(packages);
 		}
@@ -46,7 +48,9 @@ export class UmbServerExtensionRegistrator extends UmbControllerBase {
 	 * @remark Any user can access this method without any permissions.
 	 */
 	public async registerPublicExtensions() {
-		const { data: packages } = await tryExecute(this, ManifestService.getManifestManifestPublic());
+		const { data: packages } = await tryExecute(this, ManifestService.getManifestManifestPublic(), {
+			disableNotifications: true,
+		});
 		if (packages) {
 			await this.#loadServerPackages(packages);
 		}

src/Umbraco.Web.UI.Client/src/packages/core/localization/manifests.ts

@@ -4,7 +4,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.AR',
-		weight: -100,
+		weight: 100,
 		name: 'Arabic Backoffice UI Localization',
 		meta: {
 			culture: 'ar',
@@ -14,7 +14,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.BS',
-		weight: -100,
+		weight: 100,
 		name: 'Bosnian Backoffice UI Localization',
 		meta: {
 			culture: 'bs',
@@ -24,7 +24,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.CS',
-		weight: -100,
+		weight: 100,
 		name: 'Czech Backoffice UI Localization',
 		meta: {
 			culture: 'cs',
@@ -34,7 +34,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.CY',
-		weight: -100,
+		weight: 100,
 		name: 'Welsh Backoffice UI Localization',
 		meta: {
 			culture: 'cy',
@@ -44,7 +44,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.DA',
-		weight: -100,
+		weight: 100,
 		name: 'Danish Backoffice UI Localization',
 		meta: {
 			culture: 'da',
@@ -54,7 +54,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.DE',
-		weight: -100,
+		weight: 100,
 		name: 'German Backoffice UI Localization',
 		meta: {
 			culture: 'de',
@@ -64,7 +64,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.EN',
-		weight: -100,
+		weight: 100,
 		name: 'English (United Kingdom) Backoffice UI Localization',
 		meta: {
 			culture: 'en',
@@ -74,7 +74,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.EN_US',
-		weight: -100,
+		weight: 100,
 		name: 'English (United States) Backoffice UI Localization',
 		meta: {
 			culture: 'en-US',
@@ -84,7 +84,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.ES',
-		weight: -100,
+		weight: 100,
 		name: 'Spanish Backoffice UI Localization',
 		meta: {
 			culture: 'es',
@@ -94,7 +94,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.FR',
-		weight: -100,
+		weight: 100,
 		name: 'French Backoffice UI Localization',
 		meta: {
 			culture: 'fr',
@@ -104,7 +104,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.HE',
-		weight: -100,
+		weight: 100,
 		name: 'Hebrew Backoffice UI Localization',
 		meta: {
 			culture: 'he',
@@ -114,7 +114,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.HR',
-		weight: -100,
+		weight: 100,
 		name: 'Croatian Backoffice UI Localization',
 		meta: {
 			culture: 'hr',
@@ -124,7 +124,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.IT',
-		weight: -100,
+		weight: 100,
 		name: 'Italian Backoffice UI Localization',
 		meta: {
 			culture: 'it',
@@ -134,7 +134,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.JA',
-		weight: -100,
+		weight: 100,
 		name: 'Japanese Backoffice UI Localization',
 		meta: {
 			culture: 'ja',
@@ -144,7 +144,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.KO',
-		weight: -100,
+		weight: 100,
 		name: 'Korean Backoffice UI Localization',
 		meta: {
 			culture: 'ko',
@@ -154,7 +154,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.NB',
-		weight: -100,
+		weight: 100,
 		name: 'Norwegian Backoffice UI Localization',
 		meta: {
 			culture: 'nb',
@@ -164,7 +164,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.NL',
-		weight: -100,
+		weight: 100,
 		name: 'Dutch Backoffice UI Localization',
 		meta: {
 			culture: 'nl',
@@ -174,7 +174,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.PL',
-		weight: -100,
+		weight: 100,
 		name: 'Polish Backoffice UI Localization',
 		meta: {
 			culture: 'pl',
@@ -184,7 +184,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.PT',
-		weight: -100,
+		weight: 100,
 		name: 'Portuguese Backoffice UI Localization',
 		meta: {
 			culture: 'pt',
@@ -194,7 +194,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.PT_BR',
-		weight: -100,
+		weight: 100,
 		name: 'Portuguese (Brazil) Backoffice UI Localization',
 		meta: {
 			culture: 'pt-BR',
@@ -204,7 +204,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.RO',
-		weight: -100,
+		weight: 100,
 		name: 'Romanian Backoffice UI Localization',
 		meta: {
 			culture: 'ro',
@@ -214,7 +214,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.RU',
-		weight: -100,
+		weight: 100,
 		name: 'Russian Backoffice UI Localization',
 		meta: {
 			culture: 'ru',
@@ -224,7 +224,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.SV',
-		weight: -100,
+		weight: 100,
 		name: 'Swedish Backoffice UI Localization',
 		meta: {
 			culture: 'sv',
@@ -234,7 +234,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.TR',
-		weight: -100,
+		weight: 100,
 		name: 'Turkish Backoffice UI Localization',
 		meta: {
 			culture: 'tr',
@@ -244,7 +244,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.UK',
-		weight: -100,
+		weight: 100,
 		name: 'Ukrainian Backoffice UI Localization',
 		meta: {
 			culture: 'uk',
@@ -254,7 +254,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.ZH',
-		weight: -100,
+		weight: 100,
 		name: 'Chinese Backoffice UI Localization',
 		meta: {
 			culture: 'zh',
@@ -264,7 +264,7 @@ export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
 		alias: 'Umb.Localization.ZH_TW',
-		weight: -100,
+		weight: 100,
 		name: 'Chinese (Taiwan) Backoffice UI Localization',
 		meta: {
 			culture: 'zh-TW',

src/Umbraco.Web.UI.Login/src/components/pages/login.page.element.ts

@@ -127,7 +127,7 @@ export default class UmbLoginPageElement extends UmbLitElement {
     return html`
       <header id="header">
         <h1 id="greeting">
-          <umb-localize .key=${this.#greetingLocalizationKey}>Welcome</umb-localize>
+          <umb-localize .key=${this.#greetingLocalizationKey}></umb-localize>
         </h1>
         <slot name="subheadline"></slot>
       </header>

src/Umbraco.Web.UI.Login/src/controllers/slim-backoffice-initializer.ts

@@ -6,6 +6,7 @@ import {
 import type { UmbElement } from '@umbraco-cms/backoffice/element-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { UUIIconRegistryEssential } from '@umbraco-cms/backoffice/external/uui';
+import { UmbServerConnection, UmbServerContext } from '@umbraco-cms/backoffice/server';
 
 // We import what we need from the Backoffice app.
 // In the future the login screen app will be a part of the Backoffice app, and we will not need to import these.
@@ -16,19 +17,33 @@ import '@umbraco-cms/backoffice/localization';
  * It is responsible for initializing the backoffice and only the extensions that is needed to run the login screen.
  */
 export class UmbSlimBackofficeController extends UmbControllerBase {
-	#uuiIconRegistry = new UUIIconRegistryEssential();
-
 	constructor(host: UmbElement) {
 		super(host);
+
+		// Get the server URL and backoffice path from the host.
+		const serverUrl = window.location.origin;
+		const serverConnection = new UmbServerConnection(host, serverUrl);
+
+		// Create the server context for the slim backoffice.
+		// This is needed by the UmbServerExtensionRegistrator to register the extensions.
+		new UmbServerContext(this, {
+			backofficePath: '/umbraco',
+			serverUrl,
+			serverConnection: serverConnection,
+		});
+
 		new UmbBundleExtensionInitializer(host, umbExtensionsRegistry);
 		new UmbAppEntryPointExtensionInitializer(host, umbExtensionsRegistry);
-		new UmbServerExtensionRegistrator(host, umbExtensionsRegistry).registerPublicExtensions().catch(() => {
-			// We don't care about errors here, as this is just a fallback for the login screen.
-			// If the extensions are not registered, the login screen will still work, but some features may not be available.
+
+		// Register the public extensions for the slim backoffice.
+		new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPublicExtensions().catch((error) => {
+			console.error(`Failed to register public extensions for the slim backoffice.`, error);
 		});
 
-		this.#uuiIconRegistry.attach(host);
+		// Attach the UUIIconRegistry to the host so that it can be used in the login screen.
+		new UUIIconRegistryEssential().attach(host);
 
+		// Add the essential styles to the host so that it can be used in the login screen.
 		host.classList.add('uui-text');
 		host.classList.add('uui-font');
 	}