@umbraco-cms/backoffice 14.0.0-695f1c3f → 14.0.0-709b3cbf

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

@@ -4,7 +4,7 @@ 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 { 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';
@@ -152,52 +152,53 @@ 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 +207,41 @@ 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>
 		`;
@@ -253,21 +254,21 @@ export let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement e
         const buttons = [];
         if (this._user.state === UserStateModel.DISABLED) {
             buttons.push(html `
-				<uui-button @click=${this.#onUserStatusChange} look="secondary" color="positive" label="Enable"></uui-button>
+				<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="Disable"></uui-button>
+				<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/repository/data-source/folder-data-source.interface.d.ts

@@ -1,9 +1,9 @@
 import { DataSourceResponse } from './data-source-response.interface.js';
-import { CreateFolderRequestModel, FolderResponseModel, UpdateFolderReponseModel } from '../../../external/backend-api/index.js';
+import { CreateFolderRequestModel, FolderResponseModel, UpdateFolderResponseModel } from '../../../external/backend-api/index.js';
 export interface UmbFolderDataSource {
     createScaffold(parentId: string | null): Promise<DataSourceResponse<FolderResponseModel>>;
     get(unique: string): Promise<DataSourceResponse<FolderResponseModel>>;
     insert(data: CreateFolderRequestModel): Promise<DataSourceResponse<string>>;
-    update(unique: string, data: CreateFolderRequestModel): Promise<DataSourceResponse<UpdateFolderReponseModel>>;
+    update(unique: string, data: CreateFolderRequestModel): Promise<DataSourceResponse<UpdateFolderResponseModel>>;
     delete(unique: string): Promise<DataSourceResponse>;
 }

package/dist-cms/shared/repository/folder-repository.interface.d.ts

@@ -1,4 +1,4 @@
-import type { CreateFolderRequestModel, FolderModelBaseModel, FolderResponseModel, ProblemDetails, UpdateFolderReponseModel } from '../../external/backend-api/index.js';
+import type { CreateFolderRequestModel, FolderModelBaseModel, FolderResponseModel, ProblemDetails, UpdateFolderResponseModel } from '../../external/backend-api/index.js';
 export interface UmbFolderRepository {
     createFolderScaffold(parentId: string | null): Promise<{
         data?: FolderResponseModel;
@@ -13,7 +13,7 @@ export interface UmbFolderRepository {
         error?: ProblemDetails;
     }>;
     updateFolder(unique: string, folder: FolderModelBaseModel): Promise<{
-        data?: UpdateFolderReponseModel;
+        data?: UpdateFolderResponseModel;
         error?: ProblemDetails;
     }>;
     deleteFolder(id: string): Promise<{

package/dist-cms/shared/router/index.d.ts

@@ -1,8 +1,8 @@
+export * from '../../external/router-slot/index.js';
 export * from './router-slot.element.js';
 export * from './router-slot-change.event.js';
 export * from './router-slot-init.event.js';
 export * from './variant-router-slot.element.js';
-export * from '../../external/router-slot/index.js';
 export * from './route.context.js';
 export * from './route.interface.js';
 export * from './generate-route-path-builder.function.js';

package/dist-cms/shared/router/index.js

@@ -1,8 +1,8 @@
+export * from '../../external/router-slot/index.js';
 export * from './router-slot.element.js';
 export * from './router-slot-change.event.js';
 export * from './router-slot-init.event.js';
 export * from './variant-router-slot.element.js';
-export * from '../../external/router-slot/index.js';
 export * from './route.context.js';
 export * from './route.interface.js';
 export * from './generate-route-path-builder.function.js';