import { FC, useState } from "react"; import { useForm } from "react-hook-form"; import Link from "next/link"; // hooks import { useInstance } from "@/hooks"; // ui import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui"; // components import { ConfirmDiscardModal, ControllerInput, CopyField, TControllerInputFormField, TCopyField, } from "components/common"; // types import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types"; // helpers import { API_BASE_URL, cn } from "helpers/common.helper"; import isEmpty from "lodash/isEmpty"; type Props = { config: IFormattedInstanceConfiguration; }; type GoogleConfigFormValues = Record; export const InstanceGoogleConfigForm: FC = (props) => { const { config } = props; // states const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false); // store hooks const { updateInstanceConfigurations } = useInstance(); // form data const { handleSubmit, control, reset, formState: { errors, isDirty, isSubmitting }, } = useForm({ defaultValues: { GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"], GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"], }, }); const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : ""; const googleFormFields: TControllerInputFormField[] = [ { key: "GOOGLE_CLIENT_ID", type: "text", label: "Client ID", description: ( <> Your client ID lives in your Google API Console.{" "} Learn more ), placeholder: "840195096245-0p2tstej9j5nc4l8o1ah2dqondscqc1g.apps.googleusercontent.com", error: Boolean(errors.GOOGLE_CLIENT_ID), required: true, }, { key: "GOOGLE_CLIENT_SECRET", type: "password", label: "Client secret", description: ( <> Your client secret should also be in your Google API Console.{" "} Learn more ), placeholder: "GOCShX-ADp4cI0kPqav1gGCBg5bE02E", error: Boolean(errors.GOOGLE_CLIENT_SECRET), required: true, }, ]; const googleCopyFeilds: TCopyField[] = [ { key: "Origin_URL", label: "Origin URL", url: originURL, description: (

We will auto-generate this. Paste this into your Authorized JavaScript origins field. For this OAuth client{" "} here.

), }, { key: "Callback_URI", label: "Callback URI", url: `${originURL}/auth/google/callback/`, description: (

We will auto-generate this. Paste this into your Authorized Redirect URI field. For this OAuth client{" "} here.

), }, ]; const onSubmit = async (formData: GoogleConfigFormValues) => { const payload: Partial = { ...formData }; await updateInstanceConfigurations(payload) .then(() => { setToast({ type: TOAST_TYPE.SUCCESS, title: "Success", message: "Google Configuration Settings updated successfully", }); reset(); }) .catch((err) => console.error(err)); }; const handleGoBack = (e: React.MouseEvent) => { if (isDirty) { e.preventDefault(); setIsDiscardChangesModalOpen(true); } }; return ( <> setIsDiscardChangesModalOpen(false)} />
Configuration
{googleFormFields.map((field) => ( ))}
Go back
Service provider details
{googleCopyFeilds.map((field) => ( ))}
); };