[AMB-357] feat: add tooltip about security info to signup form

messages/en.json

@@ -155,6 +155,7 @@
       "plain": "The password hint will be stored in plain text. Avoid using your full password as a hint!",
       "referral": "Referral Code",
       "save": "Please save your password as it cannot be recovered if lost.",
+      "security": "The password is your responsibility to keep safe. You may want to consider using a password manager. <learn>Learn more</learn> about BancoLibre security practices.",
       "set": "Set a password",
       "submit": "Create Account"
     },

messages/es.json

@@ -155,6 +155,7 @@
       "plain": "El recordatorio para la contraseña se guarda sin encripción. Evita usar la misma contraseña como recordatorio!",
       "referral": "Código de Invitación",
       "save": "Por favór guarda la contraseña. No se puede recuperar si se pierde.",
+      "security": "Es su responsabilidad mantener la contraseña segura. Recomendamos el uso de un administrador de contraseñas. <learn>Aprende más</learn> sobre las practicas de seguridad de BancoLibre.",
       "set": "Crea una contraseña",
       "submit": "Crea una cuenta"
     },

src/app/layout.tsx

@@ -8,6 +8,7 @@ import { getLocale, getMessages } from 'next-intl/server';
 import PlausibleProvider from 'next-plausible';
 
 import { Toaster } from '@/components/ui/toaster';
+import { TooltipProvider } from '@/components/ui/tooltip';
 import { ApolloWrapper } from '@/lib/apollo/wrapper';
 import { ThemeProvider } from '@/lib/themes/wrapper';
 
@@ -55,14 +56,16 @@ export default async function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <ApolloWrapper
-              serverUrl={serverUrl}
-              accessToken={accessToken}
-              refreshToken={refreshToken}
-            >
-              {children}
-              <Toaster />
-            </ApolloWrapper>
+            <TooltipProvider>
+              <ApolloWrapper
+                serverUrl={serverUrl}
+                accessToken={accessToken}
+                refreshToken={refreshToken}
+              >
+                {children}
+                <Toaster />
+              </ApolloWrapper>
+            </TooltipProvider>
           </ThemeProvider>
         </NextIntlClientProvider>
       </body>

src/components/form/SignUpForm.tsx

@@ -2,7 +2,7 @@
 
 import { ApolloError, useApolloClient } from '@apollo/client';
 import stringEntropy from 'fast-password-entropy';
-import { ArrowLeft, Eye, EyeOff, Loader2 } from 'lucide-react';
+import { ArrowLeft, Eye, EyeOff, Info, Loader2 } from 'lucide-react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
@@ -24,6 +24,7 @@ import { Button } from '../ui/button-v2';
 import { Checkbox } from '../ui/checkbox';
 import { Label } from '../ui/label';
 import { Progress } from '../ui/progress';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { useToast } from '../ui/use-toast';
 import { WaitlistForm } from './WaitlistForm';
 
@@ -264,7 +265,31 @@ export function SignUpForm() {
 
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label htmlFor="password">{c('password')}</Label>
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="password">{c('password')}</Label>
+
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button type="button">
+                      <Info size={16} />
+                    </button>
+                  </TooltipTrigger>
+
+                  <TooltipContent className="w-72">
+                    {s.rich('security', {
+                      learn: chunks => (
+                        <Link
+                          href={ROUTES.docs.security}
+                          target="_blank"
+                          className="underline underline-offset-2"
+                        >
+                          {chunks}
+                        </Link>
+                      ),
+                    })}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
 
               <div className="flex items-center gap-2">
                 <Input