import { useState } from "react"; import { useForm } from "react-hook-form"; import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button, Dialog, DialogContent, Form, PasswordField } from "@calcom/ui"; import TwoFactor from "@components/auth/TwoFactor"; 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; } interface DisableTwoFactorValues { totpCode: string; password: string; } const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuthModalProps) => { const [isDisabling, setIsDisabling] = useState(false); const [errorMessage, setErrorMessage] = useState(null); const { t } = useLocale(); const form = useForm(); async function handleDisable({ totpCode, password }: DisableTwoFactorValues) { if (isDisabling) { return; } setIsDisabling(true); setErrorMessage(null); try { const response = await TwoFactorAuthAPI.disable(password, totpCode); if (response.status === 200) { onDisable(); return; } const body = await response.json(); if (body.error === ErrorCode.IncorrectPassword) { setErrorMessage(t("incorrect_password")); } if (body.error === ErrorCode.SecondFactorRequired) { setErrorMessage(t("2fa_required")); } if (body.error === ErrorCode.IncorrectTwoFactorCode) { setErrorMessage(t("incorrect_2fa")); } else { setErrorMessage(t("something_went_wrong")); } } catch (e) { setErrorMessage(t("something_went_wrong")); console.error(t("error_disabling_2fa"), e); } finally { setIsDisabling(false); } } return (
{errorMessage &&

{errorMessage}

}
); }; export default DisableTwoFactorAuthModal;