feat(subdomain): use subdomain by workspace

packages/twenty-front/.env.example

@@ -3,6 +3,12 @@ GENERATE_SOURCEMAP=false
 
 # ———————— Optional ————————
 # REACT_APP_PORT=3001
+# REACT_APP_BASE_URL=http://localhost
 # CHROMATIC_PROJECT_TOKEN=
 # VITE_DISABLE_TYPESCRIPT_CHECKER=true
-# VITE_DISABLE_ESLINT_CHECKER=true
+# VITE_DISABLE_ESLINT_CHECKER=true
+
+######  --------------> !!! FOR CHARLES AND FELIX !!! we can create a gist in twenty if you want <---------------------------
+###### To configure a local certificate you can follow these step https://gist.github.com/AMoreaux/635ca9c38924d42a4d914dabe4376f72
+# SSL_KEY_PATH="~/certs/your-cert.key"
+# SSL_CERT_PATH="~/certs/your-cert.crt"

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -168,7 +168,7 @@ export type ClientConfig = {
   debugMode: Scalars['Boolean']['output'];
   sentry: Sentry;
   signInPrefilled: Scalars['Boolean']['output'];
-  signUpDisabled: Scalars['Boolean']['output'];
+  isMultiworkspaceEnabled: Scalars['Boolean']['output'];
   support: Support;
 };
 

packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx

@@ -17,6 +17,7 @@ import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import { UserProvider } from '@/users/components/UserProvider';
 import { UserProviderEffect } from '@/users/components/UserProviderEffect';
+import { WorkspaceProviderEffect } from '@/workspace/components/WorkspaceProviderEffect';
 import { StrictMode } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { getPageTitleFromPath } from '~/utils/title-utils';
@@ -32,6 +33,7 @@ export const AppRouterProviders = () => {
         <ChromeExtensionSidecarEffect />
         <ChromeExtensionSidecarProvider>
           <UserProviderEffect />
+          <WorkspaceProviderEffect />
           <UserProvider>
             <AuthProvider>
               <ApolloMetadataClientProvider>

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -105,6 +105,12 @@ const SettingsWorkspace = lazy(() =>
   })),
 );
 
