mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-02 13:18:18 +00:00
Extract api keys setting card into separate component on web app
This commit is contained in:
Debanjum
@@ -490,6 +490,75 @@ const useApiKeys = () => {
|
||||
};
|
||||
};
|
||||
|
||||
function ApiKeyCard() {
|
||||
const { apiKeys, generateAPIKey, copyAPIKey, deleteAPIKey } = useApiKeys();
|
||||
const { toast } = useToast();
|
||||
|
||||
return (
|
||||
<Card className="grid grid-flow-column border border-gray-300 shadow-md rounded-lg dark:bg-muted dark:border-none border-opacity-50 lg:w-2/3">
|
||||
<CardHeader className="text-xl grid grid-flow-col grid-cols-[1fr_auto] pb-0">
|
||||
<span className="flex flex-wrap">
|
||||
<Key className="h-7 w-7 mr-2" />
|
||||
API Keys
|
||||
</span>
|
||||
<Button variant="secondary" className="!mt-0" onClick={generateAPIKey}>
|
||||
<Plus weight="bold" className="h-5 w-5 mr-2" />
|
||||
Generate Key
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-hidden grid gap-6">
|
||||
<p className="text-md text-gray-400">
|
||||
Access Khoj from the{" "}
|
||||
<a href="https://docs.khoj.dev/clients/desktop" target="_blank">
|
||||
Desktop
|
||||
</a>
|
||||
, <a href="https://docs.khoj.dev/clients/obsidian">Obsidian</a>,{" "}
|
||||
<a href="https://docs.khoj.dev/clients/emacs">Emacs</a> apps and more.
|
||||
</p>
|
||||
<Table>
|
||||
<TableBody>
|
||||
{apiKeys.map((key) => (
|
||||
<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>
|
||||
<div className="grid grid-flow-col">
|
||||
<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>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-wrap gap-4" />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
enum PhoneNumberValidationState {
|
||||
Setup = "setup",
|
||||
SendOTP = "otp",
|
||||
@@ -498,7 +567,6 @@ enum PhoneNumberValidationState {
|
||||
}
|
||||
|
||||
export default function SettingsView() {
|
||||
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);
|
||||
@@ -1333,92 +1401,7 @@ export default function SettingsView() {
|
||||
Clients
|
||||
</div>
|
||||
<div className="cards flex flex-col flex-wrap gap-8">
|
||||
{!userConfig.anonymous_mode && (
|
||||
<Card className="grid grid-flow-column border border-gray-300 shadow-md rounded-lg dark:bg-muted dark:border-none border-opacity-50 lg:w-2/3">
|
||||
<CardHeader className="text-xl grid grid-flow-col grid-cols-[1fr_auto] pb-0">
|
||||
<span className="flex flex-wrap">
|
||||
<Key className="h-7 w-7 mr-2" />
|
||||
API Keys
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="!mt-0"
|
||||
onClick={generateAPIKey}
|
||||
>
|
||||
<Plus
|
||||
weight="bold"
|
||||
className="h-5 w-5 mr-2"
|
||||
/>
|
||||
Generate Key
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-hidden grid gap-6">
|
||||
<p className="text-md text-gray-400">
|
||||
Access Khoj from the{" "}
|
||||
<a
|
||||
href="https://docs.khoj.dev/clients/Desktop"
|
||||
target="_blank"
|
||||
>
|
||||
Desktop
|
||||
</a>
|
||||
,{" "}
|
||||
<a href="https://docs.khoj.dev/clients/Obsidian">
|
||||
Obsidian
|
||||
</a>
|
||||
,{" "}
|
||||
<a href="https://docs.khoj.dev/clients/Emacs">
|
||||
Emacs
|
||||
</a>{" "}
|
||||
apps and more.
|
||||
</p>
|
||||
<Table>
|
||||
<TableBody>
|
||||
{apiKeys.map((key) => (
|
||||
<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>
|
||||
<div className="grid grid-flow-col">
|
||||
<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>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-wrap gap-4"></CardFooter>
|
||||
</Card>
|
||||
)}
|
||||
{!userConfig.anonymous_mode && <ApiKeyCard />}
|
||||
<Card className={`${cardClassName} lg:w-2/3`}>
|
||||
<CardHeader className="text-xl flex flex-row">
|
||||
<WhatsappLogo className="h-7 w-7 mr-2" />
|
||||
|
||||
Reference in New Issue
Block a user