From 45575804b73d0c37a46f9cd96e2b7c9452a3a514 Mon Sep 17 00:00:00 2001
From: Aakash <AHowlade@its.jnj.com>
Date: Sat, 25 Oct 2025 09:06:47 +0530
Subject: [PATCH] (Feature) #1336 Added toggles on password input textboxes to
 mask/unmask the entered value.

Signed-off-by: Aakash <aakash.howlader@gmail.com>
---
 CHANGELOG.md                                  |  5 +
 mcpgateway/static/admin.js                    | 55 +++++++++--
 mcpgateway/templates/admin.html               | 94 ++++++++++++++-----
 ...test_security_performance_compatibility.py |  8 +-
 4 files changed, 131 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b17e80b6..d63b38e9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ This release delivers **REST API Passthrough Capabilities**, **API & UI Paginati
 - **🧪 Quality & Testing** - Complete build pipeline verification, enhanced linting, mutation testing, and fuzzing
 - **⚡ Performance Optimizations** - Response compression middleware (Brotli, Zstd, GZip) reducing bandwidth by 30-70% + orjson JSON serialization providing 5-6x faster JSON encoding
 - **🦀 Rust Plugin Framework** - Optional Rust-accelerated plugins with 5-100x performance improvements
+- **💻 Admin UI** - Quality of life improvements for admins when managing MCP servers
 
 ### Added
 
@@ -167,6 +168,10 @@ This release delivers **REST API Passthrough Capabilities**, **API & UI Paginati
   - **Implementation**: `mcpgateway/utils/orjson_response.py` configured as default FastAPI response class
   - **Test Coverage**: 29 comprehensive unit tests with 100% code coverage
 
