From 21971e189573ac108de1a7d548f8de7d7c9da61b Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 27 Nov 2025 09:31:54 +0100
Subject: [PATCH] frontend: enhance E2EE key input handling with computed
 visibility and raw value access

---
 .../meeting-lobby/meeting-lobby.component.html           | 4 ++--
 .../components/meeting-lobby/meeting-lobby.component.ts  | 9 +++++++++
 .../src/lib/services/meeting/meeting-lobby.service.ts    | 8 +++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.html
index 2dcac213..0f44ff22 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.html
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.html
@@ -49,8 +49,8 @@
 								}
 							</mat-form-field>
 
-							<!-- E2EE Key Input (shown when E2EE is enabled) -->
-							@if (isE2EEEnabled()) {
+							<!-- E2EE Key Input (shown when E2EE is enabled and key is not pre-filled from URL) -->
+							@if (showE2EEKeyInput()) {
 								<mat-form-field appearance="outline" class="e2eekey-field fade-in">
 									<mat-label>Encryption Key</mat-label>
 									<input
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.ts
index f4f37e37..db212337 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/components/meeting-lobby/meeting-lobby.component.ts
@@ -47,6 +47,15 @@ export class MeetingLobbyComponent {
 	protected backButtonText = computed(() => this.lobbyService.state().backButtonText);
 	protected isE2EEEnabled = computed(() => this.lobbyService.state().hasRoomE2EEEnabled);
 	protected participantForm = computed(() => this.lobbyService.state().participantForm);
+	/**
+	 * Computed signal to determine if the E2EE key input should be shown.
+	 * When E2EE key is provided via URL query param, the control is disabled and should not be displayed.
+	 */
+	protected showE2EEKeyInput = computed(() => {
+		const form = this.lobbyService.state().participantForm;
+		const e2eeKeyControl = form.get('e2eeKey');
+		return this.isE2EEEnabled() && e2eeKeyControl?.enabled;
+	});
 
 	async onFormSubmit(): Promise<void> {
 		await this.lobbyService.submitAccess();
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/services/meeting/meeting-lobby.service.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/services/meeting/meeting-lobby.service.ts
index ec2720ef..1bd2981a 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/services/meeting/meeting-lobby.service.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/services/meeting/meeting-lobby.service.ts
@@ -86,13 +86,15 @@ export class MeetingLobbyService {
 
 	/**
 	 * Computed signal for E2EE key - optimized to avoid repeated form access
+	 * Uses getRawValue() to get the value even when the control is disabled (e.g., when set from URL param)
 	 */
 	readonly e2eeKeyValue = computed(() => {
-		const { valid, value } = this._state().participantForm;
-		if (!valid || !value.e2eeKey?.trim()) {
+		const form = this._state().participantForm;
+		const rawValue = form.getRawValue();
+		if (!form.valid || !rawValue.e2eeKey?.trim()) {
 			return '';
 		}
-		return value.e2eeKey.trim();
+		return rawValue.e2eeKey.trim();
 	});
 
 	/**