From 898631f0bd4fe956e0db353c748f08622272287d Mon Sep 17 00:00:00 2001 From: secondl1ght <85003930+secondl1ght@users.noreply.github.com> Date: Sun, 6 Oct 2024 20:46:12 -0600 Subject: [PATCH] feat: add tooltip about security info to signup form (#88) --- messages/en.json | 1 + messages/es.json | 1 + src/app/layout.tsx | 19 +- src/components/form/SignUpForm.tsx | 29 +- src/components/layout/AppLayout.tsx | 455 ++++++++++++++-------------- src/utils/routes.ts | 1 + 6 files changed, 267 insertions(+), 239 deletions(-) diff --git a/messages/en.json b/messages/en.json index 6edaba88..936247ff 100644 --- a/messages/en.json +++ b/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 more about BancoLibre security practices.", "set": "Set a password", "submit": "Create Account" }, diff --git a/messages/es.json b/messages/es.json index 0d3b574d..fcfaf618 100644 --- a/messages/es.json +++ b/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. Aprende más sobre las practicas de seguridad de BancoLibre.", "set": "Crea una contraseña", "submit": "Crea una cuenta" }, diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9fdc9e04..6e2172a5 100644 --- a/src/app/layout.tsx +++ b/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 > - - {children} - - + + + {children} + + + diff --git a/src/components/form/SignUpForm.tsx b/src/components/form/SignUpForm.tsx index d7ba0d7c..5342c21d 100644 --- a/src/components/form/SignUpForm.tsx +++ b/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() {
- +
+ + + + + + + + + {s.rich('security', { + learn: chunks => ( + + {chunks} + + ), + })} + + +
= ({ children }) => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); return ( - -
- +
+
+ + + + + + + + + - +
- - - Settings - - - - - - - Help - - - - - -
-
- - - - - - - - - -
- - - -
- - + +
+ + -
-

BancoLibre

+
+

BancoLibre

- - Beta - Limit funds and use at your own risk. - -
+ + Beta - Limit funds and use at your own risk. + +
-
- - - -
+
+ + + +
- - - - - -
- - -
- -
+ + + + + +
+ + +
+
- - -
+
+ + + - - Beta - Limit funds and use at your own risk. - + + Beta - Limit funds and use at your own risk. + -
{children}
-
+
{children}
- +
); }; diff --git a/src/utils/routes.ts b/src/utils/routes.ts index b43500ec..58fcc265 100644 --- a/src/utils/routes.ts +++ b/src/utils/routes.ts @@ -37,6 +37,7 @@ export const ROUTES = { faq: '/docs#faq', privacyPolicy: '/docs/legal/privacy-policy', termsOfService: '/docs/legal/terms-of-service', + security: '/docs/security', }, external: { github: 'https://github.com/AmbossTech/amboss-banco',