Skip to content

Commit 2b8c40c

Browse files
diegolmellodiegolmello
committed
Components working
1 parent 29779b8 commit 2b8c40c

File tree

6 files changed

+181
-22
lines changed

6 files changed

+181
-22
lines changed

‎app/containers/SupportedVersions/SupportedVersionsWarning.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
5252
) : null}
5353
<Button
5454
testID='sv-warn-button'
55-
title='Learn more'
55+
title={I18n.t('Learn_more')}
5656
type='secondary'
5757
backgroundColor={colors.chatComponentBackground}
5858
onPress={() => Linking.openURL(message.link || LEARN_MORE_URL)}

‎app/i18n/locales/en.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -814,5 +814,7 @@
814814
"video-conf-provider-not-configured-body": "A workspace admin needs to enable the conference calls feature first.",
815815
"video-conf-provider-not-configured-header": "Conference call not enabled",
816816
"you": "you",
817-
"you_were_mentioned": "you were mentioned"
817+
"you_were_mentioned": "you were mentioned",
818+
"missing_room_e2ee_title": "Check back in a few moments",
819+
"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."
818820
}

‎app/views/RoomView/components/EncryptedRoom.tsx

+94-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,94 @@
1-
import React from 'react';
2-
import { Text, View } from 'react-native';
3-
4-
export const EncryptedRoom = () => (
5-
<View>
6-
<Text>This room is encrypted</Text>
7-
</View>
8-
);
1+
import React, { ReactElement } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
import { StackNavigationProp } from '@react-navigation/stack';
4+
5+
import { ChatsStackParamList } from '../../../stacks/types';
6+
import { useTheme } from '../../../theme';
7+
import { CustomIcon } from '../../../containers/CustomIcon';
8+
import Button from '../../../containers/Button';
9+
import sharedStyles from '../../Styles';
10+
import { useAppSelector } from '../../../lib/hooks';
11+
import I18n from '../../../i18n';
12+
13+
const GAP = 32;
14+
15+
export const EncryptedRoom = ({
16+
navigation
17+
}: {
18+
navigation: StackNavigationProp<ChatsStackParamList, 'RoomView'>;
19+
}): ReactElement => {
20+
const { colors } = useTheme();
21+
const styles = useStyle();
22+
const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
23+
24+
const navigate = () => {
25+
if (isMasterDetail) {
26+
navigation.navigate('ModalStackNavigator', { screen: 'E2EEnterYourPasswordView' });
27+
} else {
28+
navigation.navigate('E2EEnterYourPasswordStackNavigator', { screen: 'E2EEnterYourPasswordView' });
29+
}
30+
};
31+
32+
return (
33+
<View style={styles.root}>
34+
<View style={styles.container}>
35+
<View style={styles.textView}>
36+
<View style={styles.icon}>
37+
<CustomIcon name='encrypted' size={42} color={colors.fontSecondaryInfo} />
38+
</View>
39+
<Text style={styles.title}>This room is encrypted</Text>
40+
<Text style={styles.description}>To view its contents you must enter your encryption password.</Text>
41+
</View>
42+
<Button title={I18n.t('Enter_Your_E2E_Password')} onPress={navigate} />
43+
<Button
44+
title={I18n.t('Learn_more')}
45+
type='secondary'
46+
backgroundColor={colors.chatComponentBackground}
47+
onPress={() => alert('learn more')} // TODO: missing url
48+
/>
49+
</View>
50+
</View>
51+
);
52+
};
53+
54+
const useStyle = () => {
55+
const { colors } = useTheme();
56+
const styles = StyleSheet.create({
57+
root: {
58+
flex: 1,
59+
backgroundColor: colors.surfaceRoom
60+
},
61+
container: {
62+
flex: 1,
63+
marginHorizontal: 24,
64+
justifyContent: 'center'
65+
},
66+
textView: { alignItems: 'center' },
67+
icon: {
68+
width: 58,
69+
height: 58,
70+
borderRadius: 30,
71+
marginBottom: GAP,
72+
backgroundColor: colors.surfaceNeutral,
73+
alignItems: 'center',
74+
justifyContent: 'center'
75+
},
76+
title: {
77+
...sharedStyles.textBold,
78+
fontSize: 24,
79+
lineHeight: 32,
80+
textAlign: 'center',
81+
color: colors.fontTitlesLabels,
82+
marginBottom: GAP
83+
},
84+
description: {
85+
...sharedStyles.textRegular,
86+
fontSize: 16,
87+
lineHeight: 24,
88+
textAlign: 'center',
89+
color: colors.fontDefault,
90+
marginBottom: GAP
91+
}
92+
});
93+
return styles;
94+
};

