chore: add form for add-credentials-providers

actions/providers/providers.ts

@@ -4,7 +4,7 @@ import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 
 import { auth } from "@/auth.config";
-import { getErrorMessage, parseStringify } from "@/lib";
+import { getErrorMessage, parseStringify, wait } from "@/lib";
 
 export const getProviders = async ({
   page = 1,
@@ -190,6 +190,7 @@ export const deleteProvider = async (formData: FormData) => {
       },
     });
     const data = await response.json();
+    await wait(1000);
     revalidatePath("/providers");
     return parseStringify(data);
   } catch (error) {

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

@@ -1,15 +1,7 @@
 import React from "react";
 
-import { NavigationHeader } from "@/components/ui";
+import { AddCredentialsForm } from "@/components/providers/workflow/forms";
 
 export default function AddCredentialsPage() {
-  return (
-    <>
-      <NavigationHeader
-        title="Connect your account via credentials"
-        icon="bi:arrow-left"
-        href="/providers/connect-account"
-      />
-    </>
-  );
+  return <AddCredentialsForm providerType="aws" />;
 }

app/(prowler)/providers/(set-up-provider)/connect-account/page.tsx

@@ -5,9 +5,5 @@ import React from "react";
 import { ConnectAccountForm } from "@/components/providers/workflow/forms";
 
 export default function ConnectAccountPage() {
-  return (
-    <>
-      <ConnectAccountForm />
-    </>
-  );
+  return <ConnectAccountForm />;
 }

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

@@ -0,0 +1,142 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SaveIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+
+import { addProvider } from "../../../../actions/providers/providers";
+import { addCredentialsFormSchema, ApiError } from "../../../../types";
+
+export const AddCredentialsForm = ({
+  providerType,
+}: {
+  providerType: string;
+}) => {
+  const formSchema = addCredentialsFormSchema(providerType);
+  const { toast } = useToast();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  const isLoading = form.formState.isSubmitting;
+
+  const router = useRouter();
+
+  const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formData = new FormData();
+
+    Object.entries(values).forEach(
+      ([key, value]) => value !== undefined && formData.append(key, value),
+    );
+
+    const data = await addProvider(formData);
+    console.log(data);
+
+    if (data?.errors && data.errors.length > 0) {
+      data.errors.forEach((error: ApiError) => {
+        const errorMessage = error.detail;
+        switch (error.source.pointer) {
+          case "/data/attributes/provider":
+            form.setError("providerType", {
+              type: "server",
+              message: errorMessage,
+            });
+            break;
+          case "/data/attributes/uid":
+          case "/data/attributes/__all__":
+            form.setError("providerId", {
+              type: "server",
+              message: errorMessage,
+            });
+            break;
+          case "/data/attributes/alias":
+            form.setError("providerAlias", {
+              type: "server",
+              message: errorMessage,
+            });
+            break;
+          default:
+            toast({
+              variant: "destructive",
+              title: "Oops! Something went wrong",
+              description: errorMessage,
+            });
+        }
+      });
+    } else {
+      router.push("/providers/test-connection");
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        {providerType === "aws" && (
+          <>
+            {/* AWS Access Key ID */}
+            <CustomInput
+              control={form.control}
+              name="aws_access_key_id"
+              type="text"
+              label="AWS Access Key ID"
+              labelPlacement="inside"
+              placeholder={"Enter the AWS Access Key ID"}
+              variant="bordered"
+              isRequired
+              isInvalid={!!form.formState.errors.aws_access_key_id}
+            />
+            {/* AWS Secret Access Key */}
+            <CustomInput
+              control={form.control}
+              name="aws_secret_access_key"
+              type="text"
+              label="AWS Secret Access Key"
+              labelPlacement="inside"
+              placeholder={"Enter the AWS Secret Access Key"}
+              variant="bordered"
+              isRequired
+              isInvalid={!!form.formState.errors.aws_secret_access_key}
+            />
+            {/* AWS Session Token */}
+            <CustomInput
+              control={form.control}
+              name="aws_session_token"
+              type="text"
+              label="AWS Session Token"
+              labelPlacement="inside"
+              placeholder={"Enter the AWS Session Token"}
+              variant="bordered"
+              isRequired
+              isInvalid={!!form.formState.errors.aws_session_token}
+            />
+          </>
+        )}
+
+        <div className="flex w-full justify-end sm:space-x-6">
+          <CustomButton
+            type="submit"
+            ariaLabel={"Save"}
+            className="w-1/2"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Save</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/providers/workflow/forms/connect-account-form.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ChevronLeftIcon, ChevronRightIcon, SaveIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
@@ -35,6 +36,8 @@ export const ConnectAccountForm = () => {
   const providerType = form.watch("providerType");
   const isLoading = form.formState.isSubmitting;
 
+  const router = useRouter();
+
   const onSubmitClient = async (values: FormValues) => {
     const formData = new FormData();
 
@@ -43,6 +46,7 @@ export const ConnectAccountForm = () => {
     );
 
     const data = await addProvider(formData);
+    console.log(data);
 
     if (data?.errors && data.errors.length > 0) {
       data.errors.forEach((error: ApiError) => {
@@ -76,6 +80,8 @@ export const ConnectAccountForm = () => {
         }
       });
       setPrevStep(1);
+    } else {
+      router.push("/providers/add-credentials");
     }
   };
 

components/providers/workflow/forms/index.ts

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

components/providers/workflow/workflow.tsx

@@ -25,7 +25,7 @@ const steps = [
     href: "/providers/test-connection",
   },
   {
-    title: "Lunch scan",
+    title: "Launch scan",
     description: "Choose when you want to launch your scan.",
     href: "/providers",
   },

lib/helper.ts

@@ -1,5 +1,7 @@
 import { MetaDataProps } from "@/types";
 
+export const wait = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
 // Helper function to create dictionaries by type
 export const createDict = (
   type: string,

types/formSchemas.ts

@@ -38,6 +38,29 @@ export const addProviderFormSchema = z.object({
   awsCredentialsType: z.string().optional(),
 });
 
+export const addCredentialsFormSchema = (providerType: string) =>
+  z.object(
+    providerType === "aws"
+      ? {
+          aws_access_key_id: z.string(),
+          aws_secret_access_key: z.string(),
+          aws_session_token: z.string(),
+        }
+      : providerType === "azure"
+        ? {
+            client_id: z.string(),
+            client_secret: z.string(),
+            tenant_id: z.string(),
+          }
+        : providerType === "gcp"
+          ? {
+              client_id: z.string(),
+              client_secret: z.string(),
+              refresh_token: z.string(),
+            }
+          : {},
+  );
+
 export const editProviderFormSchema = (currentAlias: string) =>
   z.object({
     alias: z