wIP

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

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

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

@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+
+import { ConnectAccountForm } from "@/components/providers/workflow/forms";
+import { NavigationHeader } from "@/components/ui";
+
+export default function ConnectAccountPage() {
+  return (
+    <>
+      <NavigationHeader
+        title="Connect your cloud account"
+        icon="icon-park-outline:close-small"
+        href="/providers"
+      />
+      <ConnectAccountForm />
+    </>
+  );
+}

app/(prowler)/providers/(set-up-provider)/layout.tsx

@@ -0,0 +1,22 @@
+import "@/styles/globals.css";
+
+import React from "react";
+
+import { Workflow } from "@/components/providers/workflow";
+
+interface ProviderLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function ProviderLayout({ children }: ProviderLayoutProps) {
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
+        <div className="order-1 my-auto hidden h-full lg:col-span-4 lg:block">
+          <Workflow />
+        </div>
+        <div className="order-2 lg:col-span-8">{children}</div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function TestConnectionPage() {
+  return <div>TestConnectionPage</div>;
+}

app/(prowler)/providers/page.tsx

@@ -1,4 +1,5 @@
 import { Spacer } from "@nextui-org/react";
+import Link from "next/link";
 import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
@@ -26,7 +27,7 @@ export default async function Providers({
       <Spacer y={4} />
       <FilterControls search providers />
       <Spacer y={4} />
-
+      <Link href="/providers/connect-account">add provider</Link>
       <AddProvider />
       <Spacer y={4} />
 

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

@@ -0,0 +1,136 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SaveIcon } from "lucide-react";
+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 { addProviderFormSchema, ApiError } from "../../../../types";
+import { RadioGroupProvider } from "../../radio-group-provider";
+
+export const ConnectAccountForm = () => {
+  const formSchema = addProviderFormSchema;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      providerType: "",
+      providerId: "",
+      providerAlias: "",
+    },
+  });
+
+  const { toast } = useToast();
+
+  const isLoading = form.formState.isSubmitting;
+
+  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);
+
+    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":
+            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,
+            });
+        }
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmitClient)}
+        className="flex flex-col space-y-4"
+      >
+        <RadioGroupProvider
+          control={form.control}
+          isInvalid={!!form.formState.errors.providerType}
+        />
+        <CustomInput
+          control={form.control}
+          name="providerId"
+          type="text"
+          label="Provider ID"
+          labelPlacement="inside"
+          placeholder={"Enter the provider ID"}
+          variant="bordered"
+          isRequired
+          isInvalid={!!form.formState.errors.providerId}
+        />
+        <CustomInput
+          control={form.control}
+          name="providerAlias"
+          type="text"
+          label="Alias"
+          labelPlacement="inside"
+          placeholder={"Enter the provider alias"}
+          variant="bordered"
+          isRequired={false}
+          isInvalid={!!form.formState.errors.providerAlias}
+        />
+
+        <div className="flex w-full justify-center sm:space-x-6">
+          <CustomButton
+            type="button"
+            ariaLabel="Cancel"
+            className="w-full bg-transparent"
+            variant="faded"
+            size="lg"
+            radius="lg"
+            isDisabled={isLoading}
+          >
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            ariaLabel="Next"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
+          >
+            {isLoading ? <>Loading</> : <span>Next</span>}
+          </CustomButton>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/providers/workflow/forms/index.ts

@@ -0,0 +1 @@
+export * from "./connect-account-form";