Components working

RocketChat · Mar 1, 2024 · 2b8c40c · 2b8c40c
1 parent 29779b8
commit 2b8c40c
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 22 deletions.
diff --git a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
@@ -52,7 +52,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 			) : null}
 			<Button
 				testID='sv-warn-button'
-				title='Learn more'
+				title={I18n.t('Learn_more')}
 				type='secondary'
 				backgroundColor={colors.chatComponentBackground}
 				onPress={() => Linking.openURL(message.link || LEARN_MORE_URL)}

diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
@@ -814,5 +814,7 @@
   "video-conf-provider-not-configured-body": "A workspace admin needs to enable the conference calls feature first.",
   "video-conf-provider-not-configured-header": "Conference call not enabled",
   "you": "you",
-  "you_were_mentioned": "you were mentioned"
+  "you_were_mentioned": "you were mentioned",
+  "missing_room_e2ee_title": "Check back in a few moments",
+  "missing_room_e2ee_description": "The encryption keys for the room need to be updated, another room member needs to be online for this to happen."
 }
diff --git a/app/views/RoomView/components/EncryptedRoom.tsx b/app/views/RoomView/components/EncryptedRoom.tsx
@@ -1,8 +1,94 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-
-export const EncryptedRoom = () => (
-	<View>
-		<Text>This room is encrypted</Text>
-	</View>
-);
+import React, { ReactElement } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+import { ChatsStackParamList } from '../../../stacks/types';
+import { useTheme } from '../../../theme';
+import { CustomIcon } from '../../../containers/CustomIcon';
+import Button from '../../../containers/Button';
+import sharedStyles from '../../Styles';
+import { useAppSelector } from '../../../lib/hooks';
+import I18n from '../../../i18n';
+
+const GAP = 32;
+
+export const EncryptedRoom = ({
+	navigation
+}: {
+	navigation: StackNavigationProp<ChatsStackParamList, 'RoomView'>;
+}): ReactElement => {
+	const { colors } = useTheme();
+	const styles = useStyle();
+	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+
+	const navigate = () => {
+		if (isMasterDetail) {
+			navigation.navigate('ModalStackNavigator', { screen: 'E2EEnterYourPasswordView' });
+		} else {
+			navigation.navigate('E2EEnterYourPasswordStackNavigator', { screen: 'E2EEnterYourPasswordView' });
+		}
+	};
+
+	return (
+		<View style={styles.root}>
+			<View style={styles.container}>
+				<View style={styles.textView}>
+					<View style={styles.icon}>
+						<CustomIcon name='encrypted' size={42} color={colors.fontSecondaryInfo} />
+					</View>
+					<Text style={styles.title}>This room is encrypted</Text>
+					<Text style={styles.description}>To view its contents you must enter your encryption password.</Text>
+				</View>
+				<Button title={I18n.t('Enter_Your_E2E_Password')} onPress={navigate} />
+				<Button
+					title={I18n.t('Learn_more')}
+					type='secondary'
+					backgroundColor={colors.chatComponentBackground}
+					onPress={() => alert('learn more')} // TODO: missing url
+				/>
+			</View>
+		</View>
+	);
+};
+
+const useStyle = () => {
+	const { colors } = useTheme();
+	const styles = StyleSheet.create({
+		root: {
+			flex: 1,
+			backgroundColor: colors.surfaceRoom
+		},
+		container: {
+			flex: 1,
+			marginHorizontal: 24,
+			justifyContent: 'center'
+		},
+		textView: { alignItems: 'center' },
+		icon: {
+			width: 58,
+			height: 58,
+			borderRadius: 30,
+			marginBottom: GAP,
+			backgroundColor: colors.surfaceNeutral,
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		title: {
+			...sharedStyles.textBold,
+			fontSize: 24,
+			lineHeight: 32,
+			textAlign: 'center',
+			color: colors.fontTitlesLabels,
+			marginBottom: GAP
+		},
+		description: {
+			...sharedStyles.textRegular,
+			fontSize: 16,
+			lineHeight: 24,
+			textAlign: 'center',
+			color: colors.fontDefault,
+			marginBottom: GAP
+		}
+	});
+	return styles;
+};
diff --git a/app/views/RoomView/components/MissingRoomE2EEKey.tsx b/app/views/RoomView/components/MissingRoomE2EEKey.tsx
@@ -1,8 +1,74 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-
-export const MissingRoomE2EEKey = () => (
-	<View>
-		<Text>Check back in a few moments</Text>
-	</View>
-);
+import React, { ReactElement } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../theme';
+import { CustomIcon } from '../../../containers/CustomIcon';
+import Button from '../../../containers/Button';
+import sharedStyles from '../../Styles';
+import I18n from '../../../i18n';
+
+const GAP = 32;
+
+export const MissingRoomE2EEKey = (): ReactElement => {
+	const { colors } = useTheme();
+	const styles = useStyle();
+	return (
+		<View style={styles.root}>
+			<View style={styles.container}>
+				<View style={styles.icon}>
+					<CustomIcon name='clock' size={42} color={colors.fontSecondaryInfo} />
+				</View>
+				<Text style={styles.title}>{I18n.t('missing_room_e2ee_title')}</Text>
+				<Text style={styles.description}>{I18n.t('missing_room_e2ee_description')}</Text>
+				<Button
+					title={I18n.t('Learn_more')}
+					type='secondary'
+					backgroundColor={colors.chatComponentBackground}
+					onPress={() => alert('learn more')} // TODO: missing url
+				/>
+			</View>
+		</View>
+	);
+};
+
+const useStyle = () => {
+	const { colors } = useTheme();
+	const styles = StyleSheet.create({
+		root: {
+			flex: 1,
+			backgroundColor: colors.surfaceRoom
+		},
+		container: {
+			flex: 1,
+			marginHorizontal: 24,
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		icon: {
+			width: 58,
+			height: 58,
+			borderRadius: 30,
+			marginBottom: GAP,
+			backgroundColor: colors.surfaceNeutral,
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		title: {
+			...sharedStyles.textBold,
+			fontSize: 24,
+			lineHeight: 32,
+			textAlign: 'center',
+			color: colors.fontTitlesLabels,
+			marginBottom: GAP
+		},
+		description: {
+			...sharedStyles.textRegular,
+			fontSize: 16,
+			lineHeight: 24,
+			textAlign: 'center',
+			color: colors.fontDefault,
+			marginBottom: GAP
+		}
+	});
+	return styles;
+};
diff --git a/app/views/RoomView/constants.ts b/app/views/RoomView/constants.ts
@@ -41,5 +41,7 @@ export const roomAttrsUpdate = [
 	't',
 	'autoTranslate',
 	'autoTranslateLanguage',
-	'unmuted'
+	'unmuted',
+	'E2EKey',
+	'encrypted'
 ] as TRoomUpdate[];
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
@@ -245,10 +245,13 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	shouldComponentUpdate(nextProps: IRoomViewProps, nextState: IRoomViewState) {
 		const { state } = this;
 		const { roomUpdate, member, isOnHold } = state;
-		const { theme, insets, route } = this.props;
+		const { theme, insets, route, encryptionEnabled } = this.props;
 		if (theme !== nextProps.theme) {
 			return true;
 		}
+		if (encryptionEnabled !== nextProps.encryptionEnabled) {
+			return true;
+		}
 		if (member.statusText !== nextState.member.statusText) {
 			return true;
 		}
@@ -1442,7 +1445,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	render() {
 		console.count(`${this.constructor.name}.render calls`);
 		const { room, loading, action, selectedMessages } = this.state;
-		const { user, baseUrl, theme, width, serverVersion, encryptionEnabled } = this.props;
+		const { user, baseUrl, theme, width, serverVersion, encryptionEnabled, navigation } = this.props;
 		const { rid, t } = room;
 		let bannerClosed;
 		let announcement;
@@ -1457,7 +1460,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 
 		// Encrypted room, but user session is not encrypted
 		if (!encryptionEnabled && 'encrypted' in room && room.encrypted) {
-			return <EncryptedRoom />;
+			return <EncryptedRoom navigation={navigation} />;
 		}
 
 		return (