From f4fb4ddad1ecd5fed27b526edc27f1ea6b981a08 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 19 Oct 2022 10:33:40 +0100
Subject: [PATCH] Adds impersonation settings (#5088)

---
 .../pages/settings/security/impersonation.tsx | 71 +++++++++++++++++++
 .../ui/v2/core/layouts/SettingsLayout.tsx     |  1 +
 2 files changed, 72 insertions(+)
 create mode 100644 apps/web/pages/settings/security/impersonation.tsx

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 (
+    <>
+      <Meta title="Impersonation Settings" description="" />
+      <Form
+        form={formMethods}
+        handleSubmit={({ disableImpersonation }) => {
+          mutation.mutate({ disableImpersonation });
+          utils.invalidateQueries(["viewer.me"]);
+        }}>
+        <div className="flex space-x-3">
+          <Switch
+            {...formMethods.register("disableImpersonation")}
+            defaultChecked={!user?.disableImpersonation}
+            onCheckedChange={(e) => {
+              setValue("disableImpersonation", !e);
+            }}
+            fitToHeight={true}
+          />
+          <div className="flex flex-col">
+            <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+              {t("user_impersonation_heading")}
+            </Skeleton>
+            <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+              {t("user_impersonation_description")}
+            </Skeleton>
+          </div>
+        </div>
+        <Button color="primary" className="mt-8" type="submit" disabled={isSubmitting || mutation.isLoading}>
+          {t("update")}
+        </Button>
+      </Form>
+    </>
+  );
+};
+
+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" },
     ],
   },
   {