diff --git a/frontend/src/pages/integrations/hasura-cloud/authorize.tsx b/frontend/src/pages/integrations/hasura-cloud/authorize.tsx index 0ea31f56f4..de18b7fd62 100644 --- a/frontend/src/pages/integrations/hasura-cloud/authorize.tsx +++ b/frontend/src/pages/integrations/hasura-cloud/authorize.tsx @@ -1,5 +1,117 @@ +import { useState } from "react"; +import { Controller, useForm } from "react-hook-form"; +import Head from "next/head"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { yupResolver } from "@hookform/resolvers/yup"; +import * as yup from "yup"; + +import { Button, Card, CardTitle, FormControl, Input } from "@app/components/v2"; +import { useSaveIntegrationAccessToken } from "@app/hooks/api"; + +const schema = yup.object({ + accessToken: yup.string().trim().required("Hasura Cloud Access Token is required") +}); + +type FormData = yup.InferType; + +const APP_NAME = "Hasura Cloud"; export default function HasuraCloudAuthorizeIntegrationPage() { - return null; + const router = useRouter(); + const [isLoading, setIsLoading] = useState(false); + const { mutateAsync } = useSaveIntegrationAccessToken(); + + const { control, handleSubmit } = useForm({ + resolver: yupResolver(schema), + defaultValues: { + accessToken: "" + } + }); + + const onFormSubmit = async ({ accessToken }: FormData) => { + console.log("onFormSubmit accessToken: ", accessToken); + try { + setIsLoading(true); + + const integrationAuth = await mutateAsync({ + workspaceId: localStorage.getItem("projectData.id"), + integration: "hasura-cloud", + accessToken + }); + + setIsLoading(false); + router.push(`/integrations/hasura-cloud/create?integrationAuthId=${integrationAuth._id}`); + } catch (err) { + setIsLoading(false); + console.error(err); + } + }; + return ( +
+ + Authorize {APP_NAME} Integration + + + + +
+
+ {`${APP_NAME} +
+ {APP_NAME} Integration + + +
+ + Docs + +
+ + +
+ +
+ ( + + + + )} + /> + + +
+
+ ); } HasuraCloudAuthorizeIntegrationPage.requireAuth = true;