@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

package/dist-cms/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { css, html, customElement, state } from '../../../../../external/lit/index.js';
+import { css, html, customElement, state, nothing } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../../../data-type/index.js';
 let UmbBlockGridTypeWorkspaceViewAreasElement = class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement {
@@ -13,27 +13,31 @@ let UmbBlockGridTypeWorkspaceViewAreasElement = class UmbBlockGridTypeWorkspaceV
         super();
         this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
             this.observe(await context.propertyValueByAlias('gridColumns'), (value) => {
-                const dataTypeGridColumns = value ? parseInt(value, 10) : undefined;
+                const dataTypeGridColumns = value ? parseInt(value, 10) : 12;
+                this._areaColumnsConfigurationObject = [{ alias: 'placeholder', value: dataTypeGridColumns }];
                 this._areaConfigConfigurationObject = [{ alias: 'defaultAreaGridColumns', value: dataTypeGridColumns }];
             }, 'observeGridColumns');
         }).passContextAliasMatches();
     }
     render() {
-        return html `
-			<uui-box headline="Areas">
-				<umb-property
-					label=${this.localize.term('blockEditor_areasLayoutColumns')}
-					alias="areaGridColumns"
-					property-editor-ui-alias="Umb.PropertyEditorUi.Number"></umb-property>
-				<umb-property
-					label=${this.localize.term('blockEditor_areasConfigurations')}
-					alias="areas"
-					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreasConfig"
-					.config=${this._areaConfigConfigurationObject}
-					>></umb-property
-				>
-			</uui-box>
-		`;
+        return this._areaConfigConfigurationObject
+            ? html `
+					<uui-box headline="Areas">
+						<umb-property
+							label=${this.localize.term('blockEditor_areasLayoutColumns')}
+							alias="areaGridColumns"
+							property-editor-ui-alias="Umb.PropertyEditorUi.Integer"
+							.config=${this._areaColumnsConfigurationObject}></umb-property>
+						<umb-property
+							label=${this.localize.term('blockEditor_areasConfigurations')}
+							alias="areas"
+							property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreasConfig"
+							.config=${this._areaConfigConfigurationObject}
+							>></umb-property
+						>
+					</uui-box>
+				`
+            : nothing;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -48,6 +52,9 @@ let UmbBlockGridTypeWorkspaceViewAreasElement = class UmbBlockGridTypeWorkspaceV
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbBlockGridTypeWorkspaceViewAreasElement.prototype, "_areaColumnsConfigurationObject", void 0);
 __decorate([
     state()
 ], UmbBlockGridTypeWorkspaceViewAreasElement.prototype, "_areaConfigConfigurationObject", void 0);

package/dist-cms/packages/block/block-list/context/block-list-entries.context.d.ts

@@ -11,6 +11,7 @@ export declare class UmbBlockListEntriesContext extends UmbBlockEntriesContext<t
     protected _gotBlockManager(): void;
     getPathForCreateBlock(index: number): string | undefined;
     getPathForClipboard(index: number): string | undefined;
