From 5a8d6087f913c5b7aea2fcdcd1044425ad7f4e8c Mon Sep 17 00:00:00 2001 From: Pablo Lara Date: Tue, 29 Oct 2024 16:00:09 +0100 Subject: [PATCH] wIP --- .../add-credentials/page.tsx | 15 ++ .../connect-account/page.tsx | 19 +++ .../providers/(set-up-provider)/layout.tsx | 22 +++ .../test-connection/page.tsx | 5 + app/(prowler)/providers/page.tsx | 3 +- .../workflow/forms/connect-account-form.tsx | 136 ++++++++++++++++++ components/providers/workflow/forms/index.ts | 1 + 7 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx create mode 100644 app/(prowler)/providers/(set-up-provider)/connect-account/page.tsx create mode 100644 app/(prowler)/providers/(set-up-provider)/layout.tsx create mode 100644 app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx create mode 100644 components/providers/workflow/forms/connect-account-form.tsx create mode 100644 components/providers/workflow/forms/index.ts diff --git a/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx b/app/(prowler)/providers/(set-up-provider)/add-credentials/page.tsx new file mode 100644 index 0000000000..1b9724578b --- /dev/null +++ b/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 ( + <> + + + ); +} diff --git a/app/(prowler)/providers/(set-up-provider)/connect-account/page.tsx b/app/(prowler)/providers/(set-up-provider)/connect-account/page.tsx new file mode 100644 index 0000000000..4c90992e4b --- /dev/null +++ b/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 ( + <> + + + + ); +} diff --git a/app/(prowler)/providers/(set-up-provider)/layout.tsx b/app/(prowler)/providers/(set-up-provider)/layout.tsx new file mode 100644 index 0000000000..ffdc28d67d --- /dev/null +++ b/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 ( + <> +
+
+ +
+
{children}
+
+ + ); +} diff --git a/app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx b/app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx new file mode 100644 index 0000000000..8138766f63 --- /dev/null +++ b/app/(prowler)/providers/(set-up-provider)/test-connection/page.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function TestConnectionPage() { + return
TestConnectionPage
; +} diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx index 02860e2a0b..f80b59241e 100644 --- a/app/(prowler)/providers/page.tsx +++ b/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({ - + add provider diff --git a/components/providers/workflow/forms/connect-account-form.tsx b/components/providers/workflow/forms/connect-account-form.tsx new file mode 100644 index 0000000000..9de6342c1b --- /dev/null +++ b/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>({ + resolver: zodResolver(formSchema), + defaultValues: { + providerType: "", + providerId: "", + providerAlias: "", + }, + }); + + const { toast } = useToast(); + + const isLoading = form.formState.isSubmitting; + + const onSubmitClient = async (values: z.infer) => { + 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 ( +
+ + + + + +
+ + Cancel + + + } + > + {isLoading ? <>Loading : Next} + +
+ + + ); +}; diff --git a/components/providers/workflow/forms/index.ts b/components/providers/workflow/forms/index.ts new file mode 100644 index 0000000000..0bfa7550e7 --- /dev/null +++ b/components/providers/workflow/forms/index.ts @@ -0,0 +1 @@ +export * from "./connect-account-form";