+#### **💻 Admin UI enhancements** (#1336)
+* **Inspectable auth passwords, tokens and headers** (#1336) - Admins can now view and verify passwords, tokens and custom headers they set when creating or editing MCP servers.
+  
+    
 ### Fixed
 
 #### **🐛 Critical Multi-Tenancy & RBAC Bugs**
diff --git a/mcpgateway/static/admin.js b/mcpgateway/static/admin.js
index 22371c44d..56032b175 100644
--- a/mcpgateway/static/admin.js
+++ b/mcpgateway/static/admin.js
@@ -10359,6 +10359,35 @@ window.updateAvailableTags = updateAvailableTags;
 // MULTI-HEADER AUTHENTICATION MANAGEMENT
 // ===================================================================
 
+/**
+ * Toggle masking for sensitive text inputs (passwords, tokens, headers)
+ * @param {HTMLElement|string} inputOrId - Target input element or its ID
+ * @param {HTMLElement} button - Button triggering the toggle
+ */
+function toggleInputMask(inputOrId, button) {
+    const input =
+        typeof inputOrId === "string"
+            ? document.getElementById(inputOrId)
+            : inputOrId;
+
+    if (!input || !button) {
+        return;
+    }
+
+    const revealing = input.type === "password";
+    input.type = revealing ? "text" : "password";
+
+    const label = input.getAttribute("data-sensitive-label") || "value";
+    button.textContent = revealing ? "Hide" : "Show";
+    button.setAttribute("aria-pressed", revealing ? "true" : "false");
+    button.setAttribute(
+        "aria-label",
+        `${revealing ? "Hide" : "Show"} ${label}`.trim(),
+    );
+}
+
+window.toggleInputMask = toggleInputMask;
+
 /**
  * Global counter for unique header IDs
  */
@@ -10376,6 +10405,7 @@ function addAuthHeader(containerId) {
     }
 
     const headerId = `auth-header-${++headerCounter}`;
+    const valueInputId = `${headerId}-value`;
 
     const headerRow = document.createElement("div");
     headerRow.className = "flex items-center space-x-2";
@@ -10391,12 +10421,25 @@ function addAuthHeader(containerId) {
             />
         </div>
         <div class="flex-1">
-            <input
-                type="password"
-                placeholder="Header Value"
-                class="auth-header-value block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300 text-sm"
-                oninput="updateAuthHeadersJSON('${containerId}')"
-            />
+            <div class="relative">
+                <input
+                    type="password"
+                    id="${valueInputId}"
+                    placeholder="Header Value"
+                    data-sensitive-label="header value"
+                    class="auth-header-value block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300 text-sm pr-16"
+                    oninput="updateAuthHeadersJSON('${containerId}')"
+                />
+                <button
+                    type="button"
+                    class="absolute inset-y-0 right-0 flex items-center px-2 text-xs font-medium text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-indigo-300"
+                    onclick="toggleInputMask('${valueInputId}', this)"
+                    aria-pressed="false"
+                    aria-label="Show header value"
+                >
+                    Show
+                </button>
+            </div>
         </div>
         <button
             type="button"
diff --git a/mcpgateway/templates/admin.html b/mcpgateway/templates/admin.html
index 4e3785831..9fcd29f7c 100644
--- a/mcpgateway/templates/admin.html
+++ b/mcpgateway/templates/admin.html
@@ -4528,11 +4528,24 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
                   <label class="block text-sm font-medium text-gray-700"
                     >Password</label
                   >
-                  <input
-                    type="password"
-                    name="auth_password"
-                    class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
-                  />
+                  <div class="relative">
+                    <input
+                      type="password"
+                      name="auth_password"
+                      id="auth-password-gw"
+                      data-sensitive-label="password"
+                      class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300 pr-16"
+                    />
+                    <button
+                      type="button"
+                      class="absolute inset-y-0 right-0 flex items-center px-3 text-xs font-medium text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-indigo-300"
+                      onclick="toggleInputMask('auth-password-gw', this)"
+                      aria-pressed="false"
+                      aria-label="Show password"
+                    >
+                      Show
+                    </button>
+                  </div>
                 </div>
               </div>
               <div id="auth-bearer-fields-gw" style="display: none">
@@ -4540,11 +4553,24 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
                   <label class="block text-sm font-medium text-gray-700"
                     >Token</label
                   >
-                  <input
-                    type="password"
-                    name="auth_token"
-                    class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
-                  />
+                  <div class="relative">
+                    <input
+                      type="password"
+                      name="auth_token"
+                      id="auth-token-gw"
+                      data-sensitive-label="token"
+                      class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300 pr-16"
+                    />
+                    <button
+                      type="button"
+                      class="absolute inset-y-0 right-0 flex items-center px-3 text-xs font-medium text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-indigo-300"
+                      onclick="toggleInputMask('auth-token-gw', this)"
+                      aria-pressed="false"
+                      aria-label="Show token"
+                    >
+                      Show
+                    </button>
+                  </div>
                 </div>
               </div>
               <div id="auth-headers-fields-gw" style="display: none">
@@ -7602,29 +7628,55 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                           class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
                         />
                       </div>
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700"
-                          >Password</label
-                        >
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700"
+                        >Password</label
+                      >
+                      <div class="relative">
                         <input
                           type="password"
                           name="auth_password"
-                          class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
+                          id="auth-password-gw-edit"
+                          data-sensitive-label="password"
+                          class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300 pr-16"
                         />
+                        <button
+                          type="button"
+                          class="absolute inset-y-0 right-0 flex items-center px-3 text-xs font-medium text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-indigo-300"
+                          onclick="toggleInputMask('auth-password-gw-edit', this)"
+                          aria-pressed="false"
+                          aria-label="Show password"
+                        >
+                          Show
+                        </button>
                       </div>
                     </div>
-                    <div id="auth-bearer-fields-gw-edit" style="display: none">
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700"
-                          >Token</label
-                        >
+                  </div>
+                  <div id="auth-bearer-fields-gw-edit" style="display: none">
+                    <div>
+                      <label class="block text-sm font-medium text-gray-700"
+                        >Token</label
+                      >
+                      <div class="relative">
                         <input
                           type="password"
                           name="auth_token"
-                          class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
+                          id="auth-token-gw-edit"
+                          data-sensitive-label="token"
+                          class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300 pr-16"
                         />
+                        <button
+                          type="button"
+                          class="absolute inset-y-0 right-0 flex items-center px-3 text-xs font-medium text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:text-indigo-300"
+                          onclick="toggleInputMask('auth-token-gw-edit', this)"
+                          aria-pressed="false"
+                          aria-label="Show token"
+                        >
+                          Show
+                        </button>
                       </div>
                     </div>
+                  </div>
                     <div id="auth-headers-fields-gw-edit" style="display: none">
                       <div class="space-y-3">
                         <div class="flex items-center justify-between">
diff --git a/tests/security/test_security_performance_compatibility.py b/tests/security/test_security_performance_compatibility.py
index 1aa21bf9b..ecf4c8318 100644
--- a/tests/security/test_security_performance_compatibility.py
+++ b/tests/security/test_security_performance_compatibility.py
@@ -50,19 +50,19 @@ def test_endpoint():
 
         # Time without security
         client_no_security = TestClient(app_no_security)
-        start_time = time.time()
+        start_time = time.perf_counter()
         for i in range(iterations):
             response = client_no_security.get("/test")
             assert response.status_code == 200
-        time_without_security = time.time() - start_time
+        time_without_security = time.perf_counter() - start_time
 
         # Time with security
         client_with_security = TestClient(app_with_security)
-        start_time = time.time()
+        start_time = time.perf_counter()
         for i in range(iterations):
             response = client_with_security.get("/test")
             assert response.status_code == 200
-        time_with_security = time.time() - start_time
+        time_with_security = time.perf_counter() - start_time
 
         # Security overhead should be reasonable (< 3x increase)
         overhead_ratio = time_with_security / time_without_security