+    setLayouts(layouts: Array<UmbBlockListLayoutModel>): Promise<void>;
     create(contentElementTypeKey: string, partialLayoutEntry?: Omit<UmbBlockListLayoutModel, 'contentUdi'>, modalData?: UmbBlockListWorkspaceData): Promise<{
         layout: UmbBlockListLayoutModel;
         content: {

package/dist-cms/packages/block/block-list/context/block-list-entries.context.js

@@ -52,6 +52,10 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext {
     getPathForClipboard(index) {
         return this._catalogueRouteBuilderState.getValue()?.({ view: 'clipboard', index: index });
     }
+    async setLayouts(layouts) {
+        await this._retrieveManager;
+        this._manager?.setLayouts(layouts);
+    }
     async create(contentElementTypeKey, partialLayoutEntry, modalData) {
         await this._retrieveManager;
         return this._manager?.create(contentElementTypeKey, partialLayoutEntry, modalData);

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.js

@@ -51,19 +51,22 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this._limitMax = validationLimit?.max;
         const blocks = config.getValueByAlias('blocks') ?? [];
         this.#managerContext.setBlockTypes(blocks);
+        const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault');
+        this.#managerContext.setInlineEditingMode(useInlineEditingAsDefault);
+        this.style.maxWidth = config.getValueByAlias('maxPropertyWidth') ?? '';
+        // TODO:
+        //config.useSingleBlockMode, not done jet
+        this.#managerContext.setEditorConfiguration(config);
         const customCreateButtonLabel = config.getValueByAlias('createLabel');
         if (customCreateButtonLabel) {
             this._createButtonLabel = customCreateButtonLabel;
         }
         else if (blocks.length === 1) {
-            this._createButtonLabel = `${this.localize.term('general_add')} ${blocks[0].label}`;
+            this.#managerContext.contentTypesLoaded.then(() => {
+                const firstContentTypeName = this.#managerContext.getContentTypeNameOf(blocks[0].contentElementTypeKey);
+                this._createButtonLabel = `${this.localize.term('general_add')} ${firstContentTypeName}`;
+            });
         }
-        const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault');
-        this.#managerContext.setInlineEditingMode(useInlineEditingAsDefault);
-        // TODO:
-        //config.useSingleBlockMode, not done jet
-        this.style.maxWidth = config.getValueByAlias('maxPropertyWidth') ?? '';
-        this.#managerContext.setEditorConfiguration(config);
     }
     #managerContext;
     #entriesContext;
@@ -86,25 +89,9 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this._layouts = [];
         this.#managerContext = new UmbBlockListManagerContext(this);
         this.#entriesContext = new UmbBlockListEntriesContext(this);
-        this.#fireChangeEvent = async () => {
-            if (this.#debounceChangeEvent)
-                return;
-            this.#debounceChangeEvent = true;
-            await Promise.resolve();
+        this.#fireChangeEvent = () => {
             this.dispatchEvent(new UmbPropertyValueChangeEvent());
-            this.#debounceChangeEvent = false;
         };
-        /*
-        this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
-            this.observe(
-                propertyContext?.alias,
-                (alias) => {
-                    this.#catalogueModal.setUniquePathValue('propertyAlias', alias);
-                },
-                'observePropertyAlias',
-            );
-        });
-        */
         this.observe(this.#entriesContext.layoutEntries, (layouts) => {
             this._layouts = layouts;
             // Update sorter.
@@ -138,26 +125,7 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this.observe(this.#entriesContext.catalogueRouteBuilder, (routeBuilder) => {
             this._catalogueRouteBuilder = routeBuilder;
         });
-        /*
-        this.#catalogueModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
-            .addUniquePaths(['propertyAlias'])
-            .addAdditionalPath(':view/:index')
-            .onSetup((routingInfo) => {
-                const index = routingInfo.index ? parseInt(routingInfo.index) : -1;
-                return {
-                    data: {
-                        blocks: this._blocks ?? [],
-                        openClipboard: routingInfo.view === 'clipboard',
-                        blockOriginData: { index: index },
-                    },
-                };
-            })
-            .observeRouteBuilder((routeBuilder) => {
-                this._catalogueRouteBuilder = routeBuilder;
-            });
-            */
     }
-    #debounceChangeEvent;
     #fireChangeEvent;
     render() {
         let createPath;
@@ -170,6 +138,7 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
             createPath = this._catalogueRouteBuilder?.({ view: 'create', index: -1 });
         }
         return html ` ${repeat(this._layouts, (x) => x.contentUdi, (layoutEntry, index) => html `<uui-button-inline-create
