Merge branch 'develop' into chore-a11y-signup

CONTRIBUTING.md

@@ -4,10 +4,10 @@ Great to have you here! Here are a few ways you can help make this project bette
 
 ## Setting up a development environment
 
-Refer to [React Native environment setup](https://reactnative.dev/docs/environment-setup) to make sure everything is up and running.
-Follow the `React Native CLI Quickstart` section as we don't support Expo managed flow.
+Refer to [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment) to make sure everything is up and running.
 
 *Note: you'll need a MacOS to run iOS apps*
+*Note: We don't support Expo managed flow*
 
 ### How to run
 
@@ -103,8 +103,6 @@ We use [Detox](https://github.com/wix/Detox) framework to end-to-end test our ap
 
 As soon as your changes are ready, you can open a Pull Request.
 
-The title of your PR should be descriptive, including either [NEW], [IMPROVEMENT] or [FIX] at the beginning, e.g. [FIX] App crashing on startup.
+Refer to [Pull request's tags](https://developer.rocket.chat/docs/pull-requests-tags) to write a good PR title.
 
-You may share working results prior to finishing, please include [WIP] in the title. This way anyone can look at your code: you can ask for help within the PR if you don't know how to solve a problem.
-
-Your PR is automatically inspected by various tools, check their response and try to improve your code accordingly. Requests that fail to build or have wrong coding style won't be merged.
+Open your PR as draft before asking for review. Your PR is automatically inspected by various tools, check their response and try to improve your code accordingly. Requests that fail to build or have wrong coding style won't be merged.

android/app/build.gradle

@@ -93,7 +93,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.56.0"
+        versionName "4.57.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -12,24 +12,25 @@ import { useActionSheet } from '../Provider';
 
 const styles = StyleSheet.create({
 	subtitleText: {
-		fontSize: 14,
 		...sharedStyles.textRegular,
-		marginBottom: 10
+		fontSize: 16,
+		lineHeight: 24
 	},
 	buttonSeparator: {
-		marginRight: 8
+		marginRight: 12
 	},
 	footerButtonsContainer: {
 		flexDirection: 'row',
 		paddingTop: 16
 	},
 	titleContainerText: {
+		...sharedStyles.textBold,
 		fontSize: 16,
-		...sharedStyles.textSemibold
+		lineHeight: 24
 	},
 	titleContainer: {
 		paddingRight: 80,
-		marginBottom: 16,
+		marginBottom: 12,
 		flexDirection: 'row',
 		alignItems: 'center'
 	}
@@ -53,8 +54,8 @@ const FooterButtons = ({
 					styles.buttonSeparator,
 					{ flex: 1, backgroundColor: cancelBackgroundColor || colors.buttonBackgroundSecondaryDefault }
 				]}
-				color={colors.backdropColor}
 				title={cancelTitle}
+				color={colors.buttonFontSecondary}
 				onPress={cancelAction}
 				testID={`${testID}-cancel`}
 			/>
@@ -120,7 +121,6 @@ const ActionSheetContentWithInputAndSubmit = ({
 				<FormTextInput
 					key={inputConfig.key}
 					value={inputValues[index]}
-					placeholder={inputConfig.placeholder}
 					onChangeText={value => handleInputChange(value, index)}
 					onSubmitEditing={() => {
 						if (index < inputs.length - 1) {
@@ -143,17 +143,18 @@ const ActionSheetContentWithInputAndSubmit = ({
 		return (
 			<FormTextInput
 				value={inputValues[0]}
-				placeholder={placeholder}
 				onChangeText={value => handleInputChange(value, 0)}
 				onSubmitEditing={() => {
 					setTimeout(() => {
 						hideActionSheet();
 					}, 100);
 					if (inputValues[0]) onSubmit(inputValues[0]);
 				}}
+				accessibilityLabel={placeholder}
 				testID={`${testID}-input`}
 				secureTextEntry={secureTextEntry}
 				bottomSheet={isIOS}
+				containerStyle={{ marginTop: 12, marginBottom: 36 }}
 			/>
 		);
 	};
@@ -164,9 +165,9 @@ const ActionSheetContentWithInputAndSubmit = ({
 	return (
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
-				<View style={styles.titleContainer}>
+				<View accessible accessibilityLabel={title} style={styles.titleContainer}>
 					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>{title}</Text>
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0 }]}>{title}</Text>
 				</View>
 				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text> : null}
 				{customText}

app/containers/Avatar/AvatarWithEdit.tsx

@@ -13,7 +13,7 @@ import sharedStyles from '../../views/Styles';
 
 const styles = StyleSheet.create({
 	editAvatarButton: {
-		marginTop: 8,
+		marginTop: 16,
 		paddingVertical: 8,
 		paddingHorizontal: 12,
 		marginBottom: 0,
@@ -67,6 +67,7 @@ const AvatarWithEdit = ({
 			/>
 			{handleEdit && serverVersion && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.6.0') ? (
 				<Button
+					accessibilityLabel={I18n.t('Edit_Room_Photo')}
 					title={I18n.t('Edit')}
 					type='secondary'
 					onPress={handleEdit}

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 = [
+		{ color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, fontSize },
+		small ? styles.smallText : styles.text,
+		styleText
+	];
 
 	return (
 		<Touchable

app/containers/List/ListInfo.tsx

@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
 	},
 	text: {
 		fontSize: 14,
+		lineHeight: 20,
 		...sharedStyles.textRegular
 	}
 });

app/containers/MessageComposer/MessageComposer.tsx

@@ -71,7 +71,8 @@ export const MessageComposer = ({
 		closeEmojiKeyboard,
 		closeSearchEmojiKeyboard,
 		setTrackingViewHeight,
-		setAlsoSendThreadToChannel
+		setAlsoSendThreadToChannel,
+		setAutocompleteParams
 	} = useMessageComposerApi();
 	const recordingAudio = useRecordingAudio();
 	useKeyboardListener(trackingViewRef);
@@ -147,6 +148,9 @@ export const MessageComposer = ({
 			}
 		}
 
+		// Hide autocomplete
+		setAutocompleteParams({ text: '', type: null, params: '' });
+
 		// Text message
 		onSendMessage?.(textFromInput, alsoSendThreadToChannel);
 	};

app/containers/TextInput/FormTextInput.tsx

@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		paddingVertical: 10,
 		borderWidth: 1,
-		borderRadius: 2
+		borderRadius: 4
 	},
 	inputIconLeft: {
 		paddingLeft: 45
@@ -98,6 +98,7 @@ export const FormTextInput = ({
 	const [showPassword, setShowPassword] = useState(false);
 	const showClearInput = onClearInput && value && value.length > 0;
 	const Input = bottomSheet ? BottomSheetTextInput : TextInput;
+
 	const accessibilityLabelRequired = required ? `, ${i18n.t('Required')}` : '';
 	const accessibilityInputValue = (!secureTextEntry && value && isIOS) || showPassword ? `, ${value}` : '';
 	return (
@@ -120,7 +121,7 @@ export const FormTextInput = ({
 						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
 						{
 							backgroundColor: colors.surfaceRoom,
-							borderColor: colors.strokeLight,
+							borderColor: colors.strokeMedium,
 							color: colors.fontTitlesLabels
 						},
 						error?.error && {

app/containers/TwoFactor/index.tsx

@@ -4,18 +4,20 @@ 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 { ICredentials } from '../../definitions';
 import { Services } from '../../lib/services';
+import { useAppSelector } from '../../lib/hooks';
+import Toast from '../Toast';
+import { showToast } from '../../lib/methods/helpers/showToast';
+import log from '../../lib/methods/helpers/log';
 
 export const TWO_FACTOR = 'TWO_FACTOR';
 
@@ -32,6 +34,7 @@ interface IMethods {
 }
 
 interface EventListenerMethod {
+	params?: ICredentials;
 	method?: keyof IMethods;
 	submit?: (param: string) => void;
 	cancel?: () => void;
@@ -55,15 +58,31 @@ const methods: IMethods = {
 	}
 };
 
-const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) => {
-	const { theme } = useTheme();
+const TwoFactor = React.memo(() => {
+	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 method = data.method ? methods[data.method] : null;
 	const isEmail = data.method === 'email';
-	const sendEmail = () => Services.sendEmailCode();
+	const params = data?.params;
+
+	const sendEmail = async () => {
+		try {
+			if (params?.user) {
+				const response = await Services.sendEmailCode(params?.user);
+				if (response.success) {
+					showToast(I18n.t('Two_Factor_Success_message'));
+				}
+			}
+		} catch (e) {
+			log(e);
+		}
+	};
 
 	useDeepCompareEffect(() => {
 		if (!isEmpty(data)) {
@@ -74,7 +93,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,47 +123,58 @@ 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} />
 						<Button title={I18n.t('Verify')} type='primary' style={styles.button} onPress={onSubmit} testID='two-factor-send' />
 					</View>
 				</View>
+				<Toast />
 			</View>
 		</Modal>
 	);
 });
 
-const mapStateToProps = (state: IApplicationState) => ({
-	isMasterDetail: state.app.isMasterDetail
-});
-
-export default connect(mapStateToProps)(TwoFactor);
+export default TwoFactor;