import { useState } from "react"; import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Badge, Meta, Switch, SkeletonButton, SkeletonContainer, SkeletonText, Alert } from "@calcom/ui"; import PageWrapper from "@components/PageWrapper"; import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal"; import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal"; const SkeletonLoader = () => { return (
); }; const TwoFactorAuthView = () => { const utils = trpc.useContext(); const { t } = useLocale(); const { data: user, isLoading } = trpc.viewer.me.useQuery(); const [enableModalOpen, setEnableModalOpen] = useState(false); const [disableModalOpen, setDisableModalOpen] = useState(false); if (isLoading) return ; const isCalProvider = user?.identityProvider === "CAL"; const canSetupTwoFactor = !isCalProvider && !user?.twoFactorEnabled; return ( <> {canSetupTwoFactor && }
user?.twoFactorEnabled ? setDisableModalOpen(true) : setEnableModalOpen(true) } />

{t("two_factor_auth")}

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

{t("add_an_extra_layer_of_security")}

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