+							label=${this._createButtonLabel}
 							href=${this._catalogueRouteBuilder?.({ view: 'create', index: index }) ?? ''}></uui-button-inline-create>
 						<umb-block-list-entry .contentUdi=${layoutEntry.contentUdi} .layout=${layoutEntry}>
 						</umb-block-list-entry> `)}

package/dist-cms/packages/block/block-type/components/block-type-card/block-type-card.element.d.ts

@@ -2,12 +2,13 @@ import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbBlockTypeCardElement extends UmbLitElement {
     #private;
     href?: string;
+    iconFile?: string;
     iconColor?: string;
     backgroundColor?: string;
     get contentElementTypeKey(): string | undefined;
     set contentElementTypeKey(value: string | undefined);
     private _elementTypeKey?;
-    _fallbackName?: string;
+    _name?: string;
     _fallbackIcon?: string | null;
     constructor();
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/block/block-type/components/block-type-card/block-type-card.element.js

@@ -30,7 +30,7 @@ let UmbBlockTypeCardElement = class UmbBlockTypeCardElement extends UmbLitElemen
             const item = items[0];
             if (item) {
                 this._fallbackIcon = item.icon;
-                this._fallbackName = item.name;
+                this._name = item.name;
             }
         });
     }
@@ -39,9 +39,11 @@ let UmbBlockTypeCardElement = class UmbBlockTypeCardElement extends UmbLitElemen
         return html `
 			<uui-card-block-type
 				href=${ifDefined(this.href)}
-				.name=${this._fallbackName ?? 'Unknown'}
+				.name=${this._name ?? 'Unknown'}
 				.background=${this.backgroundColor}>
