frontend: enhance E2EE key input handling with computed visibility and raw value access

This commit is contained in:
Carlos Santos 2025-11-27 09:31:54 +01:00
parent 246d6e91a4
commit 21971e1895
3 changed files with 16 additions and 5 deletions

View File

@ -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

View File

@ -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();

View File

@ -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();
});
/**