import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import dayjs from "@calcom/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import { trpc } from "@calcom/trpc/react"; import Button from "@calcom/ui/Button"; import { DialogFooter } from "@calcom/ui/Dialog"; import { ClipboardCopyIcon } from "@calcom/ui/Icon"; import Switch from "@calcom/ui/Switch"; import { Tooltip } from "@calcom/ui/Tooltip"; import { Form, TextField } from "@calcom/ui/form/fields"; import { DatePicker } from "@calcom/ui/v2"; import LicenseRequired from "../../common/components/LicenseRequired"; import type { TApiKeys } from "./ApiKeyListItem"; export default function ApiKeyDialogForm(props: { title: string; defaultValues?: Omit & { neverExpires?: boolean }; handleClose: () => void; }) { const { t } = useLocale(); const utils = trpc.useContext(); const { defaultValues = { note: "", neverExpires: false, expiresAt: dayjs().add(1, "month").toDate(), }, } = props; const [apiKey, setApiKey] = useState(""); const [successfulNewApiKeyModal, setSuccessfulNewApiKeyModal] = useState(false); const [apiKeyDetails, setApiKeyDetails] = useState({ id: "", hashedKey: "", expiresAt: null as Date | null, note: "" as string | null, neverExpires: false, }); const form = useForm({ defaultValues, }); const watchNeverExpires = form.watch("neverExpires"); return ( {successfulNewApiKeyModal ? ( <>

{apiKeyDetails ? t("success_api_key_edited") : t("success_api_key_created")}

{t("success_api_key_created_bold_tagline")}{" "} {t("you_will_only_view_it_once")}
{apiKey}
{apiKeyDetails.neverExpires ? t("never_expire_key") : `${t("expires")} ${apiKeyDetails?.expiresAt?.toLocaleDateString()}`}
) : ( & { neverExpires?: boolean }> form={form} handleSubmit={async (event) => { const apiKey = await utils.client.mutation("viewer.apiKeys.create", event); setApiKey(apiKey); setApiKeyDetails({ ...event, neverExpires: !!event.neverExpires }); await utils.invalidateQueries(["viewer.apiKeys.list"]); setSuccessfulNewApiKeyModal(true); }} className="space-y-4">

{props.title}

{t("api_key_modal_subtitle")}

{t("expire_date")} ( )} />
( )} />
)}
); }