add crude language selector to user workspace

src/Umbraco.Web.UI.Client/src/packages/users/users/workspace/user-workspace-editor.element.ts

@@ -14,6 +14,7 @@ import {
 	ifDefined,
 	repeat,
 } from '@umbraco-cms/backoffice/external/lit';
+import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 
 import { UMB_CHANGE_PASSWORD_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
@@ -34,9 +35,11 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _user?: UmbUserDetail;
 
+	@state()
+	private languages: Array<{ name: string; value: string; selected: boolean }> = [];
+
 	#auth?: typeof UMB_AUTH.TYPE;
 	#modalContext?: UmbModalManagerContext;
-	#languages = []; //TODO Add languages
 	#workspaceContext?: UmbUserWorkspaceContext;
 
 	#userRepository?: UmbUserRepository;
@@ -78,7 +81,39 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement {
 
 	#observeCurrentUser() {
 		if (!this.#auth) return;
-		this.observe(this.#auth.currentUser, (currentUser) => (this._currentUser = currentUser));
+		this.observe(this.#auth.currentUser, async (currentUser) => {
+			this._currentUser = currentUser;
+
+			if (!currentUser) {
+				return;
+			}
+
+			// Find all translations and make a unique list of iso codes
+			const translations = await firstValueFrom(umbExtensionsRegistry.extensionsOfType('translations'));
+
+			this.languages = translations
+				.filter((isoCode) => isoCode !== undefined)
+				.map((translation) => ({
+					value: translation.meta.culture.toLowerCase(),
+					name: translation.name,
+					selected: false,
+				}));
+
+			const currentUserLanguageCode = currentUser.languageIsoCode?.toLowerCase();
+
+			// Set the current user's language as selected
+			const currentUserLanguage = this.languages.find((language) => language.value === currentUserLanguageCode);
+
+			if (currentUserLanguage) {
+				currentUserLanguage.selected = true;
+			} else {
+				this.languages.push({
+					value: currentUserLanguageCode ?? 'en-us',
+					name: currentUserLanguageCode ? `${currentUserLanguageCode} (unknown)` : 'Unknown',
+					selected: true,
+				});
+			}
+		});
 	}
 
 	#onUserStatusChange() {
@@ -152,10 +187,10 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement {
 		return html` <uui-box>
 				<div slot="headline">Profile</div>
 				<umb-workspace-property-layout label="Email">
-					<uui-input slot="editor" name="email" label="email" readonly value=${this._user.email}></uui-input>
+					<uui-input slot="editor" name="email" label="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">
-					<uui-select slot="editor" name="language" label="language" .options=${this.#languages}> </uui-select>
+					<uui-select slot="editor" name="language" label="language" .options=${this.languages}> </uui-select>
 				</umb-workspace-property-layout>
 			</uui-box>
 			<uui-box>
@@ -172,7 +207,7 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement {
 						label="Content start node"
 						description="Limit the content tree to specific start nodes">
 						<umb-property-editor-ui-document-picker
-							.value=${this._user.contentStartNodeIds}
+							.value=${this._user.contentStartNodeIds ?? []}
 							@property-value-change=${(e: any) =>
 								this.#workspaceContext?.updateProperty('contentStartNodeIds', e.target.value)}
 							slot="editor"></umb-property-editor-ui-document-picker>