feat: Improve 2fa modals and change resend email to button

.changeset/thirty-beds-taste.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Improved the layout of the 2FA modals and changed the email 2FA resend email anchor to a button.

apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx

@@ -1,4 +1,4 @@
-import { Box, FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage';
+import { Box, FieldGroup, TextInput, Field, FieldLabel, FieldRow, FieldError, Button } from '@rocket.chat/fuselage';
 import { useAutoFocus, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ChangeEvent, SyntheticEvent } from 'react';
@@ -51,26 +51,27 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, emailOrUsername, invalidAttem
 			wrapperFunction={(props) => <Box is='form' onSubmit={onConfirmEmailCode} {...props} />}
 			onCancel={onClose}
 			confirmText={t('Verify')}
-			title={t('Two-factor_authentication_email')}
+			title={t('Enter_authentication_code')}
 			onClose={onClose}
 			variant='warning'
-			icon='info'
 			confirmDisabled={!code}
+			tagline={t('Email_two-factor_authentication')}
+			icon={null}
 		>
 			<FieldGroup>
 				<Field>
 					<FieldLabel alignSelf='stretch' htmlFor={id}>
-						{t('Verify_your_email_with_the_code_we_sent')}
+						{t('Enter_the_code_we_just_emailed_you')}
 					</FieldLabel>
 					<FieldRow>
-						<TextInput id={id} ref={ref} value={code} onChange={onChange} placeholder={t('Enter_authentication_code')} />
+						<TextInput id={id} ref={ref} value={code} onChange={onChange} placeholder={t('Enter_code_here')} />
 					</FieldRow>
 					{invalidAttempt && <FieldError>{t('Invalid_password')}</FieldError>}
 				</Field>
 			</FieldGroup>
-			<Box display='flex' justifyContent='end' is='a' onClick={onClickResendCode}>
+			<Button display='flex' justifyContent='end' onClick={onClickResendCode} small mbs={24}>
 				{t('Cloud_resend_email')}
-			</Box>
+			</Button>
 		</GenericModal>
 	);
 };

apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx

