chore: hidden credentials inputs for cloud providers

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

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

app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx

@@ -1,16 +1,29 @@
 import { redirect } from "next/navigation";
 import React from "react";
 
+import { getProvider } from "@/actions/providers";
 import { TestConnectionForm } from "@/components/providers/workflow/forms";
 
 interface Props {
   searchParams: { type: string; id: string };
 }
 
-export default function TestConnectionPage({ searchParams }: Props) {
-  if (!searchParams.id) {
+export default async function TestConnectionPage({ searchParams }: Props) {
+  const providerId = searchParams.id;
+
+  if (!providerId) {
     redirect("/providers/connect-account");
   }
 
-  return <TestConnectionForm searchParams={searchParams} />;
+  const formData = new FormData();
+  formData.append("id", providerId);
+
+  const providerData = await getProvider(formData);
+
+  return (
+    <TestConnectionForm
+      searchParams={searchParams}
+      providerData={providerData}
+    />
+  );
 }

components/findings/table/column-findings.tsx

@@ -88,7 +88,7 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
   },
   {
     accessorKey: "status",
-    header: "Scan Status",
+    header: "Status",
     cell: ({ row }) => {
       const {
         attributes: { status },

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

@@ -93,13 +93,13 @@ export const ConnectAccountForm = () => {
     } else {
       const {
         id,
-        attributes: { provider },
+        attributes: { provider: providerType },
       } = data.data;
       const credentialsParam = values.awsCredentialsType
         ? `&via=${values.awsCredentialsType}`
         : "";
       router.push(
-        `/providers/add-credentials?provider=${provider}&id=${id}${credentialsParam}`,
+        `/providers/add-credentials?type=${providerType}&id=${id}${credentialsParam}`,
       );
     }
   };

components/providers/workflow/forms/test-connection-form.tsx

@@ -16,12 +16,27 @@ import { CustomButton } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
 import { ApiError, testConnectionFormSchema } from "@/types";
 
+import { ProviderInfo } from "../..";
+
 type FormValues = z.infer<typeof testConnectionFormSchema>;
 
 export const TestConnectionForm = ({
   searchParams,
+  providerData,
 }: {
   searchParams: { type: string; id: string };
+  providerData: {
+    data: {
+      id: string;
+      attributes: {
+        connection: {
+          connected: boolean;
+        };
+        provider: "aws" | "azure" | "gcp" | "kubernetes";
+        alias: string;
+      };
+    };
+  };
 }) => {
   const { toast } = useToast();
   const router = useRouter();
@@ -68,7 +83,6 @@ export const TestConnectionForm = ({
         }
       });
     } else {
-      console.log({ data: data.data.id }, "success");
       const taskId = data.data.id;
       setApiErrorMessage(null);
 
@@ -128,6 +142,12 @@ export const TestConnectionForm = ({
           </div>
         )}
 
+        <ProviderInfo
+          connected={providerData.data.attributes.connection.connected}
+          provider={providerData.data.attributes.provider}
+          providerAlias={providerData.data.attributes.alias}
+        />
+
         <input type="hidden" name="providerId" value={providerId} />
 
         <div className="flex w-full justify-end sm:space-x-6">
@@ -142,6 +162,17 @@ export const TestConnectionForm = ({
               />
               <span>Back to providers</span>
             </Link>
+          ) : connectionStatus?.error ? (
+            <Link
+              href="/providers/add-credentials"
+              className="mr-3 flex w-fit items-center justify-center space-x-2 rounded-lg border border-solid border-gray-200 px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+            >
+              <Icon
+                icon="icon-park-outline:close-small"
+                className="h-5 w-5 text-gray-600 dark:text-gray-400"
+              />
+              <span>Handle credentials</span>
+            </Link>
           ) : (
             <CustomButton
               type="submit"
@@ -153,7 +184,7 @@ export const TestConnectionForm = ({
               isLoading={isLoading}
               startContent={!isLoading && <SaveIcon size={24} />}
             >
-              {isLoading ? <>Loading</> : <span>Connect account</span>}
+              {isLoading ? <>Loading</> : <span>Test connection</span>}
             </CustomButton>
           )}
         </div>

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

@@ -38,12 +38,12 @@ type FormType = CredentialsFormSchema &
 export const ViaCredentialsForm = ({
   searchParams,
 }: {
-  searchParams: { provider: string; id: string };
+  searchParams: { type: string; id: string };
 }) => {
   const router = useRouter();
   const { toast } = useToast();
 
-  const providerType = searchParams.provider;
+  const providerType = searchParams.type;
   const providerId = searchParams.id;
   const formSchema = addCredentialsFormSchema(providerType);
 

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

@@ -21,7 +21,7 @@ export const AWScredentialsForm = ({
       <CustomInput
         control={control}
         name="aws_access_key_id"
-        type="text"
+        type="password"
         label="AWS Access Key ID"
         labelPlacement="inside"
         placeholder="Enter the AWS Access Key ID"
@@ -32,7 +32,7 @@ export const AWScredentialsForm = ({
       <CustomInput
         control={control}
         name="aws_secret_access_key"
-        type="text"
+        type="password"
         label="AWS Secret Access Key"
         labelPlacement="inside"
         placeholder="Enter the AWS Secret Access Key"
@@ -43,7 +43,7 @@ export const AWScredentialsForm = ({
       <CustomInput
         control={control}
         name="aws_session_token"
-        type="text"
+        type="password"
         label="AWS Session Token"
         labelPlacement="inside"
         placeholder="Enter the AWS Session Token"

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

@@ -32,7 +32,7 @@ export const AzureCredentialsForm = ({
       <CustomInput
         control={control}
         name="client_secret"
-        type="text"
+        type="password"
         label="Client Secret"
         labelPlacement="inside"
         placeholder="Enter the Client Secret"

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

@@ -32,7 +32,7 @@ export const GCPcredentialsForm = ({
       <CustomInput
         control={control}
         name="client_secret"
-        type="text"
+        type="password"
         label="Client Secret"
         labelPlacement="inside"
         placeholder="Enter the Client Secret"
@@ -43,7 +43,7 @@ export const GCPcredentialsForm = ({
       <CustomInput
         control={control}
         name="refresh_token"
-        type="text"
+        type="password"
         label="Refresh Token"
         labelPlacement="inside"
         placeholder="Enter the Refresh Token"