From dc23f9cb4d2e1976375701c3bae8c105a6a02bca Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 18 Jun 2024 13:30:37 +0200
Subject: [PATCH] Bugfix: Member localizations and time formatting

---
 src/assets/lang/da-dk.ts                      |  4 ++
 src/assets/lang/en-us.ts                      |  3 +
 src/assets/lang/en.ts                         |  3 +
 ...ber-group-table-collection-view.element.ts |  2 +-
 .../input-member-group.element.ts             |  1 +
 ...member-type-workspace-view-info.element.ts | 10 ++--
 .../member-table-collection-view.element.ts   |  2 +-
 .../member-picker-modal.element.ts            | 10 +++-
 .../members/member/workspace/manifests.ts     |  2 +-
 .../workspace/member-workspace.context.ts     | 27 ++++-----
 ...mber-workspace-view-member-info.element.ts | 57 ++++++++-----------
 .../member-workspace-view-member.element.ts   | 52 +++++++++++------
 .../member/workspace/views/member/utils.ts    |  1 +
 src/packages/user/user/utils.ts               |  2 +
 .../user-workspace-info.element.ts            | 18 +++---
 15 files changed, 109 insertions(+), 85 deletions(-)
 create mode 100644 src/packages/members/member/workspace/views/member/utils.ts

diff --git a/src/assets/lang/da-dk.ts b/src/assets/lang/da-dk.ts
index b38bcea472..14f131d9b9 100644
--- a/src/assets/lang/da-dk.ts
+++ b/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',
diff --git a/src/assets/lang/en-us.ts b/src/assets/lang/en-us.ts
index cf78a5ae8d..d54e3a6bdc 100644
--- a/src/assets/lang/en-us.ts
+++ b/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',
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 55db3876f1..54251ffd3a 100644
--- a/src/assets/lang/en.ts
+++ b/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',
diff --git a/src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts b/src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts
index 5b37dbb1f1..3a95108ef7 100644
--- a/src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts
+++ b/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',
 		},
 	];
diff --git a/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
index e415c4a535..ae00375388 100644
--- a/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
+++ b/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>
 		`;
 	}
diff --git a/src/packages/members/member-group/workspace/views/info/member-type-workspace-view-info.element.ts b/src/packages/members/member-group/workspace/views/info/member-type-workspace-view-info.element.ts
index d38e509e02..0d6748fb3b 100644
--- a/src/packages/members/member-group/workspace/views/info/member-type-workspace-view-info.element.ts
+++ b/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>
diff --git a/src/packages/members/member/collection/views/table/member-table-collection-view.element.ts b/src/packages/members/member/collection/views/table/member-table-collection-view.element.ts
index ce1f3f0d10..ae6b1bfe34 100644
--- a/src/packages/members/member/collection/views/table/member-table-collection-view.element.ts
+++ b/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',
 		},
 	];
diff --git a/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
index a5ab4a5928..e810b003d4 100644
--- a/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
+++ b/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> `;
 	}
diff --git a/src/packages/members/member/workspace/manifests.ts b/src/packages/members/member/workspace/manifests.ts
index 12cd0df619..0c83475d5c 100644
--- a/src/packages/members/member/workspace/manifests.ts
+++ b/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',
 		},
diff --git a/src/packages/members/member/workspace/member-workspace.context.ts b/src/packages/members/member/workspace/member-workspace.context.ts
index a635e56a12..d24fd54c86 100644
--- a/src/packages/members/member/workspace/member-workspace.context.ts
+++ b/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() {
diff --git a/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts b/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts
index 5e463eceff..3b5f8405df 100644
--- a/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts
+++ b/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,6 +59,11 @@ 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();
 	}
@@ -63,30 +71,24 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 	#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;
diff --git a/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts b/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
index abcf82c4fd..c5d3af5470 100644
--- a/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
+++ b/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
@@ -1,5 +1,6 @@
 import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-workspace.context-token.js';
 import type { UmbMemberDetailModel } from '../../../types.js';
+import { TimeFormatOptions } from './utils.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -93,35 +94,38 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 		}
 
 		return html`
-			<umb-property-layout label="Change password">
+			<umb-property-layout label=${this.localize.term('general_changePassword')}>
 				${when(
 					this._showChangePasswordForm,
 					() => html`
 						<div slot="editor">
