From d51c5ae0c3fbeaecffcc81c8c42a7f50d47c9eab Mon Sep 17 00:00:00 2001
From: CSantosM <4a.santos@gmail.com>
Date: Tue, 24 Feb 2026 16:46:25 +0100
Subject: [PATCH] frontend: enhance API key management section with
 documentation link and styling improvements

---
 .../pages/embedded/embedded.component.html    | 14 ++++++++++++-
 .../pages/embedded/embedded.component.scss    | 20 +++++++++++++++++++
 .../pages/embedded/embedded.component.ts      | 10 +++++++++-
 .../src/assets/styles/_tokens-themes.scss     |  4 ++--
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html
index c7241d33..a862c399 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.html
@@ -32,7 +32,19 @@
 						<mat-icon class="section-icon">vpn_key</mat-icon>
 					</div>
 					<mat-card-title>API KEY</mat-card-title>
-					<mat-card-subtitle>Generate and manage your API key for REST API access</mat-card-subtitle>
+					<mat-card-subtitle>
+						Generate and manage your API key for
+						<a
+							href="{{ restApiDocsUrl() }}"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="rest-api-link"
+						>
+							REST API
+							<mat-icon class="external-link-icon">open_in_new</mat-icon>
+						</a>
+						access
+					</mat-card-subtitle>
 				</mat-card-header>
 
 				<mat-card-content>
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss
index cee001bc..5cd25c4f 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.scss
@@ -5,8 +5,28 @@
 		padding: var(--ov-meet-button-padding-vertical) var(--ov-meet-button-padding-horizontal);
 	}
 }
+
 // API Key Section - use utility classes
 .api-key-section {
+	.rest-api-link {
+		color: var(--ov-meet-text-on-accent);
+		// text-decoration: none;
+		border-bottom: 1px solid transparent;
+		transition: border-color 0.2s ease;
+
+		mat-icon {
+			font-size: var(--ov-meet-font-size-md);
+			width: var(--ov-meet-font-size-md);
+			height: var(--ov-meet-font-size-md);
+			vertical-align: middle;
+		}
+
+		&:focus {
+			outline: 2px solid var(--ov-meet-text-on-accent);
+			outline-offset: 2px;
+		}
+	}
+
 	.api-key-display {
 		@extend .ov-api-key-display;
 
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts
index 0687596e..91253db9 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/embedded/embedded.component.ts
@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard';
-import { Component, effect, OnInit, signal } from '@angular/core';
+import { Component, effect, inject, 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';
@@ -13,6 +13,7 @@ import { MeetApiKey } from '@openvidu-meet/typings';
 import { ApiKeyService } from '../../../../shared/services/api-key.service';
 import { GlobalConfigService } from '../../../../shared/services/global-config.service';
 import { NotificationService } from '../../../../shared/services/notification.service';
+import { RuntimeConfigService } from '../../../../shared/services/runtime-config.service';
 
 @Component({
 	selector: 'ov-embedded',
@@ -31,6 +32,9 @@ import { NotificationService } from '../../../../shared/services/notification.se
 	styleUrl: './embedded.component.scss'
 })
 export class EmbeddedComponent implements OnInit {
+	private runtimeConfigServc = inject(RuntimeConfigService);
+	restApiDocsUrl = signal<string>('');
+
 	isLoading = signal(true);
 	hasWebhookChanges = signal(false);
 
@@ -85,6 +89,10 @@ export class EmbeddedComponent implements OnInit {
 	}
 
 	async ngOnInit() {
+		// Build the REST API documentation URL with base href
+		const docsPath = 'api/v1/docs/';
+		this.restApiDocsUrl.set(this.runtimeConfigServc.basePath ? `${this.runtimeConfigServc.basePath}${docsPath}` : `/${docsPath}`);
+
 		this.isLoading.set(true);
 		await this.loadApiKeyData();
 		await this.loadWebhookConfig();
diff --git a/meet-ce/frontend/src/assets/styles/_tokens-themes.scss b/meet-ce/frontend/src/assets/styles/_tokens-themes.scss
index 856d53f8..52cd932d 100644
--- a/meet-ce/frontend/src/assets/styles/_tokens-themes.scss
+++ b/meet-ce/frontend/src/assets/styles/_tokens-themes.scss
@@ -18,7 +18,7 @@
 	--ov-meet-text-disabled: #bdbdbd;
 	--ov-meet-text-on-primary: #ffffff;
 	--ov-meet-text-on-secondary: #ffffff;
-	--ov-meet-text-on-accent: #ffffff;
+	--ov-meet-text-on-accent: #4ba3eb;
 	--ov-meet-text-on-surface: #494949;
 	--ov-meet-text-on-background: #212121;
 
@@ -37,7 +37,6 @@
 // === DARK THEME ===
 // Activated when the [data-theme="dark"] attribute is present on html
 [data-theme='dark'] {
-
 	--ov-meet-color-info: #2a9bf7;
 
 	// === SURFACE COLORS - DARK THEME ===
@@ -54,6 +53,7 @@
 	--ov-meet-text-secondary: #a5a5b5;
 	--ov-meet-text-hint: #7c7c8c;
 	--ov-meet-text-disabled: #5a5a68;
+	--ov-meet-text-on-accent: #3ea8ff;
 	--ov-meet-text-on-surface: #e4e4ec;
 	--ov-meet-text-on-background: #e4e4ec;