diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/app-auth.controller.ts b/src/Umbraco.Web.UI.Client/src/apps/app/app-auth.controller.ts index f629ea9ac1..a85fd82d3d 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/app/app-auth.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/app/app-auth.controller.ts @@ -69,6 +69,17 @@ export class UmbAppAuthController extends UmbControllerBase { throw new Error('[Fatal] Auth context is not available'); } + // If the user is timed out, we can show the login modal directly + if (userLoginState === 'timedOut') { + const selected = await this.#showLoginModal(userLoginState); + + if (!selected) { + return false; + } + + return this.#updateState(); + } + // Figure out which providers are available const availableProviders = await firstValueFrom(this.#authContext.getAuthProviders()); @@ -88,32 +99,47 @@ export class UmbAppAuthController extends UmbControllerBase { this.#authContext.makeAuthorizationRequest(redirectProvider.forProviderName); } else { // Show the provider selection screen - const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); - const selected = await modalManager - .open(this._host, UMB_MODAL_APP_AUTH, { - data: { - userLoginState, - }, - modal: { - backdropBackground: this.#firstTimeLoggingIn - ? "var(--umb-auth-backdrop, url('https://picsum.photos/1440?grayscale&blur=2') center center / cover no-repeat)" - : 'var(--umb-auth-backdrop-timedout, rgb(0, 0, 0))', - }, - }) - .onSubmit() - .catch(() => undefined); + const selected = await this.#showLoginModal(userLoginState); - if (!selected?.providerName) { + if (!selected) { return false; } - - this.#authContext.makeAuthorizationRequest(selected.providerName, selected.loginHint); } } return this.#updateState(); } + async #showLoginModal(userLoginState: UmbUserLoginState): Promise { + if (!this.#authContext) { + throw new Error('[Fatal] Auth context is not available'); + } + + // Show the provider selection screen + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + const selected = await modalManager + .open(this._host, UMB_MODAL_APP_AUTH, { + data: { + userLoginState, + }, + modal: { + backdropBackground: this.#firstTimeLoggingIn + ? "var(--umb-auth-backdrop, url('https://picsum.photos/1440?grayscale&blur=2') center center / cover no-repeat)" + : 'var(--umb-auth-backdrop-timedout, rgb(0, 0, 0))', + }, + }) + .onSubmit() + .catch(() => undefined); + + if (!selected?.providerName) { + return false; + } + + this.#authContext.makeAuthorizationRequest(selected.providerName, selected.loginHint); + + return true; + } + #updateState() { if (!this.#authContext) { throw new Error('[Fatal] Auth context is not available'); diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts index 17bd03e419..3fb582cda0 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts @@ -1016,6 +1016,7 @@ export default { login: { instruction: 'Log ind på Umbraco', signInWith: 'Log ind med {0}', + timeout: 'Du er blevet logget ud på grund af inaktivitet, vil du logge ind igen?', }, main: { dashboard: 'Skrivebord', 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 7dc7c62b8d..39c6073f9b 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 @@ -1013,6 +1013,7 @@ export default { login: { instruction: 'Sign in to Umbraco', signInWith: 'Sign in with {0}', + timeout: 'Your session has timed out. Please sign in again below.', }, main: { dashboard: 'Dashboard', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts index 2db0be78a8..8e129664a3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts @@ -15,6 +15,7 @@ export class UmbAppAuthModalElement extends UmbModalBaseElement + ${this.data?.userLoginState === 'timedOut' ? html`

${this.localize.term('login_timeout')}

` : ''}