import { SyntheticEvent, useState } from "react"; import Button from "@calcom/ui/Button"; import { Dialog, DialogContent } from "@calcom/ui/Dialog"; import { ErrorCode } from "@lib/auth"; import { useLocale } from "@lib/hooks/useLocale"; import TwoFactorAuthAPI from "./TwoFactorAuthAPI"; import TwoFactorModalHeader from "./TwoFactorModalHeader"; interface DisableTwoFactorAuthModalProps { /** Called when the user closes the modal without disabling two-factor auth */ onCancel: () => void; /** Called when the user disables two-factor auth */ onDisable: () => void; } const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuthModalProps) => { const [password, setPassword] = useState(""); const [isDisabling, setIsDisabling] = useState(false); const [errorMessage, setErrorMessage] = useState(null); const { t } = useLocale(); async function handleDisable(e: SyntheticEvent) { e.preventDefault(); if (isDisabling) { return; } setIsDisabling(true); setErrorMessage(null); try { const response = await TwoFactorAuthAPI.disable(password); if (response.status === 200) { onDisable(); return; } const body = await response.json(); if (body.error === ErrorCode.IncorrectPassword) { setErrorMessage(t("incorrect_password")); } else { setErrorMessage(t("something_went_wrong")); } } catch (e) { setErrorMessage(t("something_went_wrong")); console.error(t("error_disabling_2fa"), e); } finally { setIsDisabling(false); } } return (
setPassword(e.currentTarget.value)} className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm" />
{errorMessage &&

{errorMessage}

}
); }; export default DisableTwoFactorAuthModal;