feat(a11y): inline error TwoFactorModal (#6448)

OtavioStasiak · web-flow · commit 3cd133f5d187 · 2025-08-20T18:59:38.000-03:00
* fix: TOTP message always false

* feat: inline errors TwoFactor modal

* fix: a11y announcement on setData

* fix: i18n
diff --git a/app/containers/TwoFactor/index.tsx b/app/containers/TwoFactor/index.tsx
@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { InteractionManager, Text, View } from 'react-native';
+import { AccessibilityInfo, Text, View } from 'react-native';
 import isEmpty from 'lodash/isEmpty';
 import { sha256 } from 'js-sha256';
 import Modal from 'react-native-modal';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
-import { FormTextInput } from '../TextInput';
+import { ControlledFormTextInput } from '../TextInput';
 import I18n from '../../i18n';
 import EventEmitter from '../../lib/methods/helpers/events';
 import { useTheme } from '../../theme';
@@ -59,13 +62,27 @@ const methods: IMethods = {
 };
 
 const TwoFactor = React.memo(() => {
+	const schema = yup.object().shape({
+		code: yup.string().required(I18n.t('Code_required'))
+	});
 	const { colors } = useTheme();
 	const { isMasterDetail } = useAppSelector(state => ({
 		isMasterDetail: state.app.isMasterDetail as boolean
 	}));
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<EventListenerMethod>({});
-	const [code, setCode] = useState<string>('');
+	const {
+		control,
+		setValue,
+		getValues,
+		formState: { errors },
+		setError
+	} = useForm({
+		defaultValues: {
+			code: ''
+		},
+		resolver: yupResolver(schema)
+	});
 
 	const method = data.method ? methods[data.method] : null;
 	const isEmail = data.method === 'email';
@@ -86,7 +103,7 @@ const TwoFactor = React.memo(() => {
 
 	useDeepCompareEffect(() => {
 		if (!isEmpty(data)) {
-			setCode('');
+			setValue('code', '');
 			setVisible(true);
 		} else {
 			setVisible(false);
@@ -95,6 +112,10 @@ const TwoFactor = React.memo(() => {
 
 	const showTwoFactor = (args: EventListenerMethod) => {
 		setData(args);
+		if (args.invalid) {
+			setError('code', { message: I18n.t('Invalid_code'), type: 'validate' });
+			AccessibilityInfo.announceForAccessibility(I18n.t('Invalid_code'));
+		}
 	};
 
 	useEffect(() => {
@@ -114,6 +135,7 @@ const TwoFactor = React.memo(() => {
 	const onSubmit = () => {
 		const { submit } = data;
 		if (submit) {
+			const { code } = getValues();
 			if (data.method === 'password') {
 				submit(sha256(code));
 			} else {
@@ -140,22 +162,20 @@ const TwoFactor = React.memo(() => {
 					]}>
 					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
 					{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
-					<FormTextInput
+					<ControlledFormTextInput
+						name='code'
+						control={control}
+						autoFocus
 						returnKeyType='send'
 						autoCapitalize='none'
 						testID='two-factor-input'
 						accessibilityLabel={I18n.t(
 							data?.method === 'password' ? 'Label_Input_Two_Factor_Password' : 'Label_Input_Two_Factor_Code'
 						)}
-						value={code}
-						inputRef={(e: any) => {
-							InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus());
-						}}
-						onChangeText={setCode}
 						onSubmitEditing={onSubmit}
 						keyboardType={method?.keyboardType}
 						secureTextEntry={method?.secureTextEntry}
-						error={data.invalid ? { error: 'totp-invalid', reason: I18n.t('Code_or_password_invalid') } : undefined}
+						error={errors.code?.message}
 						containerStyle={styles.containerInput}
 					/>
 
diff --git a/app/i18n/locales/ar.json b/app/i18n/locales/ar.json
@@ -89,6 +89,7 @@
   "Click_to_join": "انقر للانضمام!",
   "Close": "إغلاق",
   "Code_or_password_invalid": "الرمز أو كلمة المرور خاطئة",
+  "Code_required": "الكود مطلوب",
   "Collaborative": "تعاونية",
   "Confirm": "تأكيد",
   "Confirm_Password": "تأكيد كلمة المرور",
@@ -225,6 +226,7 @@
   "In_App_And_Desktop": "تطبيق داخلي وسطح المكتب",
   "In_App_and_Desktop_Alert_info": "يعرض شعاراً أعلى الشاشة عندما يكون التطبيق مفتوحًا، ويعرض إشعاراً على سطح المكتب",
   "Insert_Join_Code": "ضع رمز الانضمام",
+  "Invalid_code": "رمز غير صالح",
   "Invalid_or_expired_invite_token": "رمز الدعوة غير صالح أو منتهي الصلاحية",
   "Invalid_server_version": "الخادم الذي تحاول الاتصال به يستخدم إصدارا لم يعد مدعوماً: {{currentVersion}}.\n\n النسخ المدعومة تبدأ من {{minVersion}}",
   "Invalid_URL": "عنوان URL غير صالح",
diff --git a/app/i18n/locales/bn-IN.json b/app/i18n/locales/bn-IN.json
@@ -138,6 +138,7 @@
   "Close": "বন্ধ করুন",
   "Close_Chat": "চ্যাট বন্ধ করুন",
   "Code_or_password_invalid": "কোড বা পাসওয়ার্ড অবৈধ",
+  "Code_required": "কোড প্রয়োজন",
   "Collaborative": "সহযোগী",
   "Condensed": "সংকোচিত",
   "conference_call": "কনফারেন্স কল",
@@ -342,6 +343,7 @@
   "Incoming_call_from": "হোস্ট হতে ইনকামিং কল",
   "insert_Avatar_URL": "এখানে চিত্র URL প্রবেশ করুন",
   "Insert_Join_Code": "যোগদান কোড প্রবেশ করুন",
+  "Invalid_code": "অবৈধ কোড",
   "Invalid_or_expired_invite_token": "অকার্যকর বা মেয়াদ উত্তীর্ণ ইনভাইট টোকেন",
   "Invalid_server_version": "আপনি যাচাই করতে চেষ্টা করছেন তার একটি সংস্করণ ব্যবহার করছেন যা এখনও অ্যাপ দ্বারা সাপোর্ট করা হয়নি: {{currentVersion}}।\n\nআমরা সংস্করণ {{minVersion}} প্রয়োজন প্রয়োজন",
   "Invalid_URL": "অবৈধ URL",
diff --git a/app/i18n/locales/cs.json b/app/i18n/locales/cs.json
@@ -146,6 +146,7 @@
   "Close_Chat": "Zavřít chat",
   "Code_block": "Blok kódu",
   "Code_or_password_invalid": "Neplatný kód nebo heslo",
+  "Code_required": "Potřebný kód",
   "Collaborative": "Spolupráce",
   "Community_edition_push_quota": "Komunitní push kvóta",
   "Condensed": "Zhuštěný",
@@ -365,6 +366,7 @@
   "Inline_code": "Vložený kód",
   "insert_Avatar_URL": "sem vložte adresu URL obrázku",
   "Insert_Join_Code": "Vložte připojovací kód",
+  "Invalid_code": "Neplatný kód",
   "Invalid_Email": "Neplatný e-mail",
   "Invalid_or_expired_invite_token": "Neplatný nebo vypršela platnost tokenu pozvánky",
   "Invalid_server_version": "Pracovní prostor, který se pokoušíte připojit, používá verzi, která již není aplikací podporována: {{currentVersion}}.\n\nPožadujeme verzi {{minVersion}}",
diff --git a/app/i18n/locales/de.json b/app/i18n/locales/de.json
@@ -133,6 +133,7 @@
   "Close": "Schließen",
   "Close_Chat": "Chat schließen",
   "Code_or_password_invalid": "Code oder Passwort sind falsch",
+  "Code_required": "Code erforderlich",
   "Collaborative": "Kollaborativ",
   "Condensed": "Komprimiert",
   "Confirm": "Bestätigen",
@@ -335,6 +336,7 @@
   "Incoming_call_from": "Eingehender Anruf von",
   "insert_Avatar_URL": "Bild-URL hier einfügen",
   "Insert_Join_Code": "Beitrittscode eingeben",
+  "Invalid_code": "Ungültiger Code",
   "Invalid_or_expired_invite_token": "Ungültiger oder abgelaufener Einladungscode",
   "Invalid_server_version": "Der Server, mit dem Sie sich verbinden möchten, verwendet eine Version, die von der App nicht mehr unterstützt wird: {{currentVersion}}.\n\nWir benötigen Version {{minVersion}}.",
   "Invalid_URL": "Ungültige URL",
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
@@ -148,6 +148,7 @@
   "Close_Chat": "Close chat",
   "Code_block": "Code block",
   "Code_or_password_invalid": "Code or password invalid",
+  "Code_required": "Code required",
   "Collaborative": "Collaborative",
   "Community_edition_push_quota": "Community push quota",
   "Condensed": "Condensed",
@@ -386,6 +387,7 @@
   "Inline_code": "Inline code",
   "insert_Avatar_URL": "insert image URL here",
   "Insert_Join_Code": "Insert join code",
+  "Invalid_code": "Invalid code",
   "Invalid_Email": "Invalid email",
   "Invalid_or_expired_invite_token": "Invalid or expired invite token",
   "Invalid_server_version": "The workspace you're trying to connect is using a version that's not supported by the app anymore: {{currentVersion}}.\n\nWe require version {{minVersion}}",
diff --git a/app/i18n/locales/es.json b/app/i18n/locales/es.json
@@ -73,6 +73,7 @@
   "Choose_from_library": "Seleccionar desde galería",
   "Click_to_join": "¡Unirme!",
   "Close": "Cerrar",
+  "Code_required": "Código requerido",
   "Collaborative": "Colaborativo",
   "Confirm": "Confirmar",
   "Confirm_Password": "confirmar Contraseña",
@@ -169,6 +170,7 @@
   "Hide_room": "Ocultar",
   "In_App_And_Desktop": "En la aplicación y en el escritorio",
   "In_App_and_Desktop_Alert_info": "Muestra un banner en la parte superior de la pantalla cuando la aplicación esté abierta y muestra una notificación en el escritorio",
+  "Invalid_code": "Código inválido",
   "Invalid_server_version": "El servidor que intentas conectar está usando una versión que ya no está soportada por la aplicación : {{currentVersion}}. Se requiere una versión {{minVersion}}.",
   "Invalid_URL": "URL no válida",
   "Invalid_workspace_URL": "URL del espacio de trabajo no válida",
diff --git a/app/i18n/locales/fi.json b/app/i18n/locales/fi.json
@@ -123,6 +123,7 @@
   "Close": "Sulje",
   "Close_Chat": "Sulje keskustelu",
   "Code_or_password_invalid": "Koodi tai salasana virheellinen",
+  "Code_required": "Koodi vaaditaan",
   "Collaborative": "Yhteistyö",
   "Condensed": "Tiivistetty",
   "Confirm": "Vahvista",
@@ -317,6 +318,7 @@
   "In_App_And_Desktop": "Sovelluksessa ja työpöydällä",
   "In_App_and_Desktop_Alert_info": "Näyttää bannerin näytön yläreunassa, kun sovellus on avoinna, ja näyttää ilmoituksen työpöydällä",
   "Insert_Join_Code": "Lisää liittymiskoodi",
+  "Invalid_code": "Virheellinen koodi",
   "Invalid_or_expired_invite_token": "Virheellinen tai vanhentunut kutsutunnus",
   "Invalid_server_version": "Palvelin, johon yrität muodostaa yhteyttä, käyttää versiota, jota sovellus ei enää tue: {{currentVersion}}.\n\nEdellytämme versiota {{minVersion}}",
   "Invalid_URL": "Virheellinen URL-osoite.",
diff --git a/app/i18n/locales/fr.json b/app/i18n/locales/fr.json
@@ -101,6 +101,7 @@
   "Click_to_join": "Cliquez pour rejoindre !",
   "Close": "Fermer",
   "Code_or_password_invalid": "Code ou mot de passe invalide",
+  "Code_required": "Code requis",
   "Collaborative": "Collaboratif",
   "Condensed": "Condensé",
   "Confirm": "Confirmer",
@@ -282,6 +283,7 @@
   "In_App_And_Desktop": "Dans l'application et sur le bureau",
   "In_App_and_Desktop_Alert_info": "Affiche une bannière en haut de l'écran lorsque l'application est ouverte et affiche une notification sur le bureau",
   "Insert_Join_Code": "Insérer le code d'adhésion",
+  "Invalid_code": "Code invalide",
   "Invalid_or_expired_invite_token": "Jeton d'invitation non valide ou expiré",
   "Invalid_server_version": "Le serveur auquel vous essayez de vous connecter utilise une version qui n'est plus prise en charge par l'application : {{currentVersion}}.\n\nNous exigeons la version {{minVersion}}",
   "Invalid_URL": "URL invalide",
diff --git a/app/i18n/locales/hi-IN.json b/app/i18n/locales/hi-IN.json
@@ -138,6 +138,7 @@
   "Close": "बंद करें",
   "Close_Chat": "चैट बंद करें",
   "Code_or_password_invalid": "कोड या पासवर्ड अमान्य है",
+  "Code_required": "कोड आवश्यक है।",
   "Collaborative": "सहयोगी",
   "Condensed": "संक्षेपित",
   "conference_call": "कॉन्फ़्रेंस कॉल",
@@ -342,6 +343,7 @@
   "Incoming_call_from": "की ओर से आई कॉल",
   "insert_Avatar_URL": "यहां छवि URL डालें",
   "Insert_Join_Code": "सामिल होने का कोड डालें",
+  "Invalid_code": "अमान्य कोड",
   "Invalid_or_expired_invite_token": "अमान्य या समाप्त होने वाला निमंत्रण टोकन",
   "Invalid_server_version": "यह कार्यस्थान जिससे आप कनेक्ट करने का प्रयास कर रहे हैं, वह ऐप द्वारा अब समर्थित नहीं है: {{currentVersion}}।\n\nहमें {{minVersion}} संस्करण की आवश्यकता है",
   "Invalid_URL": "अमान्य URL",
diff --git a/app/i18n/locales/hu.json b/app/i18n/locales/hu.json
@@ -138,6 +138,7 @@
   "Close": "Bezár",
   "Close_Chat": "Csevegés lezárása",
   "Code_or_password_invalid": "A kód vagy a jelszó érvénytelen",
+  "Code_required": "Kód szükséges.",
   "Collaborative": "Együttműködés",
   "Condensed": "Rövidített",
   "conference_call": "Konferenciahívás",
@@ -342,6 +343,7 @@
   "Incoming_call_from": "Bejövő hívás innen:",
   "insert_Avatar_URL": "kép URL beillesztése ide",
   "Insert_Join_Code": "Csatlakozási kód beillesztése",
+  "Invalid_code": "Érvénytelen kód",
   "Invalid_or_expired_invite_token": "Érvénytelen vagy lejárt meghívási token",
   "Invalid_server_version": "A munkaterület, amelyhez csatlakozni próbál, olyan verziót használ, amelyet az alkalmazás már nem támogat: {{currentVersion}}. \n\nA {{minVersion}} verzióra van szükségünk",
   "Invalid_URL": "Érvénytelen URL-cím",
diff --git a/app/i18n/locales/it.json b/app/i18n/locales/it.json
@@ -95,6 +95,7 @@
   "Click_to_join": "Clicca per unirti!",
   "Close": "Chiudi",
   "Code_or_password_invalid": "Codice o password non validi",
+  "Code_required": "Codice richiesto",
   "Collaborative": "Collaborativo",
   "Confirm": "Conferma",
   "Confirm_Password": "Conferma password",
@@ -254,6 +255,7 @@
   "In_App_And_Desktop": "In-app e Desktop",
   "In_App_and_Desktop_Alert_info": "Mostra una notifica in cima allo schermo quando l'app è aperta, e mostra una notifica sul desktop",
   "Insert_Join_Code": "Inserisci il codice d'accesso",
+  "Invalid_code": "Codice non valido",
   "Invalid_or_expired_invite_token": "Token di invito non valido o scaduto",
   "Invalid_server_version": "Il server a cui stai cercando di connetterti sta utilizzando una versione non più supportata dall'app: {{currentVersion}}.\n\nVersione minima richiesta: {{minVersion}}",
   "Invalid_URL": "URL non valida",
diff --git a/app/i18n/locales/ja.json b/app/i18n/locales/ja.json
@@ -88,6 +88,7 @@
   "Click_to_join": "クリックして参加！",
   "Close": "閉じる",
   "Code_or_password_invalid": "無効なコードまたはパスワード",
+  "Code_required": "コードが必要です。",
   "Collaborative": "コラボ",
   "Confirm": "承認",
   "Confirm_Password": "パスワードを認証する",
@@ -226,6 +227,7 @@
   "In_App_And_Desktop": "アプリ内とデスクトップ",
   "In_App_and_Desktop_Alert_info": "アプリを表示中にはバナーを上部に表示し、デスクトップには通知を送ります。",
   "Insert_Join_Code": "参加コードを挿入する",
+  "Invalid_code": "無効なコード",
   "Invalid_or_expired_invite_token": "招待トークンが無効か、期限が切れています",
   "Invalid_server_version": "接続しようとしているサーバーのバージョン（{{currentVersion}}）はサポートされていません。\n\nサポートする最低バージョンは {{minVersion}} です",
   "Invalid_URL": "無効なURL",
diff --git a/app/i18n/locales/nl.json b/app/i18n/locales/nl.json
@@ -101,6 +101,7 @@
   "Click_to_join": "Klik om mee te doen!",
   "Close": "Sluiten",
   "Code_or_password_invalid": "Code of wachtwoord ongeldig",
+  "Code_required": "Code vereist",
   "Collaborative": "Samenwerkend",
   "Condensed": "Gecondenseerd",
   "Confirm": "Bevestig",
@@ -282,6 +283,7 @@
   "In_App_And_Desktop": "In-app en desktop",
   "In_App_and_Desktop_Alert_info": "Geeft een banner boven aan het scherm weer wanneer de app geopend is, en geeft een melding op desktop weer",
   "Insert_Join_Code": "Deelnamecode invoegen",
+  "Invalid_code": "Ongeldige code",
   "Invalid_or_expired_invite_token": "Ongeldige of verlopen uitnodigingstoken",
   "Invalid_server_version": "De server waarmee je probeert te verbinden, gebruikt een versie die niet meer door de app wordt ondersteund: {{currentVersion}}.\n\nWe hebben versie {{minVersion}} nodig",
   "Invalid_URL": "Ongeldige URL",
diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json
@@ -145,6 +145,7 @@
   "Close": "Fechar",
   "Close_Chat": "Fechar conversa",
   "Code_or_password_invalid": "Código ou senha inválido",
+  "Code_required": "Código necessário",
   "Collaborative": "Colaborativo",
   "Community_edition_push_quota": "Cota de notificações push community edition",
   "Condensed": "Condensado",
@@ -375,6 +376,7 @@
   "Incoming_call_from": "Chamada recebida de",
   "insert_Avatar_URL": "insira o URL da imagem aqui",
   "Insert_Join_Code": "Insira o código para entrar na sala",
+  "Invalid_code": "Código inválido",
   "Invalid_Email": "E-mail inválido",
   "Invalid_or_expired_invite_token": "Token de convite inválido ou vencido",
   "Invalid_server_version": "O servidor que você está conectando não é suportado mais por esta versão do aplicativo: {{currentVersion}}.\n\nEsta versão do aplicativo requer a versão {{minVersion}} da workspace para funcionar corretamente.",
diff --git a/app/i18n/locales/pt-PT.json b/app/i18n/locales/pt-PT.json
@@ -85,6 +85,7 @@
   "Click_to_join": "Clique para Entrar!",
   "Close": "Fechar",
   "Code_or_password_invalid": "Código ou senha inválidos",
+  "Code_required": "Código necessário",
   "Collaborative": "Colaborativa",
   "Confirm": "Confirmar",
   "Confirm_Password": "Confirme sua senha",
@@ -221,6 +222,7 @@
   "In_App_And_Desktop": "Na aplicação e área de trabalho",
   "In_App_and_Desktop_Alert_info": "Exibe um banner no topo da tela quando a aplicação está aberto, e exibe uma notificação na área de trabalho",
   "Insert_Join_Code": "Insira o código de entrada",
+  "Invalid_code": "Código inválido",
   "Invalid_or_expired_invite_token": "Token de convite invalido ou expirado",
   "Invalid_server_version": "O servidor ao qual esta tentando ligar-se, utiliza uma versão que não é suporta pela aplicação: {{currentVersion}}.\n\nA versão mínima requerida é {{minVersion}}",
   "Invalid_URL": "URL inválido",
diff --git a/app/i18n/locales/ru.json b/app/i18n/locales/ru.json
@@ -119,6 +119,7 @@
   "Close": "Закрыть",
   "Close_Chat": "Закрыть чат",
   "Code_or_password_invalid": "Код или пароль не верны",
+  "Code_required": "Требуется код",
   "Collaborative": "Совместный",
   "Condensed": "Упрощенный",
   "Confirm": "Подтверждение",
@@ -307,6 +308,7 @@
   "In_App_And_Desktop": "В приложении и на десктопе",
   "In_App_and_Desktop_Alert_info": "Отображает баннер в верхней части экрана, когда приложение открыто, и отображает уведомление на рабочем столе.",
   "Insert_Join_Code": "Вставить код присоединения",
+  "Invalid_code": "Недействительный код",
   "Invalid_or_expired_invite_token": "Токен приглашения не действителен или с истекшим сроком действия",
   "Invalid_server_version": "Сервер, к которому вы пытаетесь подключиться, использует версию, которая больше не поддерживается приложением: {{currentVersion}}.\n\nНам нужна версия {{minVersion}}",
   "Invalid_URL": "Недействительный URL",
diff --git a/app/i18n/locales/sl-SI.json b/app/i18n/locales/sl-SI.json
@@ -106,6 +106,7 @@
   "Close": "Zapri",
   "Close_Chat": "Zaprite klepet",
   "Code_or_password_invalid": "Koda ali geslo ni veljavno",
+  "Code_required": "Potreben je koda",
   "Collaborative": "Sodelovanje",
   "Condensed": "Kondenzirano",
   "Confirm": "Potrdite",
@@ -292,6 +293,7 @@
   "In_App_And_Desktop": "V aplikaciji in namizju",
   "In_App_and_Desktop_Alert_info": "Ko je aplikacija odprta, prikaže pasico na vrhu zaslona in prikaže obvestilo na namizju",
   "Insert_Join_Code": "Vstavite kodo za pridružitev",
+  "Invalid_code": "Neveljavna koda",
   "Invalid_or_expired_invite_token": "Neveljaven ali iztekel žeton povabila",
   "Invalid_server_version": "Strežnik, ki ga poskušate povezati, uporablja različico, ki je aplikacija ne podpira več: {{currentVersion}}.\n\nZahtevamo različico {{minVersion}}",
   "Invalid_URL": "Neveljaven URL",
diff --git a/app/i18n/locales/sv.json b/app/i18n/locales/sv.json
diff --git a/app/i18n/locales/ta-IN.json b/app/i18n/locales/ta-IN.json
diff --git a/app/i18n/locales/te-IN.json b/app/i18n/locales/te-IN.json
diff --git a/app/i18n/locales/tr.json b/app/i18n/locales/tr.json
diff --git a/app/i18n/locales/zh-CN.json b/app/i18n/locales/zh-CN.json
diff --git a/app/i18n/locales/zh-TW.json b/app/i18n/locales/zh-TW.json
diff --git a/app/lib/services/connect.ts b/app/lib/services/connect.ts
