mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-10 12:28:56 +00:00
Merge pull request #1565 from Infisical/daniel/deprecate-service-tokens-and-api-keys
Feat: Deprecate API keys
This commit is contained in:
Daniel Hougaard
@@ -2,38 +2,36 @@ import { useTranslation } from "react-i18next";
|
|||||||
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
import { Button } from "@app/components/v2";
|
import { Button, Tooltip } from "@app/components/v2";
|
||||||
import { usePopUp } from "@app/hooks/usePopUp";
|
import { usePopUp } from "@app/hooks/usePopUp";
|
||||||
|
|
||||||
import { AddAPIKeyModal } from "./AddAPIKeyModal";
|
import { AddAPIKeyModal } from "./AddAPIKeyModal";
|
||||||
import { APIKeyTable } from "./APIKeyTable";
|
import { APIKeyTable } from "./APIKeyTable";
|
||||||
|
|
||||||
export const APIKeySection = () => {
|
export const APIKeySection = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
|
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addAPIKey"] as const);
|
||||||
"addAPIKey"
|
|
||||||
] as const);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
|
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
|
||||||
<div className="flex justify-between mb-8">
|
<div className="mb-8 flex justify-between">
|
||||||
<p className="text-xl font-semibold text-mineshaft-100">
|
<p className="text-xl font-semibold text-mineshaft-100">
|
||||||
{t("settings.personal.api-keys.title")}
|
{t("settings.personal.api-keys.title")}
|
||||||
</p>
|
</p>
|
||||||
<Button
|
<Tooltip content="API Keys are deprecated and will be removed in the future.">
|
||||||
colorSchema="secondary"
|
<Button
|
||||||
type="submit"
|
isDisabled
|
||||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
colorSchema="secondary"
|
||||||
onClick={() => handlePopUpOpen("addAPIKey")}
|
type="submit"
|
||||||
>
|
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||||
Add API Key
|
onClick={() => handlePopUpOpen("addAPIKey")}
|
||||||
</Button>
|
>
|
||||||
</div>
|
Add API Key
|
||||||
<APIKeyTable />
|
</Button>
|
||||||
<AddAPIKeyModal
|
</Tooltip>
|
||||||
popUp={popUp}
|
</div>
|
||||||
handlePopUpToggle={handlePopUpToggle}
|
<APIKeyTable />
|
||||||
/>
|
<AddAPIKeyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,199 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Controller, useForm } from "react-hook-form";
|
|
||||||
import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { yupResolver } from "@hookform/resolvers/yup";
|
|
||||||
import * as yup from "yup";
|
|
||||||
|
|
||||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
FormControl,
|
|
||||||
IconButton,
|
|
||||||
Input,
|
|
||||||
Modal,
|
|
||||||
ModalContent} from "@app/components/v2";
|
|
||||||
import { useToggle } from "@app/hooks";
|
|
||||||
import {
|
|
||||||
useCreateAPIKeyV2,
|
|
||||||
useUpdateAPIKeyV2
|
|
||||||
} from "@app/hooks/api";
|
|
||||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
|
||||||
|
|
||||||
const schema = yup.object({
|
|
||||||
name: yup.string().required("API Key V2 name is required")
|
|
||||||
}).required();
|
|
||||||
|
|
||||||
export type FormData = yup.InferType<typeof schema>;
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
popUp: UsePopUpState<["apiKeyV2"]>;
|
|
||||||
handlePopUpToggle: (popUpName: keyof UsePopUpState<["apiKeyV2"]>, state?: boolean) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const APIKeyV2Modal = ({
|
|
||||||
popUp,
|
|
||||||
handlePopUpToggle
|
|
||||||
}: Props) => {
|
|
||||||
const [newAPIKey, setNewAPIKey] = useState("");
|
|
||||||
const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
|
|
||||||
|
|
||||||
const { createNotification } = useNotificationContext();
|
|
||||||
|
|
||||||
const { mutateAsync: createMutateAsync } = useCreateAPIKeyV2();
|
|
||||||
const { mutateAsync: updateMutateAsync } = useUpdateAPIKeyV2();
|
|
||||||
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { isSubmitting }
|
|
||||||
} = useForm<FormData>({
|
|
||||||
resolver: yupResolver(schema),
|
|
||||||
defaultValues: {
|
|
||||||
name: ""
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let timer: NodeJS.Timeout;
|
|
||||||
|
|
||||||
if (isAPIKeyCopied) {
|
|
||||||
timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [setIsAPIKeyCopied]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const apiKeyData = popUp?.apiKeyV2?.data as {
|
|
||||||
apiKeyDataId: string;
|
|
||||||
name: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (apiKeyData) {
|
|
||||||
reset({
|
|
||||||
name: apiKeyData.name
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
reset({
|
|
||||||
name: ""
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [popUp?.apiKeyV2?.data]);
|
|
||||||
|
|
||||||
const copyTokenToClipboard = () => {
|
|
||||||
navigator.clipboard.writeText(newAPIKey);
|
|
||||||
setIsAPIKeyCopied.on();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onFormSubmit = async ({
|
|
||||||
name
|
|
||||||
}: FormData) => {
|
|
||||||
try {
|
|
||||||
const apiKeyData = popUp?.apiKeyV2?.data as {
|
|
||||||
apiKeyDataId: string;
|
|
||||||
name: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (apiKeyData) {
|
|
||||||
// update
|
|
||||||
|
|
||||||
await updateMutateAsync({
|
|
||||||
apiKeyDataId: apiKeyData.apiKeyDataId,
|
|
||||||
name
|
|
||||||
});
|
|
||||||
|
|
||||||
handlePopUpToggle("apiKeyV2", false);
|
|
||||||
} else {
|
|
||||||
// create
|
|
||||||
|
|
||||||
const { apiKey } = await createMutateAsync({
|
|
||||||
name
|
|
||||||
});
|
|
||||||
|
|
||||||
setNewAPIKey(apiKey);
|
|
||||||
}
|
|
||||||
|
|
||||||
createNotification({
|
|
||||||
text: `Successfully ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
|
|
||||||
type: "success"
|
|
||||||
});
|
|
||||||
|
|
||||||
reset();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
createNotification({
|
|
||||||
text: `Failed to ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
|
|
||||||
type: "error"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasAPIKey = Boolean(newAPIKey);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={popUp?.apiKeyV2?.isOpen}
|
|
||||||
onOpenChange={(isOpen) => {
|
|
||||||
handlePopUpToggle("apiKeyV2", isOpen);
|
|
||||||
reset();
|
|
||||||
setNewAPIKey("");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ModalContent title={`${popUp?.apiKeyV2?.data ? "Update" : "Create"} API Key V2`}>
|
|
||||||
{!hasAPIKey ? (
|
|
||||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
name="name"
|
|
||||||
render={({ field, fieldState: { error } }) => (
|
|
||||||
<FormControl
|
|
||||||
label="Name"
|
|
||||||
isError={Boolean(error)}
|
|
||||||
errorText={error?.message}
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
{...field}
|
|
||||||
placeholder="My API Key"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div className="mt-8 flex items-center">
|
|
||||||
<Button
|
|
||||||
className="mr-4"
|
|
||||||
size="sm"
|
|
||||||
type="submit"
|
|
||||||
isLoading={isSubmitting}
|
|
||||||
isDisabled={isSubmitting}
|
|
||||||
>
|
|
||||||
{popUp?.apiKeyV2?.data ? "Update" : "Create"}
|
|
||||||
</Button>
|
|
||||||
<Button colorSchema="secondary" variant="plain">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
) : (
|
|
||||||
<div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
|
|
||||||
<p className="mr-4 break-all">{newAPIKey}</p>
|
|
||||||
<IconButton
|
|
||||||
ariaLabel="copy icon"
|
|
||||||
colorSchema="secondary"
|
|
||||||
className="group relative"
|
|
||||||
onClick={copyTokenToClipboard}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
|
|
||||||
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
|
|
||||||
Click to copy
|
|
||||||
</span>
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</ModalContent>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
|
|
||||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
DeleteActionModal
|
|
||||||
} from "@app/components/v2";
|
|
||||||
import { useDeleteAPIKeyV2 } from "@app/hooks/api";
|
|
||||||
import { usePopUp } from "@app/hooks/usePopUp";
|
|
||||||
|
|
||||||
import { APIKeyV2Modal } from "./APIKeyV2Modal";
|
|
||||||
import { APIKeyV2Table } from "./APIKeyV2Table";
|
|
||||||
|
|
||||||
export const APIKeyV2Section = () => {
|
|
||||||
const { createNotification } = useNotificationContext();
|
|
||||||
const { mutateAsync: deleteMutateAsync } = useDeleteAPIKeyV2();
|
|
||||||
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
|
|
||||||
"apiKeyV2",
|
|
||||||
"deleteAPIKeyV2"
|
|
||||||
] as const);
|
|
||||||
|
|
||||||
const onDeleteAPIKeyDataSubmit = async (apiKeyDataId: string) => {
|
|
||||||
try {
|
|
||||||
await deleteMutateAsync({
|
|
||||||
apiKeyDataId
|
|
||||||
});
|
|
||||||
|
|
||||||
createNotification({
|
|
||||||
text: "Successfully deleted API Key V2",
|
|
||||||
type: "success"
|
|
||||||
});
|
|
||||||
|
|
||||||
handlePopUpClose("deleteAPIKeyV2");
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
createNotification({
|
|
||||||
text: "Failed to delete API Key V2",
|
|
||||||
type: "error"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
|
|
||||||
<div className="flex justify-between mb-8">
|
|
||||||
<p className="text-xl font-semibold text-mineshaft-100">
|
|
||||||
API Keys V2 (Beta)
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
colorSchema="secondary"
|
|
||||||
type="submit"
|
|
||||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
|
||||||
onClick={() => handlePopUpOpen("apiKeyV2")}
|
|
||||||
>
|
|
||||||
Add API Key
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<APIKeyV2Table
|
|
||||||
handlePopUpOpen={handlePopUpOpen}
|
|
||||||
/>
|
|
||||||
<APIKeyV2Modal
|
|
||||||
popUp={popUp}
|
|
||||||
handlePopUpToggle={handlePopUpToggle}
|
|
||||||
/>
|
|
||||||
<DeleteActionModal
|
|
||||||
isOpen={popUp.deleteAPIKeyV2.isOpen}
|
|
||||||
title={`Are you sure want to delete ${
|
|
||||||
(popUp?.deleteAPIKeyV2?.data as { name: string })?.name || ""
|
|
||||||
}?`}
|
|
||||||
onChange={(isOpen) => handlePopUpToggle("deleteAPIKeyV2", isOpen)}
|
|
||||||
deleteKey="confirm"
|
|
||||||
onDeleteApproved={() =>
|
|
||||||
onDeleteAPIKeyDataSubmit(
|
|
||||||
(popUp?.deleteAPIKeyV2?.data as { apiKeyDataId: string })?.apiKeyDataId
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import { faKey, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { format } from "date-fns";
|
|
||||||
|
|
||||||
import {
|
|
||||||
EmptyState,
|
|
||||||
IconButton,
|
|
||||||
Table,
|
|
||||||
TableContainer,
|
|
||||||
TableSkeleton,
|
|
||||||
TBody,
|
|
||||||
Td,
|
|
||||||
Th,
|
|
||||||
THead,
|
|
||||||
Tr
|
|
||||||
} from "@app/components/v2";
|
|
||||||
import { useGetMyAPIKeysV2 } from "@app/hooks/api";
|
|
||||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
handlePopUpOpen: (
|
|
||||||
popUpName: keyof UsePopUpState<["deleteAPIKeyV2", "apiKeyV2"]>,
|
|
||||||
data?: {
|
|
||||||
apiKeyDataId?: string;
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const APIKeyV2Table = ({ handlePopUpOpen }: Props) => {
|
|
||||||
const { data, isLoading } = useGetMyAPIKeysV2();
|
|
||||||
return (
|
|
||||||
<TableContainer>
|
|
||||||
<Table>
|
|
||||||
<THead>
|
|
||||||
<Tr>
|
|
||||||
<Th className="">Name</Th>
|
|
||||||
<Th className="">Last Used</Th>
|
|
||||||
<Th className="">Created At</Th>
|
|
||||||
<Th className="w-5" />
|
|
||||||
</Tr>
|
|
||||||
</THead>
|
|
||||||
<TBody>
|
|
||||||
{isLoading && <TableSkeleton columns={4} innerKey="api-keys-v2" />}
|
|
||||||
{!isLoading &&
|
|
||||||
data &&
|
|
||||||
data.length > 0 &&
|
|
||||||
data.map(({ id, name, lastUsed, createdAt }) => {
|
|
||||||
return (
|
|
||||||
<Tr className="h-10" key={`api-key-v2-${id}`}>
|
|
||||||
<Td>{name}</Td>
|
|
||||||
<Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
|
|
||||||
<Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
|
|
||||||
<Td className="flex justify-end">
|
|
||||||
<IconButton
|
|
||||||
onClick={async () => {
|
|
||||||
handlePopUpOpen("apiKeyV2", {
|
|
||||||
apiKeyDataId: id,
|
|
||||||
name
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
size="lg"
|
|
||||||
colorSchema="primary"
|
|
||||||
variant="plain"
|
|
||||||
ariaLabel="update"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faPencil} />
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
onClick={() => {
|
|
||||||
handlePopUpOpen("deleteAPIKeyV2", {
|
|
||||||
apiKeyDataId: id
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
size="lg"
|
|
||||||
colorSchema="danger"
|
|
||||||
variant="plain"
|
|
||||||
ariaLabel="update"
|
|
||||||
className="ml-4"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faXmark} />
|
|
||||||
</IconButton>
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{!isLoading && data && data?.length === 0 && (
|
|
||||||
<Tr>
|
|
||||||
<Td colSpan={4}>
|
|
||||||
<EmptyState title="No API key v2 on file" icon={faKey} />
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
)}
|
|
||||||
</TBody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { APIKeyV2Section } from "./APIKeyV2Section";
|
|
||||||
+2
-8
@@ -1,11 +1,5 @@
|
|||||||
import { APIKeySection } from "../APIKeySection";
|
import { APIKeySection } from "../APIKeySection";
|
||||||
// import { APIKeyV2Section } from "../APIKeyV2Section";
|
|
||||||
|
|
||||||
export const PersonalAPIKeyTab = () => {
|
export const PersonalAPIKeyTab = () => {
|
||||||
return (
|
return <APIKeySection />;
|
||||||
<>
|
};
|
||||||
{/* <APIKeyV2Section /> */}
|
|
||||||
<APIKeySection />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
+59
-35
@@ -1,44 +1,68 @@
|
|||||||
import { Fragment } from "react"
|
import { Fragment } from "react";
|
||||||
import { Tab } from "@headlessui/react"
|
import Link from "next/link";
|
||||||
|
import { faWarning } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { Tab } from "@headlessui/react";
|
||||||
|
|
||||||
import { PersonalAPIKeyTab } from "../PersonalAPIKeyTab";
|
import { PersonalAPIKeyTab } from "../PersonalAPIKeyTab";
|
||||||
import { PersonalAuthTab } from "../PersonalAuthTab";
|
import { PersonalAuthTab } from "../PersonalAuthTab";
|
||||||
import { PersonalGeneralTab } from "../PersonalGeneralTab";
|
import { PersonalGeneralTab } from "../PersonalGeneralTab";
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{ name: "General", key: "tab-account-general" },
|
{ name: "General", key: "tab-account-general" },
|
||||||
{ name: "Authentication", key: "tab-account-auth" },
|
{ name: "Authentication", key: "tab-account-auth" },
|
||||||
{ name: "API Keys", key: "tab-account-api-keys" }
|
{ name: "API Keys", key: "tab-account-api-keys" }
|
||||||
];
|
];
|
||||||
|
|
||||||
export const PersonalTabGroup = () => {
|
export const PersonalTabGroup = () => {
|
||||||
return (
|
return (
|
||||||
<Tab.Group>
|
<Tab.Group>
|
||||||
<Tab.List className="mb-4 border-b-2 border-mineshaft-800 w-full">
|
<Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
|
||||||
{tabs.map((tab) => (
|
{tabs.map((tab) => (
|
||||||
<Tab as={Fragment} key={tab.key}>
|
<Tab as={Fragment} key={tab.key}>
|
||||||
{({ selected }) => (
|
{({ selected }) => (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
|
className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
|
||||||
>
|
selected ? "border-b border-white text-white" : "text-mineshaft-400"
|
||||||
{tab.name}
|
}`}
|
||||||
</button>
|
>
|
||||||
)}
|
{tab.name}
|
||||||
</Tab>
|
</button>
|
||||||
))}
|
)}
|
||||||
</Tab.List>
|
</Tab>
|
||||||
<Tab.Panels>
|
))}
|
||||||
<Tab.Panel>
|
</Tab.List>
|
||||||
<PersonalGeneralTab />
|
<Tab.Panels>
|
||||||
</Tab.Panel>
|
<Tab.Panel>
|
||||||
<Tab.Panel>
|
<PersonalGeneralTab />
|
||||||
<PersonalAuthTab />
|
</Tab.Panel>
|
||||||
</Tab.Panel>
|
<Tab.Panel>
|
||||||
<Tab.Panel>
|
<PersonalAuthTab />
|
||||||
<PersonalAPIKeyTab />
|
</Tab.Panel>
|
||||||
</Tab.Panel>
|
<Tab.Panel>
|
||||||
</Tab.Panels>
|
<div className="space-y-3">
|
||||||
</Tab.Group>
|
<div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
|
||||||
);
|
<FontAwesomeIcon icon={faWarning} className="pr-6 text-4xl text-white/80" />
|
||||||
}
|
<div className="flex w-full flex-col text-sm">
|
||||||
|
<span className="mb-4 text-lg font-semibold">Deprecation Notice</span>
|
||||||
|
<p>
|
||||||
|
API Keys are deprecated and will be removed in the future.
|
||||||
|
<br /> Please use Machine Identity authentication for your applications and
|
||||||
|
services.
|
||||||
|
</p>
|
||||||
|
<Link href="https://infisical.com/docs/documentation/platform/identities/overview">
|
||||||
|
<a target="_blank" className="font-semibold text-primary-400">
|
||||||
|
Learn more about Machine Identities
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PersonalAPIKeyTab />
|
||||||
|
</div>
|
||||||
|
</Tab.Panel>
|
||||||
|
</Tab.Panels>
|
||||||
|
</Tab.Group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user