@@ -34,19 +34,20 @@ const TwoFactorTotpModal = ({ onConfirm, onClose, invalidAttempt }: TwoFactorTot
 			wrapperFunction={(props) => <Box is='form' onSubmit={onConfirmTotpCode} {...props} />}
 			onCancel={onClose}
 			confirmText={t('Verify')}
-			title={t('Two Factor Authentication')}
+			title={t('Enter_TOTP_password')}
 			onClose={onClose}
 			variant='warning'
-			icon='info'
 			confirmDisabled={!code}
+			tagline={t('Two-factor_authentication')}
+			icon={null}
 		>
 			<FieldGroup>
 				<Field>
 					<FieldLabel alignSelf='stretch' htmlFor={id}>
-						{t('Open_your_authentication_app_and_enter_the_code')}
+						{t('Enter_the_code_provided_by_your_authentication_app_to_continue')}
 					</FieldLabel>
 					<FieldRow>
-						<TextInput id={id} ref={ref} value={code} onChange={onChange} placeholder={t('Enter_authentication_code')}></TextInput>
+						<TextInput id={id} ref={ref} value={code} onChange={onChange} placeholder={t('Enter_code_here')}></TextInput>
 					</FieldRow>
 					{invalidAttempt && <FieldError>{t('Invalid_password')}</FieldError>}
 				</Field>

apps/meteor/client/views/account/security/TwoFactorTOTP.tsx

@@ -113,7 +113,7 @@ const TwoFactorTOTP = (props: ComponentProps<typeof Box>): ReactElement => {
 	return (
 		<Box display='flex' flexDirection='column' alignItems='flex-start' {...props}>
 			<Margins blockEnd={8}>
-				<Box fontScale='h4'>{t('Two-factor_authentication')}</Box>
+				<Box fontScale='h4'>{t('Two-factor_authentication_via_TOTP')}</Box>
 				{!totpEnabled && !registeringTotp && (
 					<>
 						<Box>{t('Two-factor_authentication_is_currently_disabled')}</Box>

apps/meteor/packages/rocketchat-i18n/i18n/af.i18n.json

@@ -1845,7 +1845,6 @@
   "Open_channel_user_search": "`%s` - Open kanaal / gebruikers soek",
   "Open_days_of_the_week": "Open Dae van die Week",
   "Open_Livechats": "Open Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Maak jou verifikasieprogram oop en voer die kode in. U kan ook een van u rugsteunkodes gebruik.",
   "Opened": "geopen",
   "Opened_in_a_new_window": "Geopen in 'n nuwe venster.",
   "Opens_a_channel_group_or_direct_message": "Maak 'n kanaal-, groep- of direkte boodskap oop",

apps/meteor/packages/rocketchat-i18n/i18n/ar.i18n.json

@@ -3213,7 +3213,6 @@
   "Open_Livechats": "دردشات جارية",
   "Open_menu": "Open_menu",
   "Open_thread": "فتح موضوع",
-  "Open_your_authentication_app_and_enter_the_code": "افتح تطبيق المصادقة الخاص بك وأدخل الرمز. يمكنك أيضًا استخدام أحد رموز النسخ الاحتياطي.",
   "Opened": "مفتوح",
   "Opened_in_a_new_window": "تم الفتح في نافذة جديدة",
   "Opens_a_channel_group_or_direct_message": "فتح قناة أو مجموعة أو رسالة مباشرة",
@@ -4537,7 +4536,6 @@
   "Verified": "تم التحقق",
   "Verify": "تحقق",
   "Verify_your_email": "تحقق من بريدك الإلكتروني",
-  "Verify_your_email_with_the_code_we_sent": "تحقق من بريدك الإلكتروني للحصول على الرمز الذي أرسلناه",
   "Version": "الإصدار",
   "Version_version": "الإصدار {{version}}",
   "Video_Chat_Window": "دردشة الفيديو",

apps/meteor/packages/rocketchat-i18n/i18n/az.i18n.json

@@ -1845,7 +1845,6 @@
   "Open_channel_user_search": "`%s` - Açıq Kanal / İstifadəçi axtarışı",
   "Open_days_of_the_week": "Həftənin Açıq Günləri",
   "Open_Livechats": "Açıq Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Doğrulama tətbiqini açın və kodu daxil edin. Ayrıca yedek kodlarınızdan birini də istifadə edə bilərsiniz.",
   "Opened": "Açıldı",
   "Opened_in_a_new_window": "Yeni bir pəncərədə açıldı.",
   "Opens_a_channel_group_or_direct_message": "Bir kanal, qrup və ya birbaşa mesajı açır",

apps/meteor/packages/rocketchat-i18n/i18n/be-BY.i18n.json

@@ -1861,7 +1861,6 @@
   "Open_channel_user_search": "`%s` - Open Channel / Пошук карыстальніка",
   "Open_days_of_the_week": "Адкрытыя Дні тыдня",
   "Open_Livechats": "адкрытыя Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Адкрыйце прыкладанне аўтэнтыфікацыі і ўвядзіце код. Вы таксама можаце выкарыстоўваць адзін з рэзервовых кодаў.",
   "Opened": "адкрыты",
   "Opened_in_a_new_window": "Адкрыты ў новым акне.",
   "Opens_a_channel_group_or_direct_message": "Адкрывае канал, групу ці прамое паведамленне",

apps/meteor/packages/rocketchat-i18n/i18n/bg.i18n.json

@@ -1842,7 +1842,6 @@
   "Open_channel_user_search": "`%s` - Отваряне на канал / Потребителско търсене",
   "Open_days_of_the_week": "Дни на отворените врати на седмицата",
   "Open_Livechats": "Отворете Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Отворете приложението си за удостоверяване и въведете кода. Можете също така да използвате един от резервните си кодове.",
   "Opened": "Отворен",
   "Opened_in_a_new_window": "Отваря се в нов прозорец.",
   "Opens_a_channel_group_or_direct_message": "Отваря канал, група или директно съобщение",

apps/meteor/packages/rocketchat-i18n/i18n/bs.i18n.json

@@ -1838,7 +1838,6 @@
   "Open_channel_user_search": "`%s` - Otvori kanal / Pretraživanje korisnika",
   "Open_days_of_the_week": "Otvoreni Dani u Tjednu",
   "Open_Livechats": "Otvori Livechat",
-  "Open_your_authentication_app_and_enter_the_code": "Otvorite aplikaciju za provjeru autentičnosti i unesite kôd. Možete upotrijebiti i jedan od vaših pričuvnih kodova.",
   "Opened": "Otvoreno",
   "Opened_in_a_new_window": "Otvoren u novom prozoru.",
   "Opens_a_channel_group_or_direct_message": "Otvori sobu, grupu ili direktnu poruku",

apps/meteor/packages/rocketchat-i18n/i18n/ca.i18n.json

@@ -3166,7 +3166,6 @@
   "Open_Livechats": "Xats en curs",
   "Open_menu": "Menú obert",
   "Open_thread": "Fil obert",
-  "Open_your_authentication_app_and_enter_the_code": "Obre l'app d'autenticació i entra el codi. També pots utilitzar un dels codis de recuperació.",
   "Opened": "Obert",
   "Opened_in_a_new_window": "Obert en una nova finestra.",
   "Opens_a_channel_group_or_direct_message": "Obrir un canal, grup o missatge directe",
@@ -4443,7 +4442,6 @@
   "Verified": "Verificat",
   "Verify": "Verifica",
   "Verify_your_email": "Verifica el teu correu electrònic",
-  "Verify_your_email_with_the_code_we_sent": "Verifiqui el seu correu electrònic per al codi que enviem",
   "Version": "Versió",
   "Version_version": "Version {{version}}",
   "Video_Chat_Window": "Vídeo-xat",

apps/meteor/packages/rocketchat-i18n/i18n/cs.i18n.json

@@ -2680,7 +2680,6 @@
   "Open_Days": "Otevřené dny",
   "Open_days_of_the_week": "Otevírací doba přes týden",
   "Open_Livechats": "Probíhající chaty",
-  "Open_your_authentication_app_and_enter_the_code": "Otevřete autentizační aplikaci a zadejte vygenerovaný kód. Můžete použít jeden ze svých záložních kódů.",
   "Opened": "Otevřený",
   "Opened_in_a_new_window": "Otevřeno v novém okně",
   "Opens_a_channel_group_or_direct_message": "Otevře místnost, skupinu nebo přímou zprávu",
@@ -3762,7 +3761,6 @@
   "Verified": "Ověřený",
   "Verify": "Ověřit",
   "Verify_your_email": "Ověřte svůj email",
-  "Verify_your_email_with_the_code_we_sent": "Zadejte kód z emailu",
   "Version": "Verze",
   "Version_version": "Verze {{version}}",
   "Video_Chat_Window": "Video chat",

apps/meteor/packages/rocketchat-i18n/i18n/cy.i18n.json

@@ -1840,7 +1840,6 @@
   "Open_channel_user_search": "`%s` - Sianel Agored / Chwiliad Defnyddwyr",
   "Open_days_of_the_week": "Diwrnodau Agored yr Wythnos",
   "Open_Livechats": "Agorwch Farchnata",
-  "Open_your_authentication_app_and_enter_the_code": "Agorwch eich app dilysu a nodwch y cod. Gallwch hefyd ddefnyddio un o'ch codau wrth gefn.",
   "Opened": "Agorwyd",
   "Opened_in_a_new_window": "Agorwyd mewn ffenestr newydd.",
   "Opens_a_channel_group_or_direct_message": "Yn agor sianel, grŵp neu neges uniongyrchol",

apps/meteor/packages/rocketchat-i18n/i18n/da.i18n.json

@@ -2689,7 +2689,6 @@
   "Open_Days": "Åbne dage",
   "Open_days_of_the_week": "Åbne dage i ugen",
   "Open_Livechats": "Åbn Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Åbn din autentificeringsapp og indtast koden. Du kan også bruge en af ​​dine backupkoder.",
   "Opened": "åbnede",
   "Opened_in_a_new_window": "Åbnet i et nyt vindue.",
   "Opens_a_channel_group_or_direct_message": "Åbner en kanal, gruppe eller direkte besked",
@@ -3779,7 +3778,6 @@
   "Verified": "Bekræftet",
   "Verify": "Verificere",
   "Verify_your_email": "Bekræft din e-mail",
-  "Verify_your_email_with_the_code_we_sent": "Bekræft din e-mail med den kode vi har tilsendt",
   "Version": "Version",
   "Version_version": "Version {{version}}",
   "Video_Chat_Window": "Videochat",

apps/meteor/packages/rocketchat-i18n/i18n/de-AT.i18n.json

@@ -1848,7 +1848,6 @@
   "Open_channel_user_search": "`%s` - Öffnen Sie Kanal / Benutzersuche",
   "Open_days_of_the_week": "Offene Tage der Woche",
   "Open_Livechats": "Öffnen Sie die Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Öffnen Sie Ihre Authentifizierungs-App und geben Sie den Code ein. Sie können auch einen Ihrer Ersatzcodes verwenden.",
   "Opened": "Geöffnet",
   "Opened_in_a_new_window": "In einem neuen Fenster geöffnet.",
   "Opens_a_channel_group_or_direct_message": "Eröffnet einen Kanal, eine Gruppe oder Direktnachrichten",

apps/meteor/packages/rocketchat-i18n/i18n/de-IN.i18n.json

@@ -2107,7 +2107,6 @@
   "Open_conversations": "Offene Konversationen",
   "Open_days_of_the_week": "Offene Wochentage",
   "Open_Livechats": "Offene Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Öffne Deine Authentifizierungs-App und gib den Code ein. Alternativ kannst Du auch einen Deiner Backup-Codes verwenden",
   "Opened": "Geöffnet",
   "Opened_in_a_new_window": "In einem neuem Fenster geöffnet",
   "Opens_a_channel_group_or_direct_message": "Öffnet einen Kanal, eine Gruppe oder Direktnachrichten",
@@ -3101,4 +3100,4 @@
   "Your_question": "Deine Frage",
   "Your_server_link": "Dein Server-Link",
   "Your_workspace_is_ready": "Dein Arbeitsbereich ist einsatzbereit 🎉"
-}
+}

apps/meteor/packages/rocketchat-i18n/i18n/de.i18n.json

@@ -3596,7 +3596,6 @@
   "Open_menu": "Menü_öffnen",
   "Open_settings": "Einstellungen öffnen",
   "Open_thread": "Thread öffnen",
-  "Open_your_authentication_app_and_enter_the_code": "Öffnen Sie Ihre Authentifizierungs-App und geben Sie den Code ein. Sie können auch einen Ihrer Backup-Codes verwenden",
   "Opened": "Geöffnet",
   "Opened_in_a_new_window": "In einem neuem Fenster geöffnet",
   "Opens_a_channel_group_or_direct_message": "Öffnet einen Channel, eine Gruppe oder Direktnachrichten",
@@ -5061,7 +5060,6 @@
   "Verified": "Überprüft",
   "Verify": "Überprüfen",
   "Verify_your_email": "Bestätigen Sie Ihre E-Mail",
-  "Verify_your_email_with_the_code_we_sent": "Prüfen Sie Ihre Mails auf den Code, den wir Ihnen eben geschickt haben.",
   "Version": "Version",
   "Version_version": "Version {{version}}",
   "App_version_incompatible_tooltip": "App nicht kompatibel mit Rocket.Chat-Version",

apps/meteor/packages/rocketchat-i18n/i18n/el.i18n.json

@@ -1853,7 +1853,6 @@
   "Open_channel_user_search": "`%s` - Ανοικτό κανάλι / Αναζήτηση χρηστών",
   "Open_days_of_the_week": "Ανοιχτές Ημέρες της Εβδομάδας",
   "Open_Livechats": "Άνοιγμα Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Ανοίξτε την εφαρμογή ελέγχου ταυτότητας και εισαγάγετε τον κωδικό. Μπορείτε επίσης να χρησιμοποιήσετε έναν από τους εφεδρικούς κωδικούς σας.",
   "Opened": "άνοιξε",
   "Opened_in_a_new_window": "Άνοιξε σε νέο παράθυρο.",
   "Opens_a_channel_group_or_direct_message": "Ανοίγει κανάλι, ομάδα ή άμεσο μήνυμα",

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1074,7 +1074,7 @@
   "Cloud_registration_required": "Registration Required",
   "Cloud_registration_required_description": "Looks like during setup you didn't chose to register your workspace.",
   "Cloud_registration_required_link_text": "Click here to register your workspace.",
-  "Cloud_resend_email": "Resend Email",
+  "Cloud_resend_email": "Resend email",
   "Cloud_Service_Agree_PrivacyTerms": "Cloud Service Privacy Terms Agreement",
   "Cloud_Service_Agree_PrivacyTerms_Description": "I agree with the [Terms](https://rocket.chat/terms) & [Privacy Policy](https://rocket.chat/privacy)",
   "Cloud_Service_Agree_PrivacyTerms_Login_Disabled_Warning": "You should accept the cloud privacy terms (Setup Wizard > Cloud Info > Cloud Service Privacy Terms Agreement) to connect to your cloud workspace",
@@ -1880,6 +1880,7 @@
   "Email_subject": "Email Subject",
   "Enterprise_License": "Enterprise License",
   "Enterprise_License_Description": "If your workspace is registered and license is provided by Rocket.Chat cloud you don't need to manually update the license here.",
+  "Email_two-factor_authentication": "Email two-factor authentication",
   "Email_verified": "Email verified",
   "Enterprise_Only": "Enterprise only",
   "Email_sent": "Email sent",
@@ -1940,10 +1941,13 @@
   "Enter_authentication_code": "Enter authentication code",
   "Enter_Behaviour": "Enter key Behaviour",
   "Enter_Behaviour_Description": "This changes if the enter key will send a message or do a line break",
+  "Enter_code_here": "Enter code here",
   "Enter_E2E_password": "Enter E2E password",
   "Enter_name_here": "Enter name here",
   "Enter_Normal": "Normal mode (send with Enter)",
+  "Enter_the_code_we_just_emailed_you": "Enter the code we just emailed you.",
   "Enter_to": "Enter to",
+  "Enter_TOTP_password": "Enter TOTP password",
   "Enter_your_E2E_password": "Enter your E2E password",
   "Enter_your_password_to_delete_your_account": "Enter your password to delete your account. This cannot be undone.",
   "Enter_your_username_to_delete_your_account": "Enter your username to delete your account. This cannot be undone.",
@@ -3947,7 +3951,7 @@
   "Open_settings": "Open settings",
   "Open-source_conference_call_solution": "Open-source conference call solution.",
   "Open_thread": "Open Thread",
-  "Open_your_authentication_app_and_enter_the_code": "Open your authentication app and enter the code. You can also use one of your backup codes.",
+  "Enter_the_code_provided_by_your_authentication_app_to_continue": "Enter the code provided by your authentication app to continue. You can also use one of your backup codes.",
   "Opened": "Opened",
   "Opened_in_a_new_window": "Opened in a new window.",
   "Opens_a_channel_group_or_direct_message": "Opens a channel, group or direct message",
@@ -5318,9 +5322,10 @@
   "Turn_off_answer_calls": "Turn off answer calls",
   "Turn_off_video": "Turn off video",
   "Two Factor Authentication": "Two Factor Authentication",
-  "Two-factor_authentication": "Two-factor authentication via TOTP",
+  "Two-factor_authentication": "Two-factor authentication",
+  "Two-factor_authentication_via_TOTP": "Two-factor authentication via TOTP",
   "Two-factor_authentication_disabled": "Two-factor authentication disabled",
-  "Two-factor_authentication_email": "Two-factor authentication via Email",
+  "Two-factor_authentication_email": "Two-factor authentication via email",
   "Two-factor_authentication_email_is_currently_disabled": "Two-factor authentication via Email is currently disabled",
   "Two-factor_authentication_enabled": "Two-factor authentication enabled",
   "Two-factor_authentication_is_currently_disabled": "Two-factor authentication via TOTP is currently disabled",
@@ -5572,7 +5577,6 @@
   "Verified": "Verified",
   "Verify": "Verify",
   "Verify_your_email": "Verify your email",
-  "Verify_your_email_with_the_code_we_sent": "Verify your email with the code we sent",
   "Version": "Version",
   "Version_version": "Version {{version}}",
   "App_Request_Admin_Message": "Hi {{admin_name}}, {{user_name}} submitted a request to install {{app_name}} app on this workspace.  \n  \n This is the message they included:  \n>{{message}}  \n  \n To learn more and install the {{app_name}} app, [click here]({{learn_more}}).",

apps/meteor/packages/rocketchat-i18n/i18n/eo.i18n.json

@@ -1845,7 +1845,6 @@
   "Open_channel_user_search": "`%s` - Malferma Kanalo / Uzanto-serĉo",
   "Open_days_of_the_week": "Malfermaj Tagoj de la Semajno",
   "Open_Livechats": "Malfermu Livechats",
-  "Open_your_authentication_app_and_enter_the_code": "Malfermu vian aŭtentigan aperon kaj eniru la kodon. Vi ankaŭ povas uzi unu el viaj kopiaj kodoj.",
   "Opened": "Malfermita",
   "Opened_in_a_new_window": "Malfermita en nova fenestro.",
   "Opens_a_channel_group_or_direct_message": "Malfermas kanalon, grupon aŭ rektan mesaĝon",