@umbraco-cms/backoffice 14.0.0-40e04294 → 14.0.0-45828375

package/dist-cms/packages/users/users/workspace/user-workspace-editor.element.js

@@ -4,7 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { getLookAndColorFromUserStatus } from '../../utils.js';
+import { getDisplayStateFromUserStatus } from '../../utils.js';
+import { UmbUserRepository } from '../index.js';
 import { UUIInputEvent } from '../../../../external/uui/index.js';
 import { css, html, nothing, customElement, state, ifDefined, repeat, } from '../../../../external/lit/index.js';
 import { firstValueFrom } from '../../../../external/rxjs/index.js';
@@ -12,9 +13,7 @@ import { UMB_CHANGE_PASSWORD_MODAL } from '../../../core/modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../core/workspace/index.js';
 import { UserStateModel } from '../../../../external/backend-api/index.js';
-import { createExtensionClass } from '../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
-import { UmbObserverController } from '../../../../libs/observable-api/index.js';
 import { UMB_AUTH } from '../../../../shared/auth/index.js';
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 export let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement extends UmbLitElement {
@@ -25,6 +24,7 @@ export let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement e
     constructor() {
         super();
         this.languages = [];
+        this.#userRepository = new UmbUserRepository(this);
         this.consumeContext(UMB_AUTH, (instance) => {
             this.#auth = instance;
             this.#observeCurrentUser();
@@ -33,18 +33,6 @@ export let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement e
             this.#workspaceContext = workspaceContext;
             this.#observeUser();
         });
-        // TODO: this code is reused in multiple places, so it should be extracted to a function
-        new UmbObserverController(this, umbExtensionsRegistry.getByTypeAndAlias('repository', 'Umb.Repository.User'), async (repositoryManifest) => {
-            if (!repositoryManifest)
-                return;
-            try {
-                const result = await createExtensionClass(repositoryManifest, [this]);
-                this.#userRepository = result;
-            }
-            catch (error) {
-                throw new Error('Could not create repository with alias: Umb.Repository.User');
-            }
-        });
     }
     #observeUser() {
         if (!this.#workspaceContext)
@@ -152,52 +140,63 @@ export let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement e
             return nothing;
         return html ` <uui-box>
 				<div slot="headline"><umb-localize key="user_profile">Profile</umb-localize></div>
-				<umb-workspace-property-layout label="Email">
-					<uui-input slot="editor" name="email" label="email" readonly value=${ifDefined(this._user.email)}></uui-input>
+				<umb-workspace-property-layout label="${this.localize.term('general_email')}">
+					<uui-input
+						slot="editor"
+						name="email"
+						label="${this.localize.term('general_email')}"
+						readonly
+						value=${ifDefined(this._user.email)}></uui-input>
 				</umb-workspace-property-layout>
-				<umb-workspace-property-layout label="Language" description="The language of the UI in the Backoffice">
+				<umb-workspace-property-layout
+					label="${this.localize.term('user_language')}"
+					description=${this.localize.term('user_languageHelp')}>
 					<uui-select
 						slot="editor"
 						name="language"
-						label="language"
+						label="${this.localize.term('user_language')}"
 						.options=${this.languages}
 						@change="${this.#onLanguageChange}">
 					</uui-select>
 				</umb-workspace-property-layout>
 			</uui-box>
 			<uui-box>
-				<div slot="headline">Assign access</div>
+				<div slot="headline"><umb-localize key="user_assignAccess">Assign Access</umb-localize></div>
 				<div id="assign-access">
-					<umb-workspace-property-layout label="Groups" description="Add groups to assign access and permissions">
+					<umb-workspace-property-layout
+						label="${this.localize.term('general_groups')}"
+						description="${this.localize.term('user_groupsHelp')}">
 						<umb-user-group-input
 							slot="editor"
 							.selectedIds=${this._user.userGroupIds ?? []}
 							@change=${(e) => this.#onUserGroupsChange(e.target.selectedIds)}></umb-user-group-input>
 					</umb-workspace-property-layout>
 					<umb-workspace-property-layout
-						label="Content start node"
-						description="Limit the content tree to specific start nodes">
+						label=${this.localize.term('user_startnodes')}
+						description=${this.localize.term('user_startnodeshelp')}>
 						<umb-property-editor-ui-document-picker
 							.value=${this._user.contentStartNodeIds ?? []}
 							@property-value-change=${(e) => this.#workspaceContext?.updateProperty('contentStartNodeIds', e.target.value)}
 							slot="editor"></umb-property-editor-ui-document-picker>
 					</umb-workspace-property-layout>
 					<umb-workspace-property-layout
-						label="Media start nodes"
-						description="Limit the media library to specific start nodes">
+						label=${this.localize.term('user_mediastartnodes')}
+						description=${this.localize.term('user_mediastartnodeshelp')}>
 						<b slot="editor">NEED MEDIA PICKER</b>
 					</umb-workspace-property-layout>
 				</div>
 			</uui-box>
-			<uui-box headline="Access">
+			<uui-box headline=${this.localize.term('user_access')}>
 				<div slot="header" class="faded-text">
-					Based on the assigned groups and start nodes, the user has access to the following nodes
+					<umb-localize key="user_accessHelp"
+						>Based on the assigned groups and start nodes, the user has access to the following nodes</umb-localize
+					>
 				</div>
 
-				<b>Content</b>
+				<b><umb-localize key="sections_content">Content</umb-localize></b>
 				${this.#renderContentStartNodes()}
 				<hr />
-				<b>Media</b>
+				<b><umb-localize key="sections_media">Media</umb-localize></b>
 				<uui-ref-node name="Media Root">
 					<uui-icon slot="icon" name="folder"></uui-icon>
 				</uui-ref-node>
@@ -206,41 +205,42 @@ export let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement e
     #renderRightColumn() {
         if (!this._user || !this.#workspaceContext)
             return nothing;
-        const statusLook = getLookAndColorFromUserStatus(this._user.state);
+        const displayState = getDisplayStateFromUserStatus(this._user.state);
         return html ` <uui-box>
 			<div id="user-info">
 				<uui-avatar .name=${this._user?.name || ''}></uui-avatar>
-				<uui-button label="Change photo"></uui-button>
+				<uui-button label=${this.localize.term('user_changePhoto')}></uui-button>
 				<hr />
 				${this.#renderActionButtons()}
 
 				<div>
-					<b>Status:</b>
-					<uui-tag look="${ifDefined(statusLook?.look)}" color="${ifDefined(statusLook?.color)}">
-						${this._user.state}
+					<b><umb-localize key="general_status">Status</umb-localize>:</b>
+					<uui-tag look="${ifDefined(displayState?.look)}" color="${ifDefined(displayState?.color)}">
+						${this.localize.term('user_' + displayState.key)}
 					</uui-tag>
 				</div>
 
 				${this._user?.state === UserStateModel.INVITED
             ? html `
-							<uui-textarea placeholder="Enter a message..."> </uui-textarea>
-							<uui-button look="primary" label="Resend invitation"></uui-button>
+							<uui-textarea placeholder=${this.localize.term('placeholders_enterMessage')}></uui-textarea>
+							<uui-button look="primary" label=${this.localize.term('actions_resendInvite')}></uui-button>
 					  `
             : nothing}
-				${this.#renderInfoItem('Last login', this._user.lastLoginDate || `${this._user.name} has not logged in yet`)}
-				${this.#renderInfoItem('Failed login attempts', this._user.failedLoginAttempts)}
-				${this.#renderInfoItem('Last lockout date', this._user.lastLockoutDate || `${this._user.name} has not been locked out`)}
-				${this.#renderInfoItem('Password last changed', this._user.lastLoginDate || `${this._user.name} has not changed password`)}
-				${this.#renderInfoItem('User created', this._user.createDate)}
-				${this.#renderInfoItem('User last updated', this._user.updateDate)}
-				${this.#renderInfoItem('Key', this._user.id)}
+				${this.#renderInfoItem('user_lastLogin', this.localize.date(this._user.lastLoginDate) ||
+            `${this._user.name + ' ' + this.localize.term('user_noLogin')} `)}
+				${this.#renderInfoItem('user_failedPasswordAttempts', this._user.failedLoginAttempts)}
+				${this.#renderInfoItem('user_lastLockoutDate', this._user.lastLockoutDate || `${this._user.name + ' ' + this.localize.term('user_noLockouts')}`)}
+				${this.#renderInfoItem('user_lastPasswordChangeDate', this._user.lastLoginDate || `${this._user.name + ' ' + this.localize.term('user_noPasswordChange')}`)}
+				${this.#renderInfoItem('user_createDate', this.localize.date(this._user.createDate))}
+				${this.#renderInfoItem('user_updateDate', this.localize.date(this._user.updateDate))}
+				${this.#renderInfoItem('general_id', this._user.id)}
 			</div>
 		</uui-box>`;
     }
-    #renderInfoItem(label, value) {
+    #renderInfoItem(labelkey, value) {
         return html `
 			<div>
-				<b>${label}</b>
+				<b><umb-localize key=${labelkey}></umb-localize></b>
 				<span>${value}</span>
 			</div>
 		`;
@@ -251,23 +251,40 @@ export let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement e
         //TODO: Find out if the current user is an admin. If not, show no buttons.
         // if (this._currentUserStore?.isAdmin === false) return nothing;
         const buttons = [];
-        if (this._user.state === UserStateModel.DISABLED) {
-            buttons.push(html `
-				<uui-button @click=${this.#onUserStatusChange} look="secondary" color="positive" label="Enable"></uui-button>
-			`);
-        }
-        if (this._user.state === UserStateModel.ACTIVE || this._user.state === UserStateModel.INACTIVE) {
-            buttons.push(html `
-				<uui-button @click=${this.#onUserStatusChange} look="secondary" color="warning" label="Disable"></uui-button>
-			`);
+        if (this._user.id !== this._currentUser?.id) {
+            if (this._user.state === UserStateModel.DISABLED) {
+                buttons.push(html `
+					<uui-button
+						@click=${this.#onUserStatusChange}
+						look="secondary"
+						color="positive"
+						label=${this.localize.term('actions_enable')}></uui-button>
+				`);
+            }
+            if (this._user.state === UserStateModel.ACTIVE || this._user.state === UserStateModel.INACTIVE) {
+                buttons.push(html `
+					<uui-button
+						@click=${this.#onUserStatusChange}
+						look="secondary"
+						color="warning"
+						label=${this.localize.term('actions_disable')}></uui-button>
+				`);
+            }
         }
         if (this._currentUser?.id !== this._user?.id) {
             const button = html `
-				<uui-button @click=${this.#onUserDelete} look="secondary" color="danger" label="Delete User"></uui-button>
+				<uui-button
+					@click=${this.#onUserDelete}
+					look="secondary"
+					color="danger"
+					label=${this.localize.term('user_deleteUser')}></uui-button>
 			`;
             buttons.push(button);
         }
-        buttons.push(html `<uui-button @click=${this.#onPasswordChange} look="secondary" label="Change password"></uui-button>`);
+        buttons.push(html `<uui-button
+				@click=${this.#onPasswordChange}
+				look="secondary"
+				label=${this.localize.term('general_changePassword')}></uui-button>`);
         return buttons;
     }
     #renderContentStartNodes() {

package/dist-cms/packages/users/utils.d.ts

@@ -1,6 +1,9 @@
 import { InterfaceColor, InterfaceLook } from '../../external/uui/index.js';
 import { UserStateModel } from '../../external/backend-api/index.js';
-export declare const getLookAndColorFromUserStatus: (status?: UserStateModel) => {
+interface DisplayStatus {
     look: InterfaceLook;
     color: InterfaceColor;
-};
+    key: string;
+}
+export declare const getDisplayStateFromUserStatus: (status?: UserStateModel) => DisplayStatus;
+export {};

package/dist-cms/packages/users/utils.js

@@ -1,14 +1,14 @@
-import { UserStateModel } from '../../external/backend-api/index.js';
-export const getLookAndColorFromUserStatus = (status) => {
-    switch (status) {
-        case UserStateModel.INACTIVE:
-        case UserStateModel.INVITED:
-            return { look: 'primary', color: 'warning' };
-        case UserStateModel.ACTIVE:
-            return { look: 'primary', color: 'positive' };
-        case UserStateModel.DISABLED:
-            return { look: 'primary', color: 'danger' };
-        default:
-            return { look: 'secondary', color: 'default' };
-    }
-};
+const userStates = [
+    { "key": "All", color: "positive", look: "secondary" },
+    { "key": "Active", "color": "positive", look: "primary" },
+    { "key": "Disabled", "color": "danger", look: "primary" },
+    { "key": "LockedOut", "color": "danger", look: "secondary" },
+    { "key": "Invited", "color": "warning", look: "primary" },
+    { "key": "Inactive", "color": "warning", look: "primary" }
+];
+export const getDisplayStateFromUserStatus = (status) => userStates
+    .filter(state => state.key === status)
+    .map(state => ({
+    ...state,
+    key: 'state' + state.key
+}))[0];

package/dist-cms/shared/auth/auth-flow.d.ts

@@ -59,10 +59,6 @@ export declare class UmbAuthFlow {
      * saved the state in local storage before redirecting the user to the login page.
      */
     completeAuthorizationIfPossible(): Promise<void>;
-    /**
-     * This method will query the server for the service configuration usually found at /.well-known/openid-configuration.
-     */
-    fetchServiceConfiguration(): Promise<void>;
     /**
      * This method will make an authorization request to the server.
      *

package/dist-cms/shared/auth/auth-flow.js

@@ -69,7 +69,6 @@ export class UmbAuthFlow {
     #storageBackend;
     // state
     #configuration;
-    #openIdConnectUrl;
     #redirectUri;
     #clientId;
     #scope;
@@ -77,10 +76,15 @@ export class UmbAuthFlow {
     #refreshToken;
     #accessTokenResponse;
     constructor(openIdConnectUrl, redirectUri, clientId = 'umbraco-back-office', scope = 'offline_access') {
-        this.#openIdConnectUrl = openIdConnectUrl;
         this.#redirectUri = redirectUri;
         this.#clientId = clientId;
         this.#scope = scope;
+        this.#configuration = new AuthorizationServiceConfiguration({
+            authorization_endpoint: `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/authorize`,
+            token_endpoint: `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/token`,
+            revocation_endpoint: `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/revoke`,
+            end_session_endpoint: `${openIdConnectUrl}/umbraco/management/api/v1/security/back-office/signout`,
+        });
         this.#notifier = new AuthorizationNotifier();
         this.#tokenHandler = new BaseTokenRequestHandler(requestor);
         this.#storageBackend = new LocalStorageBackend();
@@ -118,10 +122,6 @@ export class UmbAuthFlow {
      * - If there is no new authorization to be made, do nothing
      */
     async setInitialState() {
-        // Ensure there is a connection to the server
-        if (!this.#configuration) {
-            await this.fetchServiceConfiguration();
-        }
         const tokenResponseJson = await this.#storageBackend.getItem(TOKEN_RESPONSE_NAME);
         if (tokenResponseJson) {
             const response = new TokenResponse(JSON.parse(tokenResponseJson));
@@ -142,23 +142,12 @@ export class UmbAuthFlow {
     completeAuthorizationIfPossible() {
         return this.#authorizationHandler.completeAuthorizationRequestIfPossible();
     }
-    /**
-     * This method will query the server for the service configuration usually found at /.well-known/openid-configuration.
-     */
-    async fetchServiceConfiguration() {
-        const response = await AuthorizationServiceConfiguration.fetchFromIssuer(this.#openIdConnectUrl, requestor);
-        this.#configuration = response;
-    }
     /**
      * This method will make an authorization request to the server.
      *
      * @param username The username to use for the authorization request. It will be provided to the OpenID server as a hint.
      */
     makeAuthorizationRequest(username) {
-        if (!this.#configuration) {
-            console.log('Unknown service configuration');
-            throw new Error('Unknown service configuration');
-        }
         const extras = { prompt: 'consent', access_type: 'offline' };
         if (username) {
             extras['login_hint'] = username;
@@ -199,10 +188,6 @@ export class UmbAuthFlow {
      * @returns The access token for the user.
      */
     async performWithFreshTokens() {
-        if (!this.#configuration) {
-            console.log('Unknown service configuration');
-            return Promise.reject('Unknown service configuration');
-        }
         if (!this.#refreshToken) {
             console.log('Missing refreshToken.');
             return Promise.resolve('Missing refreshToken.');
@@ -235,10 +220,6 @@ export class UmbAuthFlow {
      * This method will make a token request to the server using the authorization code.
      */
     async #makeRefreshTokenRequest(code, codeVerifier) {
-        if (!this.#configuration) {
-            console.log('Unknown service configuration');
-            return Promise.reject();
-        }
         const extras = {};
         if (codeVerifier) {
             extras.code_verifier = codeVerifier;

package/dist-cms/shared/repository/repository-items.manager.js

@@ -29,6 +29,11 @@ export class UmbRepositoryItemsManager {
     setUniques(uniques) {
         this.#uniques.next(uniques);
         //TODO: Check if it's safe to call requestItems here.
+        // We don't have to request items if there is no uniques.
+        if (uniques.length === 0) {
+            this.#items.next([]);
+            return;
+        }
         this.#requestItems();
     }
     getItems() {

package/dist-cms/shared/umb-events/index.d.ts

@@ -2,3 +2,4 @@ export * from './input.event.js';
 export * from './change.event.js';
 export * from './delete.event.js';
 export * from './executed.event.js';
+export * from './selected.event.js';

package/dist-cms/shared/umb-events/index.js

@@ -2,3 +2,4 @@ export * from './input.event.js';
 export * from './change.event.js';
 export * from './delete.event.js';
 export * from './executed.event.js';
+export * from './selected.event.js';

package/dist-cms/shared/umb-events/selected.event.d.ts

@@ -0,0 +1,3 @@
+export declare class UmbSelectedEvent extends Event {
+    constructor();
+}

package/dist-cms/shared/umb-events/selected.event.js

@@ -0,0 +1,6 @@
+export class UmbSelectedEvent extends Event {
+    constructor() {
+        // mimics the native change event
+        super('selected', { bubbles: true, composed: false, cancelable: false });
+    }
+}