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

Toggle showing api key on web settings page via a visibility toggle

Browse Source 
- Background
  Access to the clipboard API is disabled by certain browsers in non
  localhost http scenarios for security reasons.

  So the copy API key button doesn't work when khoj is self-hosted
  with authentication enabled at a non localhost domain

- Change
  This change enables copying API keys by manual text highlight + copy
  if copy button is disabled

Resolves #1070
This commit is contained in:
Debanjum
2025-01-11 13:38:39 +07:00
parent 25c39bd7da
commit 9e8b8dc5a2
1 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/interface/web/app/settings/page.tsx
View File

@@ -59,6 +59,8 @@ import {
Check,
CaretDown,
Waveform,
EyeSlash,
Eye,
} from "@phosphor-icons/react";
import Loading from "../components/loading/loading";
@@ -492,6 +494,7 @@ const useApiKeys = () => {
function ApiKeyCard() {
const { apiKeys, generateAPIKey, copyAPIKey, deleteAPIKey } = useApiKeys();
const [visibleApiKeys, setVisibleApiKeys] = useState<Set<string>>(new Set());
const { toast } = useToast();
return (
@@ -521,10 +524,35 @@ function ApiKeyCard() {
<TableRow key={key.token}>
<TableCell className="pl-0 py-3">{key.name}</TableCell>
<TableCell className="grid grid-flow-col grid-cols-[1fr_auto] bg-secondary rounded-xl p-3 m-1">
<span>
{`${key.token.slice(0, 6)}...${key.token.slice(-4)}`}
<span className="font-mono text-left w-[50px] md:w-[400px]">
{visibleApiKeys.has(key.token)
? key.token
: `${key.token.slice(0, 6)}...${key.token.slice(-4)}`}
</span>
<div className="grid grid-flow-col">
{visibleApiKeys.has(key.token) ? (
<EyeSlash
weight="bold"
className="h-4 w-4 mr-2 hover:bg-primary/40"
onClick={() =>
setVisibleApiKeys((prev) => {
const next = new Set(prev);
next.delete(key.token);
return next;
})
}
/>
) : (
<Eye
weight="bold"
className="h-4 w-4 mr-2 hover:bg-primary/40"
onClick={() =>
setVisibleApiKeys(
new Set([...visibleApiKeys, key.token]),
)
}
/>
)}
<Copy
weight="bold"
className="h-4 w-4 mr-2 hover:bg-primary/40"