import { GetServerSidePropsContext } from "next"; import { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Badge, getSettingsLayout as getLayout, Meta, Switch, SkeletonButton, SkeletonContainer, SkeletonText, } from "@calcom/ui"; import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal"; import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal"; import { ssrInit } from "@server/lib/ssr"; const SkeletonLoader = ({ title, description }: { title: string; description: string }) => { 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 ; return ( <>
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; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const ssr = await ssrInit(context); return { props: { trpcState: ssr.dehydrate(), }, }; }; export default TwoFactorAuthView;