Add logged out translations (#9983)

Add translation for logged in / sub pages

packages/twenty-front/src/modules/apollo/services/apollo.factory.ts

@@ -17,6 +17,7 @@ import { isDefined } from 'twenty-shared';
 import { AuthTokenPair } from '~/generated/graphql';
 import { logDebug } from '~/utils/logDebug';
 
+import { i18n } from '@lingui/core';
 import { GraphQLFormattedError } from 'graphql';
 import { ApolloManager } from '../types/apolloManager.interface';
 import { loggerLink } from '../utils/loggerLink';
@@ -71,7 +72,7 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
               : '',
             ...(this.currentWorkspaceMember?.locale
               ? { 'x-locale': this.currentWorkspaceMember.locale }
-              : {}),
+              : { 'x-locale': i18n.locale }),
           },
         };
       });

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

@@ -11,12 +11,9 @@ import { HelmetProvider } from 'react-helmet-async';
 import { RecoilRoot } from 'recoil';
 import { RecoilURLSyncJSON } from 'recoil-sync';
 import { IconsProvider } from 'twenty-ui';
-import { messages as enMessages } from '../../../locales/generated/en';
+import { initialI18nActivate } from '~/utils/i18n/initialI18nActivate';
 
-i18n.load({
-  en: enMessages,
-});
-i18n.activate('en');
+initialI18nActivate();
 
 export const App = () => {
   return (

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import React from 'react';
+import { Trans } from '@lingui/react/macro';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -20,21 +20,21 @@ const StyledContainer = styled.div`
 
 export const FooterNote = () => (
   <StyledContainer>
-    By using Twenty, you agree to the{' '}
+    <Trans>By using Twenty, you agree to the</Trans>{' '}
     <a
       href="https://twenty.com/legal/terms"
       target="_blank"
       rel="noopener noreferrer"
     >
-      Terms of Service
+      <Trans>Terms of Service</Trans>
     </a>{' '}
-    and{' '}
+    <Trans>and</Trans>{' '}
     <a
       href="https://twenty.com/legal/privacy"
       target="_blank"
       rel="noopener noreferrer"
     >
-      Privacy Policy
+      <Trans>Privacy Policy</Trans>
     </a>
     .
   </StyledContainer>

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

@@ -1,11 +1,12 @@
-import { TextInput } from '@/ui/input/components/TextInput';
-import { Controller, useFormContext } from 'react-hook-form';
-import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-import { StyledText } from 'twenty-ui';
-import { useTheme } from '@emotion/react';
 import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { SignInUpMode } from '@/auth/types/signInUpMode';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { motion } from 'framer-motion';
+import { Controller, useFormContext } from 'react-hook-form';
+import { StyledText } from 'twenty-ui';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;
@@ -22,6 +23,7 @@ export const SignInUpPasswordField = ({
   showErrors: boolean;
   signInUpMode: SignInUpMode;
 }) => {
+  const { t } = useLingui();
   const theme = useTheme();
   const form = useFormContext<Form>();
 
@@ -55,7 +57,7 @@ export const SignInUpPasswordField = ({
             />
             {signInUpMode === SignInUpMode.SignUp && (
               <StyledText
-                text={'At least 8 characters long.'}
+                text={t`At least 8 characters long.`}
                 color={theme.font.color.secondary}
               />
             )}

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

@@ -11,6 +11,7 @@ import { SignInUpMode } from '@/auth/types/signInUpMode';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 import { captchaState } from '@/client-config/states/captchaState';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
@@ -25,6 +26,7 @@ const StyledForm = styled.form`
 `;
 
 export const SignInUpWithCredentials = () => {
+  const { t } = useLingui();
   const form = useFormContext<Form>();
 
   const signInUpStep = useRecoilValue(signInUpStepState);
@@ -64,25 +66,25 @@ export const SignInUpWithCredentials = () => {
 
   const buttonTitle = useMemo(() => {
     if (signInUpStep === SignInUpStep.Init) {
-      return 'Continue With Email';
+      return t`Continue with Email`;
     }
 
     if (
       signInUpMode === SignInUpMode.SignIn &&
       signInUpStep === SignInUpStep.Password
     ) {
-      return 'Sign in';
+      return t`Sign in`;
     }
 
     if (
       signInUpMode === SignInUpMode.SignUp &&
       signInUpStep === SignInUpStep.Password
     ) {
-      return 'Sign up';
+      return t`Sign up`;
     }
 
-    return 'Continue';
-  }, [signInUpMode, signInUpStep]);
+    return t`Continue`;
+  }, [signInUpMode, signInUpStep, t]);
 
   const shouldWaitForCaptchaToken =
     signInUpStep !== SignInUpStep.Init &&

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

@@ -1,12 +1,13 @@
-import { IconGoogle, MainButton, HorizontalSeparator } from 'twenty-ui';
+import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
 import { useTheme } from '@emotion/react';
-import { useRecoilValue } from 'recoil';
-import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
+import { useLingui } from '@lingui/react/macro';
 import { memo } from 'react';
+import { useRecoilValue } from 'recoil';
+import { HorizontalSeparator, IconGoogle, MainButton } from 'twenty-ui';
 
 const GoogleIcon = memo(() => {
   const theme = useTheme();
@@ -14,6 +15,7 @@ const GoogleIcon = memo(() => {
 });
 
 export const SignInUpWithGoogle = () => {
+  const { t } = useLingui();
   const signInUpStep = useRecoilValue(signInUpStepState);
   const { signInWithGoogle } = useSignInWithGoogle();
 
@@ -21,7 +23,7 @@ export const SignInUpWithGoogle = () => {
     <>
       <MainButton
         Icon={GoogleIcon}
-        title="Continue with Google"
+        title={t`Continue with Google`}
         onClick={signInWithGoogle}
         variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
         fullWidth

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

@@ -1,14 +1,17 @@
-import { IconMicrosoft, MainButton, HorizontalSeparator } from 'twenty-ui';
+import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
 import { useTheme } from '@emotion/react';
-import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
+import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
+import { HorizontalSeparator, IconMicrosoft, MainButton } from 'twenty-ui';
 
 export const SignInUpWithMicrosoft = () => {
   const theme = useTheme();
+  const { t } = useLingui();
+
   const signInUpStep = useRecoilValue(signInUpStepState);
   const { signInWithMicrosoft } = useSignInWithMicrosoft();
 
@@ -16,7 +19,7 @@ export const SignInUpWithMicrosoft = () => {
     <>
       <MainButton
         Icon={() => <IconMicrosoft size={theme.icon.size.md} />}
-        title="Continue with Microsoft"
+        title={t`Continue with Microsoft`}
         onClick={signInWithMicrosoft}
         variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
         fullWidth

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

@@ -5,12 +5,14 @@ import {
 } from '@/auth/states/signInUpStepState';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { useTheme } from '@emotion/react';
+import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { HorizontalSeparator, IconLock, MainButton } from 'twenty-ui';
 
 export const SignInUpWithSSO = () => {
   const theme = useTheme();
+  const { t } = useLingui();
   const setSignInUpStep = useSetRecoilState(signInUpStepState);
   const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
 
@@ -33,7 +35,7 @@ export const SignInUpWithSSO = () => {
     <>
       <MainButton
         Icon={() => <IconLock size={theme.icon.size.md} />}
-        title="Single sign-on (SSO)"
+        title={t`Single sign-on (SSO)`}
         onClick={signInWithSSO}
         variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
         fullWidth

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

@@ -8,6 +8,7 @@ import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { SignInUpStep } from '@/auth/states/signInUpStepState';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import styled from '@emotion/styled';
+import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
 import { ActionLink, HorizontalSeparator } from 'twenty-ui';
@@ -54,7 +55,7 @@ export const SignInUpWorkspaceScopeForm = () => {
       </StyledContentContainer>
       {signInUpStep === SignInUpStep.Password && (
         <ActionLink onClick={handleResetPassword(form.getValues('email'))}>
-          Forgot your password?
+          <Trans>Forgot your password?</Trans>
         </ActionLink>
       )}
     </>