import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import dayjs from "@calcom/dayjs"; import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem"; import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Icon, DatePickerField as DatePicker, DialogFooter, Form, showToast, Switch, TextField, Tooltip, } from "@calcom/ui"; export default function ApiKeyDialogForm({ defaultValues, handleClose, }: { defaultValues?: Omit & { neverExpires?: boolean }; handleClose: () => void; }) { const { t } = useLocale(); const utils = trpc.useContext(); const updateApiKeyMutation = trpc.viewer.apiKeys.edit.useMutation({ onSuccess() { utils.viewer.apiKeys.list.invalidate(); showToast(t("api_key_updated"), "success"); handleClose(); }, onError() { showToast(t("api_key_update_failed"), "error"); }, }); const [apiKey, setApiKey] = useState(""); const [successfulNewApiKeyModal, setSuccessfulNewApiKeyModal] = useState(false); const [apiKeyDetails, setApiKeyDetails] = useState({ expiresAt: null as Date | null, note: "" as string | null, neverExpires: false, }); const form = useForm({ defaultValues: { note: defaultValues?.note || "", neverExpires: defaultValues?.neverExpires || false, expiresAt: defaultValues?.expiresAt || dayjs().add(1, "month").toDate(), }, }); const watchNeverExpires = form.watch("neverExpires"); return ( {successfulNewApiKeyModal ? ( <>

{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()}`}
) : (
{ if (defaultValues) { console.log("Name changed"); await updateApiKeyMutation.mutate({ id: defaultValues.id, note: event.note }); } else { const apiKey = await utils.client.viewer.apiKeys.create.mutate(event); setApiKey(apiKey); setApiKeyDetails({ ...event }); await utils.viewer.apiKeys.list.invalidate(); setSuccessfulNewApiKeyModal(true); } }} className="space-y-4">

{defaultValues ? t("edit_api_key") : t("create_api_key")}

{t("api_key_modal_subtitle")}

( { form.setValue("note", e?.target.value); }} type="text" /> )} />
{!defaultValues && (
{t("expire_date")} ( )} />
( )} />
)}
)}
); }