-				<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>
+				${this.iconFile
+            ? html `<img src=${this.iconFile} alt="" />`
+            : html `<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>`}
 				<slot name="actions" slot="actions"> </slot>
 			</uui-card-block-type>
 		`;
@@ -50,6 +52,9 @@ let UmbBlockTypeCardElement = class UmbBlockTypeCardElement extends UmbLitElemen
 __decorate([
     property({ type: String, attribute: false })
 ], UmbBlockTypeCardElement.prototype, "href", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], UmbBlockTypeCardElement.prototype, "iconFile", void 0);
 __decorate([
     property({ type: String, attribute: false })
 ], UmbBlockTypeCardElement.prototype, "iconColor", void 0);
@@ -61,7 +66,7 @@ __decorate([
 ], UmbBlockTypeCardElement.prototype, "contentElementTypeKey", null);
 __decorate([
     state()
-], UmbBlockTypeCardElement.prototype, "_fallbackName", void 0);
+], UmbBlockTypeCardElement.prototype, "_name", void 0);
 __decorate([
     state()
 ], UmbBlockTypeCardElement.prototype, "_fallbackIcon", void 0);

package/dist-cms/packages/block/block-type/components/input-block-type/input-block-type.element.js

@@ -10,7 +10,7 @@ import { css, html, customElement, property, state, repeat } from '../../../../.
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UmbDeleteEvent } from '../../../../core/event/index.js';
-import { UMB_DOCUMENT_TYPE_PICKER_MODAL } from '../../../../documents/document-types/index.js';
+import { UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT, UMB_DOCUMENT_TYPE_PICKER_MODAL, } from '../../../../documents/document-types/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 /** TODO: Look into sending a "change" event when there is a change, rather than create, delete, and change event. Make sure it doesn't break move for RTE/List/Grid. [LI] */
 let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElement {
@@ -59,6 +59,7 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
 			<umb-block-type-card
 				.data-umb-content-element-key=${block.contentElementTypeKey}
 				.name=${block.label}
+				.iconFile=${block.thumbnail}
 				.iconColor=${block.iconColor}
 				.backgroundColor=${block.backgroundColor}
 				.href="${this.workspacePath}edit/${block.contentElementTypeKey}"
@@ -122,10 +123,13 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
         return undefined;
     }
     async #onRequestDelete(item) {
+        const store = await this.getContext(UMB_DOCUMENT_TYPE_ITEM_STORE_CONTEXT);
+        const contentType = store.getItems([item.contentElementTypeKey]);
         await umbConfirmModal(this, {
             color: 'danger',
-            headline: `Remove [TODO: Get name]?`,
-            content: 'Are you sure you want to remove this block type?',
+            headline: `Remove ${contentType[0]?.name}?`,
+            // TODO: Translations: [NL]
+            content: 'Are you sure you want to remove this Block Type Configuration?',
             confirmLabel: 'Remove',
         });
         this.deleteItem(item.contentElementTypeKey);

package/dist-cms/packages/block/block-type/types.d.ts

@@ -3,6 +3,7 @@ export interface UmbBlockTypeBaseModel {
     contentElementTypeKey: string;
     settingsElementTypeKey?: string;
     label?: string;
+    thumbnail?: string;
     iconColor?: string;
     backgroundColor?: string;
     editorSize?: UUIModalSidebarSize;

package/dist-cms/packages/block/block-type/workspace/block-type-workspace.context.js

@@ -91,7 +91,7 @@ export class UmbBlockTypeWorkspaceContext extends UmbSubmittableWorkspaceContext
         return 'block name content element type here...';
     }
     setName(name) {
-        alert('You cannot set a name of a block-type.');
+        console.warn('You cannot set a name of a block type.');
     }
     async propertyValueByAlias(propertyAlias) {
         return this.#data.asObservablePart((data) => data?.[propertyAlias]);

package/dist-cms/packages/core/auth/auth-flow.d.ts

@@ -93,4 +93,14 @@ export declare class UmbAuthFlow {
      * @returns The access token for the user.
      */
     performWithFreshTokens(): Promise<string>;
+    /**
+     * This method will link the current user to the specified provider by redirecting the user to the link endpoint.
+     * @param provider The provider to link to.
+     */
+    linkLogin(provider: string): Promise<void>;
+    /**
+     * This method will unlink the current user from the specified provider.
+     */
+    unlinkLogin(loginProvider: string, providerKey: string): Promise<boolean>;
+    makeRefreshTokenRequest(): Promise<boolean>;
 }

package/dist-cms/packages/core/auth/auth-flow.js

@@ -77,6 +77,10 @@ export class UmbAuthFlow {
     #timeoutSignal;
     // tokens
     #tokenResponse;
+    // external login
+    #link_endpoint;
+    #link_key_endpoint;
+    #unlink_endpoint;
     constructor(openIdConnectUrl, redirectUri, postLogoutRedirectUri, timeoutSignal, clientId = 'umbraco-back-office', scope = 'offline_access') {
         /**
          * This signal will emit when the authorization flow is complete.
@@ -94,6 +98,9 @@ export class UmbAuthFlow {
             revocation_endpoint: `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/revoke`,
             end_session_endpoint: `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/signout`,
         });
+        this.#link_endpoint = `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/link-login`;
+        this.#link_key_endpoint = `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/link-login-key`;
+        this.#unlink_endpoint = `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/unlink-login`;
         this.#notifier = new AuthorizationNotifier();
         this.#tokenHandler = new BaseTokenRequestHandler(requestor);
         this.#storageBackend = new LocalStorageBackend();
@@ -244,25 +251,54 @@ export class UmbAuthFlow {
         if (this.#tokenResponse?.isValid()) {
             return Promise.resolve(this.#tokenResponse.accessToken);
         }
-        // if the refresh token is not set (maybe the provider doesn't support them)
-        if (!this.#tokenResponse?.refreshToken) {
+        const success = await this.makeRefreshTokenRequest();
+        if (!success) {
+            this.clearTokenStorage();
             this.#timeoutSignal.next();
-            return Promise.reject('Missing refreshToken.');
+            return Promise.reject('Missing tokenResponse.');
         }
-        const request = new TokenRequest({
-            client_id: this.#clientId,
-            redirect_uri: this.#redirectUri,
-            grant_type: GRANT_TYPE_REFRESH_TOKEN,
-            code: undefined,
-            refresh_token: this.#tokenResponse.refreshToken,
-            extras: undefined,
+        return this.#tokenResponse
+            ? Promise.resolve(this.#tokenResponse.accessToken)
+            : Promise.reject('Missing tokenResponse.');
+    }
+    /**
+     * This method will link the current user to the specified provider by redirecting the user to the link endpoint.
+     * @param provider The provider to link to.
+     */
+    async linkLogin(provider) {
+        const linkKey = await this.#makeLinkTokenRequest(provider);
+        const form = document.createElement('form');
+        form.method = 'POST';
+        form.action = this.#link_endpoint;
+        form.style.display = 'none';
+        const providerInput = document.createElement('input');
+        providerInput.name = 'provider';
+        providerInput.value = provider;
+        form.appendChild(providerInput);
+        const linkKeyInput = document.createElement('input');
+        linkKeyInput.name = 'linkKey';
+        linkKeyInput.value = linkKey;
+        form.appendChild(linkKeyInput);
+        document.body.appendChild(form);
+        form.submit();
+    }
+    /**
+     * This method will unlink the current user from the specified provider.
+     */
+    async unlinkLogin(loginProvider, providerKey) {
+        const token = await this.performWithFreshTokens();
+        const request = new Request(this.#unlink_endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+            body: JSON.stringify({ loginProvider, providerKey }),
         });
-        await this.#performTokenRequest(request);
-        if (!this.#tokenResponse) {
-            this.#timeoutSignal.next();
-            return Promise.reject('Missing tokenResponse.');
+        const result = await fetch(request);
+        if (!result.ok) {
+            const error = await result.json();
+            throw error;
         }
-        return Promise.resolve(this.#tokenResponse.accessToken);
+        await this.signOut();
+        return true;
     }
     /**
      * Save the current token response to local storage.
@@ -291,6 +327,20 @@ export class UmbAuthFlow {
         });
         await this.#performTokenRequest(request);
     }
+    async makeRefreshTokenRequest() {
+        if (!this.#tokenResponse?.refreshToken) {
+            return false;
+        }
+        const request = new TokenRequest({
+            client_id: this.#clientId,
+            redirect_uri: this.#redirectUri,
+            grant_type: GRANT_TYPE_REFRESH_TOKEN,
+            code: undefined,
+            refresh_token: this.#tokenResponse.refreshToken,
+            extras: undefined,
+        });
+        return this.#performTokenRequest(request);
+    }
     /**
      * This method will make a token request to the server using the refresh token.
      * If the request fails, it will sign the user out (clear the token state).
@@ -298,10 +348,26 @@ export class UmbAuthFlow {
     async #performTokenRequest(request) {
         try {
             this.#tokenResponse = await this.#tokenHandler.performTokenRequest(this.#configuration, request);
+            this.#saveTokenState();
+            return true;
         }
         catch (error) {
-            // If the token request fails, it means the refresh token is invalid
             console.error('Token request error', error);
+            this.clearTokenStorage();
+            return false;
+        }
+    }
+    async #makeLinkTokenRequest(provider) {
+        const token = await this.performWithFreshTokens();
+        const request = await fetch(`${this.#link_key_endpoint}?provider=${provider}`, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
+            },
+        });
+        if (!request.ok) {
+            throw new Error('Failed to link login');
         }
