100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import type { GetServerSidePropsContext } from "next";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import { Button, Form, Label, Meta, showToast, Skeleton, Switch } from "@calcom/ui";
|
|
|
|
import { ssrInit } from "@server/lib/ssr";
|
|
|
|
const ProfileImpersonationView = () => {
|
|
const { t } = useLocale();
|
|
const utils = trpc.useContext();
|
|
const { data: user } = trpc.viewer.me.useQuery();
|
|
const mutation = trpc.viewer.updateProfile.useMutation({
|
|
onSuccess: () => {
|
|
showToast(t("profile_updated_successfully"), "success");
|
|
reset(getValues());
|
|
},
|
|
onSettled: () => {
|
|
utils.viewer.me.invalidate();
|
|
},
|
|
onMutate: async ({ disableImpersonation }) => {
|
|
await utils.viewer.me.cancel();
|
|
const previousValue = utils.viewer.me.getData();
|
|
|
|
if (previousValue && disableImpersonation) {
|
|
utils.viewer.me.setData(undefined, { ...previousValue, disableImpersonation });
|
|
}
|
|
return { previousValue };
|
|
},
|
|
onError: (error, variables, context) => {
|
|
if (context?.previousValue) {
|
|
utils.viewer.me.setData(undefined, context.previousValue);
|
|
}
|
|
showToast(`${t("error")}, ${error.message}`, "error");
|
|
},
|
|
});
|
|
|
|
const formMethods = useForm<{ disableImpersonation: boolean }>({
|
|
defaultValues: {
|
|
disableImpersonation: user?.disableImpersonation,
|
|
},
|
|
});
|
|
|
|
const {
|
|
formState: { isSubmitting, isDirty },
|
|
setValue,
|
|
reset,
|
|
getValues,
|
|
} = formMethods;
|
|
|
|
const isDisabled = isSubmitting || !isDirty;
|
|
return (
|
|
<>
|
|
<Meta title={t("impersonation")} description={t("impersonation_description")} />
|
|
<Form
|
|
form={formMethods}
|
|
handleSubmit={({ disableImpersonation }) => {
|
|
mutation.mutate({ disableImpersonation });
|
|
}}>
|
|
<div className="flex space-x-3">
|
|
<Switch
|
|
defaultChecked={!user?.disableImpersonation}
|
|
onCheckedChange={(e) => {
|
|
setValue("disableImpersonation", !e, { shouldDirty: true });
|
|
}}
|
|
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={isDisabled}>
|
|
{t("update")}
|
|
</Button>
|
|
</Form>
|
|
</>
|
|
);
|
|
};
|
|
|
|
ProfileImpersonationView.getLayout = getLayout;
|
|
|
|
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
|
|
const ssr = await ssrInit(context);
|
|
await ssr.viewer.me.prefetch();
|
|
return {
|
|
props: {
|
|
trpcState: ssr.dehydrate(),
|
|
},
|
|
};
|
|
};
|
|
|
|
export default ProfileImpersonationView;
|