"use client"; import { ChevronLeftIcon, ChevronRightIcon, Loader2 } from "lucide-react"; import { useEffect } from "react"; import { Control, UseFormSetValue } from "react-hook-form"; import { Button } from "@/components/shadcn"; import { Separator } from "@/components/shadcn/separator/separator"; import { Form } from "@/components/ui/form"; import { useCredentialsForm } from "@/hooks/use-credentials-form"; import { getAWSCredentialsTemplateLinks } from "@/lib"; import { ProviderCredentialFields } from "@/lib/provider-credentials/provider-credential-fields"; import { requiresBackButton } from "@/lib/provider-helpers"; import { AlibabaCloudCredentials, AlibabaCloudCredentialsRole, ApiResponse, AWSCredentials, AWSCredentialsRole, AzureCredentials, CloudflareApiKeyCredentials, CloudflareTokenCredentials, GCPDefaultCredentials, GCPServiceAccountKey, GoogleWorkspaceCredentials, IacCredentials, ImageCredentials, KubernetesCredentials, M365CertificateCredentials, M365ClientSecretCredentials, MongoDBAtlasCredentials, OCICredentials, OktaCredentials, OpenStackCredentials, ProviderType, VercelCredentials, } from "@/types"; import { ProviderTitleDocs } from "../provider-title-docs"; import { AlibabaCloudRoleCredentialsForm, AlibabaCloudStaticCredentialsForm, } from "./select-credentials-type/alibabacloud/credentials-type"; import { AWSStaticCredentialsForm } from "./select-credentials-type/aws/credentials-type"; import { AWSRoleCredentialsForm } from "./select-credentials-type/aws/credentials-type/aws-role-credentials-form"; import { CloudflareApiKeyCredentialsForm, CloudflareApiTokenCredentialsForm, } from "./select-credentials-type/cloudflare"; import { GCPDefaultCredentialsForm } from "./select-credentials-type/gcp/credentials-type"; import { GCPServiceAccountKeyForm } from "./select-credentials-type/gcp/credentials-type/gcp-service-account-key-form"; import { M365CertificateCredentialsForm, M365ClientSecretCredentialsForm, } from "./select-credentials-type/m365"; import { AzureCredentialsForm } from "./via-credentials/azure-credentials-form"; import { GitHubCredentialsForm } from "./via-credentials/github-credentials-form"; import { GoogleWorkspaceCredentialsForm } from "./via-credentials/googleworkspace-credentials-form"; import { IacCredentialsForm } from "./via-credentials/iac-credentials-form"; import { ImageCredentialsForm } from "./via-credentials/image-credentials-form"; import { KubernetesCredentialsForm } from "./via-credentials/k8s-credentials-form"; import { MongoDBAtlasCredentialsForm } from "./via-credentials/mongodbatlas-credentials-form"; import { OktaCredentialsForm } from "./via-credentials/okta-credentials-form"; import { OpenStackCredentialsForm } from "./via-credentials/openstack-credentials-form"; import { OracleCloudCredentialsForm } from "./via-credentials/oraclecloud-credentials-form"; import { VercelCredentialsForm } from "./via-credentials/vercel-credentials-form"; type BaseCredentialsFormProps = { providerType: ProviderType; providerId: string; providerUid?: string; onSubmit: (formData: FormData) => Promise; successNavigationUrl: string; via?: string | null; onSuccess?: () => void; onBack?: () => void; formId?: string; hideActions?: boolean; onLoadingChange?: (isLoading: boolean) => void; onValidityChange?: (isValid: boolean) => void; submitButtonText?: string; showBackButton?: boolean; validationMode?: "onSubmit" | "onChange"; }; export const BaseCredentialsForm = ({ providerType, providerId, providerUid, onSubmit, successNavigationUrl, via, onSuccess, onBack, formId, hideActions = false, onLoadingChange, onValidityChange, submitButtonText = "Next", showBackButton = true, validationMode, }: BaseCredentialsFormProps) => { const { form, isLoading, isValid, handleSubmit, handleBackStep, effectiveVia, externalId, } = useCredentialsForm({ providerType, providerId, providerUid, onSubmit, successNavigationUrl, via, onSuccess, onBack, validationMode, }); useEffect(() => { onLoadingChange?.(isLoading); }, [isLoading, onLoadingChange]); useEffect(() => { onValidityChange?.(isValid); }, [isValid, onValidityChange]); const templateLinks = getAWSCredentialsTemplateLinks(externalId); return (
{providerUid && ( )} {providerType === "aws" && effectiveVia === "role" && ( } setValue={ form.setValue as unknown as UseFormSetValue } externalId={externalId} templateLinks={templateLinks} /> )} {providerType === "aws" && effectiveVia !== "role" && ( } /> )} {providerType === "azure" && ( } /> )} {providerType === "m365" && effectiveVia === "app_client_secret" && ( } /> )} {providerType === "m365" && effectiveVia === "app_certificate" && ( } /> )} {providerType === "gcp" && effectiveVia === "service-account" && ( } /> )} {providerType === "gcp" && effectiveVia !== "service-account" && ( } /> )} {providerType === "kubernetes" && ( } /> )} {providerType === "github" && ( )} {providerType === "iac" && ( } /> )} {providerType === "image" && ( } /> )} {providerType === "oraclecloud" && ( } /> )} {providerType === "mongodbatlas" && ( } /> )} {providerType === "alibabacloud" && effectiveVia === "role" && ( } /> )} {providerType === "alibabacloud" && effectiveVia !== "role" && ( } /> )} {providerType === "cloudflare" && effectiveVia === "api_token" && ( } /> )} {providerType === "cloudflare" && effectiveVia === "api_key" && ( } /> )} {providerType === "openstack" && ( } /> )} {providerType === "googleworkspace" && ( } /> )} {providerType === "vercel" && ( } /> )} {providerType === "okta" && ( } /> )} {!hideActions && (
{showBackButton && requiresBackButton(effectiveVia) && ( )}
)} ); };