+        return request.json();
     }
 }

package/dist-cms/packages/core/auth/auth.context.d.ts

@@ -5,6 +5,11 @@ import { UmbContextBase } from '../../../libs/class-api/index.js';
 import { Subject } from '../../../external/rxjs/index.js';
 export declare class UmbAuthContext extends UmbContextBase<UmbAuthContext> {
     #private;
+    /**
+     * Observable that emits true when the auth context is initialized.
+     * @remark It will only emit once and then complete itself.
+     */
+    readonly isInitialized: import("rxjs/internal/Observable").Observable<void>;
     /**
      * Observable that emits true if the user is authorized, otherwise false.
      * @remark It will only emit when the authorization state changes.
@@ -60,6 +65,12 @@ export declare class UmbAuthContext extends UmbContextBase<UmbAuthContext> {
      * @returns The latest token from the Management API
      */
     getLatestToken(): Promise<string>;
+    /**
+     * Validates the token against the server and returns true if the token is valid.
+     * @memberof UmbAuthContext
+     * @returns True if the token is valid, otherwise false
+     */
+    validateToken(): Promise<boolean>;
     /**
      * Clears the token storage.
      * @memberof UmbAuthContext
@@ -109,8 +120,31 @@ export declare class UmbAuthContext extends UmbContextBase<UmbAuthContext> {
      * @returns The default OpenAPI configuration
      */
     getOpenApiConfiguration(): UmbOpenApiConfiguration;
+    /**
+     * Sets the auth context as initialized, which means that the auth context is ready to be used.
+     * @remark This is used to let the app context know that the core module is ready, which means that the core auth providers are available.
+     */
     setInitialized(): void;
+    /**
+     * Gets all registered auth providers.
+     */
     getAuthProviders(extensionsRegistry: UmbBackofficeExtensionRegistry): import("rxjs/internal/Observable").Observable<ManifestAuthProvider[]>;
+    /**
+     * Gets the authorized redirect url.
+     * @returns The redirect url, which is the backoffice path.
+     */
     getRedirectUrl(): string;
+    /**
+     * Gets the post logout redirect url.
+     * @returns The post logout redirect url, which is the backoffice path with the logout path appended.
+     */
     getPostLogoutRedirectUrl(): string;
+    /**
+     * @see UmbAuthFlow#linkLogin
+     */
+    linkLogin(provider: string): Promise<void>;
+    /**
+     * @see UmbAuthFlow#unlinkLogin
+     */
+    unlinkLogin(providerName: string, providerKey: string): Promise<boolean>;
 }