+const SettingsDomain = lazy(() =>
+  import('~/pages/settings/workspace/SettingsDomain').then((module) => ({
+    default: module.SettingsDomain,
+  })),
+);
+
 const SettingsWorkspaceMembers = lazy(() =>
   import('~/pages/settings/SettingsWorkspaceMembers').then((module) => ({
     default: module.SettingsWorkspaceMembers,
@@ -272,11 +278,12 @@ export const SettingsRoutes = ({
       {isBillingEnabled && (
         <Route path={SettingsPath.Billing} element={<SettingsBilling />} />
       )}
+      <Route path={SettingsPath.Workspace} element={<SettingsWorkspace />} />
+      <Route path={SettingsPath.Domain} element={<SettingsDomain />} />
       <Route
         path={SettingsPath.WorkspaceMembersPage}
         element={<SettingsWorkspaceMembers />}
       />
-      <Route path={SettingsPath.Workspace} element={<SettingsWorkspace />} />
       <Route path={SettingsPath.Objects} element={<SettingsObjects />} />
       <Route
         path={SettingsPath.ObjectOverview}
@@ -366,14 +373,12 @@ export const SettingsRoutes = ({
         element={<SettingsObjectFieldEdit />}
       />
       <Route path={SettingsPath.Releases} element={<Releases />} />
+      <Route path={SettingsPath.Security} element={<SettingsSecurity />} />
       {isSSOEnabled && (
-        <>
-          <Route path={SettingsPath.Security} element={<SettingsSecurity />} />
-          <Route
-            path={SettingsPath.NewSSOIdentityProvider}
-            element={<SettingsSecuritySSOIdentifyProvider />}
-          />
-        </>
+        <Route
+          path={SettingsPath.NewSSOIdentityProvider}
+          element={<SettingsSecuritySSOIdentifyProvider />}
+        />
       )}
     </Routes>
   </Suspense>

packages/twenty-front/src/modules/auth/components/Logo.tsx

@@ -1,42 +1,47 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
+import { isDefined } from '~/utils/isDefined';
 
 type LogoProps = {
   workspaceLogo?: string | null;
+  size?: string | null;
+  includeTwentyLogo?: boolean;
 };
 
-const StyledContainer = styled.div`
-  height: 48px;
+const StyledContainer = styled.div<StyledMainLogoProps>`
+  height: ${({ size }) => size};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
   margin-top: ${({ theme }) => theme.spacing(4)};
 
   position: relative;
-  width: 48px;
+  width: ${({ size }) => size};
 `;
 
-const StyledTwentyLogo = styled.img`
+const StyledTwentyLogo = styled.img<StyledMainLogoProps>`
   border-radius: ${({ theme }) => theme.border.radius.xs};
-  height: 24px;
-  width: 24px;
+  height: calc(${({ size }) => size} / 2);
+  width: calc(${({ size }) => size} / 2);
 `;
 
-const StyledTwentyLogoContainer = styled.div`
+const StyledTwentyLogoContainer = styled.div<StyledMainLogoProps>`
   align-items: center;
   background-color: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  bottom: ${({ theme }) => `-${theme.spacing(3)}`};
+  bottom: calc(-12 * ${({ size }) => size} / 48);
   display: flex;
-  height: 28px;
+  height: calc((28 * ${({ size }) => size}) / 48);
   justify-content: center;
 
   position: absolute;
-  right: ${({ theme }) => `-${theme.spacing(3)}`};
-  width: 28px;
+  right: calc(-12 * ${({ size }) => size} / 48);
+  width: calc(28 * ${({ size }) => size} / 48);
 `;
 
 type StyledMainLogoProps = {
   logo?: string | null;
+  size?: string | null;
 };
 
 const StyledMainLogo = styled.div<StyledMainLogoProps>`
@@ -47,21 +52,37 @@ const StyledMainLogo = styled.div<StyledMainLogoProps>`
   width: 100%;
 `;
 
-export const Logo = ({ workspaceLogo }: LogoProps) => {
-  if (!workspaceLogo) {
+export const Logo = (props: LogoProps) => {
+  const theme = useTheme();
+
+  const size = props.size ?? theme.spacing(12);
+
+  const includeTwentyLogo = isDefined(props.includeTwentyLogo)
+    ? props.includeTwentyLogo
+    : true;
+
+  if (!props.workspaceLogo) {
     return (
-      <StyledContainer>
-        <StyledMainLogo logo="/icons/android/android-launchericon-192-192.png" />
+      <StyledContainer size={size}>
+        <StyledMainLogo
+          size={size}
+          logo="/icons/android/android-launchericon-192-192.png"
+        />
       </StyledContainer>
     );
   }
 
   return (
-    <StyledContainer>
-      <StyledMainLogo logo={getImageAbsoluteURI(workspaceLogo)} />
-      <StyledTwentyLogoContainer>
-        <StyledTwentyLogo src="/icons/android/android-launchericon-192-192.png" />
-      </StyledTwentyLogoContainer>
+    <StyledContainer size={size}>
+      <StyledMainLogo logo={getImageAbsoluteURI(props.workspaceLogo)} />
+      {includeTwentyLogo && (
+        <StyledTwentyLogoContainer size={size}>
+          <StyledTwentyLogo
+            size={size}
+            src="/icons/android/android-launchericon-192-192.png"
+          />
+        </StyledTwentyLogoContainer>
+      )}
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx

@@ -4,10 +4,16 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { AppPath } from '@/types/AppPath';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { isDefined } from '~/utils/isDefined';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 
 export const VerifyEffect = () => {
+  const { enqueueSnackBar } = useSnackBar();
+
   const [searchParams] = useSearchParams();
   const loginToken = searchParams.get('loginToken');
+  const errorMessage = searchParams.get('errorMessage');
 
   const isLogged = useIsLogged();
   const navigate = useNavigate();
@@ -30,5 +36,14 @@ export const VerifyEffect = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    // TODO AMOREAUX: the error message it display twice. Need help to fix it
+    if (isDefined(errorMessage)) {
+      enqueueSnackBar(errorMessage, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+  }, []);
+
   return <></>;
 };

packages/twenty-front/src/modules/auth/graphql/mutations/switchWorkspace.ts

@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export const SWITCH_WORKSPACE = gql`
+  mutation SwitchWorkspace($workspaceId: String!) {
+    switchWorkspace(workspaceId: $workspaceId) {
+      id
+      subdomain
+      authProviders {
+        sso {
+          id
+          name
+          type
+          status
+          issuer
+        }
+        google
+        magicLink
+        password
+        microsoft
+      }
+    }
+  }
+`;

packages/twenty-front/src/modules/auth/graphql/queries/checkUserExists.ts

@@ -3,7 +3,26 @@ import { gql } from '@apollo/client';
 export const CHECK_USER_EXISTS = gql`
   query CheckUserExists($email: String!, $captchaToken: String) {
     checkUserExists(email: $email, captchaToken: $captchaToken) {
-      exists
+      __typename
+      ... on UserExists {
+        exists
+        availableWorkspaces {
+          id
+          displayName
+          subdomain
+          logo
+          sso {
+            type
+            id
+            issuer
+            name
+            status
+          }
+        }
+      }
+      ... on UserNotExists {
+        exists
+      }
     }
   }
 `;

packages/twenty-front/src/modules/auth/graphql/queries/getPublicWorkspaceDataBySubdomain.ts

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+
+export const GET_PUBLIC_WORKSPACE_DATA_BY_SUBDOMAIN = gql`
+  query GetPublicWorkspaceDataBySubdomain {
+    getPublicWorkspaceDataBySubdomain {
+      id
+      logo
+      displayName
+      subdomain
+      authProviders {
+        sso {
+          id
+          name
+          type
+          status
+          issuer
+        }
+        google
+        magicLink
+        password
+        microsoft
+      }
+    }
+  }
+`;