From 9f63f9aadc52c1e719fb903c2315a38a1912e990 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 6 Aug 2024 10:06:25 +0100
Subject: [PATCH 1/2] Member workspace: added mandatory flags

---
 .../member/member-workspace-view-member.element.ts   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
index 4d1dea9177..a759781de9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
@@ -72,7 +72,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 	#renderPasswordInput() {
 		if (this._isNew) {
 			return html`
-				<umb-property-layout label="Password">
+				<umb-property-layout label=${this.localize.term('user_password')} mandatory>
 					<uui-input
 						slot="editor"
 						name="newPassword"
@@ -81,7 +81,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 						@input=${() => this.#onPasswordUpdate()}></uui-input>
 				</umb-property-layout>
 
-				<umb-property-layout label="Confirm password">
+				<umb-property-layout label="Confirm password" mandatory>
 					<uui-input
 						slot="editor"
 						name="confirmPassword"
@@ -99,7 +99,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 					this._showChangePasswordForm,
 					() => html`
 						<div slot="editor">
-							<umb-property-layout label=${this.localize.term('user_newPassword')}>
+							<umb-property-layout label=${this.localize.term('user_newPassword')} mandatory>
 								<uui-input
 									slot="editor"
 									name="newPassword"
@@ -107,7 +107,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 									type="password"
 									@input=${() => this.#onPasswordUpdate()}></uui-input>
 							</umb-property-layout>
-							<umb-property-layout label=${this.localize.term('user_confirmNewPassword')}>
+							<umb-property-layout label=${this.localize.term('user_confirmNewPassword')} mandatory>
 								<uui-input
 									slot="editor"
 									name="confirmPassword"
@@ -137,7 +137,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 		if (!this._workspaceContext) return;
 		return html` <div id="left-column">
 			<uui-box>
-				<umb-property-layout label="${this.localize.term('general_username')}">
+				<umb-property-layout label=${this.localize.term('general_username')} mandatory>
 					<uui-input
 						slot="editor"
 						name="login"
@@ -146,7 +146,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 						@input=${(e: Event) => this.#onChange('username', (e.target as HTMLInputElement).value)}></uui-input>
 				</umb-property-layout>
 
-				<umb-property-layout label="${this.localize.term('general_email')}">
+				<umb-property-layout label=${this.localize.term('general_email')} mandatory>
 					<uui-input
 						slot="editor"
 						name="email"

From 4226e10f815b170f814ffeff7beac7e3a40913c1 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 6 Aug 2024 10:09:29 +0100
Subject: [PATCH 2/2] Member workspace: markup amends

---
 ...mber-workspace-view-member-info.element.ts |  12 +-
 .../member-workspace-view-member.element.ts   | 141 +++++++++---------
 2 files changed, 78 insertions(+), 75 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts
index 568290165d..2a8b77ddb3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member-info.element.ts
@@ -71,15 +71,15 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 	#renderGeneralSection() {
 		return html`
 			<div class="general-item">
-				<umb-localize class="headline" key="content_createDate">Created</umb-localize>
+				<strong><umb-localize key="content_createDate">Created</umb-localize></strong>
 				<span> ${this._createDate} </span>
 			</div>
 			<div class="general-item">
-				<umb-localize class="headline" key="content_updateDate">Last edited</umb-localize>
+				<strong><umb-localize key="content_updateDate">Last edited</umb-localize></strong>
 				<span> ${this._updateDate} </span>
 			</div>
 			<div class="general-item">
-				<umb-localize class="headline" key="content_membertype">Member Type</umb-localize>
+				<strong><umb-localize key="content_membertype">Member Type</umb-localize></strong>
 				<uui-ref-node
 					standalone
 					.name=${this._memberTypeName}
@@ -88,7 +88,7 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 				</uui-ref-node>
 			</div>
 			<div class="general-item">
-				<umb-localize class="headline" key="template_id">Id</umb-localize>
+				<strong><umb-localize key="template_id">Id</umb-localize></strong>
 				<span>${this._unique}</span>
 			</div>
 		`;
@@ -102,12 +102,10 @@ export class UmbMemberWorkspaceViewMemberInfoElement extends UmbLitElement imple
 				flex-direction: column;
 				gap: var(--uui-size-space-1);
 			}
+
 			.general-item:not(:last-child) {
 				margin-bottom: var(--uui-size-space-6);
 			}
-			.general-item .headline {
-				font-weight: bold;
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
index a759781de9..bb33e453b8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts
@@ -76,7 +76,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 					<uui-input
 						slot="editor"
 						name="newPassword"
-						label="New password"
+						label=${this.localize.term('user_passwordEnterNew')}
 						type="password"
 						@input=${() => this.#onPasswordUpdate()}></uui-input>
 				</umb-property-layout>
@@ -89,6 +89,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 						type="password"
 						@input=${() => this.#onPasswordUpdate()}></uui-input>
 				</umb-property-layout>
+
 				${when(this._newPasswordError, () => html`<p class="validation-error">${this._newPasswordError}</p>`)}
 			`;
 		}
@@ -122,12 +123,13 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 								@click=${this.#onNewPasswordCancel}></uui-button>
 						</div>
 					`,
-					() =>
-						html`<uui-button
+					() => html`
+						<uui-button
 							slot="editor"
 							label=${this.localize.term('general_changePassword')}
 							look="secondary"
-							@click=${() => (this._showChangePasswordForm = true)}></uui-button>`,
+							@click=${() => (this._showChangePasswordForm = true)}></uui-button>
+					`,
 				)}
 			</umb-property-layout>
 		`;
@@ -135,62 +137,69 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 
 	#renderLeftColumn() {
 		if (!this._workspaceContext) return;
-		return html` <div id="left-column">
-			<uui-box>
-				<umb-property-layout label=${this.localize.term('general_username')} mandatory>
-					<uui-input
-						slot="editor"
-						name="login"
-						label="${this.localize.term('general_username')}"
-						value=${this._workspaceContext.username}
-						@input=${(e: Event) => this.#onChange('username', (e.target as HTMLInputElement).value)}></uui-input>
-				</umb-property-layout>
 
-				<umb-property-layout label=${this.localize.term('general_email')} mandatory>
-					<uui-input
-						slot="editor"
-						name="email"
-						label="${this.localize.term('general_email')}"
-						@input=${(e: Event) => this.#onChange('email', (e.target as HTMLInputElement).value)}
-						value=${this._workspaceContext.email}></uui-input>
-				</umb-property-layout>
+		return html`
+			<div id="left-column">
+				<uui-box>
+					<umb-property-layout label=${this.localize.term('general_username')} mandatory>
+						<uui-input
+							slot="editor"
+							name="login"
+							label=${this.localize.term('general_username')}
+							value=${this._workspaceContext.username}
+							required
+							required-message=${this.localize.term('user_loginnameRequired')}
+							@input=${(e: Event) => this.#onChange('username', (e.target as HTMLInputElement).value)}></uui-input>
+					</umb-property-layout>
 
-				${this.#renderPasswordInput()}
+					<umb-property-layout label=${this.localize.term('general_email')} mandatory>
+						<uui-input
+							slot="editor"
+							name="email"
+							label=${this.localize.term('general_email')}
+							value=${this._workspaceContext.email}
+							required
+							required-message=${this.localize.term('user_emailRequired')}
+							@input=${(e: Event) => this.#onChange('email', (e.target as HTMLInputElement).value)}></uui-input>
+					</umb-property-layout>
 
-				<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>
+					${this.#renderPasswordInput()}
 
-				<umb-property-layout label=${this.localize.term('user_stateApproved')}>
-					<uui-toggle
-						slot="editor"
-						.checked=${this._workspaceContext.isApproved}
-						@change=${(e: UUIBooleanInputEvent) => this.#onChange('isApproved', e.target.checked)}>
-					</uui-toggle>
-				</umb-property-layout>
+					<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=${this.localize.term('user_stateLockedOut')}>
-					<uui-toggle
-						?disabled=${this._isNew || !this._workspaceContext.isLockedOut}
-						slot="editor"
-						.checked=${this._workspaceContext.isLockedOut}
-						@change=${(e: UUIBooleanInputEvent) => this.#onChange('isLockedOut', e.target.checked)}>
-					</uui-toggle>
-				</umb-property-layout>
+					<umb-property-layout label=${this.localize.term('user_stateApproved')}>
+						<uui-toggle
+							slot="editor"
+							.checked=${this._workspaceContext.isApproved}
+							@change=${(e: UUIBooleanInputEvent) => this.#onChange('isApproved', e.target.checked)}>
+						</uui-toggle>
+					</umb-property-layout>
 
-				<umb-property-layout label=${this.localize.term('member_2fa')}>
-					<uui-toggle
-						?disabled=${this._isNew || !this._workspaceContext.isTwoFactorEnabled}
-						slot="editor"
-						.checked=${this._workspaceContext.isTwoFactorEnabled}
-						@change=${(e: UUIBooleanInputEvent) => this.#onChange('isTwoFactorEnabled', e.target.checked)}>
-					</uui-toggle>
-				</umb-property-layout>
-			</uui-box>
-		</div>`;
+					<umb-property-layout label=${this.localize.term('user_stateLockedOut')}>
+						<uui-toggle
+							slot="editor"
+							?disabled=${this._isNew || !this._workspaceContext.isLockedOut}
+							.checked=${this._workspaceContext.isLockedOut}
+							@change=${(e: UUIBooleanInputEvent) => this.#onChange('isLockedOut', e.target.checked)}>
+						</uui-toggle>
+					</umb-property-layout>
+
+					<umb-property-layout label=${this.localize.term('member_2fa')}>
+						<uui-toggle
+							slot="editor"
+							?disabled=${this._isNew || !this._workspaceContext.isTwoFactorEnabled}
+							.checked=${this._workspaceContext.isTwoFactorEnabled}
+							@change=${(e: UUIBooleanInputEvent) => this.#onChange('isTwoFactorEnabled', e.target.checked)}>
+						</uui-toggle>
+					</umb-property-layout>
+				</uui-box>
+			</div>
+		`;
 	}
 
 	#renderRightColumn() {
@@ -200,11 +209,11 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 			<div id="right-column">
 				<uui-box>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_failedPasswordAttempts">Failed login attempts</umb-localize>
+						<strong><umb-localize key="user_failedPasswordAttempts">Failed login attempts</umb-localize></strong>
 						<span>${this._workspaceContext.failedPasswordAttempts}</span>
 					</div>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_lastLockoutDate">Last lockout date</umb-localize>
+						<strong><umb-localize key="user_lastLockoutDate">Last lockout date</umb-localize></strong>
 						<span>
 							${this._workspaceContext.lastLockOutDate
 								? this.localize.date(this._workspaceContext.lastLockOutDate, TimeFormatOptions)
@@ -212,7 +221,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 						</span>
 					</div>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_lastLogin">Last login</umb-localize>
+						<strong><umb-localize key="user_lastLogin">Last login</umb-localize></strong>
 						<span>
 							${this._workspaceContext.lastLoginDate
 								? this.localize.date(this._workspaceContext.lastLoginDate, TimeFormatOptions)
@@ -220,7 +229,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 						</span>
 					</div>
 					<div class="general-item">
-						<umb-localize class="headline" key="user_passwordChangedGeneric">Password changed</umb-localize>
+						<strong><umb-localize key="user_passwordChangedGeneric">Password changed</umb-localize></strong>
 						<span>
 							${this._workspaceContext.lastPasswordChangeDate
 								? this.localize.date(this._workspaceContext.lastPasswordChangeDate, TimeFormatOptions)
@@ -237,13 +246,11 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 	}
 
 	override render() {
-		if (!this._workspaceContext) {
-			return html`<div>Not found</div>`;
-		}
-
-		return html` <umb-body-layout header-fit-height>
-			<div id="main">${this.#renderLeftColumn()} ${this.#renderRightColumn()}</div>
-		</umb-body-layout>`;
+		return html`
+			<umb-body-layout header-fit-height>
+				<div id="main">${this.#renderLeftColumn()} ${this.#renderRightColumn()}</div>
+			</umb-body-layout>
+		`;
 	}
 
 	static override styles = [
@@ -289,12 +296,10 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 				flex-direction: column;
 				gap: var(--uui-size-space-1);
 			}
+
 			.general-item:not(:last-child) {
 				margin-bottom: var(--uui-size-space-6);
 			}
-			.general-item .headline {
-				font-weight: bold;
-			}
 		`,
 	];
 }