"use client";
import { useEffect, useState } from "react";
import { getProviderFormType } from "@/lib/provider-helpers";
import { useProviderWizardStore } from "@/store/provider-wizard/store";
import { isKnownProviderType, ProviderType } from "@/types/providers";
import {
AddViaCredentialsForm,
AddViaRoleForm,
UpdateViaCredentialsForm,
UpdateViaRoleForm,
} from "../../workflow/forms";
import { SelectViaAlibabaCloud } from "../../workflow/forms/select-credentials-type/alibabacloud";
import { SelectViaAWS } from "../../workflow/forms/select-credentials-type/aws";
import { SelectViaCloudflare } from "../../workflow/forms/select-credentials-type/cloudflare";
import {
AddViaServiceAccountForm,
SelectViaGCP,
} from "../../workflow/forms/select-credentials-type/gcp";
import { SelectViaGitHub } from "../../workflow/forms/select-credentials-type/github";
import { SelectViaM365 } from "../../workflow/forms/select-credentials-type/m365";
import { UpdateViaServiceAccountForm } from "../../workflow/forms/update-via-service-account-key-form";
import { DynamicCredentialsStep } from "./dynamic-credentials-step";
import {
WIZARD_FOOTER_ACTION_TYPE,
WizardFooterConfig,
} from "./footer-controls";
interface CredentialsStepProps {
onNext: () => void;
onBack: () => void;
onFooterChange: (config: WizardFooterConfig) => void;
}
export function CredentialsStep(props: CredentialsStepProps) {
const providerId = useProviderWizardStore((state) => state.providerId);
const providerType = useProviderWizardStore((state) => state.providerType);
if (providerId && providerType && !isKnownProviderType(providerType)) {
return (
);
}
return ;
}
function BuiltinCredentialsStep({
onNext,
onBack,
onFooterChange,
}: CredentialsStepProps) {
const { providerId, providerType, providerUid, via, secretId, setVia } =
useProviderWizardStore();
const [isFormLoading, setIsFormLoading] = useState(false);
const [isFormValid, setIsFormValid] = useState(false);
const formId = "provider-wizard-credentials-form";
const hasProviderContext = Boolean(providerType && providerId);
const formType =
providerType && providerId
? getProviderFormType(providerType, via || undefined)
: null;
const shouldUseUpdateForms = Boolean(secretId);
const handleBack = () => {
if (via) {
setVia(null);
return;
}
onBack();
};
const handleViaChange = (value: string) => {
setVia(value);
};
useEffect(() => {
setIsFormValid(false);
}, [formType, via]);
useEffect(() => {
if (!hasProviderContext) {
onFooterChange({
showBack: true,
backLabel: "Back",
onBack,
showAction: false,
actionLabel: "Authenticate",
actionType: WIZARD_FOOTER_ACTION_TYPE.BUTTON,
});
return;
}
const isSelector = formType === "selector";
onFooterChange({
showBack: true,
backLabel: "Back",
backDisabled: isFormLoading,
onBack: () => {
if (via) {
setVia(null);
return;
}
onBack();
},
showAction: !isSelector,
actionLabel: "Authenticate",
actionDisabled: isFormLoading || !isFormValid,
actionType: WIZARD_FOOTER_ACTION_TYPE.SUBMIT,
actionFormId: formId,
});
}, [
hasProviderContext,
formType,
formId,
isFormLoading,
isFormValid,
onBack,
onFooterChange,
setVia,
via,
]);
if (!providerType || !providerId) {
return (
Provider details are missing. Go back and select a provider.
);
}
if (formType === "selector") {
if (providerType === "aws") {
return (
);
}
if (providerType === "gcp") {
return (
);
}
if (providerType === "github") {
return (
);
}
if (providerType === "m365") {
return (
);
}
if (providerType === "alibabacloud") {
return (
);
}
if (providerType === "cloudflare") {
return (
);
}
return null;
}
const commonFormProps = {
via,
onSuccess: onNext,
onBack: handleBack,
providerUid: providerUid || undefined,
formId,
hideActions: true,
onLoadingChange: setIsFormLoading,
onValidityChange: setIsFormValid,
validationMode: "onChange" as const,
};
if (formType === "credentials") {
if (shouldUseUpdateForms) {
return (
);
}
return (
);
}
if (formType === "role") {
if (shouldUseUpdateForms) {
return (
);
}
return (
);
}
if (formType === "service-account") {
if (shouldUseUpdateForms) {
return (
);
}
return (
);
}
return (
Select a credential type to continue.
);
}