chore: migrate E2EEncryptionSecurityView to hooks (#5085)
* chore: migrate E2EEncryptionSecurityView to hooks * minor tweak
This commit is contained in:
Reinaldo Neto
GitHub
parent
a76c5464cf
commit
0dbaff4f63
|
|
@ -178,12 +178,7 @@ const SettingsStackNavigator = () => {
|
||||||
>
|
>
|
||||||
<SettingsStack.Screen name='SettingsView' component={SettingsView} />
|
<SettingsStack.Screen name='SettingsView' component={SettingsView} />
|
||||||
<SettingsStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
|
<SettingsStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
|
||||||
<SettingsStack.Screen
|
<SettingsStack.Screen name='E2EEncryptionSecurityView' component={E2EEncryptionSecurityView} />
|
||||||
name='E2EEncryptionSecurityView'
|
|
||||||
// @ts-ignore
|
|
||||||
component={E2EEncryptionSecurityView}
|
|
||||||
options={E2EEncryptionSecurityView.navigationOptions}
|
|
||||||
/>
|
|
||||||
<SettingsStack.Screen name='LanguageView' component={LanguageView} />
|
<SettingsStack.Screen name='LanguageView' component={LanguageView} />
|
||||||
<SettingsStack.Screen name='ThemeView' component={ThemeView} />
|
<SettingsStack.Screen name='ThemeView' component={ThemeView} />
|
||||||
<SettingsStack.Screen name='DefaultBrowserView' component={DefaultBrowserView} />
|
<SettingsStack.Screen name='DefaultBrowserView' component={DefaultBrowserView} />
|
||||||
|
|
|
||||||
|
|
@ -193,12 +193,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
|
||||||
<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
|
<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
|
||||||
<ModalStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
|
<ModalStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
|
||||||
<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
|
<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
|
||||||
<ModalStack.Screen
|
<ModalStack.Screen name='E2EEncryptionSecurityView' component={E2EEncryptionSecurityView} />
|
||||||
name='E2EEncryptionSecurityView'
|
|
||||||
// @ts-ignore
|
|
||||||
component={E2EEncryptionSecurityView}
|
|
||||||
options={E2EEncryptionSecurityView.navigationOptions}
|
|
||||||
/>
|
|
||||||
</ModalStack.Navigator>
|
</ModalStack.Navigator>
|
||||||
</ModalContainer>
|
</ModalContainer>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,196 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { StyleSheet, Text, View, TextInput as RNTextInput } from 'react-native';
|
|
||||||
import { StackNavigationOptions } from '@react-navigation/stack';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import StatusBar from '../containers/StatusBar';
|
|
||||||
import * as List from '../containers/List';
|
|
||||||
import I18n from '../i18n';
|
|
||||||
import log, { events, logEvent } from '../lib/methods/helpers/log';
|
|
||||||
import { withTheme } from '../theme';
|
|
||||||
import SafeAreaView from '../containers/SafeAreaView';
|
|
||||||
import { FormTextInput } from '../containers/TextInput';
|
|
||||||
import Button from '../containers/Button';
|
|
||||||
import { getUserSelector } from '../selectors/login';
|
|
||||||
import { PADDING_HORIZONTAL } from '../containers/List/constants';
|
|
||||||
import { themes } from '../lib/constants';
|
|
||||||
import { Encryption } from '../lib/encryption';
|
|
||||||
import { logout } from '../actions/login';
|
|
||||||
import { showConfirmationAlert, showErrorAlert } from '../lib/methods/helpers/info';
|
|
||||||
import EventEmitter from '../lib/methods/helpers/events';
|
|
||||||
import { LISTENER } from '../containers/Toast';
|
|
||||||
import { debounce } from '../lib/methods/helpers';
|
|
||||||
import sharedStyles from './Styles';
|
|
||||||
import { IApplicationState, IBaseScreen, IUser } from '../definitions';
|
|
||||||
import { Services } from '../lib/services';
|
|
||||||
import { SettingsStackParamList } from '../stacks/types';
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
paddingHorizontal: PADDING_HORIZONTAL
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 16,
|
|
||||||
...sharedStyles.textMedium
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
fontSize: 14,
|
|
||||||
paddingVertical: 10,
|
|
||||||
...sharedStyles.textRegular
|
|
||||||
},
|
|
||||||
changePasswordButton: {
|
|
||||||
marginBottom: 4
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
marginBottom: 16
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
interface IE2EEncryptionSecurityViewState {
|
|
||||||
newPassword: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IE2EEncryptionSecurityViewProps extends IBaseScreen<SettingsStackParamList, 'E2EEncryptionSecurityView'> {
|
|
||||||
user: IUser;
|
|
||||||
server: string;
|
|
||||||
encryptionEnabled: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityViewProps, IE2EEncryptionSecurityViewState> {
|
|
||||||
private newPasswordInputRef: any = React.createRef();
|
|
||||||
|
|
||||||
static navigationOptions = (): StackNavigationOptions => ({
|
|
||||||
title: I18n.t('E2E_Encryption')
|
|
||||||
});
|
|
||||||
|
|
||||||
state = { newPassword: '' };
|
|
||||||
|
|
||||||
onChangePasswordText = debounce((text: string) => this.setState({ newPassword: text }), 300);
|
|
||||||
|
|
||||||
setNewPasswordRef = (ref: RNTextInput) => (this.newPasswordInputRef = ref);
|
|
||||||
|
|
||||||
changePassword = () => {
|
|
||||||
const { newPassword } = this.state;
|
|
||||||
if (!newPassword.trim()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
showConfirmationAlert({
|
|
||||||
title: I18n.t('Are_you_sure_question_mark'),
|
|
||||||
message: I18n.t('E2E_encryption_change_password_message'),
|
|
||||||
confirmationText: I18n.t('E2E_encryption_change_password_confirmation'),
|
|
||||||
onPress: async () => {
|
|
||||||
logEvent(events.E2E_SEC_CHANGE_PASSWORD);
|
|
||||||
try {
|
|
||||||
const { server } = this.props;
|
|
||||||
await Encryption.changePassword(server, newPassword);
|
|
||||||
EventEmitter.emit(LISTENER, { message: I18n.t('E2E_encryption_change_password_success') });
|
|
||||||
this.newPasswordInputRef?.clear();
|
|
||||||
this.newPasswordInputRef?.blur();
|
|
||||||
} catch (e) {
|
|
||||||
log(e);
|
|
||||||
showErrorAlert(I18n.t('E2E_encryption_change_password_error'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
resetOwnKey = () => {
|
|
||||||
showConfirmationAlert({
|
|
||||||
title: I18n.t('Are_you_sure_question_mark'),
|
|
||||||
message: I18n.t('E2E_encryption_reset_message'),
|
|
||||||
confirmationText: I18n.t('E2E_encryption_reset_confirmation'),
|
|
||||||
onPress: async () => {
|
|
||||||
logEvent(events.E2E_SEC_RESET_OWN_KEY);
|
|
||||||
try {
|
|
||||||
const res = await Services.e2eResetOwnKey();
|
|
||||||
/**
|
|
||||||
* It might return an empty object when TOTP is enabled,
|
|
||||||
* that's why we're using strict equality to boolean
|
|
||||||
*/
|
|
||||||
if (res === true) {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
dispatch(logout());
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
log(e);
|
|
||||||
showErrorAlert(I18n.t('E2E_encryption_reset_error'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
renderChangePassword = () => {
|
|
||||||
const { newPassword } = this.state;
|
|
||||||
const { theme, encryptionEnabled } = this.props;
|
|
||||||
if (!encryptionEnabled) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<List.Section>
|
|
||||||
<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
|
|
||||||
{I18n.t('E2E_encryption_change_password_title')}
|
|
||||||
</Text>
|
|
||||||
<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
|
|
||||||
{I18n.t('E2E_encryption_change_password_description')}
|
|
||||||
</Text>
|
|
||||||
<FormTextInput
|
|
||||||
inputRef={this.setNewPasswordRef}
|
|
||||||
placeholder={I18n.t('New_Password')}
|
|
||||||
returnKeyType='send'
|
|
||||||
secureTextEntry
|
|
||||||
onSubmitEditing={this.changePassword}
|
|
||||||
testID='e2e-encryption-security-view-password'
|
|
||||||
onChangeText={this.onChangePasswordText}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onPress={this.changePassword}
|
|
||||||
title={I18n.t('Save_Changes')}
|
|
||||||
disabled={!newPassword.trim()}
|
|
||||||
style={styles.changePasswordButton}
|
|
||||||
testID='e2e-encryption-security-view-change-password'
|
|
||||||
/>
|
|
||||||
</List.Section>
|
|
||||||
<List.Separator style={styles.separator} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { theme } = this.props;
|
|
||||||
return (
|
|
||||||
<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme!].backgroundColor }}>
|
|
||||||
<StatusBar />
|
|
||||||
<List.Container>
|
|
||||||
<View style={styles.container}>
|
|
||||||
{this.renderChangePassword()}
|
|
||||||
|
|
||||||
<List.Section>
|
|
||||||
<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
|
|
||||||
{I18n.t('E2E_encryption_reset_title')}
|
|
||||||
</Text>
|
|
||||||
<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
|
|
||||||
{I18n.t('E2E_encryption_reset_description')}
|
|
||||||
</Text>
|
|
||||||
<Button
|
|
||||||
onPress={this.resetOwnKey}
|
|
||||||
title={I18n.t('E2E_encryption_reset_button')}
|
|
||||||
type='secondary'
|
|
||||||
backgroundColor={themes[theme!].chatComponentBackground}
|
|
||||||
testID='e2e-encryption-security-view-reset-key'
|
|
||||||
/>
|
|
||||||
</List.Section>
|
|
||||||
</View>
|
|
||||||
</List.Container>
|
|
||||||
</SafeAreaView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapStateToProps = (state: IApplicationState) => ({
|
|
||||||
server: state.server.server,
|
|
||||||
user: getUserSelector(state),
|
|
||||||
encryptionEnabled: state.encryption.enabled
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(mapStateToProps)(withTheme(E2EEncryptionSecurityView));
|
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { StyleSheet, Text, TextInput as RNTextInput } from 'react-native';
|
||||||
|
|
||||||
|
import { useTheme } from '../../theme';
|
||||||
|
import * as List from '../../containers/List';
|
||||||
|
import I18n from '../../i18n';
|
||||||
|
import log, { events, logEvent } from '../../lib/methods/helpers/log';
|
||||||
|
import { FormTextInput } from '../../containers/TextInput';
|
||||||
|
import Button from '../../containers/Button';
|
||||||
|
import { Encryption } from '../../lib/encryption';
|
||||||
|
import { showConfirmationAlert, showErrorAlert } from '../../lib/methods/helpers/info';
|
||||||
|
import EventEmitter from '../../lib/methods/helpers/events';
|
||||||
|
import { LISTENER } from '../../containers/Toast';
|
||||||
|
import { useDebounce } from '../../lib/methods/helpers';
|
||||||
|
import sharedStyles from '../Styles';
|
||||||
|
import { useAppSelector } from '../../lib/hooks';
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
title: {
|
||||||
|
fontSize: 16,
|
||||||
|
...sharedStyles.textMedium
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
fontSize: 14,
|
||||||
|
paddingVertical: 12,
|
||||||
|
...sharedStyles.textRegular
|
||||||
|
},
|
||||||
|
changePasswordButton: {
|
||||||
|
marginBottom: 4
|
||||||
|
},
|
||||||
|
separator: {
|
||||||
|
marginBottom: 16
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const ChangePassword = () => {
|
||||||
|
const [newPassword, setNewPassword] = useState('');
|
||||||
|
const { colors } = useTheme();
|
||||||
|
const { encryptionEnabled, server } = useAppSelector(state => ({
|
||||||
|
encryptionEnabled: state.encryption.enabled,
|
||||||
|
server: state.server.server
|
||||||
|
}));
|
||||||
|
const newPasswordInputRef = useRef<RNTextInput | null>(null);
|
||||||
|
|
||||||
|
const onChangePasswordText = useDebounce((text: string) => setNewPassword(text), 300);
|
||||||
|
|
||||||
|
const changePassword = () => {
|
||||||
|
if (!newPassword.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showConfirmationAlert({
|
||||||
|
title: I18n.t('Are_you_sure_question_mark'),
|
||||||
|
message: I18n.t('E2E_encryption_change_password_message'),
|
||||||
|
confirmationText: I18n.t('E2E_encryption_change_password_confirmation'),
|
||||||
|
onPress: async () => {
|
||||||
|
logEvent(events.E2E_SEC_CHANGE_PASSWORD);
|
||||||
|
try {
|
||||||
|
await Encryption.changePassword(server, newPassword);
|
||||||
|
EventEmitter.emit(LISTENER, { message: I18n.t('E2E_encryption_change_password_success') });
|
||||||
|
newPasswordInputRef?.current?.clear();
|
||||||
|
newPasswordInputRef?.current?.blur();
|
||||||
|
} catch (e) {
|
||||||
|
log(e);
|
||||||
|
showErrorAlert(I18n.t('E2E_encryption_change_password_error'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!encryptionEnabled) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<List.Section>
|
||||||
|
<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
|
||||||
|
<Text style={[styles.description, { color: colors.bodyText }]}>
|
||||||
|
{I18n.t('E2E_encryption_change_password_description')}
|
||||||
|
</Text>
|
||||||
|
<FormTextInput
|
||||||
|
inputRef={newPasswordInputRef}
|
||||||
|
placeholder={I18n.t('New_Password')}
|
||||||
|
returnKeyType='send'
|
||||||
|
secureTextEntry
|
||||||
|
onSubmitEditing={changePassword}
|
||||||
|
testID='e2e-encryption-security-view-password'
|
||||||
|
onChangeText={onChangePasswordText}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onPress={changePassword}
|
||||||
|
title={I18n.t('Save_Changes')}
|
||||||
|
disabled={!newPassword.trim()}
|
||||||
|
style={styles.changePasswordButton}
|
||||||
|
testID='e2e-encryption-security-view-change-password'
|
||||||
|
/>
|
||||||
|
</List.Section>
|
||||||
|
<List.Separator style={styles.separator} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChangePassword;
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
import React, { useLayoutEffect } from 'react';
|
||||||
|
import { StyleSheet, Text, View } from 'react-native';
|
||||||
|
import { StackNavigationProp } from '@react-navigation/stack';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
|
||||||
|
import StatusBar from '../../containers/StatusBar';
|
||||||
|
import * as List from '../../containers/List';
|
||||||
|
import I18n from '../../i18n';
|
||||||
|
import log, { events, logEvent } from '../../lib/methods/helpers/log';
|
||||||
|
import { useTheme } from '../../theme';
|
||||||
|
import SafeAreaView from '../../containers/SafeAreaView';
|
||||||
|
import Button from '../../containers/Button';
|
||||||
|
import { PADDING_HORIZONTAL } from '../../containers/List/constants';
|
||||||
|
import { logout } from '../../actions/login';
|
||||||
|
import { showConfirmationAlert, showErrorAlert } from '../../lib/methods/helpers/info';
|
||||||
|
import sharedStyles from '../Styles';
|
||||||
|
import { Services } from '../../lib/services';
|
||||||
|
import { SettingsStackParamList } from '../../stacks/types';
|
||||||
|
import ChangePassword from './ChangePassword';
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
paddingHorizontal: PADDING_HORIZONTAL
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: 16,
|
||||||
|
...sharedStyles.textMedium
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
fontSize: 14,
|
||||||
|
paddingVertical: 10,
|
||||||
|
...sharedStyles.textRegular
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const E2EEncryptionSecurityView = () => {
|
||||||
|
const navigation = useNavigation<StackNavigationProp<SettingsStackParamList, 'E2EEncryptionSecurityView'>>();
|
||||||
|
const { colors } = useTheme();
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
navigation.setOptions({
|
||||||
|
title: I18n.t('E2E_Encryption')
|
||||||
|
});
|
||||||
|
}, [navigation]);
|
||||||
|
|
||||||
|
const resetOwnKey = () => {
|
||||||
|
showConfirmationAlert({
|
||||||
|
title: I18n.t('Are_you_sure_question_mark'),
|
||||||
|
message: I18n.t('E2E_encryption_reset_message'),
|
||||||
|
confirmationText: I18n.t('E2E_encryption_reset_confirmation'),
|
||||||
|
onPress: async () => {
|
||||||
|
logEvent(events.E2E_SEC_RESET_OWN_KEY);
|
||||||
|
try {
|
||||||
|
const res = await Services.e2eResetOwnKey();
|
||||||
|
/**
|
||||||
|
* It might return an empty object when TOTP is enabled,
|
||||||
|
* that's why we're using strict equality to boolean
|
||||||
|
*/
|
||||||
|
if (res === true) {
|
||||||
|
dispatch(logout());
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
log(e);
|
||||||
|
showErrorAlert(I18n.t('E2E_encryption_reset_error'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: colors.backgroundColor }}>
|
||||||
|
<StatusBar />
|
||||||
|
<List.Container>
|
||||||
|
<View style={styles.container}>
|
||||||
|
<ChangePassword />
|
||||||
|
|
||||||
|
<List.Section>
|
||||||
|
<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
|
||||||
|
<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
|
||||||
|
<Button
|
||||||
|
onPress={resetOwnKey}
|
||||||
|
title={I18n.t('E2E_encryption_reset_button')}
|
||||||
|
type='secondary'
|
||||||
|
backgroundColor={colors.chatComponentBackground}
|
||||||
|
testID='e2e-encryption-security-view-reset-key'
|
||||||
|
/>
|
||||||
|
</List.Section>
|
||||||
|
</View>
|
||||||
|
</List.Container>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default E2EEncryptionSecurityView;
|
||||||
Loading…
Reference in New Issue