diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx new file mode 100644 index 0000000000..bfd27553f7 --- /dev/null +++ b/apps/web/pages/settings/security/impersonation.tsx @@ -0,0 +1,71 @@ +import { useForm } from "react-hook-form"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { trpc } from "@calcom/trpc/react"; +import { Label, showToast } from "@calcom/ui/v2"; +import { Switch, Skeleton, Form, Button } from "@calcom/ui/v2/core"; +import Meta from "@calcom/ui/v2/core/Meta"; +import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout"; + +const ProfileImpersonationView = () => { + const { t } = useLocale(); + const utils = trpc.useContext(); + const { data: user } = trpc.useQuery(["viewer.me"]); + const mutation = trpc.useMutation("viewer.updateProfile", { + onSuccess: () => { + showToast(t("profile_updated_successfully"), "success"); + }, + onError: (error) => { + showToast(`${t("error")}, ${error.message}`, "error"); + }, + }); + + const formMethods = useForm<{ disableImpersonation: boolean }>({ + defaultValues: { + disableImpersonation: user?.disableImpersonation, + }, + }); + + const { + formState: { isSubmitting }, + setValue, + } = formMethods; + + return ( + <> + +
{ + mutation.mutate({ disableImpersonation }); + utils.invalidateQueries(["viewer.me"]); + }}> +
+ { + setValue("disableImpersonation", !e); + }} + fitToHeight={true} + /> +
+ + {t("user_impersonation_heading")} + + + {t("user_impersonation_description")} + +
+
+ +
+ + ); +}; + +ProfileImpersonationView.getLayout = getLayout; + +export default ProfileImpersonationView; diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx index 09788f6a89..fd7fb084af 100644 --- a/packages/ui/v2/core/layouts/SettingsLayout.tsx +++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx @@ -42,6 +42,7 @@ const tabs: VerticalTabItemProps[] = [ children: [ { name: "password", href: "/settings/security/password" }, { name: "2fa_auth", href: "/settings/security/two-factor-auth" }, + { name: "impersonation", href: "/settings/security/impersonation" }, ], }, {