Merge branch 'develop' into chore-a11y-new-channel

android/app/build.gradle

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

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/CustomIcon/mappedIcons.js

@@ -1,7 +1,4 @@
 export const mappedIcons = {
-	'play-shape-filled': 59842,
-	'pause-shape-filled': 59843,
-	'loading': 59844,
 	'add': 59872,
 	'administration': 59662,
 	'adobe-reader-monochromatic': 59663,
@@ -126,6 +123,7 @@ export const mappedIcons = {
 	'live': 59774,
 	'live-streaming': 59773,
 	'livechat-monochromatic': 59775,
+	'loading': 59844,
 	'lock-filled': 59748,
 	'locker': 59749,
 	'log-view': 59778,
@@ -153,6 +151,7 @@ export const mappedIcons = {
 	'ordering-descending': 59800,
 	'pause': 59803,
 	'pause-filled': 59802,
+	'pause-shape-filled': 59843,
 	'percentage': 59777,
 	'phone': 59806,
 	'phone-disabled': 59804,
@@ -163,6 +162,7 @@ export const mappedIcons = {
 	'pin-map': 59807,
 	'play': 59811,
 	'play-filled': 59810,
+	'play-shape-filled': 59842,
 	'prune': 59817,
 	'queue': 59818,
 	'quote': 59819,
@@ -184,6 +184,7 @@ export const mappedIcons = {
 	'sort-az': 59831,
 	'star': 59834,
 	'star-filled': 59833,
+	'stars': 59845,
 	'status-away': 59741,
 	'status-busy': 59742,
 	'status-disabled': 59837,

app/containers/List/ListInfo.tsx

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

app/containers/TextInput/FormTextInput.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		paddingVertical: 10,
 		borderWidth: 1,
-		borderRadius: 2
+		borderRadius: 4
 	},
 	inputIconLeft: {
 		paddingLeft: 45
@@ -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 }]}>
@@ -117,7 +117,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;

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/containers/message/Urls.tsx

@@ -4,6 +4,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import FastImage from 'react-native-fast-image';
 import { dequal } from 'dequal';
 
+import { useAppSelector } from '../../lib/hooks';
 import Touchable from './Touchable';
 import openLink from '../../lib/methods/helpers/openLink';
 import sharedStyles from '../../views/Styles';
@@ -96,8 +97,8 @@ const UrlImage = ({ image, hasContent }: { image: string; hasContent: boolean })
 			overflow: 'hidden',
 			alignItems: 'center',
 			justifyContent: 'center',
-			...(imageDimensions.width <= 64 && { width: 64 }),
-			...(imageDimensions.height <= 64 && { height: 64 })
+			...imageDimensions.width <= 64 && { width: 64 },
+			...imageDimensions.height <= 64 && { height: 64 }
 		};
 		if (!hasContent) {
 			containerStyle = {
@@ -128,6 +129,7 @@ type TImageLoadedState = 'loading' | 'done' | 'error';
 const Url = ({ url }: { url: IUrl }) => {
 	const { colors, theme } = useTheme();
 	const { baseUrl, user } = useContext(MessageContext);
+	const API_Embed = useAppSelector(state => state.settings.API_Embed);
 	const getImageUrl = () => {
 		const imageUrl = url.image || url.url;
 
@@ -146,7 +148,7 @@ const Url = ({ url }: { url: IUrl }) => {
 
 	const hasContent = !!(url.title || url.description);
 
-	if (!url || url?.ignoreParse) {
+	if (!url || url?.ignoreParse || !API_Embed) {
 		return null;
 	}
 

app/definitions/IRoom.ts

@@ -13,6 +13,8 @@ interface IRequestTranscript {
 	subject: string;
 }
 
+export type TUserWaitingForE2EKeys = { userId: string; ts: Date };
+
 export interface IRoom {
 	fname?: string;
 	_id: string;
@@ -34,6 +36,7 @@ export interface IRoom {
 	livechatData?: any;
 	tags?: string[];
 	e2eKeyId?: string;
+	usersWaitingForE2EKeys?: TUserWaitingForE2EKeys[];
 	avatarETag?: string;
 	latest?: string;
 	default?: boolean;
@@ -217,6 +220,7 @@ export interface IServerRoom extends IRocketChatRecord {
 	reactWhenReadOnly?: boolean;
 	joinCodeRequired?: boolean;
 	e2eKeyId?: string;
+	usersWaitingForE2EKeys?: TUserWaitingForE2EKeys[];
 	v?: {
 		_id?: string;
 		token?: string;