cal.pub0.org/apps/web/pages/settings/security/two-factor-auth.tsx

94 lines
3.1 KiB
TypeScript
Raw Normal View History

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 = () => {
Improve multilingualism and fix search routes (#5334) * fixed search routes * made static text multilingual and fixed german translations # Conflicts: # apps/web/components/availability/Schedule.tsx * delete empty file created by fixing merge conflicts * fixing TextField placeholder by passing attendeeName and fixed json variable * Using useLocal to modify static text to make it multilingual, and passing the correct variables for brand and mail * seperated whitelabel and improved translations * added missing translation * added missing translation for webhooks * Updated AdminAppsView with dynamic translations. Added translations for german and english files only. * changed back to one liner * updated german and english translations for impersonation.tsx * updated german and english translations for impersonation.tsx and users.tsx. added missing german translation for timeformat_profile_hint * updated german and english translations for team-billing-view.tsx * updated german and english translations for LicenseRequired.tsx * updated routes for profile and avatar * yarn.lock updated from newer changes * Revert " yarn.lock updated from newer changes" This reverts commit efd9a90bf774371a331861e4fb441ab4f4d0b7fd. * sanitize dangerouslySetInnerHTML to prevent xss attacks * tried to fix window title flicker * changed ssdInit to ssrInit for getServerSideProps. Serverside translation works but current route still set as a window title * flicker with route in window title is caused here. It is not necessary to check if isPublic and session is false because it already gets checked in useRedirectToLoginIfUnauthenticated hook. * fixed window title translation flicker for availability page * fixed window title translation flicker for teams page * fixed window title translation flicker for workflow page * fixed error that div may not be rendered within p element * fixed window title translation flicker for booking page * fixed window title translation flicker by adding getServerSideProps * Only set HeadSeo if an page title exists. If window title is set by the Meta component, shell is causing a flicker because it overwrites the title which is set by Meta. It is a problem especially for settings pages. * fixed window title translation flicker by adding the Meta component to the skeleton * fixed condition * removed condition and added withoutSeo for settings pages * using translations for create team page further fixed flicker for window title * fixed flicker for window title for event-type creation page * fixed flicker for window title for availability creation page * fixed flicker for window title for sso page * updated conferencing en translation * added meta.CTA back it was mistakenly removed * fixed flicker for workflows page * fixed missing variable * Update packages/ui/v2/core/Shell.tsx * Delete index.tsx * Update sso.tsx * Updates subdmoules Co-authored-by: maxi <maximilian.oehrlein@clicksports.de> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com>
2022-12-07 20:53:44 +00:00
return (
<SkeletonContainer>
<div className="mb-8 mt-6 space-y-6">
Improve multilingualism and fix search routes (#5334) * fixed search routes * made static text multilingual and fixed german translations # Conflicts: # apps/web/components/availability/Schedule.tsx * delete empty file created by fixing merge conflicts * fixing TextField placeholder by passing attendeeName and fixed json variable * Using useLocal to modify static text to make it multilingual, and passing the correct variables for brand and mail * seperated whitelabel and improved translations * added missing translation * added missing translation for webhooks * Updated AdminAppsView with dynamic translations. Added translations for german and english files only. * changed back to one liner * updated german and english translations for impersonation.tsx * updated german and english translations for impersonation.tsx and users.tsx. added missing german translation for timeformat_profile_hint * updated german and english translations for team-billing-view.tsx * updated german and english translations for LicenseRequired.tsx * updated routes for profile and avatar * yarn.lock updated from newer changes * Revert " yarn.lock updated from newer changes" This reverts commit efd9a90bf774371a331861e4fb441ab4f4d0b7fd. * sanitize dangerouslySetInnerHTML to prevent xss attacks * tried to fix window title flicker * changed ssdInit to ssrInit for getServerSideProps. Serverside translation works but current route still set as a window title * flicker with route in window title is caused here. It is not necessary to check if isPublic and session is false because it already gets checked in useRedirectToLoginIfUnauthenticated hook. * fixed window title translation flicker for availability page * fixed window title translation flicker for teams page * fixed window title translation flicker for workflow page * fixed error that div may not be rendered within p element * fixed window title translation flicker for booking page * fixed window title translation flicker by adding getServerSideProps * Only set HeadSeo if an page title exists. If window title is set by the Meta component, shell is causing a flicker because it overwrites the title which is set by Meta. It is a problem especially for settings pages. * fixed window title translation flicker by adding the Meta component to the skeleton * fixed condition * removed condition and added withoutSeo for settings pages * using translations for create team page further fixed flicker for window title * fixed flicker for window title for event-type creation page * fixed flicker for window title for availability creation page * fixed flicker for window title for sso page * updated conferencing en translation * added meta.CTA back it was mistakenly removed * fixed flicker for workflows page * fixed missing variable * Update packages/ui/v2/core/Shell.tsx * Delete index.tsx * Update sso.tsx * Updates subdmoules Co-authored-by: maxi <maximilian.oehrlein@clicksports.de> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com>
2022-12-07 20:53:44 +00:00
<div className="flex items-center">
<SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
<SkeletonText className="h-8 w-full" />
</div>
</div>
</SkeletonContainer>
);
};
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 <SkeletonLoader />;
const isCalProvider = user?.identityProvider === "CAL";
const canSetupTwoFactor = !isCalProvider && !user?.twoFactorEnabled;
return (
<>
<Meta title={t("2fa")} description={t("set_up_two_factor_authentication")} />
{canSetupTwoFactor && <Alert severity="neutral" message={t("2fa_disabled")} />}
<div className="mt-6 flex items-start space-x-4">
<Switch
data-testid="two-factor-switch"
disabled={canSetupTwoFactor}
checked={user?.twoFactorEnabled}
onCheckedChange={() =>
user?.twoFactorEnabled ? setDisableModalOpen(true) : setEnableModalOpen(true)
}
/>
<div className="!mx-4">
<div className="flex">
<p className="text-default font-semibold">{t("two_factor_auth")}</p>
<Badge className="mx-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
{user?.twoFactorEnabled ? t("enabled") : t("disabled")}
</Badge>
</div>
<p className="text-default text-sm">{t("add_an_extra_layer_of_security")}</p>
</div>
</div>
<EnableTwoFactorModal
open={enableModalOpen}
onOpenChange={() => setEnableModalOpen(!enableModalOpen)}
onEnable={() => {
setEnableModalOpen(false);
utils.viewer.me.invalidate();
}}
onCancel={() => {
setEnableModalOpen(false);
}}
/>
<DisableTwoFactorModal
open={disableModalOpen}
disablePassword={!isCalProvider}
onOpenChange={() => setDisableModalOpen(!disableModalOpen)}
onDisable={() => {
setDisableModalOpen(false);
utils.viewer.me.invalidate();
}}
onCancel={() => {
setDisableModalOpen(false);
}}
/>
</>
);
};
TwoFactorAuthView.getLayout = getLayout;
TwoFactorAuthView.PageWrapper = PageWrapper;
export default TwoFactorAuthView;