From 6a9865ace7fdd3d334af375f8c1a9613f2ffb786 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 4 Aug 2024 02:48:21 +0530
Subject: [PATCH] Only show API keys card in non anon mode

- Show informative toast messages on copy, delete of API keys
- Onle show API keys card in non anonymous mode. API keys aren't
  required (and is disabled on server side) in anon mode. Not showing
  card at all in anon mode reduces chance of unnecessary confusion
---
 src/interface/web/app/settings/page.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx
index 5b28e455..534a87a7 100644
--- a/src/interface/web/app/settings/page.tsx
+++ b/src/interface/web/app/settings/page.tsx
@@ -348,7 +348,7 @@ enum PhoneNumberValidationState {
 export default function SettingsView() {
     const [title, setTitle] = useState("Settings");
     const [isMobileWidth, setIsMobileWidth] = useState(false);
-    const { apiKeys, generateAPIKey, copyAPIKey, deleteAPIKey } = useApiKeys();
+    const {apiKeys, generateAPIKey, copyAPIKey, deleteAPIKey} = useApiKeys();
     const {userConfig: initialUserConfig} = useUserConfig(true);
     const [userConfig, setUserConfig] = useState<UserConfig | null>(null);
     const [name, setName] = useState<string | undefined>(undefined);
@@ -845,6 +845,7 @@ export default function SettingsView() {
                             <div className="section grid gap-8">
                                 <div className="text-2xl">Clients</div>
                                 <div className="cards flex flex-wrap gap-8">
+                                    {!userConfig.anonymous_mode && (
                                     <Card className="grid grid-flow-column border border-gray-300 shadow-md rounded-lg bg-gradient-to-b from-background to-gray-50 dark:to-gray-950">
                                         <CardHeader className="text-xl grid grid-flow-col grid-cols-[1fr_auto] pb-0">
                                             <span className="flex flex-wrap">
@@ -868,8 +869,22 @@ export default function SettingsView() {
                                                                     {`${key.token.slice(0, 6)}...${key.token.slice(-4)}`}
                                                                 </span>
                                                                 <div className="grid grid-flow-col">
-                                                                    <Copy weight="bold" className="h-4 w-4 mr-2 hover:bg-primary/40" onClick={() => copyAPIKey(key.token)}/>
-                                                                    <Trash weight="bold" className='h-4 w-4 mr-2 md:ml-4 text-red-400 hover:bg-primary/40' onClick={() => deleteAPIKey(key.token)}/>
+                                                                    <Copy
+                                                                        weight="bold"
+                                                                        className="h-4 w-4 mr-2 hover:bg-primary/40"
+                                                                        onClick={() => {
+                                                                            toast({title: `🔑 Copied API Key: ${key.name}`, description: `Set this API key in the Khoj apps you want to connect to this Khoj account`});
+                                                                            copyAPIKey(key.token);
+                                                                        }}
+                                                                    />
+                                                                    <Trash
+                                                                        weight="bold"
+                                                                        className='h-4 w-4 mr-2 md:ml-4 text-red-400 hover:bg-primary/40'
+                                                                        onClick={() => {
+                                                                            toast({title: `🔑 Deleted API Key: ${key.name}`, description: `Apps using this API key will no longer connect to this Khoj account`});
+                                                                            deleteAPIKey(key.token);
+                                                                        }}
+                                                                    />
                                                                 </div>
                                                             </TableCell>
                                                         </TableRow>
@@ -880,6 +895,7 @@ export default function SettingsView() {
                                         <CardFooter className="flex flex-wrap gap-4">
                                         </CardFooter>
                                     </Card>
+                                    )}
                                     <Card className={cardClassName}>
                                         <CardHeader className="text-xl flex flex-row">
                                             <WhatsappLogo className="h-7 w-7 mr-2"/>