import { useState, useContext } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import Badge from "@calcom/ui/v2/core/Badge"; import Loader from "@calcom/ui/v2/core/Loader"; import Meta from "@calcom/ui/v2/core/Meta"; import Switch from "@calcom/ui/v2/core/Switch"; import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout"; import DisableTwoFactorModal from "@components/v2/settings/DisableTwoFactorModal"; import EnableTwoFactorModal from "@components/v2/settings/EnableTwoFactorModal"; const TwoFactorAuthView = () => { const utils = trpc.useContext(); const { t } = useLocale(); const { data: user, isLoading } = trpc.useQuery(["viewer.me"]); const [enableModalOpen, setEnableModalOpen] = useState(false); const [disableModalOpen, setDisableModalOpen] = useState(false); if (isLoading) return ; return ( <>
user?.twoFactorEnabled ? setDisableModalOpen(true) : setEnableModalOpen(true) } />

{t("two_factor_auth")}

{user?.twoFactorEnabled ? t("enabled") : t("disabled")}

Add an extra layer of security to your account.

setEnableModalOpen(!enableModalOpen)} onEnable={() => { setEnableModalOpen(false); utils.invalidateQueries("viewer.me"); }} onCancel={() => { setEnableModalOpen(false); }} /> setDisableModalOpen(!disableModalOpen)} onDisable={() => { setDisableModalOpen(false); utils.invalidateQueries("viewer.me"); }} onCancel={() => { setDisableModalOpen(false); }} /> ); }; TwoFactorAuthView.getLayout = getLayout; export default TwoFactorAuthView;