import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import type { SSOConnection } from "@calcom/ee/sso/lib/saml"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { trpc } from "@calcom/trpc/react"; import { Button, DialogFooter, Form, showToast, TextField, Dialog, DialogContent } from "@calcom/ui"; type FormValues = { clientId: string; clientSecret: string; wellKnownUrl: string; }; export default function OIDCConnection({ teamId, connection, }: { teamId: number | null; connection: SSOConnection | null; }) { const { t } = useLocale(); const [openModal, setOpenModal] = useState(false); return (

{t("sso_oidc_heading")}

{t("sso_oidc_description")}

{!connection && (
)}
); } const CreateConnectionDialog = ({ teamId, openModal, setOpenModal, }: { teamId: number | null; openModal: boolean; setOpenModal: (open: boolean) => void; }) => { const { t } = useLocale(); const utils = trpc.useContext(); const telemetry = useTelemetry(); const form = useForm(); const mutation = trpc.viewer.saml.updateOIDC.useMutation({ async onSuccess() { telemetry.event(telemetryEventTypes.samlConfig, collectPageParameters()); showToast( t("sso_connection_created_successfully", { connectionType: "OIDC", }), "success" ); setOpenModal(false); await utils.viewer.saml.get.invalidate(); }, onError: (err) => { showToast(err.message, "error"); }, }); return (
{ const { clientId, clientSecret, wellKnownUrl } = values; mutation.mutate({ teamId, clientId, clientSecret, wellKnownUrl, }); }}>

{t("sso_oidc_configuration_title")}

{t("sso_oidc_configuration_description")}

( { form.setValue("clientId", e?.target.value); }} type="text" required /> )} /> ( { form.setValue("clientSecret", e?.target.value); }} type="text" required /> )} /> ( { form.setValue("wellKnownUrl", e?.target.value); }} type="text" required /> )} />
); };