From 9e8b8dc5a2575f8347d17b8709de69df3878bf66 Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Sat, 11 Jan 2025 13:38:39 +0700
Subject: [PATCH] Toggle showing api key on web settings page via a visibility
 toggle

- 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
---
 src/interface/web/app/settings/page.tsx | 32 +++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx
index 20c979a5..5c9b72b3 100644
--- a/src/interface/web/app/settings/page.tsx
+++ b/src/interface/web/app/settings/page.tsx
@@ -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"