package/dist-cms/packages/core/auth/auth.context.js

@@ -8,10 +8,6 @@ export class UmbAuthContext extends UmbContextBase {
     #isAuthorized;
     // Timeout is different from `isAuthorized` because it can occur repeatedly
     #isTimeout;
-    /**
-     * Observable that emits true when the auth context is initialized.
-     * @remark It will only emit once and then complete itself.
-     */
     #isInitialized;
     #isBypassed;
     #serverUrl;
@@ -30,12 +26,12 @@ export class UmbAuthContext extends UmbContextBase {
         this.#isAuthorized = new UmbBooleanState(false);
         // Timeout is different from `isAuthorized` because it can occur repeatedly
         this.#isTimeout = new Subject();
+        this.#isInitialized = new ReplaySubject(1);
         /**
          * Observable that emits true when the auth context is initialized.
          * @remark It will only emit once and then complete itself.
          */
-        this.#isInitialized = new ReplaySubject(1);
-        this.#isBypassed = false;
+        this.isInitialized = this.#isInitialized.asObservable();
         /**
          * Observable that emits true if the user is authorized, otherwise false.
          * @remark It will only emit when the authorization state changes.
@@ -146,6 +142,14 @@ export class UmbAuthContext extends UmbContextBase {
     getLatestToken() {
         return this.#authFlow.performWithFreshTokens();
     }
+    /**
+     * Validates the token against the server and returns true if the token is valid.
+     * @memberof UmbAuthContext
+     * @returns True if the token is valid, otherwise false
+     */
+    async validateToken() {
+        return this.#isBypassed || this.#authFlow.makeRefreshTokenRequest();
+    }
     /**
      * Clears the token storage.
      * @memberof UmbAuthContext
@@ -159,7 +163,6 @@ export class UmbAuthContext extends UmbContextBase {
      * @memberof UmbAuthContext
      */
     timeOut() {
-        this.clearTokenStorage();
         this.#isAuthorized.setValue(false);
         this.#isTimeout.next();
     }
@@ -213,17 +216,44 @@ export class UmbAuthContext extends UmbContextBase {
             token: () => this.getLatestToken(),
         };
     }
+    /**
+     * Sets the auth context as initialized, which means that the auth context is ready to be used.
+     * @remark This is used to let the app context know that the core module is ready, which means that the core auth providers are available.
+     */
     setInitialized() {
         this.#isInitialized.next();
         this.#isInitialized.complete();
     }
+    /**
+     * Gets all registered auth providers.
+     */
     getAuthProviders(extensionsRegistry) {
         return this.#isInitialized.pipe(switchMap(() => extensionsRegistry.byType('authProvider')));
     }
+    /**
+     * Gets the authorized redirect url.
+     * @returns The redirect url, which is the backoffice path.
+     */
     getRedirectUrl() {
         return `${window.location.origin}${this.#backofficePath}${this.#backofficePath.endsWith('/') ? '' : '/'}oauth_complete`;
     }
+    /**
+     * Gets the post logout redirect url.
+     * @returns The post logout redirect url, which is the backoffice path with the logout path appended.
+     */
     getPostLogoutRedirectUrl() {
         return `${window.location.origin}${this.#backofficePath}${this.#backofficePath.endsWith('/') ? '' : '/'}logout`;
     }
+    /**
+     * @see UmbAuthFlow#linkLogin
+     */
+    linkLogin(provider) {
+        return this.#authFlow.linkLogin(provider);
+    }
+    /**
+     * @see UmbAuthFlow#unlinkLogin
+     */
+    unlinkLogin(providerName, providerKey) {
+        return this.#authFlow.unlinkLogin(providerName, providerKey);
+    }
 }

