snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx

@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGiteaAuthenticationConfigurationKeys } from "@plane/types";
+// components
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
+import { ControllerSwitch } from "@/components/common/controller-switch";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GiteaConfigFormValues = Record<TInstanceGiteaAuthenticationConfigurationKeys, string>;
+
+const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
+  name: "ENABLE_GITEA_SYNC",
+  label: "Gitea",
+};
+
+export function InstanceGiteaConfigForm(props: 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<GiteaConfigFormValues>({
+    defaultValues: {
+      GITEA_HOST: config["GITEA_HOST"] || "https://gitea.com",
+      GITEA_CLIENT_ID: config["GITEA_CLIENT_ID"],
+      GITEA_CLIENT_SECRET: config["GITEA_CLIENT_SECRET"],
+      ENABLE_GITEA_SYNC: config["ENABLE_GITEA_SYNC"] || "0",
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITEA_FORM_FIELDS: TControllerInputFormField<GiteaConfigFormValues>[] = [
+    {
+      key: "GITEA_HOST",
+      type: "text",
+      label: "Gitea Host",
+      description: (
+        <>Use the URL of your Gitea instance. For the official Gitea instance, use &quot;https://gitea.com&quot;.</>
+      ),
+      placeholder: "https://gitea.com",
+      error: Boolean(errors.GITEA_HOST),
+      required: true,
+    },
+    {
+      key: "GITEA_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          You will get this from your{" "}
+          <a
+            href="https://gitea.com/user/settings/applications"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+          >
+            Gitea OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "70a44354520df8bd9bcd",
+      error: Boolean(errors.GITEA_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITEA_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret is also found in your{" "}
+          <a
+            href="https://gitea.com/user/settings/applications"
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+          >
+            Gitea OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
+      error: Boolean(errors.GITEA_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GITEA_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/gitea/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
+          <a
+            href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
+            target="_blank"
+            className="text-accent-primary hover:underline"
+            rel="noreferrer"
+            aria-label="Gitea OAuth application settings"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GiteaConfigFormValues) => {
+    const payload: Partial<GiteaConfigFormValues> = { ...formData };
+
+    try {
+      const response = await updateInstanceConfigurations(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Done!",
+        message: "Your Gitea authentication is configured. You should test it now.",
+      });
+      reset({
+        GITEA_HOST: response.find((item) => item.key === "GITEA_HOST")?.value,
+        GITEA_CLIENT_ID: response.find((item) => item.key === "GITEA_CLIENT_ID")?.value,
+        GITEA_CLIENT_SECRET: response.find((item) => item.key === "GITEA_CLIENT_SECRET")?.value,
+        ENABLE_GITEA_SYNC: response.find((item) => item.key === "ENABLE_GITEA_SYNC")?.value,
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
+          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
+            <div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
+            {GITEA_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <ControllerSwitch control={control} field={GITEA_FORM_SWITCH_FIELD} />
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="primary"
+                  size="md"
+                  stretch="auto"
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                  label={isSubmitting ? "Saving" : "Save changes"}
+                />
+                <Button
+                  variant="secondary"
+                  size="md"
+                  stretch="auto"
+                  nativeButton={false}
+                  render={<Link href="/authentication" onClick={handleGoBack} />}
+                  label="Go back"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 pt-1.5 pb-4">
+              <div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
+              {GITEA_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}