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

package/dist-cms/packages/templating/scripts/workspace/scripts-workspace-edit.element.js

@@ -0,0 +1,171 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { UUITextStyles } from '../../../../external/uui/index.js';
+import { css, html, customElement, query, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '../../../core/modal/index.js';
+import { Subject, debounceTime } from '../../../../external/rxjs/index.js';
+import { UMB_WORKSPACE_CONTEXT } from '../../../core/workspace/index.js';
+export let UmbScriptsWorkspaceEditElement = class UmbScriptsWorkspaceEditElement extends UmbLitElement {
+    #name;
+    get _name() {
+        return this.#name;
+    }
+    set _name(value) {
+        this.#name = value?.replace('.js', '');
+        this.requestUpdate();
+    }
+    #scriptsWorkspaceContext;
+    #isNew;
+    constructor() {
+        super();
+        this.#name = '';
+        this._content = '';
+        this._path = '';
+        this._dirName = '';
+        this._ready = false;
+        this.#isNew = false;
+        this.inputQuery$ = new Subject();
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+            this._modalContext = instance;
+        });
+        this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
+            this.#scriptsWorkspaceContext = workspaceContext;
+            this.observe(this.#scriptsWorkspaceContext.name, (name) => {
+                this._name = name;
+            });
+            this.observe(this.#scriptsWorkspaceContext.content, (content) => {
+                this._content = content;
+            });
+            this.observe(this.#scriptsWorkspaceContext.path, (path) => {
+                this._path = path;
+            });
+            this.observe(this.#scriptsWorkspaceContext.isNew, (isNew) => {
+                this.#isNew = !!isNew;
+            });
+            this.observe(this.#scriptsWorkspaceContext.isCodeEditorReady, (isReady) => {
+                this._ready = isReady;
+            });
+            this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue) => {
+                this.#scriptsWorkspaceContext?.setName(`${nameInputValue}.js`);
+            });
+        });
+    }
+    willUpdate(_changedProperties) {
+        if (_changedProperties.has('_path')) {
+            this._dirName = this._path?.substring(0, this._path?.lastIndexOf('/'));
+        }
+    }
+    #onNameInput(event) {
+        const target = event.target;
+        const value = target.value;
+        this.inputQuery$.next(value);
+    }
+    #onCodeEditorInput(event) {
+        const target = event.target;
+        const value = target.code;
+        this.#scriptsWorkspaceContext?.setContent(value);
+    }
+    #renderCodeEditor() {
+        return html `<umb-code-editor
+			language="javascript"
+			id="content"
+			.code=${this._content ?? ''}
+			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
+    }
+    render() {
+        return html `<umb-workspace-editor alias="Umb.Workspace.Scripts">
+			<div id="workspace-header" slot="header">
+				<uui-input
+					placeholder="Enter name..."
+					.value=${this._name}
+					@input=${this.#onNameInput}
+					label="template name"></uui-input>
+				<small>Scripts/${this._dirName}${this._name}.js</small>
+			</div>
+			<uui-box>
+				<!-- the div below in the header is to make the box display nicely with code editor -->
+				<div slot="header"></div>
+				${this._ready
+            ? this.#renderCodeEditor()
+            : html `<div id="loader-container">
+							<uui-loader></uui-loader>
+					  </div>`}
+			</uui-box>
+			<div slot="footer-info">
+				<!-- TODO: Shortcuts Modal? -->
+				<uui-button label="Show keyboard shortcuts">
+					Keyboard Shortcuts
+					<uui-keyboard-shortcut>
+						<uui-key>ALT</uui-key>
+						+
+						<uui-key>shift</uui-key>
+						+
+						<uui-key>k</uui-key>
+					</uui-keyboard-shortcut>
+				</uui-button>
+			</div>
+		</umb-workspace-editor>`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: block;
+				width: 100%;
+			}
+
+			#loader-container {
+				display: grid;
+				place-items: center;
+				min-height: calc(100dvh - 260px);
+			}
+
+			umb-code-editor {
+				--editor-height: calc(100dvh - 260px);
+			}
+
+			uui-box {
+				min-height: calc(100dvh - 260px);
+				margin: var(--uui-size-layout-1);
+				--uui-box-default-padding: 0;
+				/* remove header border bottom as code editor looks better in this box */
+				--uui-color-divider-standalone: transparent;
+			}
+
+			#workspace-header {
+				width: 100%;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbScriptsWorkspaceEditElement.prototype, "_name", null);
+__decorate([
+    state()
+], UmbScriptsWorkspaceEditElement.prototype, "_content", void 0);
+__decorate([
+    state()
+], UmbScriptsWorkspaceEditElement.prototype, "_path", void 0);
+__decorate([
+    state()
+], UmbScriptsWorkspaceEditElement.prototype, "_dirName", void 0);
+__decorate([
+    state()
+], UmbScriptsWorkspaceEditElement.prototype, "_ready", void 0);
+__decorate([
+    query('umb-code-editor')
+], UmbScriptsWorkspaceEditElement.prototype, "_codeEditor", void 0);
+UmbScriptsWorkspaceEditElement = __decorate([
+    customElement('umb-scripts-workspace-edit')
+], UmbScriptsWorkspaceEditElement);
+export default UmbScriptsWorkspaceEditElement;

package/dist-cms/packages/templating/scripts/workspace/scripts-workspace.context.d.ts

@@ -0,0 +1,23 @@
+import { ScriptDetails } from '../config.js';
+import { UmbScriptsRepository } from '../repository/scripts.repository.js';
+import { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
+import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
+import { TextFileResponseModelBaseModel } from '../../../../external/backend-api/index.js';
+export declare class UmbScriptsWorkspaceContext extends UmbWorkspaceContext<UmbScriptsRepository, ScriptDetails> {
+    #private;
+    data: import("rxjs").Observable<TextFileResponseModelBaseModel | undefined>;
+    name: import("rxjs").Observable<string | undefined>;
+    content: import("rxjs").Observable<string | undefined>;
+    path: import("rxjs").Observable<string | undefined>;
+    isCodeEditorReady: import("rxjs").Observable<boolean>;
+    constructor(host: UmbControllerHostElement);
+    getData(): TextFileResponseModelBaseModel | undefined;
+    setName(value: string): void;
+    setContent(value: string): void;
+    load(entityKey: string): Promise<void>;
+    create(parentKey: string): Promise<void>;
+    getEntityId(): string | undefined;
+    save(): Promise<void>;
+    destroy(): void;
+    getEntityType(): string;
+}

package/dist-cms/packages/templating/scripts/workspace/scripts-workspace.context.js

@@ -0,0 +1,87 @@
+import { SCRIPTS_WORKSPACE_ALIAS } from '../config.js';
+import { UmbScriptsRepository } from '../repository/scripts.repository.js';
+import { createObservablePart, UmbBooleanState, UmbDeepState } from '../../../../libs/observable-api/index.js';
+import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
+import { loadCodeEditor } from '../../code-editor/index.js';
+export class UmbScriptsWorkspaceContext extends UmbWorkspaceContext {
+    #data;
+    #isCodeEditorReady;
+    constructor(host) {
+        super(host, SCRIPTS_WORKSPACE_ALIAS, new UmbScriptsRepository(host));
+        this.#data = new UmbDeepState(undefined);
+        this.data = this.#data.asObservable();
+        this.name = createObservablePart(this.#data, (data) => data?.name);
+        this.content = createObservablePart(this.#data, (data) => data?.content);
+        this.path = createObservablePart(this.#data, (data) => data?.path);
+        this.#isCodeEditorReady = new UmbBooleanState(false);
+        this.isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+        this.#loadCodeEditor();
+    }
+    async #loadCodeEditor() {
+        try {
+            await loadCodeEditor();
+            this.#isCodeEditorReady.next(true);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    getData() {
+        return this.#data.getValue();
+    }
+    setName(value) {
+        this.#data.next({ ...this.#data.value, name: value });
+    }
+    setContent(value) {
+        this.#data.next({ ...this.#data.value, content: value });
+    }
+    async load(entityKey) {
+        const { data } = await this.repository.requestByKey(entityKey);
+        if (data) {
+            this.setIsNew(false);
+            this.#data.next(data);
+        }
+    }
+    async create(parentKey) {
+        const newScript = {
+            name: '',
+            path: parentKey,
+            content: '',
+        };
+        this.#data.next(newScript);
+        this.setIsNew(true);
+    }
+    getEntityId() {
+        return this.getData()?.path;
+    }
+    async save() {
+        const script = this.getData();
+        if (!script) {
+            return Promise.reject('Something went wrong, there is no data for script you want to save...');
+        }
+        if (this.getIsNew()) {
+            const createRequestBody = {
+                name: script.name,
+                content: script.content,
+                parentPath: script.path + '/',
+            };
+            this.repository.create(createRequestBody);
+            return Promise.resolve();
+        }
+        if (!script.path)
+            return Promise.reject('There is no path');
+        const updateRequestBody = {
+            name: script.name,
+            existingPath: script.path,
+            content: script.content,
+        };
+        this.repository.save(script.path, updateRequestBody);
+        return Promise.resolve();
+    }
+    destroy() {
+        throw new Error('Method not implemented.');
+    }
+    getEntityType() {
+        throw new Error('Method not implemented.');
+    }
+}

package/dist-cms/packages/templating/scripts/workspace/scripts-workspace.element.d.ts

@@ -0,0 +1,14 @@
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UmbRoute } from '../../../../shared/router/index.js';
+export declare class UmbScriptsWorkspaceElement extends UmbLitElement {
+    #private;
+    _routes: UmbRoute[];
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbScriptsWorkspaceElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-scripts-workspace': UmbScriptsWorkspaceElement;
+    }
+}

package/dist-cms/packages/templating/scripts/workspace/scripts-workspace.element.js

@@ -0,0 +1,50 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { UmbScriptsWorkspaceContext } from './scripts-workspace.context.js';
+import { UUITextStyles } from '../../../../external/uui/index.js';
+import { css, html, customElement, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UmbWorkspaceIsNewRedirectController } from '../../../core/workspace/index.js';
+export let UmbScriptsWorkspaceElement = class UmbScriptsWorkspaceElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.#scriptsWorkspaceContext = new UmbScriptsWorkspaceContext(this);
+        this._routes = [
+            {
+                path: 'create/:parentKey',
+                component: import('./scripts-workspace-edit.element.js'),
+                setup: async (component, info) => {
+                    const parentKey = info.match.params.parentKey;
+                    const decodePath = decodeURIComponent(parentKey);
+                    this.#scriptsWorkspaceContext.create(decodePath === 'null' ? '' : decodePath);
+                    new UmbWorkspaceIsNewRedirectController(this, this.#scriptsWorkspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
+                },
+            },
+            {
+                path: 'edit/:key',
+                component: import('./scripts-workspace-edit.element.js'),
+                setup: (component, info) => {
+                    const key = info.match.params.key;
+                    const decodePath = decodeURIComponent(key).replace('-js', '.js');
+                    this.#scriptsWorkspaceContext.load(decodePath);
+                },
+            },
+        ];
+    }
+    #scriptsWorkspaceContext;
+    render() {
+        return html `<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
+    }
+    static { this.styles = [UUITextStyles, css ``]; }
+};
+__decorate([
+    state()
+], UmbScriptsWorkspaceElement.prototype, "_routes", void 0);
+UmbScriptsWorkspaceElement = __decorate([
+    customElement('umb-scripts-workspace')
+], UmbScriptsWorkspaceElement);
+export default UmbScriptsWorkspaceElement;

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder.element.d.ts

