import { FC, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { Copy, Eye, EyeOff } from "lucide-react"; import { IFormattedInstanceConfiguration } from "@plane/types"; // ui import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui"; // types import { useApplication } from "@/hooks/store"; // hooks export interface IInstanceGithubConfigForm { config: IFormattedInstanceConfiguration; } export interface GithubConfigFormValues { GITHUB_CLIENT_ID: string; GITHUB_CLIENT_SECRET: string; } export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) => { const { config } = props; // states const [showPassword, setShowPassword] = useState(false); // store hooks const { instance: instanceStore } = useApplication(); // form data const { handleSubmit, control, formState: { errors, isSubmitting }, } = useForm<GithubConfigFormValues>({ defaultValues: { GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"], GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"], }, }); const onSubmit = async (formData: GithubConfigFormValues) => { const payload: Partial<GithubConfigFormValues> = { ...formData }; await instanceStore .updateInstanceConfigurations(payload) .then(() => setToast({ title: "Success", type: TOAST_TYPE.SUCCESS, message: "Github Configuration Settings updated successfully", }) ) .catch((err) => console.error(err)); }; const originURL = typeof window !== "undefined" ? window.location.origin : ""; return ( <div className="flex flex-col gap-8"> <div className="grid-col grid w-full grid-cols-1 justify-between gap-x-12 gap-y-8 lg:grid-cols-3"> <div className="flex flex-col gap-1"> <h4 className="text-sm">Client ID</h4> <Controller control={control} name="GITHUB_CLIENT_ID" render={({ field: { value, onChange, ref } }) => ( <Input id="GITHUB_CLIENT_ID" name="GITHUB_CLIENT_ID" type="text" value={value} onChange={onChange} ref={ref} hasError={Boolean(errors.GITHUB_CLIENT_ID)} placeholder="70a44354520df8bd9bcd" className="w-full rounded-md font-medium" /> )} /> <p className="text-xs text-custom-text-400"> You will get this from your{" "} <a href="https://github.com/settings/applications/new" target="_blank" className="text-custom-primary-100 hover:underline" rel="noreferrer" > GitHub OAuth application settings. </a> </p> </div> <div className="flex flex-col gap-1"> <h4 className="text-sm">Client secret</h4> <div className="relative"> <Controller control={control} name="GITHUB_CLIENT_SECRET" render={({ field: { value, onChange, ref } }) => ( <Input id="GITHUB_CLIENT_SECRET" name="GITHUB_CLIENT_SECRET" type={showPassword ? "text" : "password"} value={value} onChange={onChange} ref={ref} hasError={Boolean(errors.GITHUB_CLIENT_SECRET)} placeholder="9b0050f94ec1b744e32ce79ea4ffacd40d4119cb" className="w-full rounded-md !pr-10 font-medium" /> )} /> {showPassword ? ( <button className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400" onClick={() => setShowPassword(false)} > <EyeOff className="h-4 w-4" /> </button> ) : ( <button className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400" onClick={() => setShowPassword(true)} > <Eye className="h-4 w-4" /> </button> )} </div> <p className="text-xs text-custom-text-400"> Your client secret is also found in your{" "} <a href="https://github.com/settings/applications/new" target="_blank" className="text-custom-primary-100 hover:underline" rel="noreferrer" > GitHub OAuth application settings. </a> </p> </div> <div className="flex flex-col gap-1"> <h4 className="text-sm">Origin URL</h4> <Button variant="neutral-primary" className="flex items-center justify-between py-2" onClick={() => { navigator.clipboard.writeText(originURL); setToast({ message: "The Origin URL has been successfully copied to your clipboard", type: TOAST_TYPE.SUCCESS, title: "Copied to clipboard", }); }} > <p className="text-sm font-medium">{originURL}</p> <Copy size={18} color="#B9B9B9" /> </Button> <p className="text-xs text-custom-text-400"> We will auto-generate this. Paste this into the Authorization callback URL field{" "} <a href="https://github.com/settings/applications/new" target="_blank" className="text-custom-primary-100 hover:underline" rel="noreferrer" > here. </a> </p> </div> </div> <div className="flex flex-col gap-1"> <div className="flex items-center"> <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}> {isSubmitting ? "Saving..." : "Save changes"} </Button> </div> </div> </div> ); };