feat: api keys management (EE) (#1665)
* feat: api keys (EE) * improvements * fix table * fix route * remove token suffix * api settings * Fix * fix * fix * fix
This commit is contained in:
Philip Okugbe
GitHub
@@ -0,0 +1,72 @@
|
||||
import {
|
||||
Modal,
|
||||
Text,
|
||||
Stack,
|
||||
Alert,
|
||||
Group,
|
||||
Button,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { IconAlertTriangle } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IApiKey } from "@/ee/api-key";
|
||||
import CopyTextButton from "@/components/common/copy.tsx";
|
||||
|
||||
interface ApiKeyCreatedModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
apiKey: IApiKey;
|
||||
}
|
||||
|
||||
export function ApiKeyCreatedModal({
|
||||
opened,
|
||||
onClose,
|
||||
apiKey,
|
||||
}: ApiKeyCreatedModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!apiKey) return null;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={t("API key created")}
|
||||
size="lg"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Alert
|
||||
icon={<IconAlertTriangle size={16} />}
|
||||
title={t("Important")}
|
||||
color="red"
|
||||
>
|
||||
{t(
|
||||
"Make sure to copy your API key now. You won't be able to see it again!",
|
||||
)}
|
||||
</Alert>
|
||||
|
||||
<div>
|
||||
<Text size="sm" fw={500} mb="xs">
|
||||
{t("API key")}
|
||||
</Text>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<TextInput
|
||||
variant="filled"
|
||||
style={{
|
||||
flex: 1,
|
||||
}}
|
||||
value={apiKey.token}
|
||||
readOnly
|
||||
/>
|
||||
|
||||
<CopyTextButton text={apiKey.token} />
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
<Button fullWidth onClick={onClose} mt="md">
|
||||
{t("I've saved my API key")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
|
||||
import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
|
||||
import { format } from "date-fns";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IApiKey } from "@/ee/api-key";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
import React from "react";
|
||||
import NoTableResults from "@/components/common/no-table-results";
|
||||
|
||||
interface ApiKeyTableProps {
|
||||
apiKeys: IApiKey[];
|
||||
isLoading?: boolean;
|
||||
showUserColumn?: boolean;
|
||||
onUpdate?: (apiKey: IApiKey) => void;
|
||||
onRevoke?: (apiKey: IApiKey) => void;
|
||||
}
|
||||
|
||||
export function ApiKeyTable({
|
||||
apiKeys,
|
||||
isLoading,
|
||||
showUserColumn = false,
|
||||
onUpdate,
|
||||
onRevoke,
|
||||
}: ApiKeyTableProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const formatDate = (date: Date | string | null) => {
|
||||
if (!date) return t("Never");
|
||||
return format(new Date(date), "MMM dd, yyyy");
|
||||
};
|
||||
|
||||
const isExpired = (expiresAt: string | null) => {
|
||||
if (!expiresAt) return false;
|
||||
return new Date(expiresAt) < new Date();
|
||||
};
|
||||
|
||||
return (
|
||||
<Table.ScrollContainer minWidth={500}>
|
||||
<Table highlightOnHover verticalSpacing="sm">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("Name")}</Table.Th>
|
||||
{showUserColumn && <Table.Th>{t("User")}</Table.Th>}
|
||||
<Table.Th>{t("Last used")}</Table.Th>
|
||||
<Table.Th>{t("Expires")}</Table.Th>
|
||||
<Table.Th>{t("Created")}</Table.Th>
|
||||
<Table.Th></Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
|
||||
<Table.Tbody>
|
||||
{apiKeys && apiKeys.length > 0 ? (
|
||||
apiKeys.map((apiKey: IApiKey, index: number) => (
|
||||
<Table.Tr key={index}>
|
||||
<Table.Td>
|
||||
<Text fz="sm" fw={500}>
|
||||
{apiKey.name}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
|
||||
{showUserColumn && apiKey.creator && (
|
||||
<Table.Td>
|
||||
<Group gap="4" wrap="nowrap">
|
||||
<CustomAvatar
|
||||
avatarUrl={apiKey.creator?.avatarUrl}
|
||||
name={apiKey.creator.name}
|
||||
size="sm"
|
||||
/>
|
||||
<Text fz="sm" lineClamp={1}>
|
||||
{apiKey.creator.name}
|
||||
</Text>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
)}
|
||||
|
||||
<Table.Td>
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{formatDate(apiKey.lastUsedAt)}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
{apiKey.expiresAt ? (
|
||||
isExpired(apiKey.expiresAt) ? (
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{t("Expired")}
|
||||
</Text>
|
||||
) : (
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{formatDate(apiKey.expiresAt)}
|
||||
</Text>
|
||||
)
|
||||
) : (
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{t("Never")}
|
||||
</Text>
|
||||
)}
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{formatDate(apiKey.createdAt)}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Menu position="bottom-end" withinPortal>
|
||||
<Menu.Target>
|
||||
<ActionIcon variant="subtle" color="gray">
|
||||
<IconDots size={16} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{onUpdate && (
|
||||
<Menu.Item
|
||||
leftSection={<IconEdit size={16} />}
|
||||
onClick={() => onUpdate(apiKey)}
|
||||
>
|
||||
{t("Rename")}
|
||||
</Menu.Item>
|
||||
)}
|
||||
{onRevoke && (
|
||||
<Menu.Item
|
||||
leftSection={<IconTrash size={16} />}
|
||||
color="red"
|
||||
onClick={() => onRevoke(apiKey)}
|
||||
>
|
||||
{t("Revoke")}
|
||||
</Menu.Item>
|
||||
)}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
) : (
|
||||
<NoTableResults colSpan={showUserColumn ? 6 : 5} />
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.ScrollContainer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import { lazy, Suspense, useState } from "react";
|
||||
import { Modal, TextInput, Button, Group, Stack, Select } from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { zodResolver } from "mantine-form-zod-resolver";
|
||||
import { z } from "zod";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCreateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
|
||||
import { IconCalendar } from "@tabler/icons-react";
|
||||
import { IApiKey } from "@/ee/api-key";
|
||||
|
||||
const DateInput = lazy(() =>
|
||||
import("@mantine/dates").then((module) => ({
|
||||
default: module.DateInput,
|
||||
})),
|
||||
);
|
||||
|
||||
interface CreateApiKeyModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: (response: IApiKey) => void;
|
||||
}
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
expiresAt: z.string().optional(),
|
||||
});
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function CreateApiKeyModal({
|
||||
opened,
|
||||
onClose,
|
||||
onSuccess,
|
||||
}: CreateApiKeyModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [expirationOption, setExpirationOption] = useState<string>("30");
|
||||
const createApiKeyMutation = useCreateApiKeyMutation();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
name: "",
|
||||
expiresAt: "",
|
||||
},
|
||||
});
|
||||
|
||||
const getExpirationDate = (): string | undefined => {
|
||||
if (expirationOption === "never") {
|
||||
return undefined;
|
||||
}
|
||||
if (expirationOption === "custom") {
|
||||
return form.values.expiresAt;
|
||||
}
|
||||
const days = parseInt(expirationOption);
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + days);
|
||||
return date.toISOString();
|
||||
};
|
||||
|
||||
const getExpirationLabel = (days: number) => {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + days);
|
||||
const formatted = date.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
return `${days} days (${formatted})`;
|
||||
};
|
||||
|
||||
const expirationOptions = [
|
||||
{ value: "30", label: getExpirationLabel(30) },
|
||||
{ value: "60", label: getExpirationLabel(60) },
|
||||
{ value: "90", label: getExpirationLabel(90) },
|
||||
{ value: "365", label: getExpirationLabel(365) },
|
||||
{ value: "custom", label: t("Custom") },
|
||||
{ value: "never", label: t("No expiration") },
|
||||
];
|
||||
|
||||
const handleSubmit = async (data: {
|
||||
name?: string;
|
||||
expiresAt?: string | Date;
|
||||
}) => {
|
||||
const groupData = {
|
||||
name: data.name,
|
||||
expiresAt: getExpirationDate(),
|
||||
};
|
||||
|
||||
try {
|
||||
const createdKey = await createApiKeyMutation.mutateAsync(groupData);
|
||||
onSuccess(createdKey);
|
||||
form.reset();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
//
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset();
|
||||
setExpirationOption("30");
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={handleClose}
|
||||
title={t("Create API Key")}
|
||||
size="md"
|
||||
>
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={t("Name")}
|
||||
placeholder={t("Enter a descriptive name")}
|
||||
data-autofocus
|
||||
required
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label={t("Expiration")}
|
||||
data={expirationOptions}
|
||||
value={expirationOption}
|
||||
onChange={(value) => setExpirationOption(value || "30")}
|
||||
leftSection={<IconCalendar size={16} />}
|
||||
allowDeselect={false}
|
||||
/>
|
||||
|
||||
{expirationOption === "custom" && (
|
||||
<Suspense fallback={null}>
|
||||
<DateInput
|
||||
label={t("Custom expiration date")}
|
||||
placeholder={t("Select expiration date")}
|
||||
minDate={new Date()}
|
||||
{...form.getInputProps("expiresAt")}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="default" onClick={handleClose}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button type="submit" loading={createApiKeyMutation.isPending}>
|
||||
{t("Create")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Modal, Text, Button, Group, Stack } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { useRevokeApiKeyMutation } from "@/ee/api-key/queries/api-key-query.ts";
|
||||
import { IApiKey } from "@/ee/api-key";
|
||||
|
||||
interface RevokeApiKeyModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
apiKey: IApiKey | null;
|
||||
}
|
||||
|
||||
export function RevokeApiKeyModal({
|
||||
opened,
|
||||
onClose,
|
||||
apiKey,
|
||||
}: RevokeApiKeyModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const revokeApiKeyMutation = useRevokeApiKeyMutation();
|
||||
|
||||
const handleRevoke = async () => {
|
||||
if (!apiKey) return;
|
||||
await revokeApiKeyMutation.mutateAsync({
|
||||
apiKeyId: apiKey.id,
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={t("Revoke API key")}
|
||||
size="md"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text>
|
||||
{t("Are you sure you want to revoke this API key")}{" "}
|
||||
<strong>{apiKey?.name}</strong>?
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{t(
|
||||
"This action cannot be undone. Any applications using this API key will stop working.",
|
||||
)}
|
||||
</Text>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="default" onClick={onClose}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={handleRevoke}
|
||||
loading={revokeApiKeyMutation.isPending}
|
||||
>
|
||||
{t("Revoke")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { Modal, TextInput, Button, Group, Stack } from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { zodResolver } from "mantine-form-zod-resolver";
|
||||
import { z } from "zod";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useUpdateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
|
||||
import { IApiKey } from "@/ee/api-key";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
});
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
interface UpdateApiKeyModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
apiKey: IApiKey | null;
|
||||
}
|
||||
|
||||
export function UpdateApiKeyModal({
|
||||
opened,
|
||||
onClose,
|
||||
apiKey,
|
||||
}: UpdateApiKeyModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const updateApiKeyMutation = useUpdateApiKeyMutation();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (opened && apiKey) {
|
||||
form.setValues({ name: apiKey.name });
|
||||
}
|
||||
}, [opened, apiKey]);
|
||||
|
||||
const handleSubmit = async (data: { name?: string }) => {
|
||||
const apiKeyData = {
|
||||
apiKeyId: apiKey.id,
|
||||
name: data.name,
|
||||
};
|
||||
|
||||
await updateApiKeyMutation.mutateAsync(apiKeyData);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={t("Update API key")}
|
||||
size="md"
|
||||
>
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={t("Token name")}
|
||||
placeholder={t("Enter a descriptive token name")}
|
||||
required
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="default" onClick={onClose}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button type="submit" loading={updateApiKeyMutation.isPending}>
|
||||
{t("Update")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user