package/dist-cms/packages/core/auth/components/auth-provider-default.element.d.ts

@@ -2,6 +2,7 @@ import type { ManifestAuthProvider } from '../../extension-registry/models/index
 import type { UmbAuthProviderDefaultProps, UmbUserLoginState } from '../types.js';
 import { UmbLitElement } from '../../lit-element/lit-element.element.js';
 export declare class UmbAuthProviderDefaultElement extends UmbLitElement implements UmbAuthProviderDefaultProps {
+    #private;
     userLoginState?: UmbUserLoginState | undefined;
     manifest: ManifestAuthProvider;
     onSubmit: (manifestOrProviderName: string | ManifestAuthProvider, loginHint?: string) => void;

package/dist-cms/packages/core/auth/components/auth-provider-default.element.js

@@ -12,19 +12,24 @@ let UmbAuthProviderDefaultElement = class UmbAuthProviderDefaultElement extends
         super.connectedCallback();
         this.setAttribute('part', 'auth-provider-default');
     }
+    get #label() {
+        const label = this.manifest.meta?.label ?? this.manifest.forProviderName;
+        const labelLocalized = this.localize.string(label);
+        return this.localize.term('login_signInWith', labelLocalized);
+    }
     render() {
         return html `
 			<uui-button
 				type="button"
 				@click=${() => this.onSubmit(this.manifest)}
 				id="auth-provider-button"
-				.label=${this.manifest.meta?.label ?? this.manifest.forProviderName}
+				.label=${this.#label}
 				.look=${this.manifest.meta?.defaultView?.look ?? 'outline'}
 				.color=${this.manifest.meta?.defaultView?.color ?? 'default'}>
 				${this.manifest.meta?.defaultView?.icon
-            ? html `<uui-icon .name=${this.manifest.meta?.defaultView?.icon}></uui-icon>`
+            ? html `<uui-icon id="icon" .name=${this.manifest.meta?.defaultView?.icon}></uui-icon>`
             : nothing}
-				${this.manifest.meta?.label ?? this.manifest.forProviderName}
+				${this.#label}
 			</uui-button>
 		`;
     }
@@ -38,6 +43,10 @@ let UmbAuthProviderDefaultElement = class UmbAuthProviderDefaultElement extends
 			#auth-provider-button {
 				width: 100%;
 			}
+
+			#icon {
+				margin-right: var(--uui-size-space-1);
+			}
 		`,
     ]; }
 };