-							<umb-property-layout label="New password">
+							<umb-property-layout label=${this.localize.term('user_newPassword')}>
 								<uui-input
 									slot="editor"
 									name="newPassword"
-									label="New password"
+									label=${this.localize.term('user_newPassword')}
 									type="password"
 									@input=${() => this.#onPasswordUpdate()}></uui-input>
 							</umb-property-layout>
-							<umb-property-layout label="Confirm password">
+							<umb-property-layout label=${this.localize.term('user_confirmNewPassword')}>
 								<uui-input
 									slot="editor"
 									name="confirmPassword"
-									label="Confirm password"
+									label=${this.localize.term('user_confirmNewPassword')}
 									type="password"
 									@input=${() => this.#onPasswordUpdate()}></uui-input>
 							</umb-property-layout>
 							${when(this._newPasswordError, () => html`<p class="validation-error">${this._newPasswordError}</p>`)}
-							<uui-button label="Cancel" look="secondary" @click=${this.#onNewPasswordCancel}></uui-button>
+							<uui-button
+								label=${this.localize.term('general_cancel')}
+								look="secondary"
+								@click=${this.#onNewPasswordCancel}></uui-button>
 						</div>
 					`,
 					() =>
 						html`<uui-button
 							slot="editor"
-							label="Change password"
+							label=${this.localize.term('general_changePassword')}
 							look="secondary"
 							@click=${() => (this._showChangePasswordForm = true)}></uui-button>`,
 				)}
@@ -153,14 +157,14 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 
 				${this.#renderPasswordInput()}
 
-				<umb-property-layout label="Member Group">
+				<umb-property-layout label=${this.localize.term('content_membergroup')}>
 					<umb-input-member-group
 						slot="editor"
 						@change=${this.#onGroupsUpdated}
 						.selection=${this._workspaceContext.memberGroups}></umb-input-member-group>
 				</umb-property-layout>
 
-				<umb-property-layout label="Approved">
+				<umb-property-layout label=${this.localize.term('user_stateApproved')}>
 					<uui-toggle
 						slot="editor"
 						.checked=${this._workspaceContext.isApproved}
@@ -168,7 +172,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 					</uui-toggle>
 				</umb-property-layout>
 
-				<umb-property-layout label="Locked out">
+				<umb-property-layout label=${this.localize.term('user_stateLockedOut')}>
 					<uui-toggle
 						?disabled=${this._isNew || !this._workspaceContext.isLockedOut}
 						slot="editor"
@@ -177,7 +181,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 					</uui-toggle>
 				</umb-property-layout>
 
-				<umb-property-layout label="Two-Factor authentication">
+				<umb-property-layout label=${this.localize.term('member_2fa')}>
 					<uui-toggle
 						?disabled=${this._isNew || !this._workspaceContext.isTwoFactorEnabled}
 						slot="editor"
@@ -196,20 +200,32 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 			<div id="right-column">
 				<uui-box>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_failedPasswordAttempts"></umb-localize>
+						<umb-localize class="headline" key="user_failedPasswordAttempts">Failed login attempts</umb-localize>
 						<span>${this._workspaceContext.failedPasswordAttempts}</span>
 					</div>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_lastLockoutDate"></umb-localize>
-						<span>${this._workspaceContext.lastLockOutDate}</span>
+						<umb-localize class="headline" key="user_lastLockoutDate">Last lockout date</umb-localize>
+						<span>
+							${this._workspaceContext.lastLockOutDate
+								? this.localize.date(this._workspaceContext.lastLockOutDate, TimeFormatOptions)
+								: this.localize.term('general_never')}
+						</span>
 					</div>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_lastLogin"></umb-localize>
-						<span>${this._workspaceContext.lastLoginDate}</span>
+						<umb-localize class="headline" key="user_lastLogin">Last login</umb-localize>
+						<span>
+							${this._workspaceContext.lastLoginDate
+								? this.localize.date(this._workspaceContext.lastLoginDate, TimeFormatOptions)
+								: this.localize.term('general_never')}
+						</span>
 					</div>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_passwordChangedGeneric"></umb-localize>
-						<span>${this._workspaceContext.lastPasswordChangeDate}</span>
+						<umb-localize class="headline" key="user_passwordChangedGeneric">Password changed</umb-localize>
+						<span>
+							${this._workspaceContext.lastPasswordChangeDate
+								? this.localize.date(this._workspaceContext.lastPasswordChangeDate, TimeFormatOptions)
+								: this.localize.term('general_never')}
+						</span>
 					</div>
 				</uui-box>
 
diff --git a/src/packages/members/member/workspace/views/member/utils.ts b/src/packages/members/member/workspace/views/member/utils.ts
new file mode 100644
index 0000000000..4202a90282
--- /dev/null
+++ b/src/packages/members/member/workspace/views/member/utils.ts
@@ -0,0 +1 @@
+export const TimeFormatOptions: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'short' };
diff --git a/src/packages/user/user/utils.ts b/src/packages/user/user/utils.ts
index 75a22b572b..5f28cf85af 100644
--- a/src/packages/user/user/utils.ts
+++ b/src/packages/user/user/utils.ts
@@ -23,3 +23,5 @@ export const getDisplayStateFromUserStatus = (status: UserStateModel): UmbUserDi
 			...state,
 			key: 'state' + state.key,
 		}))[0];
+
+export const TimeFormatOptions: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'short' };
diff --git a/src/packages/user/user/workspace/components/user-workspace-info/user-workspace-info.element.ts b/src/packages/user/user/workspace/components/user-workspace-info/user-workspace-info.element.ts
index 8d5a19a7ee..fa6c911faa 100644
--- a/src/packages/user/user/workspace/components/user-workspace-info/user-workspace-info.element.ts
+++ b/src/packages/user/user/workspace/components/user-workspace-info/user-workspace-info.element.ts
@@ -1,5 +1,5 @@
 import type { UmbUserDisplayStatus } from '../../../utils.js';
-import { getDisplayStateFromUserStatus } from '../../../utils.js';
+import { TimeFormatOptions, getDisplayStateFromUserStatus } from '../../../utils.js';
 import { UMB_USER_WORKSPACE_CONTEXT } from '../../user-workspace.context-token.js';
 import type { UmbUserDetailModel } from '../../../types.js';
 import { html, customElement, state, css, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
@@ -45,24 +45,24 @@ export class UmbUserWorkspaceInfoElement extends UmbLitElement {
 			{
 				labelKey: 'user_lastLogin',
 				value: user.lastLoginDate
-					? this.localize.date(user.lastLoginDate)
-					: `${user.name + ' ' + this.localize.term('user_noLogin')} `,
+					? this.localize.date(user.lastLoginDate, TimeFormatOptions)
+					: `${user.name} ${this.localize.term('user_noLogin')}`,
 			},
 			{ labelKey: 'user_failedPasswordAttempts', value: user.failedLoginAttempts },
 			{
 				labelKey: 'user_lastLockoutDate',
 				value: user.lastLockoutDate
-					? this.localize.date(user.lastLockoutDate)
-					: `${user.name + ' ' + this.localize.term('user_noLockouts')}`,
+					? this.localize.date(user.lastLockoutDate, TimeFormatOptions)
+					: `${user.name} ${this.localize.term('user_noLockouts')}`,
 			},
 			{
 				labelKey: 'user_lastPasswordChangeDate',
 				value: user.lastPasswordChangeDate
-					? this.localize.date(user.lastPasswordChangeDate)
-					: `${user.name + ' ' + this.localize.term('user_noPasswordChange')}`,
+					? this.localize.date(user.lastPasswordChangeDate, TimeFormatOptions)
+					: `${user.name} ${this.localize.term('user_noPasswordChange')}`,
 			},
-			{ labelKey: 'user_createDate', value: this.localize.date(user.createDate!) },
-			{ labelKey: 'user_updateDate', value: this.localize.date(user.updateDate!) },
+			{ labelKey: 'user_createDate', value: this.localize.date(user.createDate!, TimeFormatOptions) },
+			{ labelKey: 'user_updateDate', value: this.localize.date(user.updateDate!, TimeFormatOptions) },
 			{ labelKey: 'general_id', value: user.unique },
 		];
 	};