More translation in FR & PT (#436)

Related to #210

apps/builder/src/features/auth/components/SignInError.tsx

@@ -1,24 +1,25 @@
+import { useScopedI18n } from '@/locales'
 import { Alert } from '@chakra-ui/react'
 
 type Props = {
   error: string
 }
-const errors: Record<string, string> = {
-  Signin: 'Try signing with a different account.',
-  OAuthSignin: 'Try signing with a different account.',
-  OAuthCallback: 'Try signing with a different account.',
-  OAuthCreateAccount: 'Email not found. Try signing with a different provider.',
-  EmailCreateAccount: 'Try signing with a different account.',
-  Callback: 'Try signing with a different account.',
-  OAuthAccountNotLinked:
-    'To confirm your identity, sign in with the same account you used originally.',
-  CredentialsSignin:
-    'Sign in failed. Check the details you provided are correct.',
-  default: 'An error occurred. Please try again.',
-}
 
-export const SignInError = ({ error }: Props) => (
-  <Alert status="error" variant="solid" rounded="md">
-    {errors[error] ?? errors[error]}
-  </Alert>
-)
+export const SignInError = ({ error }: Props) => {
+  const scopedT = useScopedI18n('auth.error')
+  const errors: Record<string, string> = {
+    Signin: scopedT('default'),
+    OAuthSignin: scopedT('default'),
+    OAuthCallback: scopedT('default'),
+    OAuthCreateAccount: scopedT('email'),
+    EmailCreateAccount: scopedT('default'),
+    Callback: scopedT('default'),
+    OAuthAccountNotLinked: scopedT('oauthNotLinked'),
+    default: scopedT('unknown'),
+  }
+  return (
+    <Alert status="error" variant="solid" rounded="md">
+      {errors[error] ?? errors[error]}
+    </Alert>
+  )
+}

apps/builder/src/features/auth/components/SignInForm.tsx

@@ -27,6 +27,7 @@ import { BuiltInProviderType } from 'next-auth/providers'
 import { useToast } from '@/hooks/useToast'
 import { TextLink } from '@/components/TextLink'
 import { SignInError } from './SignInError'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   defaultEmail?: string
@@ -34,6 +35,7 @@ type Props = {
 export const SignInForm = ({
   defaultEmail,
 }: Props & HTMLChakraProps<'form'>) => {
+  const scopedT = useScopedI18n('auth')
   const router = useRouter()
   const { status } = useSession()
   const [authLoading, setAuthLoading] = useState(false)
@@ -76,8 +78,8 @@ export const SignInForm = ({
     })
     if (response?.error) {
       showToast({
-        title: 'Unauthorized',
-        description: 'Sign ups are disabled.',
+        title: scopedT('signinErrorToast.title'),
+        description: scopedT('signinErrorToast.description'),
       })
     } else {
       setIsMagicLinkSent(true)
@@ -89,14 +91,13 @@ export const SignInForm = ({
   if (hasNoAuthProvider)
     return (
       <Text>
-        You need to{' '}
+        {scopedT('noProvider.preLink')}{' '}
         <TextLink
           href="https://docs.typebot.io/self-hosting/configuration"
           isExternal
         >
-          configure at least one auth provider
-        </TextLink>{' '}
-        (Email, Google, GitHub, Facebook or Azure AD).
+          {scopedT('noProvider.link')}
+        </TextLink>
       </Text>
     )
   return (
@@ -106,7 +107,9 @@ export const SignInForm = ({
           <SocialLoginButtons providers={providers} />
           {providers?.email && (
             <>
-              <DividerWithText mt="6">Or with your email</DividerWithText>
+              <DividerWithText mt="6">
+                {scopedT('orEmailLabel')}
+              </DividerWithText>
               <HStack as="form" onSubmit={handleEmailSubmit}>
                 <Input
                   name="email"
@@ -124,7 +127,7 @@ export const SignInForm = ({
                   }
                   isDisabled={isMagicLinkSent}
                 >
-                  Submit
+                  {scopedT('emailSubmitButton.label')}
                 </Button>
               </HStack>
             </>
@@ -140,10 +143,8 @@ export const SignInForm = ({
             <HStack>
               <AlertIcon />
               <Stack spacing={1}>
-                <Text fontWeight="semibold">
-                  A magic link email was sent. 🪄
-                </Text>
-                <Text fontSize="sm">Make sure to check your SPAM folder.</Text>
+                <Text fontWeight="semibold">{scopedT('magicLink.title')}</Text>
+                <Text fontSize="sm">{scopedT('magicLink.description')}</Text>
               </Stack>
             </HStack>
           </Alert>

apps/builder/src/features/auth/components/SignInPage.tsx

@@ -1,5 +1,6 @@
 import { Seo } from '@/components/Seo'
 import { TextLink } from '@/components/TextLink'
+import { useScopedI18n } from '@/locales'
 import { VStack, Heading, Text } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import { SignInForm } from './SignInForm'
@@ -10,26 +11,40 @@ type Props = {
 }
 
 export const SignInPage = ({ type }: Props) => {
+  const scopedT = useScopedI18n('auth')
   const { query } = useRouter()
 
   return (
     <VStack spacing={4} h="100vh" justifyContent="center">
-      <Seo title={type === 'signin' ? 'Sign In' : 'Register'} />
+      <Seo
+        title={
+          type === 'signin'
+            ? scopedT('signin.heading')
+            : scopedT('register.heading')
+        }
+      />
       <Heading
         onClick={() => {
           throw new Error('Sentry is working')
         }}
       >
-        {type === 'signin' ? 'Sign In' : 'Create an account'}
+        {type === 'signin'
+          ? scopedT('signin.heading')
+          : scopedT('register.heading')}
       </Heading>
       {type === 'signin' ? (
         <Text>
-          Don&apos;t have an account?{' '}
-          <TextLink href="/register">Sign up for free</TextLink>
+          {scopedT('signin.noAccountLabel.preLink')}{' '}
+          <TextLink href="/register">
+            {scopedT('signin.noAccountLabel.link')}
+          </TextLink>
         </Text>
       ) : (
         <Text>
-          Already have an account? <TextLink href="/signin">Sign in</TextLink>
+          {scopedT('register.alreadyHaveAccountLabel.preLink')}{' '}
+          <TextLink href="/signin">
+            {scopedT('register.alreadyHaveAccountLabel.link')}
+          </TextLink>
         </Text>
       )}
       <SignInForm defaultEmail={query.g?.toString()} />

apps/builder/src/features/auth/components/SocialLoginButtons.tsx

@@ -15,6 +15,7 @@ import { omit } from '@typebot.io/lib'
 import { AzureAdLogo } from '@/components/logos/AzureAdLogo'
 import { FacebookLogo } from '@/components/logos/FacebookLogo'
 import { GitlabLogo } from '@/components/logos/GitlabLogo'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   providers:
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export const SocialLoginButtons = ({ providers }: Props) => {
+  const scopedT = useScopedI18n('auth.socialLogin')
   const { query } = useRouter()
   const { status } = useSession()
   const [authLoading, setAuthLoading] =
@@ -63,7 +65,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          Continue with GitHub
+          {scopedT('githubButton.label')}
         </Button>
       )}
       {providers?.google && (
@@ -77,7 +79,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          Continue with Google
+          {scopedT('googleButton.label')}
         </Button>
       )}
       {providers?.facebook && (
@@ -91,7 +93,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          Continue with Facebook
+          {scopedT('facebookButton.label')}
         </Button>
       )}
       {providers?.gitlab && (
@@ -105,7 +107,9 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          Continue with {providers.gitlab.name}
+          {scopedT('gitlabButton.label', {
+            gitlabProviderName: providers.gitlab.name,
+          })}
         </Button>
       )}
       {providers?.['azure-ad'] && (
@@ -119,7 +123,9 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          Continue with {providers['azure-ad'].name}
+          {scopedT('azureButton.label', {
+            azureProviderName: providers['azure-ad'].name,
+          })}
         </Button>
       )}
       {providers?.['custom-oauth'] && (
@@ -131,7 +137,9 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          Continue with {providers['custom-oauth'].name}
+          {scopedT('customButton.label', {
+            customProviderName: providers['custom-oauth'].name,
+          })}
         </Button>
       )}
     </Stack>