Correct Cloudflare Pages authorization page

frontend/src/pages/integrations/cloudflare-pages/authorize.tsx

@@ -1,28 +1,29 @@
 import { useState } from "react";
-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 { useSaveIntegrationAccessToken } from "@app/hooks/api";
+import {
+    useSaveIntegrationAccessToken
+} from "@app/hooks/api";
 
-import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import { Button,Card, CardTitle, FormControl, Input } from "../../../components/v2";
 
-export default function RenderCreateIntegrationPage() {
+export default function CloudflarePagesIntegrationPage() {
     const router = useRouter();
     const { mutateAsync } = useSaveIntegrationAccessToken();
 
-  const [apiKey, setApiKey] = useState("");
+    const [accessKey, setAccessKey] = useState("");
-  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+    const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
+    const [accountId, setAccountId] = useState("");
+    const [accountIdErrorText, setAccountIdErrorText] = useState("");
     const [isLoading, setIsLoading] = useState(false);
 
     const handleButtonClick = async () => {
         try {
-      setApiKeyErrorText("");
+            setAccessKeyErrorText("");
-      if (apiKey.length === 0) {
+            setAccountIdErrorText("");
-        setApiKeyErrorText("API Key cannot be blank");
+            if (accessKey.length === 0 || accountId.length === 0) {
+                if (accessKey.length === 0) setAccessKeyErrorText("API token cannot be blank!");
+                if (accountId.length === 0) setAccountIdErrorText("Account ID cannot be blank!");
                 return;
             }
 
@@ -30,73 +31,62 @@ export default function RenderCreateIntegrationPage() {
 
             const integrationAuth = await mutateAsync({
                 workspaceId: localStorage.getItem("projectData.id"),
-        integration: "render",
+                integration: "cloudflare-pages",
-        accessToken: apiKey
+                accessId: accountId,
+                accessToken: accessKey
             });
 
+            setAccessKey("");
+            setAccountId("");
             setIsLoading(false);
 
-      router.push(`/integrations/render/create?integrationAuthId=${integrationAuth.id}`);
+            router.push(`/integrations/cloudflare-pages/create?integrationAuthId=${integrationAuth.id}`);
         } catch (err) {
             console.error(err);
         }
-  };
+    }
 
     return (
         <div className="flex h-full w-full items-center justify-center">
-      <Head>
+            <Card className="max-w-lg rounded-md border border-mineshaft-600 mb-12">
-        <title>Authorize Render Integration</title>
+                <CardTitle className="text-left px-6" subTitle="After adding your API-key, you will be prompted to set up an integration for a particular Infisical project and environment.">Cloudflare Pages Integration</CardTitle>
-        <link rel="icon" href="/infisical.ico" />
-      </Head>
-      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
-        <CardTitle
-          className="px-6 text-left text-xl"
-          subTitle="After adding your API key, you will be prompted to set up an integration for a particular Infisical project and environment."
-        >
-          <div className="flex flex-row items-center">
-            <div className="inline flex items-center pb-0.5">
-              <Image
-                src="/images/integrations/Render.png"
-                height={30}
-                width={30}
-                alt="Render logo"
-              />
-            </div>
-            <span className="ml-2.5">Render Integration </span>
-            <Link href="https://infisical.com/docs/integrations/cloud/render" passHref>
-              <a target="_blank" rel="noopener noreferrer">
-                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  Docs
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="ml-1.5 mb-[0.07rem] text-xxs"
-                  />
-                </div>
-              </a>
-            </Link>
-          </div>
-        </CardTitle>
                 <FormControl
-          label="Render API Key"
+                    label="Cloudflare Pages API token"
-          errorText={apiKeyErrorText}
+                    errorText={accessKeyErrorText}
-          isError={apiKeyErrorText !== "" ?? false}
+                    isError={accessKeyErrorText !== "" ?? false}
-          className="px-6"
+                    className="mx-6"
                 >
-          <Input placeholder="rnd_xxx" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+                    <Input
+                        placeholder=""
+                        value={accessKey}
+                        onChange={(e) => setAccessKey(e.target.value)}
+                    />
+                </FormControl>
+                <FormControl
+                    label="Cloudflare Pages Account ID"
+                    errorText={accountIdErrorText}
+                    isError={accountIdErrorText !== "" ?? false}
+                    className="mx-6"
+                >
+                    <Input
+                        placeholder=""
+                        value={accountId}
+                        onChange={(e) => setAccountId(e.target.value)}
+                    />
                 </FormControl>
                 <Button
                     onClick={handleButtonClick}
-          colorSchema="primary"
+                    color="mineshaft"
                     variant="outline_bg"
                     className="mb-6 mt-2 ml-auto mr-6 w-min"
+                    isFullWidth={false}
                     isLoading={isLoading}
                 >
-          Connect to Render
+                    Connect to Cloudflare Pages
                 </Button>
             </Card>
         </div>
     );
 }
 
-RenderCreateIntegrationPage.requireAuth = true;
+CloudflarePagesIntegrationPage.requireAuth = true;