feat: web i18n (#1286)

apps/web/src/components/forms/signin.tsx

@@ -6,6 +6,8 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
 import { signIn } from 'next-auth/react';
@@ -81,6 +83,7 @@ export const SignInForm = ({
   isOIDCSSOEnabled,
   oidcProviderLabel,
 }: SignInFormProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
   const { getFlag } = useFeatureFlags();
 
@@ -136,8 +139,8 @@ export const SignInForm = ({
   const onSignInWithPasskey = async () => {
     if (!browserSupportsWebAuthn()) {
       toast({
-        title: 'Not supported',
-        description: 'Passkeys are not supported on this browser',
+        title: _(msg`Not supported`),
+        description: _(msg`Passkeys are not supported on this browser`),
         duration: 10000,
         variant: 'destructive',
       });
@@ -176,14 +179,14 @@ export const SignInForm = ({
         .with(
           AppErrorCode.NOT_SETUP,
           () =>
-            'This passkey is not configured for this application. Please login and add one in the user settings.',
+            msg`This passkey is not configured for this application. Please login and add one in the user settings.`,
         )
-        .with(AppErrorCode.EXPIRED_CODE, () => 'This session has expired. Please try again.')
-        .otherwise(() => 'Please try again later or login using your normal details');
+        .with(AppErrorCode.EXPIRED_CODE, () => msg`This session has expired. Please try again.`)
+        .otherwise(() => msg`Please try again later or login using your normal details`);
 
       toast({
         title: 'Something went wrong',
-        description: errorMessage,
+        description: _(errorMessage),
         duration: 10000,
         variant: 'destructive',
       });
@@ -223,17 +226,17 @@ export const SignInForm = ({
           router.push(`/unverified-account`);
 
           toast({
-            title: 'Unable to sign in',
-            description: errorMessage ?? 'An unknown error occurred',
+            title: _(msg`Unable to sign in`),
+            description: errorMessage ?? _(msg`An unknown error occurred`),
           });
 
           return;
         }
 
         toast({
+          title: _(msg`Unable to sign in`),
+          description: errorMessage ?? _(msg`An unknown error occurred`),
           variant: 'destructive',
-          title: 'Unable to sign in',
-          description: errorMessage ?? 'An unknown error occurred',
         });
 
         return;
@@ -246,9 +249,10 @@ export const SignInForm = ({
       window.location.href = result.url;
     } catch (err) {
       toast({
-        title: 'An unknown error occurred',
-        description:
-          'We encountered an unknown error while attempting to sign you In. Please try again later.',
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
+        ),
       });
     }
   };
@@ -258,9 +262,10 @@ export const SignInForm = ({
       await signIn('google', { callbackUrl: LOGIN_REDIRECT_PATH });
     } catch (err) {
       toast({
-        title: 'An unknown error occurred',
-        description:
-          'We encountered an unknown error while attempting to sign you In. Please try again later.',
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -271,9 +276,10 @@ export const SignInForm = ({
       await signIn('oidc', { callbackUrl: LOGIN_REDIRECT_PATH });
     } catch (err) {
       toast({
-        title: 'An unknown error occurred',
-        description:
-          'We encountered an unknown error while attempting to sign you In. Please try again later.',
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
+        ),
         variant: 'destructive',
       });
     }
@@ -294,7 +300,9 @@ export const SignInForm = ({
             name="email"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Email</FormLabel>
+                <FormLabel>
+                  <Trans>Email</Trans>
+                </FormLabel>
 
                 <FormControl>
                   <Input type="email" {...field} />
@@ -310,7 +318,9 @@ export const SignInForm = ({
             name="password"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Password</FormLabel>
+                <FormLabel>
+                  <Trans>Password</Trans>
+                </FormLabel>
 
                 <FormControl>
                   <PasswordInput {...field} />
@@ -323,7 +333,7 @@ export const SignInForm = ({
                     href="/forgot-password"
                     className="text-muted-foreground text-sm duration-200 hover:opacity-70"
                   >
-                    Forgot your password?
+                    <Trans>Forgot your password?</Trans>
                   </Link>
                 </p>
               </FormItem>
@@ -336,13 +346,15 @@ export const SignInForm = ({
             loading={isSubmitting}
             className="dark:bg-documenso dark:hover:opacity-90"
           >
-            {isSubmitting ? 'Signing in...' : 'Sign In'}
+            {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
           </Button>
 
           {(isGoogleSSOEnabled || isPasskeyEnabled || isOIDCSSOEnabled) && (
             <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
               <div className="bg-border h-px flex-1" />
-              <span className="text-muted-foreground bg-transparent">Or continue with</span>
+              <span className="text-muted-foreground bg-transparent">
+                <Trans>Or continue with</Trans>
+              </span>
               <div className="bg-border h-px flex-1" />
             </div>
           )}
@@ -386,7 +398,7 @@ export const SignInForm = ({
               onClick={onSignInWithPasskey}
             >
               {!isPasskeyLoading && <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />}
-              Passkey
+              <Trans>Passkey</Trans>
             </Button>
           )}
         </fieldset>
@@ -398,7 +410,9 @@ export const SignInForm = ({
       >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Two-Factor Authentication</DialogTitle>
+            <DialogTitle>
+              <Trans>Two-Factor Authentication</Trans>
+            </DialogTitle>
           </DialogHeader>
 
           <form onSubmit={form.handleSubmit(onFormSubmit)}>
@@ -433,7 +447,9 @@ export const SignInForm = ({
                   name="backupCode"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel> Backup Code</FormLabel>
+                      <FormLabel>
+                        <Trans>Backup Code</Trans>
+                      </FormLabel>
                       <FormControl>
                         <Input type="text" {...field} />
                       </FormControl>
@@ -449,13 +465,15 @@ export const SignInForm = ({
                   variant="secondary"
                   onClick={onToggleTwoFactorAuthenticationMethodClick}
                 >
-                  {twoFactorAuthenticationMethod === 'totp'
-                    ? 'Use Backup Code'
-                    : 'Use Authenticator'}
+                  {twoFactorAuthenticationMethod === 'totp' ? (
+                    <Trans>Use Backup Code</Trans>
+                  ) : (
+                    <Trans>Use Authenticator</Trans>
+                  )}
                 </Button>
 
                 <Button type="submit" loading={isSubmitting}>
-                  {isSubmitting ? 'Signing in...' : 'Sign In'}
+                  {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
                 </Button>
               </DialogFooter>
             </fieldset>