From 58a7171911e39eefabb8c9b6b1c7c6994bbd1dd0 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Tue, 31 Oct 2023 23:10:26 -0700
Subject: [PATCH] Show truncated API key for identification & restrict table
 width

- Use a function to generate API Key table row HTML, to dedup logic
- Show delete, copy icon hints on hover
- Reduce length of copied message to not expand table width
- Truncating API key helps keep the API key table width within width
  of smaller width displays
---
 src/khoj/interface/web/config.html | 44 ++++++++++++++----------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/khoj/interface/web/config.html b/src/khoj/interface/web/config.html
index c65615e1..0fc7d8e9 100644
--- a/src/khoj/interface/web/config.html
+++ b/src/khoj/interface/web/config.html
@@ -541,16 +541,7 @@
         })
         .then(response => response.json())
         .then(tokenObj => {
-            apiKeyList.innerHTML += `
-                <tr id="api-key-item-${tokenObj.token}">
-                    <td><b>${tokenObj.name}</b></td>
-                    <td id="api-key-${tokenObj.token}">${tokenObj.token}</td>
-                    <td>
-                        <img id="api-key-copy-button-${tokenObj.token}" onclick="copyAPIKey('${tokenObj.token}')" class="configured-icon enabled" src="/static/assets/icons/copy-solid.svg" alt="Copy API Key">
-                        <img id="api-key-delete-button-${tokenObj.token}" onclick="deleteAPIKey('${tokenObj.token}')" class="configured-icon enabled" src="/static/assets/icons/trash-solid.svg" alt="Delete API Key">
-                    </td>
-                </tr>
-            `;
+            apiKeyList.innerHTML += generateTokenRow(tokenObj);
         });
     }
 
@@ -561,7 +552,7 @@
         const copyApiKeyButton = document.getElementById(`api-key-${token}`);
         original_html = copyApiKeyButton.innerHTML
         setTimeout(function() {
-            copyApiKeyButton.innerHTML = "✅ Copied to your clipboard!";
+            copyApiKeyButton.innerHTML = "✅ Copied!";
             setTimeout(function() {
                 copyApiKeyButton.innerHTML = original_html;
             }, 1000);
@@ -581,23 +572,30 @@
         });
     }
 
+    function generateTokenRow(tokenObj) {
+        let token = tokenObj.token;
+        let tokenName = tokenObj.name;
+        let truncatedToken = token.slice(0, 4) + "..." + token.slice(-4);
+        let tokenId = `${tokenName}-${truncatedToken}`;
+        return `
+            <tr id="api-key-item-${token}">
+                <td><b>${tokenName}</b></td>
+                <td id="api-key-${token}">${truncatedToken}</td>
+                <td>
+                    <img onclick="copyAPIKey('${token}')" class="configured-icon enabled" src="/static/assets/icons/copy-solid.svg" alt="Copy API Key" title="Copy API Key">
+                    <img onclick="deleteAPIKey('${token}')" class="configured-icon enabled" src="/static/assets/icons/trash-solid.svg" alt="Delete API Key" title="Delete API Key">
+                </td>
+            </tr>
+        `;
+
+    }
+
     function listApiKeys() {
         const apiKeyList = document.getElementById("api-key-list");
         fetch('/auth/token')
             .then(response => response.json())
             .then(tokens => {
-                apiKeyList.innerHTML = tokens.map(tokenObj =>
-                    `
-                        <tr id="api-key-item-${tokenObj.token}">
-                            <td><b>${tokenObj.name}</b></td>
-                            <td id="api-key-${tokenObj.token}">${tokenObj.token}</td>
-                            <td>
-                                <img id="api-key-copy-button-${tokenObj.token}" onclick="copyAPIKey('${tokenObj.token}')" class="configured-icon enabled" src="/static/assets/icons/copy-solid.svg" alt="Copy API Key">
-                                <img id="api-key-delete-button-${tokenObj.token}" onclick="deleteAPIKey('${tokenObj.token}')" class="configured-icon enabled" src="/static/assets/icons/trash-solid.svg" alt="Delete API Key">
-                            </td>
-                        </tr>
-                    `)
-                    .join("");
+                apiKeyList.innerHTML = tokens.map(generateTokenRow).join("");
             });
     }