klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-08 21:29:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show truncated API key for identification & restrict table width

Browse Source 
- 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
This commit is contained in:
Debanjum Singh Solanky
2023-10-31 23:10:26 -07:00
parent 9cebd7f856
commit 58a7171911
1 changed files with 21 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/khoj/interface/web/config.html
View File

@@ -541,16 +541,7 @@
}) })
.then(response => response.json()) .then(response => response.json())
.then(tokenObj => { .then(tokenObj => {
apiKeyList.innerHTML += ` apiKeyList.innerHTML += generateTokenRow(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>
`;
}); });
} }
@@ -561,7 +552,7 @@
const copyApiKeyButton = document.getElementById(`api-key-${token}`); const copyApiKeyButton = document.getElementById(`api-key-${token}`);
original_html = copyApiKeyButton.innerHTML original_html = copyApiKeyButton.innerHTML
setTimeout(function() { setTimeout(function() {
copyApiKeyButton.innerHTML = "✅ Copied to your clipboard!"; copyApiKeyButton.innerHTML = "✅ Copied!";
setTimeout(function() { setTimeout(function() {
copyApiKeyButton.innerHTML = original_html; copyApiKeyButton.innerHTML = original_html;
}, 1000); }, 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() { function listApiKeys() {
const apiKeyList = document.getElementById("api-key-list"); const apiKeyList = document.getElementById("api-key-list");
fetch('/auth/token') fetch('/auth/token')
.then(response => response.json()) .then(response => response.json())
.then(tokens => { .then(tokens => {
apiKeyList.innerHTML = tokens.map(tokenObj => apiKeyList.innerHTML = tokens.map(generateTokenRow).join("");
`
<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("");
}); });
} }