import React, { useEffect, useState, useRef } from "react"; import showToast from "@calcom/lib/notification"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; import { Dialog, DialogTrigger } from "@calcom/ui/Dialog"; import { TextArea } from "@calcom/ui/form/fields"; import { useLocale } from "@lib/hooks/useLocale"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry"; import { trpc } from "@lib/trpc"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; import Badge from "@components/ui/Badge"; export default function SAMLConfiguration({ teamsView, teamId, }: { teamsView: boolean; teamId: null | undefined | number; }) { const [isSAMLLoginEnabled, setIsSAMLLoginEnabled] = useState(false); const [samlConfig, setSAMLConfig] = useState(null); const query = trpc.useQuery(["viewer.showSAMLView", { teamsView, teamId }]); const telemetry = useTelemetry(); useEffect(() => { const data = query.data; setIsSAMLLoginEnabled(data?.isSAMLLoginEnabled ?? false); setSAMLConfig(data?.provider ?? null); }, [query.data]); const mutation = trpc.useMutation("viewer.updateSAMLConfig", { onSuccess: (data: { provider: string | undefined }) => { showToast(t("saml_config_updated_successfully"), "success"); setHasErrors(false); // dismiss any open errors setSAMLConfig(data?.provider ?? null); samlConfigRef.current.value = ""; }, onError: () => { setHasErrors(true); setErrorMessage(t("saml_configuration_update_failed")); document?.getElementsByTagName("main")[0]?.scrollTo({ top: 0, behavior: "smooth" }); }, }); const deleteMutation = trpc.useMutation("viewer.deleteSAMLConfig", { onSuccess: () => { showToast(t("saml_config_deleted_successfully"), "success"); setHasErrors(false); // dismiss any open errors setSAMLConfig(null); samlConfigRef.current.value = ""; }, onError: () => { setHasErrors(true); setErrorMessage(t("saml_configuration_delete_failed")); document?.getElementsByTagName("main")[0]?.scrollTo({ top: 0, behavior: "smooth" }); }, }); const samlConfigRef = useRef() as React.MutableRefObject; const [hasErrors, setHasErrors] = useState(false); const [errorMessage, setErrorMessage] = useState(""); async function updateSAMLConfigHandler(event: React.FormEvent) { event.preventDefault(); const rawMetadata = samlConfigRef.current.value; // track Google logins. Without personal data/payload telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.samlConfig, collectPageParameters())); mutation.mutate({ encodedRawMetadata: Buffer.from(rawMetadata).toString("base64"), teamId, }); } async function deleteSAMLConfigHandler(event: React.MouseEvent) { event.preventDefault(); deleteMutation.mutate({ teamId, }); } const { t } = useLocale(); return ( <> {isSAMLLoginEnabled ? ( <>

{t("saml_configuration")} {samlConfig ? t("enabled") : t("disabled")} {samlConfig ? ( <> {samlConfig ? samlConfig : ""} ) : null}

{samlConfig ? (
{t("delete_saml_configuration_confirmation_message")}
) : (

{!samlConfig ? t("saml_not_configured_yet") : ""}

)}

{t("saml_configuration_description")}

{hasErrors && }