@@ -15,7 +15,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
     private _templateQuery?;
     private _queryRequest;
     private _queryBuilderSettings?;
-    private _selectedRootContentName;
+    private _selectedRootContentName?;
     private _defaultSortDirection;
     constructor();
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder.element.js

@@ -89,7 +89,7 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
     #postTemplateQuery;
     #openDocumentPicker;
     async #getDocumentItem(ids) {
-        const { data, error } = await this.#documentRepository.requestItemsLegacy(ids);
+        const { data, error } = await this.#documentRepository.requestItems(ids);
         if (data) {
             this._selectedRootContentName = data[0].name;
         }

package/dist-cms/packages/users/current-user/modals/current-user/current-user-modal.element.js

@@ -4,9 +4,9 @@ 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 { UMB_APP } from '../../../../../apps/app/index.js';
 import { UMB_AUTH } from '../../../../../shared/auth/index.js';
-import { UMB_APP } from '../../../../../shared/context/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { css, html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 export let UmbCurrentUserModalElement = class UmbCurrentUserModalElement extends UmbLitElement {

package/dist-cms/packages/users/user-groups/collection/user-group-collection-header.element.js

@@ -23,8 +23,8 @@ export let UmbUserGroupCollectionHeaderElement = class UmbUserGroupCollectionHea
     }
     render() {
         return html `
-			<uui-button @click=${this.#onCreate} label="Create group" look="outline"></uui-button>
-			<uui-input @input=${this.#onSearch} label="search" id="input-search"></uui-input>
+			<uui-button @click=${this.#onCreate} label=${this.localize.term('actions_createGroup')} look="outline"></uui-button>
+			<uui-input @input=${this.#onSearch} label=${this.localize.term('general_search')} placeholder=${this.localize.term('visuallyHiddenTexts_userGroupSearchLabel')} id="input-search"></uui-input>
 		`;
     }
     static { this.styles = [

package/dist-cms/packages/users/user-groups/collection/user-group-collection-view.element.js

@@ -19,21 +19,21 @@ export let UmbUserGroupCollectionViewElement = class UmbUserGroupCollectionViewE
         };
         this._tableColumns = [
             {
-                name: 'Name',
+                name: this.localize.term('general_name'),
                 alias: 'userGroupName',
                 elementName: 'umb-user-group-table-name-column-layout',
             },
             {
-                name: 'Sections',
+                name: this.localize.term('main_sections'),
                 alias: 'userGroupSections',
                 elementName: 'umb-user-group-table-sections-column-layout',
             },
             {
-                name: 'Content start node',
+                name: this.localize.term('user_startnode'),
                 alias: 'userGroupContentStartNode',
             },
             {
-                name: 'Media start node',
+                name: this.localize.term('user_mediastartnode'),
                 alias: 'userGroupMediaStartNode',
             },
         ];
@@ -67,11 +67,11 @@ export let UmbUserGroupCollectionViewElement = class UmbUserGroupCollectionViewE
                     },
                     {
                         columnAlias: 'userGroupContentStartNode',
-                        value: userGroup.documentStartNodeId || 'Content root',
+                        value: userGroup.documentStartNodeId || this.localize.term('content_contentRoot'),
                     },
                     {
                         columnAlias: 'userGroupMediaStartNode',
-                        value: userGroup.mediaStartNodeId || 'Media root',
+                        value: userGroup.mediaStartNodeId || this.localize.term('media_mediaRoot'),
                     },
                 ],
             };

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

