Merge pull request #2008 from umbraco/bugfix/v14/member-localizations…

…-and-time-formatting

Bugfix: Member localizations and time formatting

src/assets/lang/da-dk.ts

@@ -538,6 +538,7 @@ export default {
 		selectContentType: 'Vælg indholdstype',
 		selectMediaStartNode: 'Vælg startnode for mediearkivet',
 		selectMember: 'Vælg medlem',
+		selectMembers: 'Vælg medlemmer',
 		selectMemberGroup: 'Vælg medlemsgruppe',
 		selectMemberType: 'Vælg medlemstype',
 		selectNode: 'Vælg node',
@@ -762,6 +763,7 @@ export default {
 		deleted: 'Slettet',
 		deleting: 'Sletter...',
 		design: 'Design',
+		details: 'Detaljer',
 		dictionary: 'Ordbog',
 		dimensions: 'Dimensioner',
 		discard: 'Kassér',
@@ -808,6 +810,7 @@ export default {
 		message: 'Besked',
 		move: 'Flyt',
 		name: 'Navn',
+		never: 'Aldrig',
 		new: 'Ny',
 		next: 'Næste',
 		no: 'Nej',
@@ -850,6 +853,7 @@ export default {
 		submit: 'Indsend',
 		type: 'Type',
 		typeToSearch: 'Skriv for at søge...',
+		unknown: 'Ukendt',
 		unknownUser: 'Ukendt bruger',
 		under: 'under',
 		up: 'Op',

src/assets/lang/en-us.ts

@@ -549,6 +549,7 @@ export default {
 		selectContentType: 'Select content type',
 		selectMediaStartNode: 'Select media start node',
 		selectMember: 'Select member',
+		selectMembers: 'Select members',
 		selectMemberGroup: 'Select member group',
 		selectMemberType: 'Select member type',
 		selectNode: 'Select node',
@@ -821,6 +822,7 @@ export default {
 		message: 'Message',
 		move: 'Move',
 		name: 'Name',
+		never: 'Never',
 		new: 'New',
 		next: 'Next',
 		no: 'No',
@@ -870,6 +872,7 @@ export default {
 		type: 'Type',
 		typeName: 'Type Name',
 		typeToSearch: 'Type to search...',
+		unknown: 'Unknown',
 		unknownUser: 'Unknown user',
 		under: 'under',
 		up: 'Up',

src/assets/lang/en.ts

@@ -560,6 +560,7 @@ export default {
 		selectContentType: 'Select content type',
 		selectMediaStartNode: 'Select media start node',
 		selectMember: 'Select member',
+		selectMembers: 'Select members',
 		selectMemberGroup: 'Select member group',
 		selectMemberType: 'Select member type',
 		selectNode: 'Select node',
@@ -830,6 +831,7 @@ export default {
 		message: 'Message',
 		move: 'Move',
 		name: 'Name',
+		never: 'Never',
 		new: 'New',
 		next: 'Next',
 		no: 'No',
@@ -879,6 +881,7 @@ export default {
 		type: 'Type',
 		typeName: 'Type Name',
 		typeToSearch: 'Type to search...',
+		unknown: 'Unknown',
 		unknownUser: 'Unknown user',
 		under: 'under',
 		up: 'Up',

src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts

@@ -16,7 +16,7 @@ export class UmbMemberGroupTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _tableColumns: Array<UmbTableColumn> = [
 		{
-			name: 'Name',
+			name: this.localize.term('general_name'),
 			alias: 'memberGroupName',
 		},
 	];

src/packages/members/member-group/components/input-member-group/input-member-group.element.ts

@@ -182,6 +182,7 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
 					${this.#renderOpenButton(item)}
 					<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
 				</uui-action-bar>
+				<umb-icon slot="icon" name="icon-users"></umb-icon>
 			</uui-ref-node>
 		`;
 	}

src/packages/members/member-group/workspace/views/info/member-type-workspace-view-info.element.ts

@@ -23,17 +23,19 @@ export class UmbMemberTypeWorkspaceViewMemberInfoElement extends UmbLitElement i
 
 	render() {
 		return html` <div id="left-column">
-				<uui-box headline="Member Group">
+				<uui-box headline=${this.localize.term('content_membergroup')}>
 					<div id="no-properties">
-						<umb-localize key="member_memberGroupNoProperties"></umb-localize>
+						<umb-localize key="member_memberGroupNoProperties">
+							Member groups have no additional properties for editing.
+						</umb-localize>
 					</div>
 				</uui-box>
 			</div>
 
 			<div id="right-column">
-				<uui-box headline="General">
+				<uui-box headline=${this.localize.term('general_general')}>
 					<div class="property">
-						<b>Id</b>
+						<b><umb-localize key="general_id">Id</umb-localize></b>
 						<span>${this._unique}</span>
 					</div>
 				</uui-box>

src/packages/members/member/collection/views/table/member-table-collection-view.element.ts

@@ -16,7 +16,7 @@ export class UmbMemberTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _tableColumns: Array<UmbTableColumn> = [
 		{
-			name: 'Name',
+			name: this.localize.term('general_name'),
 			alias: 'memberName',
 		},
 	];

src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts

@@ -46,7 +46,7 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
 	}
 
 	render() {
-		return html`<umb-body-layout headline="Select members">
+		return html`<umb-body-layout headline=${this.localize.term('defaultdialogs_selectMembers')}>
 			<uui-box>
 				${repeat(
 					this.#filteredMembers,
@@ -64,8 +64,12 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
 				)}
 			</uui-box>
 			<div slot="actions">
-				<uui-button label="Close" @click=${this.#close}></uui-button>
-				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
+				<uui-button label=${this.localize.term('general_cancel')} @click=${this.#close}></uui-button>
+				<uui-button
+					label=${this.localize.term('general_submit')}
+					look="primary"
+					color="positive"
+					@click=${this.#submit}></uui-button>
 			</div>
 		</umb-body-layout> `;
 	}

src/packages/members/member/workspace/manifests.ts

@@ -67,7 +67,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 		js: () => import('./views/member/member-workspace-view-member.element.js'),
 		weight: 200,
 		meta: {
-			label: 'Member',
+			label: '#treeHeaders_member',
 			pathname: 'member',
 			icon: 'icon-user',
 		},

src/packages/members/member/workspace/member-workspace.context.ts

@@ -399,43 +399,40 @@ export class UmbMemberWorkspaceContext
 		this.#currentData.setValue({ ...currentData, ...data });
 	}
 
-	get email() {
+	get email(): string {
 		return this.#get('email') || '';
 	}
 
-	get username() {
+	get username(): string {
 		return this.#get('username') || '';
 	}
 
-	get isLockedOut() {
+	get isLockedOut(): boolean {
 		return this.#get('isLockedOut') || false;
 	}
 
-	get isTwoFactorEnabled() {
+	get isTwoFactorEnabled(): boolean {
 		return this.#get('isTwoFactorEnabled') || false;
 	}
 
-	get isApproved() {
+	get isApproved(): boolean {
 		return this.#get('isApproved') || false;
 	}
 
-	get failedPasswordAttempts() {
+	get failedPasswordAttempts(): number {
 		return this.#get('failedPasswordAttempts') || 0;
 	}
 
-	//TODO Use localization for "never"
-	get lastLockOutDate() {
-		return this.#get('lastLockoutDate') || 'never';
+	get lastLockOutDate(): string | null {
+		return this.#get('lastLockoutDate') ?? null;
 	}
 
-	get lastLoginDate() {
-		return this.#get('lastLoginDate') || 'never';
+	get lastLoginDate(): string | null {
+		return this.#get('lastLoginDate') ?? null;
 	}
 
-	get lastPasswordChangeDate() {
-		const date = this.#get('lastPasswordChangeDate');
-		if (!date) return 'never';
-		return new Date(date).toLocaleString();
+	get lastPasswordChangeDate(): string | null {
+		return this.#get('lastPasswordChangeDate') ?? null;
 	}
 
 	get memberGroups() {

src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts

@@ -1,5 +1,6 @@
 // import { UMB_COMPOSITION_PICKER_MODAL, type UmbCompositionPickerModalData } from '../../../modals/index.js';
 import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-workspace.context-token.js';
+import { TimeFormatOptions } from './utils.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -19,10 +20,12 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 
 	@state()
 	private _editMemberTypePath = '';
+
 	@state()
-	private _createDate = 'Unknown';
+	private _createDate = this.localize.term('general_unknown');
+
 	@state()
-	private _updateDate = 'Unknown';
+	private _updateDate = this.localize.term('general_unknown');
 
 	@state()
 	private _unique = '';
@@ -45,8 +48,8 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 		this.consumeContext(UMB_MEMBER_WORKSPACE_CONTEXT, async (context) => {
 			this.#workspaceContext = context;
 			this.observe(this.#workspaceContext.contentTypeUnique, (unique) => (this._memberTypeUnique = unique || ''));
-			this.observe(this.#workspaceContext.createDate, (date) => (this._createDate = date || 'Unknown'));
-			this.observe(this.#workspaceContext.updateDate, (date) => (this._updateDate = date || 'Unknown'));
+			this.observe(this.#workspaceContext.createDate, (date) => (this._createDate = this.#setDateFormat(date)));
+			this.observe(this.#workspaceContext.updateDate, (date) => (this._updateDate = this.#setDateFormat(date)));
 			this.observe(this.#workspaceContext.unique, (unique) => (this._unique = unique || ''));
 
 			const memberType = (await this.#memberTypeItemRepository.requestItems([this._memberTypeUnique])).data?.[0];
@@ -56,37 +59,36 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 		});
 	}
 
+	#setDateFormat(date: string | undefined | null): string {
+		if (!date) return this.localize.term('general_unknown');
+		return this.localize.date(date, TimeFormatOptions);
+	}
+
 	render() {
 		return this.#renderGeneralSection();
 	}
 
 	#renderGeneralSection() {
 		return html`
 			<div class="general-item">
-				<umb-localize class="headline" key="content_createDate"></umb-localize>
-				<span>
-					<umb-localize-date .date=${this._createDate}></umb-localize-date>
-				</span>
+				<umb-localize class="headline" key="content_createDate">Created</umb-localize>
+				<span> ${this._createDate} </span>
 			</div>
 			<div class="general-item">
-				<umb-localize class="headline" key="content_updateDate"></umb-localize>
-				<span>
-					<umb-localize-date .date=${this._updateDate}></umb-localize-date>
-				</span>
+				<umb-localize class="headline" key="content_updateDate">Last edited</umb-localize>
+				<span> ${this._updateDate} </span>
 			</div>
 			<div class="general-item">
-				<span class="headline">Member Type</span>
-				<div class="member-type-edit">
-					<uui-icon .name=${this._memberTypeIcon}></uui-icon>
-					<span>${this._memberTypeName}</span>
-					<uui-button
-						look="secondary"
-						href=${this._editMemberTypePath + 'edit/' + this._memberTypeUnique}
-						label=${this.localize.term('general_edit')}></uui-button>
-				</div>
+				<umb-localize class="headline" key="content_membertype">Member Type</umb-localize>
+				<uui-ref-node
+					standalone
+					.name=${this._memberTypeName}
+					.href=${this._editMemberTypePath + 'edit/' + this._memberTypeUnique}>
+					<umb-icon slot="icon" .name=${this._memberTypeIcon}></umb-icon>
+				</uui-ref-node>
 			</div>
 			<div class="general-item">
-				<umb-localize class="headline" key="template_id"></umb-localize>
+				<umb-localize class="headline" key="template_id">Id</umb-localize>
 				<span>${this._unique}</span>
 			</div>
 		`;
@@ -95,17 +97,6 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 	static styles = [
 		UmbTextStyles,
 		css`
-			.member-type-edit {
-				display: flex;
-				align-items: center;
-			}
-			.member-type-edit uui-icon {
-				margin-right: var(--uui-size-space-1);
-			}
-			.member-type-edit uui-button {
-				margin-left: auto;
-			}
-
 			.general-item {
 				display: flex;
 				flex-direction: column;