"use client"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import * as z from "zod"; import { createApiKey } from "@/actions/api-keys/api-keys"; import { useToast } from "@/components/ui"; import { CustomInput } from "@/components/ui/custom"; import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal"; import { CustomLink } from "@/components/ui/custom/custom-link"; import { Form, FormButtons } from "@/components/ui/form"; import { DEFAULT_EXPIRY_DAYS } from "./api-keys/constants"; import { calculateExpiryDate } from "./api-keys/utils"; interface CreateApiKeyModalProps { isOpen: boolean; onClose: () => void; onSuccess: (apiKey: string) => void; } const createApiKeySchema = z.object({ name: z.string().min(1, "Name is required"), expiresInDays: z.string().refine((val) => { const num = parseInt(val); return num >= 1 && num <= 3650; }, "Must be between 1 and 3650 days"), }); type FormValues = z.infer; export const CreateApiKeyModal = ({ isOpen, onClose, onSuccess, }: CreateApiKeyModalProps) => { const { toast } = useToast(); const form = useForm({ resolver: zodResolver(createApiKeySchema), defaultValues: { name: "", expiresInDays: DEFAULT_EXPIRY_DAYS, }, }); const onSubmitClient = async (values: FormValues) => { try { const result = await createApiKey({ name: values.name.trim(), expires_at: calculateExpiryDate(parseInt(values.expiresInDays)), }); if (result.error) { throw new Error(result.error); } if (!result.data) { throw new Error("Failed to create API key"); } const apiKey = result.data.data.attributes.api_key; if (!apiKey) { throw new Error("Failed to retrieve API key"); } form.reset(); onSuccess(apiKey); onClose(); } catch (error) { toast({ variant: "destructive", title: "Error", description: error instanceof Error ? error.message : "An unexpected error occurred", }); } }; const handleClose = () => { form.reset(); onClose(); }; return ( !open && handleClose()} title="Create API Key" size="lg" >

Need help configuring API Keys?{" "} Read the docs

); };