verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Components working

This commit is contained in:
Diego Mello 2024-03-01 17:49:37 -03:00
parent 29779b89a7
commit 2b8c40c4ca
6 changed files with 179 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/SupportedVersions/SupportedVersionsWarning.tsx
View File

@ -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)}

4
app/i18n/locales/en.json
View File

@ -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."
}

100
app/views/RoomView/components/EncryptedRoom.tsx
View File

@ -1,8 +1,94 @@
import React from 'react';
import { Text, View } from 'react-native';
import React, { ReactElement } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
export const EncryptedRoom = () => (
<View>
<Text>This room is encrypted</Text>
</View>
);
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;
};

80
app/views/RoomView/components/MissingRoomE2EEKey.tsx
View File

@ -1,8 +1,74 @@
import React from 'react';
import { Text, View } from 'react-native';
import React, { ReactElement } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export const MissingRoomE2EEKey = () => (
<View>
<Text>Check back in a few moments</Text>
</View>
);
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;
};

4
app/views/RoomView/constants.ts
View File

@ -41,5 +41,7 @@ export const roomAttrsUpdate = [
't',
'autoTranslate',
'autoTranslateLanguage',
'unmuted'
'unmuted',
'E2EKey',
'encrypted'
] as TRoomUpdate[];

9
app/views/RoomView/index.tsx
View File

@ -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 (