feat: custom add credentials page

app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx

@@ -1,16 +1,28 @@
 import { redirect } from "next/navigation";
 import React from "react";
 
-import { AddCredentialsForm } from "@/components/providers/workflow/forms";
+import { ViaCredentialsForm } from "@/components/providers/workflow/forms";
 
 interface Props {
-  searchParams: { provider: string; id: string };
+  searchParams: { provider: string; id: string; via?: string };
 }
 
 export default function AddCredentialsPage({ searchParams }: Props) {
-  if (!searchParams.provider || !searchParams.id) {
+  if (
+    !searchParams.provider ||
+    !searchParams.id ||
+    (searchParams.provider === "aws" && !searchParams.via)
+  ) {
     redirect("/providers/connect-account");
   }
 
-  return <AddCredentialsForm searchParams={searchParams} />;
+  const useCredentialsForm =
+    (searchParams.provider === "aws" && searchParams.via === "credentials") ||
+    (searchParams.provider !== "aws" && !searchParams.via);
+
+  return (
+    <>
+      {useCredentialsForm && <ViaCredentialsForm searchParams={searchParams} />}
+    </>
+  );
 }

components/providers/workflow/forms/index.ts

@@ -1,3 +1,3 @@
-export * from "./add-credentials-form";
 export * from "./connect-account-form";
 export * from "./radio-group-aws-via-credentials-form";
+export * from "./via-credentials-form";

components/providers/workflow/forms/via-credentials-form.tsx

@@ -18,17 +18,19 @@ import {
   CredentialsFormSchema,
 } from "../../../../types";
 
-export const AddCredentialsForm = ({
+export const ViaCredentialsForm = ({
   searchParams,
 }: {
   searchParams: { provider: string; id: string };
 }) => {
+  const router = useRouter();
+  const { toast } = useToast();
+
   const providerType = searchParams.provider;
   const providerId = searchParams.id;
 
   const formSchema = addCredentialsFormSchema(providerType);
 
-  const { toast } = useToast();
   const form = useForm<CredentialsFormSchema>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -58,8 +60,6 @@ export const AddCredentialsForm = ({
 
   const isLoading = form.formState.isSubmitting;
 
-  const router = useRouter();
-
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
     const formData = new FormData();
 
@@ -117,19 +117,17 @@ export const AddCredentialsForm = ({
         className="flex flex-col space-y-4"
       >
         <input type="hidden" name="providerId" value={providerId} />
-        <CustomInput
-          control={form.control}
-          name="secretName"
-          type="text"
-          label="Secret Name"
-          labelPlacement="inside"
-          placeholder={"Enter the Secret Name"}
-          variant="bordered"
-          isRequired={false}
-          isInvalid={!!form.formState.errors.secretName}
-        />
+
         {providerType === "aws" && (
           <>
+            <div className="text-left">
+              <div className="text-2xl font-bold leading-9 text-default-foreground">
+                Connect via Credentials
+              </div>
+              <div className="py-2 text-default-500">
+                Please provide the information for your AWS credentials.
+              </div>
+            </div>
             <CustomInput
               control={form.control}
               name="aws_access_key_id"
@@ -174,6 +172,19 @@ export const AddCredentialsForm = ({
             />
           </>
         )}
+        <span className="text-sm text-default-500">Name (Optional)</span>
+        <CustomInput
+          control={form.control}
+          name="secretName"
+          type="text"
+          label="Credential name"
+          labelPlacement="inside"
+          placeholder={"Enter the credential name"}
+          variant="bordered"
+          isRequired={false}
+          size="sm"
+          isInvalid={!!form.formState.errors.secretName}
+        />
 
         <div className="flex w-full justify-end sm:space-x-6">
           <CustomButton

components/ui/custom/custom-input.tsx

@@ -13,6 +13,7 @@ interface CustomInputProps<T extends FieldValues> {
   label?: string;
   labelPlacement?: "inside" | "outside";
   variant?: "flat" | "bordered" | "underlined" | "faded";
+  size?: "sm" | "md" | "lg";
   type?: string;
   placeholder?: string;
   password?: boolean;
@@ -29,6 +30,7 @@ export const CustomInput = <T extends FieldValues>({
   labelPlacement = "inside",
   placeholder,
   variant = "bordered",
+  size = "md",
   confirmPassword = false,
   password = false,
   isRequired = true,
@@ -95,6 +97,7 @@ export const CustomInput = <T extends FieldValues>({
               placeholder={inputPlaceholder}
               type={inputType}
               variant={variant}
+              size={size}
               isInvalid={isInvalid}
               endContent={endContent}
               {...field}