From bd8c0a7b5d14460c2a39762796bb924d954961f8 Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Fri, 5 Sep 2025 12:06:11 +0200
Subject: [PATCH] frontend: enhance webhook toggle functionality based on API
 key presence and improve error handling in test webhook url

---
 .../developers/developers.component.html      |  6 ++-
 .../developers/developers.component.ts        | 38 ++++++++++++++++---
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html
index f61ccdd..c7241d3 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html
@@ -117,7 +117,11 @@
 						<h4 class="webhook-section-title">Webhook Notifications</h4>
 						<div class="webhook-toggle ov-mt-xs">
 							<span>Enable webhook notifications</span>
-							<mat-slide-toggle formControlName="isEnabled"></mat-slide-toggle>
+							<mat-slide-toggle
+								formControlName="isEnabled"
+								[matTooltip]="!canEnableWebhooks ? 'API key is required to enable webhooks' : ''"
+								[matTooltipDisabled]="canEnableWebhooks"
+							></mat-slide-toggle>
 						</div>
 
 						<!-- Webhook URL -->
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts
index 12ee8c2..7964cb5 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts
@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard';
-import { Component, OnInit, signal } from '@angular/core';
+import { Component, effect, OnInit, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -56,12 +56,24 @@ export class DevelopersSettingsComponent implements OnInit {
 		protected clipboard: Clipboard
 	) {
 		// Disable url field initially and enable/disable based on isEnabled toggle
-		this.webhookForm.get('url')?.disable();
+		const urlControl = this.webhookForm.get('url');
+		urlControl?.disable();
 		this.webhookForm.get('isEnabled')?.valueChanges.subscribe((isEnabled) => {
 			if (isEnabled) {
-				this.webhookForm.get('url')?.enable();
+				urlControl?.enable();
 			} else {
-				this.webhookForm.get('url')?.disable();
+				urlControl?.disable();
+			}
+		});
+
+		// Disable webhook toggle initially and enable/disable based on API key presence
+		const webhookToggle = this.webhookForm.get('isEnabled');
+		webhookToggle?.disable();
+		effect(() => {
+			if (this.apiKeyData()) {
+				webhookToggle?.enable();
+			} else {
+				webhookToggle?.disable();
 			}
 		});
 
@@ -129,6 +141,14 @@ export class DevelopersSettingsComponent implements OnInit {
 			await this.authService.deleteApiKeys();
 			this.apiKeyData.set(undefined);
 			this.showApiKey.set(false);
+
+			// Disable webhooks when API key is revoked
+			const webhookToggle = this.webhookForm.get('isEnabled');
+			if (webhookToggle?.value) {
+				webhookToggle.setValue(false);
+				await this.saveWebhookConfig();
+			}
+
 			this.notificationService.showSnackbar('API Key revoked successfully');
 		} catch (error) {
 			console.error('Error revoking API key:', error);
@@ -138,6 +158,10 @@ export class DevelopersSettingsComponent implements OnInit {
 
 	// ===== WEBHOOK CONFIGURATION METHODS =====
 
+	get canEnableWebhooks(): boolean {
+		return !!this.apiKeyData();
+	}
+
 	private async loadWebhookConfig() {
 		try {
 			const webhookPreferences = await this.preferencesService.getWebhookPreferences();
@@ -207,8 +231,10 @@ export class DevelopersSettingsComponent implements OnInit {
 			try {
 				await this.preferencesService.testWebhookUrl(url);
 				this.notificationService.showSnackbar('Test webhook sent successfully. Your URL is reachable.');
-			} catch (error) {
-				this.notificationService.showSnackbar('Failed to send test webhook. Your URL may not be reachable.');
+			} catch (error: any) {
+				const errorMessage = error.error?.message || error.message || 'Unknown error';
+				this.notificationService.showSnackbar(`Failed to send test webhook. ${errorMessage}`);
+				console.error(`Error sending test webhook. ${errorMessage}`);
 			}
 		}
 	}