‎app/views/RoomView/components/MissingRoomE2EEKey.tsx

+74-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,74 @@
1-
import React from 'react';
2-
import { Text, View } from 'react-native';
3-
4-
export const MissingRoomE2EEKey = () => (
5-
<View>
6-
<Text>Check back in a few moments</Text>
7-
</View>
8-
);
1+
import React, { ReactElement } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
4+
import { useTheme } from '../../../theme';
5+
import { CustomIcon } from '../../../containers/CustomIcon';
6+
import Button from '../../../containers/Button';
7+
import sharedStyles from '../../Styles';
8+
import I18n from '../../../i18n';
9+
10+
const GAP = 32;
11+
12+
export const MissingRoomE2EEKey = (): ReactElement => {
13+
const { colors } = useTheme();
14+
const styles = useStyle();
15+
return (
16+
<View style={styles.root}>
17+
<View style={styles.container}>
18+
<View style={styles.icon}>
19+
<CustomIcon name='clock' size={42} color={colors.fontSecondaryInfo} />
20+
</View>
21+
<Text style={styles.title}>{I18n.t('missing_room_e2ee_title')}</Text>
22+
<Text style={styles.description}>{I18n.t('missing_room_e2ee_description')}</Text>
23+
<Button
24+
title={I18n.t('Learn_more')}
25+
type='secondary'
26+
backgroundColor={colors.chatComponentBackground}
27+
onPress={() => alert('learn more')} // TODO: missing url
28+
/>
29+
</View>
30+
</View>
31+
);
32+
};
33+
34+
const useStyle = () => {
35+
const { colors } = useTheme();
36+
const styles = StyleSheet.create({
37+
root: {
38+
flex: 1,
39+
backgroundColor: colors.surfaceRoom
40+
},
41+
container: {
42+
flex: 1,
43+
marginHorizontal: 24,
44+
alignItems: 'center',
45+
justifyContent: 'center'
46+
},
47+
icon: {
48+
width: 58,
49+
height: 58,
50+
borderRadius: 30,
51+
marginBottom: GAP,
52+
backgroundColor: colors.surfaceNeutral,
53+
alignItems: 'center',
54+
justifyContent: 'center'
55+
},
56+
title: {
57+
...sharedStyles.textBold,
58+
fontSize: 24,
59+
lineHeight: 32,
60+
textAlign: 'center',
61+
color: colors.fontTitlesLabels,
62+
marginBottom: GAP
63+
},
64+
description: {
65+
...sharedStyles.textRegular,
66+
fontSize: 16,
67+
lineHeight: 24,
68+
textAlign: 'center',
69+
color: colors.fontDefault,
70+
marginBottom: GAP
71+
}
72+
});
73+
return styles;
74+
};

‎app/views/RoomView/constants.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,7 @@ export const roomAttrsUpdate = [
4141
't',
4242
'autoTranslate',
4343
'autoTranslateLanguage',
44-
'unmuted'
44+
'unmuted',
45+
'E2EKey',
46+
'encrypted'
4547
] as TRoomUpdate[];

‎app/views/RoomView/index.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,13 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
245245
shouldComponentUpdate(nextProps: IRoomViewProps, nextState: IRoomViewState) {
246246
const { state } = this;
247247
const { roomUpdate, member, isOnHold } = state;
248-
const { theme, insets, route } = this.props;
248+
const { theme, insets, route, encryptionEnabled } = this.props;
249249
if (theme !== nextProps.theme) {
250250
return true;
251251
}
252+
if (encryptionEnabled !== nextProps.encryptionEnabled) {
253+
return true;
254+
}
252255
if (member.statusText !== nextState.member.statusText) {
253256
return true;
254257
}
@@ -1442,7 +1445,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
14421445
render() {
14431446
console.count(`${this.constructor.name}.render calls`);
14441447
const { room, loading, action, selectedMessages } = this.state;
1445-
const { user, baseUrl, theme, width, serverVersion, encryptionEnabled } = this.props;
1448+
const { user, baseUrl, theme, width, serverVersion, encryptionEnabled, navigation } = this.props;
14461449
const { rid, t } = room;
14471450
let bannerClosed;
14481451
let announcement;
@@ -1457,7 +1460,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
14571460

14581461
// Encrypted room, but user session is not encrypted
14591462
if (!encryptionEnabled && 'encrypted' in room && room.encrypted) {
1460-
return <EncryptedRoom />;
1463+
return <EncryptedRoom navigation={navigation} />;
14611464
}
14621465

14631466
return (

0 commit comments

Comments
 (0)