@@ -77,7 +77,7 @@ export let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEdito
 				</a>
 				<uui-input
 					id="name"
-					label="name"
+					label=${this.localize.term('general_name')}
 					.value=${this._userGroup?.name ?? ''}
 					@input="${this.#onNameChange}"></uui-input>
 			</div>
@@ -87,51 +87,54 @@ export let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEdito
         if (!this._userGroup)
             return nothing;
         return html ` <uui-box>
-				<div slot="headline">Assign access</div>
-				<umb-workspace-property-layout label="Sections" description="Add sections to give users access">
+				<div slot="headline"><umb-localize key="user_assignAccess"></umb-localize></div>
+				<umb-workspace-property-layout label=${this.localize.term('main_sections')} description=${this.localize.term('user_sectionsHelp')}>
 					<umb-input-section
 						slot="editor"
 						.value=${this._userGroup.sections ?? []}
 						@change=${(e) => this.#onSectionsChange(e.target.value)}></umb-input-section>
 				</umb-workspace-property-layout>
 				<umb-workspace-property-layout
-					label="Content start node"
-					description="Limit the content tree to a specific start node">
+					label=${this.localize.term('defaultdialogs_selectContentStartNode')}
+					description=${this.localize.term('user_startnodehelp')}>
 					<b slot="editor">CONTENT START NODE PICKER NOT IMPLEMENTED YET</b>
 				</umb-workspace-property-layout>
 				<umb-workspace-property-layout
-					label="Media start node"
-					description="Limit the media library to a specific start node">
+				label=${this.localize.term('defaultdialogs_selectMediaStartNode')}
+				description=${this.localize.term('user_mediastartnodehelp')}>
 					<b slot="editor">MEDIA START NODE PICKER NOT IMPLEMENTED YET</b>
 				</umb-workspace-property-layout>
 			</uui-box>
 
 			<uui-box>
-				<div slot="headline">Default Permissions</div>
+				<div slot="headline"><umb-localize key="user_permissionsDefault"></umb-localize></div>
 				<b>PERMISSIONS NOT IMPLEMENTED YET</b>
 			</uui-box>
 
 			<uui-box>
-				<div slot="headline">Granular permissions</div>
+				<div slot="headline"><umb-localize key="user_permissionsGranular"></umb-localize></div>
 				<b>PERMISSIONS NOT IMPLEMENTED YET</b>
 			</uui-box>`;
     }
     #renderRightColumn() {
         return html `<uui-box>
-				<div slot="headline">Users</div>
+				<div slot="headline"><umb-localize key="sections_users"></umb-localize></div>
 				<!-- change any to UmbUserInputElement when package is available -->
 				<umb-user-input
 					@change=${(e) => this.#onUsersChange(e.target.selectedIds)}
 					.selectedIds=${this._userKeys ?? []}></umb-user-input>
 			</uui-box>
 			<uui-box>
-				<div slot="headline">Delete user group</div>
+				<div slot="headline">
+					<umb-localize key="actions_delete"></umb-localize>
+					<umb-localize key="user_usergroup"></umb-localize>
+				</div>
 				<uui-button
 					@click=${this.#onDelete}
 					style="width: 100%"
 					color="danger"
 					look="secondary"
-					label="Delete"></uui-button>
+					label=${this.localize.term('actions_delete')}></uui-button>
 			</uui-box>`;
     }
     static { this.styles = [

package/dist-cms/packages/users/users/collection/user-collection-header.element.js

@@ -85,18 +85,19 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
         return html `
 			<uui-button
 				@click=${this._showInviteOrCreate}
-				label=${this._isCloud ? 'Invite' : 'Create' + ' user'}
+				label=${this.localize.term(this._isCloud ? 'user_inviteUser' : 'user_createUser')}
 				look="outline"></uui-button>
-			<uui-input @input=${this._updateSearch} label="search" id="input-search"></uui-input>
+			<uui-input @input=${this._updateSearch} label=${this.localize.term('visuallyHiddenTexts_userSearchLabel')} placeholder=${this.localize.term('visuallyHiddenTexts_userSearchLabel')} id="input-search"></uui-input>
 			<div>
 				<!-- TODO: we should consider using the uui-combobox. We need to add a multiple options to it first -->
 				<umb-dropdown margin="8">
 					<uui-button @click=${this.#onDropdownClick} slot="trigger" label="status">
-						State: ${this._stateFilterSelection}
+						<umb-localize key="general_status"></umb-localize>: 
+						<umb-localize key=${'user_state' + this._stateFilterSelection}></umb-localize>
 					</uui-button>
 					<div slot="dropdown" class="filter-dropdown">
 						${this._stateFilterOptions.map((option) => html `<uui-checkbox
-									label=${option}
+									label=${this.localize.term('user_state' + option)}
 									@change=${this.#onStateFilterChange}
 									name="state"
 									value=${option}></uui-checkbox>`)}
@@ -105,19 +106,25 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
 
 				<!-- TODO: we should consider using the uui-combobox. We need to add a multiple options to it first -->
 				<umb-dropdown margin="8">
-					<uui-button @click=${this.#onDropdownClick} slot="trigger" label="order by"> Group: </uui-button>
+					<uui-button @click=${this.#onDropdownClick} slot="trigger" label=${this.localize.term('general_groups')}>
+						<umb-localize key="general_groups"></umb-localize>:
+						<!-- TODO: show the value here -->
+					</uui-button>
 					<div slot="dropdown" class="filter-dropdown">
-						<uui-checkbox label="Active"></uui-checkbox>
-						<uui-checkbox label="Inactive"></uui-checkbox>
-						<uui-checkbox label="Invited"></uui-checkbox>
-						<uui-checkbox label="Disabled"></uui-checkbox>
+						<!-- TODO: GET THESE FROM SERVER (not localized) -->
+						<uui-checkbox label="Administrators"></uui-checkbox>
+						<uui-checkbox label="Editors"></uui-checkbox>
+						<uui-checkbox label="Sensitive Data"></uui-checkbox>
+						<uui-checkbox label="Translators"></uui-checkbox>
+						<uui-checkbox label="Writers"></uui-checkbox>
 					</div>
 				</umb-dropdown>
 
 				<!-- TODO: we should consider using the uui-combobox. We need to add a multiple options to it first -->
 				<umb-dropdown margin="8">
-					<uui-button @click=${this.#onDropdownClick} slot="trigger" label="Order By">
-						Order By: <b>${this._orderBy}</b>
+					<uui-button @click=${this.#onDropdownClick} slot="trigger" label=${this.localize.term('general_orderBy')}>
+						<umb-localize key="general_orderBy"></umb-localize>:
+						<b>${this._orderBy}</b>
 					</uui-button>
 					<div slot="dropdown" class="filter-dropdown" name="orderBy">
 						<uui-radio-group name="radioGroup" @change=${this.#onOrderByChange}>

package/dist-cms/packages/users/users/collection/views/grid/user-collection-grid-view.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 { css, html, nothing, customElement, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from "../../../../../../shared/style/index.js";
 import { UMB_COLLECTION_CONTEXT_TOKEN } from '../../../../../core/collection/index.js';
@@ -52,22 +52,22 @@ export let UmbUserCollectionGridViewElement = class UmbUserCollectionGridViewEle
         if (user.state && user.state === UserStateModel.ACTIVE) {
             return nothing;
         }
-        const statusLook = getLookAndColorFromUserStatus(user.state);
+        const statusLook = getDisplayStateFromUserStatus(user.state);
         return html `<uui-tag
 			slot="tag"
 			size="s"
 			look="${ifDefined(statusLook?.look)}"
 			color="${ifDefined(statusLook?.color)}">
-			${user.state}
+			<umb-localize key=${'user_' + statusLook.key}></umb-localize>
 		</uui-tag>`;
     }
     #renderUserLoginDate(user) {
         if (!user.lastLoginDate) {
-            return html `<div class="user-login-time">${`${user.name} has not logged in yet`}</div>`;
+            return html `<div class="user-login-time">${`${user.name} ${this.localize.term('user_noLogin')}`}</div>`;
         }
         return html `<div class="user-login-time">
-			<div>Last login</div>
-			${user.lastLoginDate}
+			<umb-localize key="user_lastLogin"></umb-localize><br/>
+			${this.localize.date(user.lastLoginDate)}
 		</div>`;
     }
     render() {

package/dist-cms/packages/users/users/collection/views/table/column-layouts/status/user-table-status-column-layout.element.js

@@ -4,15 +4,15 @@ 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 { html, LitElement, nothing, customElement, property } from '../../../../../../../../external/lit/index.js';
 export let UmbUserTableStatusColumnLayoutElement = class UmbUserTableStatusColumnLayoutElement extends LitElement {
     render() {
         return html `${this.value.status && this.value.status !== 'enabled'
             ? html `<uui-tag
 					size="s"
-					look="${getLookAndColorFromUserStatus(this.value.status).look}"
-					color="${getLookAndColorFromUserStatus(this.value.status).color}">
+					look="${getDisplayStateFromUserStatus(this.value.status).look}"
+					color="${getDisplayStateFromUserStatus(this.value.status).color}">
 					${this.value.status}
 			  </uui-tag>`
             : nothing}`;

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

@@ -1 +1,2 @@
 export * from './types.js';
+export * from './repository/index.js';

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

@@ -1 +1,2 @@
 export * from './types.js';
+export * from './repository/index.js';

package/dist-cms/packages/users/users/repository/index.d.ts

@@ -0,0 +1 @@
+export * from './user.repository.js';

package/dist-cms/packages/users/users/repository/index.js

@@ -0,0 +1 @@
+export * from './user.repository.js';