diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts b/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts index 857064431b..6199e4ae3f 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts @@ -1,4 +1,5 @@ import type { UmbAppContextConfig } from './app-context-config.interface.js'; +import { UmbNetworkConnectionStatusManager } from './network-connection-status.manager.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; @@ -13,6 +14,8 @@ export class UmbAppContext extends UmbContextBase { this.#serverUrl = config.serverUrl; this.#backofficePath = config.backofficePath; this.#serverConnection = config.serverConnection; + + new UmbNetworkConnectionStatusManager(this); } getBackofficePath() { diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts b/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts new file mode 100644 index 0000000000..ad573a2464 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts @@ -0,0 +1,52 @@ +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api'; +import { + UMB_NOTIFICATION_CONTEXT, + type UmbNotificationContext, + type UmbNotificationHandler, +} from '@umbraco-cms/backoffice/notification'; + +export class UmbNetworkConnectionStatusManager extends UmbControllerBase { + #notificationContext?: UmbNotificationContext; + #offlineNotification?: UmbNotificationHandler; + + #localize = new UmbLocalizationController(this); + + constructor(host: UmbControllerHost) { + super(host); + + this.consumeContext(UMB_NOTIFICATION_CONTEXT, (notificationContext) => { + this.#notificationContext = notificationContext; + }); + + window.addEventListener('online', () => this.#onOnline()); + window.addEventListener('offline', () => this.#onOffline()); + } + + #onOnline() { + this.#offlineNotification?.close(); + this.#notificationContext?.peek('positive', { + data: { + headline: this.#localize.term('speechBubbles_onlineHeadline'), + message: this.#localize.term('speechBubbles_onlineMessage'), + }, + }); + } + + #onOffline() { + this.#offlineNotification = this.#notificationContext?.stay('danger', { + data: { + headline: this.#localize.term('speechBubbles_offlineHeadline'), + message: this.#localize.term('speechBubbles_offlineMessage'), + }, + }); + } + + override destroy() { + this.#offlineNotification?.close(); + this.removeEventListener('online', () => this.#onOnline()); + this.removeEventListener('offline', () => this.#onOffline()); + super.destroy(); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index 3fbfe5fe3b..21862b3542 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -1492,6 +1492,8 @@ export default { preventCleanupDisableError: 'An error occurred while disabling version cleanup for %0%', copySuccessMessage: 'Your system information has successfully been copied to the clipboard', cannotCopyInformation: 'Could not copy your system information to the clipboard', + offlineHeadline: 'Offline', + offlineMessage: 'You are currently offline. Please check your internet connection.', }, stylesheet: { addRule: 'Add style', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index f36cfbf5b8..b6e9b4d434 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -1496,6 +1496,10 @@ export default { scheduleErrExpireDate2: 'The expire date cannot be before the release date', preventCleanupEnableError: 'An error occurred while enabling version cleanup for %0%', preventCleanupDisableError: 'An error occurred while disabling version cleanup for %0%', + offlineHeadline: 'Offline', + offlineMessage: 'You are currently offline. Please check your internet connection.', + onlineHeadline: 'Online', + onlineMessage: 'You are now online. You can continue working.', }, stylesheet: { addRule: 'Add style',