import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import dayjs from "@calcom/dayjs"; import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem"; import LicenseRequired from "@calcom/ee/common/components/LicenseRequired"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, DialogFooter, Form, showToast, Switch, TextField, Tooltip, SelectField } from "@calcom/ui"; import { Clipboard } from "@calcom/ui/components/icon"; 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"); }, }); type Option = { value: Date | null | undefined; label: string }; const [apiKey, setApiKey] = useState(""); const [expiryDate, setExpiryDate] = useState( () => defaultValues?.expiresAt || dayjs().add(30, "day").toDate() ); 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(30, "day").toDate(), }, }); const watchNeverExpires = form.watch("neverExpires"); const expiresAtOptions: Option[] = [ { label: t("seven_days"), value: dayjs().add(7, "day").toDate(), }, { label: t("thirty_days"), value: dayjs().add(30, "day").toDate(), }, { label: t("three_months"), value: dayjs().add(3, "month").toDate(), }, { label: t("one_year"), value: dayjs().add(1, "year").toDate(), }, ]; 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_expires") : `${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")} ( )} />
{ const defaultValue = expiresAtOptions[1]; return ( ({ ...baseStyles, fontSize: "14px", }), option: (baseStyles) => ({ ...baseStyles, fontSize: "14px", }), }} isDisabled={watchNeverExpires || !!defaultValues} containerClassName="data-testid-field-type" options={expiresAtOptions} onChange={(option) => { if (!option) { return; } onChange(option.value); setExpiryDate(option.value); }} defaultValue={defaultValue} /> ); }} /> {t("api_key_expires_on")} {dayjs(expiryDate).format("DD-MM-YYYY")}
)}
)}
); }