refactor(auth): add workspaces selection (#12098)

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -2,14 +2,17 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { FormProvider } from 'react-hook-form';
-import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { useTheme } from '@emotion/react';
+import { useLingui } from '@lingui/react/macro';
+import { UndecoratedLink } from 'twenty-ui/navigation';
+import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUrl';
+import { availableWorkspacesState } from '@/auth/states/availableWorkspacesState';
 
-import { useAuth } from '@/auth/hooks/useAuth';
-import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
-import { SignInUpPasswordField } from '@/auth/sign-in-up/components/SignInUpPasswordField';
-import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/SignInUpWithGoogle';
-import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/SignInUpWithMicrosoft';
+import { SignInUpEmailField } from '@/auth/sign-in-up/components/internal/SignInUpEmailField';
+import { SignInUpPasswordField } from '@/auth/sign-in-up/components/internal/SignInUpPasswordField';
+import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/internal/SignInUpWithGoogle';
+import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/internal/SignInUpWithMicrosoft';
 import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { signInUpModeState } from '@/auth/states/signInUpModeState';
@@ -17,19 +20,23 @@ import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
+import { getAvailableWorkspacePathAndSearchParams } from '@/auth/utils/availableWorkspacesUtils';
 import { SignInUpMode } from '@/auth/types/signInUpMode';
-import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
-import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
-import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { isDefined } from 'twenty-shared/utils';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import {
+  HorizontalSeparator,
+  IconChevronRight,
+  IconPlus,
+  Avatar,
+} from 'twenty-ui/display';
 import { Loader } from 'twenty-ui/feedback';
 import { MainButton } from 'twenty-ui/input';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
+import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
+import { useSignUpInNewWorkspace } from '@/auth/sign-in-up/hooks/useSignUpInNewWorkspace';
+import { AvailableWorkspace } from '~/generated/graphql';
 
 const StyledContentContainer = styled(motion.div)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
@@ -44,29 +51,101 @@ const StyledForm = styled.form`
   width: 100%;
 `;
 
+const StyledWorkspaceContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+  overflow: hidden;
+  width: 100%;
+`;
+
+const StyledWorkspaceItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: ${({ theme }) => theme.spacing(15)};
+  padding: 0;
+  overflow: hidden;
+
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  cursor: pointer;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.background.transparent.light};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const StyledWorkspaceContent = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  width: 100%;
+  padding: 0 ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledWorkspaceTextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+
+const StyledWorkspaceLogo = styled.div`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  height: ${({ theme }) => theme.spacing(6)};
+  width: ${({ theme }) => theme.spacing(6)};
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledWorkspaceName = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledWorkspaceUrl = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.xs};
+`;
+
+const StyledChevronIcon = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+`;
+
 export const SignInUpGlobalScopeForm = () => {
   const authProviders = useRecoilValue(authProvidersState);
   const signInUpStep = useRecoilValue(signInUpStepState);
+  const { buildWorkspaceUrl } = useBuildWorkspaceUrl();
 
-  const { checkUserExists } = useAuth();
-  const { readCaptchaToken } = useReadCaptchaToken();
-  const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
+  const { createWorkspace } = useSignUpInNewWorkspace();
   const setSignInUpStep = useSetRecoilState(signInUpStepState);
-  const [signInUpMode, setSignInUpMode] = useRecoilState(signInUpModeState);
+  const [signInUpMode] = useRecoilState(signInUpModeState);
+  const availableWorkspaces = useRecoilValue(availableWorkspacesState);
+  const theme = useTheme();
+  const { t } = useLingui();
 
   const isRequestingCaptchaToken = useRecoilValue(
     isRequestingCaptchaTokenState,
   );
 
-  const { enqueueSnackBar } = useSnackBar();
-  const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
-
   const [showErrors, setShowErrors] = useState(false);
 
   const { form } = useSignInUpForm();
-  const { pathname } = useLocation();
 
-  const { submitCredentials } = useSignInUp(form);
+  const { submitCredentials, continueWithCredentials } = useSignInUp(form);
 
   const handleSubmit = async () => {
     if (isDefined(form?.formState?.errors?.email)) {
@@ -79,38 +158,7 @@ export const SignInUpGlobalScopeForm = () => {
       return;
     }
 
-    const token = await readCaptchaToken();
-    await checkUserExists.checkUserExistsQuery({
-      variables: {
-        email: form.getValues('email').toLowerCase().trim(),
-        captchaToken: token,
-      },
-      onError: (error) => {
-        enqueueSnackBar(`${error.message}`, {
-          variant: SnackBarVariant.Error,
-        });
-      },
-      onCompleted: async (data) => {
-        requestFreshCaptchaToken();
-        const response = data.checkUserExists;
-        if (response.__typename === 'UserExists') {
-          if (response.availableWorkspaces.length >= 1) {
-            const workspace = response.availableWorkspaces[0];
-            return await redirectToWorkspaceDomain(
-              getWorkspaceUrl(workspace.workspaceUrls),
-              pathname,
-              {
-                email: form.getValues('email'),
-              },
-            );
-          }
-        }
-        if (response.__typename === 'UserNotExists') {
-          setSignInUpMode(SignInUpMode.SignUp);
-          setSignInUpStep(SignInUpStep.Password);
-        }
-      },
-    });
+    continueWithCredentials();
   };
 
   const onEmailChange = (email: string) => {
@@ -119,42 +167,118 @@ export const SignInUpGlobalScopeForm = () => {
     }
   };
 
+  const getAvailableWorkspaceUrl = (availableWorkspace: AvailableWorkspace) => {
+    const { pathname, searchParams } = getAvailableWorkspacePathAndSearchParams(
+      availableWorkspace,
+      { email: form.getValues('email') },
+    );
+
+    return buildWorkspaceUrl(
+      getWorkspaceUrl(availableWorkspace.workspaceUrls),
+      pathname,
+      searchParams,
+    );
+  };
+
   return (
     <>
-      <StyledContentContainer>
-        {authProviders.google && <SignInUpWithGoogle />}
-        {authProviders.microsoft && <SignInUpWithMicrosoft />}
-        {(authProviders.google || authProviders.microsoft) && (
-          <HorizontalSeparator />
-        )}
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <FormProvider {...form}>
-          <StyledForm onSubmit={form.handleSubmit(handleSubmit)}>
-            <SignInUpEmailField
-              showErrors={showErrors}
-              onInputChange={onEmailChange}
-            />
-            {signInUpStep === SignInUpStep.Password && (
-              <SignInUpPasswordField
+      {signInUpStep === SignInUpStep.WorkspaceSelection && (
+        <StyledWorkspaceContainer>
+          {[
+            ...availableWorkspaces.availableWorkspacesForSignIn,
+            ...availableWorkspaces.availableWorkspacesForSignUp,
+          ].map((availableWorkspace) => (
+            <UndecoratedLink
+              key={availableWorkspace.id}
+              to={getAvailableWorkspaceUrl(availableWorkspace)}
+            >
+              <StyledWorkspaceItem>
+                <StyledWorkspaceContent>
+                  <Avatar
+                    placeholder={availableWorkspace.displayName || ''}
+                    avatarUrl={
+                      availableWorkspace.logo ?? DEFAULT_WORKSPACE_LOGO
+                    }
+                    size="lg"
+                  />
+                  <StyledWorkspaceTextContainer>
+                    <StyledWorkspaceName>
+                      {availableWorkspace.displayName || availableWorkspace.id}
+                    </StyledWorkspaceName>
+                    <StyledWorkspaceUrl>
+                      {
+                        new URL(
+                          getWorkspaceUrl(availableWorkspace.workspaceUrls),
+                        ).hostname
+                      }
+                    </StyledWorkspaceUrl>
+                  </StyledWorkspaceTextContainer>
+                  <StyledChevronIcon>
+                    <IconChevronRight size={theme.icon.size.md} />
+                  </StyledChevronIcon>
+                </StyledWorkspaceContent>
+              </StyledWorkspaceItem>
+            </UndecoratedLink>
+          ))}
+          <StyledWorkspaceItem onClick={() => createWorkspace()}>
+            <StyledWorkspaceContent>
+              <StyledWorkspaceLogo>
+                <IconPlus size={theme.icon.size.lg} />
+              </StyledWorkspaceLogo>
+              <StyledWorkspaceTextContainer>
+                <StyledWorkspaceName>{t`Create a workspace`}</StyledWorkspaceName>
+              </StyledWorkspaceTextContainer>
+              <StyledChevronIcon>
+                <IconChevronRight size={theme.icon.size.md} />
+              </StyledChevronIcon>
+            </StyledWorkspaceContent>
+          </StyledWorkspaceItem>
+        </StyledWorkspaceContainer>
+      )}
+      {signInUpStep !== SignInUpStep.WorkspaceSelection && (
+        <StyledContentContainer>
+          {authProviders.google && (
+            <SignInUpWithGoogle action="list-available-workspaces" />
+          )}
+          {authProviders.microsoft && (
+            <SignInUpWithMicrosoft action="list-available-workspaces" />
+          )}
+          {(authProviders.google || authProviders.microsoft) && (
+            <HorizontalSeparator />
+          )}
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <FormProvider {...form}>
+            <StyledForm onSubmit={form.handleSubmit(handleSubmit)}>
+              <SignInUpEmailField
                 showErrors={showErrors}
-                signInUpMode={signInUpMode}
+                onInputChange={onEmailChange}
               />
-            )}
-            <MainButton
-              disabled={isRequestingCaptchaToken}
-              title={
-                signInUpStep === SignInUpStep.Password ? 'Sign Up' : 'Continue'
-              }
-              type="submit"
-              variant={
-                signInUpStep === SignInUpStep.Init ? 'secondary' : 'primary'
-              }
-              Icon={() => (form.formState.isSubmitting ? <Loader /> : null)}
-              fullWidth
-            />
-          </StyledForm>
-        </FormProvider>
-      </StyledContentContainer>
+              {signInUpStep === SignInUpStep.Password && (
+                <SignInUpPasswordField
+                  showErrors={showErrors}
+                  signInUpMode={signInUpMode}
+                />
+              )}
+              <MainButton
+                disabled={isRequestingCaptchaToken}
+                title={
+                  signInUpStep === SignInUpStep.Password
+                    ? signInUpMode === SignInUpMode.SignIn
+                      ? t`Sign In`
+                      : t`Sign Up`
+                    : t`Continue`
+                }
+                type="submit"
+                variant={
+                  signInUpStep === SignInUpStep.Init ? 'secondary' : 'primary'
+                }
+                Icon={() => (form.formState.isSubmitting ? <Loader /> : null)}
+                fullWidth
+              />
+            </StyledForm>
+          </FormProvider>
+        </StyledContentContainer>
+      )}
     </>
   );
 };

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx

@@ -1,7 +1,7 @@
-import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/SignInUpWithCredentials';
-import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/SignInUpWithGoogle';
-import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/SignInUpWithMicrosoft';
-import { SignInUpWithSSO } from '@/auth/sign-in-up/components/SignInUpWithSSO';
+import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/internal/SignInUpWithCredentials';
+import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/internal/SignInUpWithGoogle';
+import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/internal/SignInUpWithMicrosoft';
+import { SignInUpWithSSO } from '@/auth/sign-in-up/components/internal/SignInUpWithSSO';
 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
 import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
@@ -36,9 +36,13 @@ export const SignInUpWorkspaceScopeForm = () => {
   return (
     <>
       <StyledContentContainer>
-        {workspaceAuthProviders.google && <SignInUpWithGoogle />}
+        {workspaceAuthProviders.google && (
+          <SignInUpWithGoogle action="join-workspace" />
+        )}
 
-        {workspaceAuthProviders.microsoft && <SignInUpWithMicrosoft />}
+        {workspaceAuthProviders.microsoft && (
+          <SignInUpWithMicrosoft action="join-workspace" />
+        )}
 
         {workspaceAuthProviders.sso.length > 0 && <SignInUpWithSSO />}
 

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpGlobalScopeFormEffect.tsx

@@ -0,0 +1,34 @@
+import {
+  SignInUpStep,
+  signInUpStepState,
+} from '@/auth/states/signInUpStepState';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { useAuth } from '@/auth/hooks/useAuth';
+import { useSearchParams } from 'react-router-dom';
+
+export const SignInUpGlobalScopeFormEffect = () => {
+  const setSignInUpStep = useSetRecoilState(signInUpStepState);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { setAuthTokens, loadCurrentUser } = useAuth();
+
+  useEffect(() => {
+    const tokenPair = searchParams.get('tokenPair');
+    if (isDefined(tokenPair)) {
+      setAuthTokens(JSON.parse(tokenPair));
+      searchParams.delete('tokenPair');
+      setSearchParams(searchParams);
+      loadCurrentUser();
+      setSignInUpStep(SignInUpStep.WorkspaceSelection);
+    }
+  }, [
+    searchParams,
+    setSearchParams,
+    setSignInUpStep,
+    loadCurrentUser,
+    setAuthTokens,
+  ]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithCredentials.tsx

@@ -5,8 +5,8 @@ import {
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
 
-import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
-import { SignInUpPasswordField } from '@/auth/sign-in-up/components/SignInUpPasswordField';
+import { SignInUpEmailField } from '@/auth/sign-in-up/components/internal/SignInUpEmailField';
+import { SignInUpPasswordField } from '@/auth/sign-in-up/components/internal/SignInUpPasswordField';
 import { SignInUpMode } from '@/auth/types/signInUpMode';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 import { captchaState } from '@/client-config/states/captchaState';

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx

@@ -9,23 +9,27 @@ import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
 import { MainButton } from 'twenty-ui/input';
+import { SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 
 const GoogleIcon = memo(() => {
   const theme = useTheme();
   return <IconGoogle size={theme.icon.size.md} />;
 });
 
-export const SignInUpWithGoogle = () => {
+export const SignInUpWithGoogle = ({
+  action,
+}: {
+  action: SocialSSOSignInUpActionType;
+}) => {
   const { t } = useLingui();
   const signInUpStep = useRecoilValue(signInUpStepState);
   const { signInWithGoogle } = useSignInWithGoogle();
-
   return (
     <>
       <MainButton
         Icon={GoogleIcon}
         title={t`Continue with Google`}
-        onClick={signInWithGoogle}
+        onClick={() => signInWithGoogle({ action })}
         variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
         fullWidth
       />

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx

@@ -8,8 +8,13 @@ import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
 import { MainButton } from 'twenty-ui/input';
+import { SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 
-export const SignInUpWithMicrosoft = () => {
+export const SignInUpWithMicrosoft = ({
+  action,
+}: {
+  action: SocialSSOSignInUpActionType;
+}) => {
   const theme = useTheme();
   const { t } = useLingui();
 
@@ -21,7 +26,7 @@ export const SignInUpWithMicrosoft = () => {
       <MainButton
         Icon={() => <IconMicrosoft size={theme.icon.size.md} />}
         title={t`Continue with Microsoft`}
-        onClick={signInWithMicrosoft}
+        onClick={() => signInWithMicrosoft({ action })}
         variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
         fullWidth
       />