chore(a11y): TwoFactor

app/containers/Button/index.tsx

@@ -38,6 +38,11 @@ const styles = StyleSheet.create({
 		...sharedStyles.textMedium,
 		...sharedStyles.textAlignCenter
 	},
+	smallText: {
+		...sharedStyles.textBold,
+		fontSize: 12,
+		lineHeight: 18
+	},
 	disabled: {
 		opacity: 0.3
 	}
@@ -75,7 +80,11 @@ const Button: React.FC<IButtonProps> = ({
 		style
 	];
 
-	const textStyle = [styles.text, { color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, fontSize }, styleText];
+	const textStyle = [
+		small ? styles.smallText : styles.text,
+		{ color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, fontSize },
+		styleText
+	];
 
 	return (
 		<Touchable

app/containers/TextInput/FormTextInput.tsx

@@ -100,7 +100,7 @@ export const FormTextInput = ({
 	return (
 		<View
 			accessible
-			accessibilityLabel={`${label} - ${required ? i18n.t('Required') : ''}`}
+			accessibilityLabel={accessibilityLabel ?? `${label} - ${required ? i18n.t('Required') : ''}`}
 			style={[styles.inputContainer, containerStyle]}>
 			{label ? (
 				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>

app/containers/TwoFactor/index.tsx

@@ -4,18 +4,16 @@ import isEmpty from 'lodash/isEmpty';
 import { sha256 } from 'js-sha256';
 import Modal from 'react-native-modal';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { connect } from 'react-redux';
 
 import { FormTextInput } from '../TextInput';
 import I18n from '../../i18n';
 import EventEmitter from '../../lib/methods/helpers/events';
 import { useTheme } from '../../theme';
-import { themes } from '../../lib/constants';
 import Button from '../Button';
 import sharedStyles from '../../views/Styles';
 import styles from './styles';
-import { IApplicationState } from '../../definitions';
 import { Services } from '../../lib/services';
+import { useAppSelector } from '../../lib/hooks';
 
 export const TWO_FACTOR = 'TWO_FACTOR';
 
@@ -55,8 +53,11 @@ const methods: IMethods = {
 	}
 };
 
-const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) => {
-	const { theme } = useTheme();
+const TwoFactor = React.memo(() => {
+	const { isMasterDetail } = useAppSelector(state => ({
+		isMasterDetail: state.app.isMasterDetail
+	}));
+	const { colors } = useTheme();
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<EventListenerMethod>({});
 	const [code, setCode] = useState<string>('');
@@ -74,7 +75,9 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 		}
 	}, [data]);
 
-	const showTwoFactor = (args: EventListenerMethod) => setData(args);
+	const showTwoFactor = (args: EventListenerMethod) => {
+		setData(args);
+	};
 
 	useEffect(() => {
 		const listener = EventEmitter.addEventListener(TWO_FACTOR, showTwoFactor);
@@ -102,34 +105,48 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 		setData({});
 	};
 
-	const color = themes[theme].fontTitlesLabels;
+	const color = colors.fontTitlesLabels;
 	return (
-		<Modal avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
+		<Modal
+			customBackdrop={<View aria-hidden style={[styles.overlay, { backgroundColor: colors.overlayBackground }]} />}
+			avoidKeyboard
+			useNativeDriver
+			isVisible={visible}
+			hideModalContentWhileAnimating>
 			<View style={styles.container} testID='two-factor'>
 				<View
 					style={[
 						styles.content,
 						isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
-						{ backgroundColor: themes[theme].surfaceTint }
+						{ backgroundColor: colors.surfaceTint }
 					]}>
 					<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
-						value={code}
-						inputRef={(e: any) => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}
 						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}
-						testID='two-factor-input'
+						containerStyle={styles.containerInput}
 					/>
+
 					{isEmail ? (
-						<Text style={[styles.sendEmail, { color }]} onPress={sendEmail}>
-							{I18n.t('Resend_email')}
-						</Text>
+						<Button
+							small
+							title={I18n.t('Resend_email')}
+							style={[styles.button, { marginTop: 12 }]}
+							type='secondary'
+							onPress={sendEmail}
+						/>
 					) : null}
 					<View style={styles.buttonContainer}>
 						<Button title={I18n.t('Cancel')} type='secondary' style={styles.button} onPress={onCancel} />
@@ -141,8 +158,4 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 	);
 });
 
-const mapStateToProps = (state: IApplicationState) => ({
-	isMasterDetail: state.app.isMasterDetail
-});
-
-export default connect(mapStateToProps)(TwoFactor);
+export default TwoFactor;

app/containers/TwoFactor/styles.ts

@@ -6,7 +6,7 @@ export default StyleSheet.create({
 	container: {
 		flex: 1,
 		justifyContent: 'center',
-		alignItems: 'center'
+		padding: 16
 	},
 	content: {
 		padding: 16,
@@ -15,13 +15,14 @@ export default StyleSheet.create({
 	},
 	title: {
 		fontSize: 16,
-		paddingBottom: 8,
+		lineHeight: 24,
+		marginBottom: 12,
 		...sharedStyles.textBold,
 		...sharedStyles.textAlignCenter
 	},
 	subtitle: {
 		fontSize: 14,
-		paddingBottom: 8,
+		marginBottom: 12,
 		...sharedStyles.textRegular,
 		...sharedStyles.textAlignCenter
 	},
@@ -37,9 +38,18 @@ export default StyleSheet.create({
 	},
 	buttonContainer: {
 		flexDirection: 'row',
-		justifyContent: 'space-between'
+		justifyContent: 'space-between',
+		marginTop: 36
 	},
 	tablet: {
 		height: undefined
+	},
+	overlay: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	containerInput: {
+		marginBottom: 0
 	}
 });

app/i18n/locales/ar.json

@@ -159,7 +159,7 @@
   "Files": "ملفات",
   "Finish_recording": "إنهاء التسجيل",
   "Following_thread": "متابعة الموضوع",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "من أجل حمايتك، يجب عليك إدخال كلمة المرور الحالية للمتابعة",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "لأمانك، يجب عليك إدخال كلمة مرور حسابك للمتابعة.",
   "Forgot_password": "هل نسيت كلمة المرور؟",
   "Forgot_password_If_this_email_is_registered": "إن كان البريد الإلكتروني مسجلاً، فسنرسل تعليمات إعادة تعيين كلمة المرور الخاصة بك. إذا لم تتلق بريداً إلكترونياً قريباً، فيرجى العودة والمحاولة مرة أخرى",
   "Forward": "إعادة توجيه",
@@ -197,6 +197,8 @@
   "Join_the_given_channel": "انضمام إلى القناة المحددة",
   "Just_invited_people_can_access_this_channel": "يمكن للأشخاص المدعوين فقط الوصول إلى هذه القناة",
   "Just_invited_people_can_access_this_team": "فقط الأشخاص المدعوين يمكنهم الوصول إلى هذا الفريق",
+  "Label_Input_Two_Factor_Code": "كود",
+  "Label_Input_Two_Factor_Password": "كلمة المرور",
   "Language": "اللغة",
   "last_message": "الرسالة الأخيرة",
   "Leave": "مغادرة الغرفة",

app/i18n/locales/bn-IN.json

@@ -269,7 +269,7 @@
   "Finish_recording": "রেকর্ডিং শেষ করুন",
   "Following": "অনুসরণ",
   "Following_thread": "থ্রেড অনুসরণ করছেন",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "আপনার নিরাপত্তার জন্য, আপনার বর্তমান পাসওয়ার্ড দিতে হবে যাতে আপনি চালিয়ে যান",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "আপনার নিরাপত্তার জন্য, চালিয়ে যেতে হলে আপনাকে আপনার অ্যাকাউন্টের পাসওয়ার্ড প্রবেশ করতে হবে।",
   "Forgot_password": "আপনার পাসওয়ার্ড ভুলে গিয়েছেন?",
   "Forgot_password_If_this_email_is_registered": "যদি এই ইমেইলটি নিবন্ধিত হয়ে থাকে, আমরা আপনাকে কীভাবে আপনার পাসওয়ার্ড রিসেট করতে হয় তা সম্পর্কে নির্দেশনা প্রেরণ করব। যদি আপনি শীঘ্রই একটি ইমেইল পাননি, তবে অনুগ্রহ করে ফিরে আসুন এবং আবার চেষ্টা করুন।",
   "Forward": "ফরোয়ার্ড",
@@ -316,6 +316,8 @@
   "Joined": "যোগদান করেছে",
   "Just_invited_people_can_access_this_channel": "এই চ্যানেলে শুধুমাত্র আমন্ত্রিত ব্যক্তিদের অ্যাক্সেস করতে পারবে",
   "Just_invited_people_can_access_this_team": "এই দলে শুধুমাত্র আমন্ত্রিত ব্যক্তিদের অ্যাক্সেস করতে পারবে",
+  "Label_Input_Two_Factor_Code": "কোড",
+  "Label_Input_Two_Factor_Password": "পাসওয়ার্ড",
   "Language": "ভাষা",
   "last_message": "শেষ বার্তা",
   "Last_owner_team_room": "আপনি এই চ্যানেলের শেষ মালিক। একবার দল থেকে বের হওয়ার পরে, চ্যানেলটি দলের মধ্যে থাকবে কিন্তু আপনি তাকে বাইরে থেকে পরিচালনা করবেন।",

app/i18n/locales/cs.json

@@ -288,7 +288,7 @@
   "Finish_recording": "Dokončit nahrávání",
   "Following": "Následující",
   "Following_thread": "Následující vlákno",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "Pro vaši bezpečnost musíte pro pokračování zadat své aktuální heslo",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "Pro vaši bezpečnost musíte zadat heslo k účtu, abyste mohli pokračovat.",
   "Forgot_password": "Zapomněli jste heslo?",
   "Forgot_password_If_this_email_is_registered": "Pokud je tento e-mail zaregistrován, zašleme Vám pokyny, jak obnovit heslo. Pokud e-mail v nejbližší době neobdržíte, vraťte se a zkuste to znovu.",
   "Forward": "Vpřed",
@@ -346,6 +346,8 @@
   "Jump_to_message": "Přejít na zprávu",
   "Just_invited_people_can_access_this_channel": "K tomuto kanálu mají přístup pouze pozvaní lidé",
   "Just_invited_people_can_access_this_team": "K tomuto týmu mají přístup pouze pozvaní lidé",
+  "Label_Input_Two_Factor_Code": "Kód",
+  "Label_Input_Two_Factor_Password": "Heslo",
   "Language": "Jazyk",
   "last_message": "poslední zpráva",
   "Last_owner_team_room": "Jste posledním vlastníkem tohoto kanálu. Jakmile tým opustíte, kanál zůstane uvnitř týmu, ale budete ho spravovat zvenčí.",

app/i18n/locales/de.json

@@ -263,7 +263,7 @@
   "Finish_recording": "Aufnahme neenden",
   "Following": "verfolgte",
   "Following_thread": "Thread folgen",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "Zu Ihrer Sicherheit müssen Sie Ihr aktuelles Passwort eingeben, um fortzufahren",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "Zu Ihrer Sicherheit müssen Sie Ihr Kontopasswort eingeben, um fortzufahren.",
   "Forgot_password": "Passwort vergessen",
   "Forgot_password_If_this_email_is_registered": "Wenn es sich um eine registrierte E-Mail-Adresse handelt, werden wir an diese eine Anleitung zum Zurücksetzen des Passworts senden. Sollten Sie in Kürzen keine E-Mail erhalten, kommen Sie wieder und versuchen Sie es noch einmal.",
   "Forward": "Weiterleiten",
@@ -309,6 +309,8 @@
   "Joined": "Beigetreten",
   "Just_invited_people_can_access_this_channel": "Nur eingeladene Personen können auf diesen Kanal zugreifen",
   "Just_invited_people_can_access_this_team": "Nur eingeladene Personen können auf das Team zugreifen",
+  "Label_Input_Two_Factor_Code": "Code",
+  "Label_Input_Two_Factor_Password": "Passwort",
   "Language": "Sprache",
   "last_message": "letzte Nachricht",
   "Last_owner_team_room": "Sie sind der letzte Eigner dieses Channels. Wenn Sie das Team verlassen haben, bleibt der Channel im Team, aber Sie werden ihn von außen verwalten.",

app/i18n/locales/en.json

@@ -305,7 +305,7 @@
   "Finish_recording": "Finish recording",
   "Following": "Following",
   "Following_thread": "Following thread",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "For your security, you must enter your current password to continue",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "For your security, you must enter your account password to continue.",
   "Forgot_password": "Forgot your password?",
   "Forgot_password_If_this_email_is_registered": "If this email is registered, we'll send instructions on how to reset your password. If you do not receive an email shortly, please come back and try again.",
   "Forward": "Forward",
@@ -363,6 +363,8 @@
   "Jump_to_message": "Jump to message",
   "Just_invited_people_can_access_this_channel": "Just invited people can access this channel",
   "Just_invited_people_can_access_this_team": "Just invited people can access this team",
+  "Label_Input_Two_Factor_Code": "Code",
+  "Label_Input_Two_Factor_Password": "Password",
   "Language": "Language",
   "last_message": "last message",
   "Last_owner_team_room": "You are the last owner of this channel. Once you leave the team, the channel will be kept inside the team but you will be managing it from outside.",

app/i18n/locales/es.json

@@ -109,7 +109,7 @@
   "Files": "Archivos",
   "Finish_recording": "Finalizar grabación",
   "Following_thread": "Siguiendo hilo",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "Por seguridad, debes introducir tu contraseña para continuar",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "Por su seguridad, debe ingresar la contraseña de su cuenta para continuar.",
   "Forgot_password": "¿Ha olvidado su contraseña?",
   "Forgot_password_If_this_email_is_registered": "Si este email está registrado, te enviaremos las instrucciones para resetear tu contraseña. Si no recibes un email en breve, vuelve aquí e inténtalo de nuevo.",
   "Full_name": "Nombre completo",
@@ -131,6 +131,8 @@
   "Join": "Conectar",
   "Join_the_given_channel": "Unirse al canal dado",
   "Just_invited_people_can_access_this_channel": "Sólo gente invitada puede acceder a este canal.",
+  "Label_Input_Two_Factor_Code": "Código",
+  "Label_Input_Two_Factor_Password": "Contraseña",
   "Language": "Idioma",
   "last_message": "último mensaje",
   "Learn_more": "Saber más",

app/i18n/locales/fi.json

@@ -248,7 +248,7 @@
   "Finish_recording": "Lopeta tallennus",
   "Following": "Seurataan",
   "Following_thread": "Seurataan ketjua",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "Jatka antamalla nykyinen salasanasi turvallisuussyistä",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "Turvallisuutesi vuoksi sinun on syötettävä tilisi salasana jatkaaksesi.",
   "Forgot_password": "Unohditko salasanasi?",
   "Forgot_password_If_this_email_is_registered": "Jos tämä sähköpostiosoite on rekisteröity, lähetämme salasanan nollausohjeet. Jos et saa sähköpostia pian, palaa ja yritä uudelleen.",
   "Forward": "Välitä",
@@ -291,6 +291,8 @@
   "Joined": "Liitytty",
   "Just_invited_people_can_access_this_channel": "Vain kutsutut ihmiset voivat käyttää tätä kanavaa",
   "Just_invited_people_can_access_this_team": "Vain kutsutut ihmiset voivat käyttää tätä tiimiä",
+  "Label_Input_Two_Factor_Code": "Koodi",
+  "Label_Input_Two_Factor_Password": "Salasana",
   "Language": "Kieli",
   "last_message": "viimeinen viesti",
   "Last_owner_team_room": "Olet tämän kanavan viimeinen omistaja. Kun lähdet tiimistä, kanava säilyy tiimin sisällä, mutta hallinnoit sitä ulkopuolelta.",

app/i18n/locales/fr.json

@@ -212,7 +212,7 @@
   "Finish_recording": "Terminer l'enregistrement",
   "Following": "Suivant",
   "Following_thread": "Suivre le fil",
-  "For_your_security_you_must_enter_your_current_password_to_continue": "Pour votre sécurité, vous devez entrer votre mot de passe actuel pour continuer.",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "Pour votre sécurité, vous devez entrer le mot de passe de votre compte pour continuer.",
   "Forgot_password": "Mot de passe oublié ?",
   "Forgot_password_If_this_email_is_registered": "Si cet e-mail est enregistré, nous vous enverrons des instructions pour réinitialiser votre mot de passe. Si vous ne recevez pas d'e-mail sous peu, veuillez revenir et réessayer.",
   "Forward": "Transmettre",
@@ -254,6 +254,8 @@
   "Join_the_given_channel": "Rejoindre le canal indiqué",
   "Just_invited_people_can_access_this_channel": "Seuls les personnes invitées peuvent accéder à ce canal",
   "Just_invited_people_can_access_this_team": "Seules les personnes invitées peuvent accéder à cette équipe",
+  "Label_Input_Two_Factor_Code": "Code",
+  "Label_Input_Two_Factor_Password": "Mot de passe",
   "Language": "Langue",
   "last_message": "dernier message",
   "Last_owner_team_room": "Vous êtes le dernier propriétaire de ce canal. Une fois que vous quittez l'équipe, le canal sera conservé au sein de l'équipe mais vous le gérerez de l'extérieur.",