feat: implement user impersonation feature (#976)

* feat: wip impersonate user

* feat: add ability to impersonate an user

* fix: remove console.log

* fix: unused import

front/src/pages/impersonate/Impersonate.tsx

@@ -0,0 +1,57 @@
+import { useCallback, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+
+import { useIsLogged } from '@/auth/hooks/useIsLogged';
+import { currentUserState } from '@/auth/states/currentUserState';
+import { tokenPairState } from '@/auth/states/tokenPairState';
+import { useImpersonateMutation } from '~/generated/graphql';
+
+import { AppPath } from '../../modules/types/AppPath';
+import { isNonEmptyString } from '../../utils/isNonEmptyString';
+
+export function Impersonate() {
+  const navigate = useNavigate();
+  const { userId } = useParams();
+
+  const [currentUser, setCurrentUser] = useRecoilState(currentUserState);
+  const setTokenPair = useSetRecoilState(tokenPairState);
+
+  const [impersonate] = useImpersonateMutation();
+
+  const isLogged = useIsLogged();
+
+  const handleImpersonate = useCallback(async () => {
+    if (!isNonEmptyString(userId)) {
+      return;
+    }
+
+    const impersonateResult = await impersonate({
+      variables: { userId },
+    });
+
+    if (impersonateResult.errors) {
+      throw impersonateResult.errors;
+    }
+
+    if (!impersonateResult.data?.impersonate) {
+      throw new Error('No impersonate result');
+    }
+
+    setCurrentUser(impersonateResult.data?.impersonate.user);
+    setTokenPair(impersonateResult.data?.impersonate.tokens);
+
+    return impersonateResult.data?.impersonate;
+  }, [userId, impersonate, setCurrentUser, setTokenPair]);
+
+  useEffect(() => {
+    if (isLogged && currentUser?.canImpersonate && isNonEmptyString(userId)) {
+      handleImpersonate();
+    } else {
+      // User is not allowed to impersonate or not logged in
+      navigate(AppPath.Index);
+    }
+  }, [userId, currentUser, isLogged, handleImpersonate, navigate]);
+
+  return <></>;
+}

front/src/pages/settings/SettingsProfile.tsx

@@ -4,6 +4,7 @@ import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
 import { EmailField } from '@/settings/profile/components/EmailField';
 import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
+import { ToggleField } from '@/settings/profile/components/ToggleField';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/section/components/Section';
@@ -44,6 +45,13 @@ export function SettingsProfile() {
             />
             <EmailField />
           </Section>
+          <Section>
+            <H2Title
+              title="Support"
+              addornment={<ToggleField />}
+              description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
+            />
+          </Section>
           <Section>
             <DeleteAccount />
           </Section>