2020-10-30 18:31:04 +00:00
|
|
|
import React from 'react';
|
2021-11-25 14:25:11 +00:00
|
|
|
import { StyleSheet, Text, View, TextInput as TextInputComp } from 'react-native';
|
|
|
|
import { StackNavigationOptions } from '@react-navigation/stack';
|
2020-10-30 18:31:04 +00:00
|
|
|
import { connect } from 'react-redux';
|
2021-11-25 14:25:11 +00:00
|
|
|
import { Dispatch } from 'redux';
|
2020-10-30 18:31:04 +00:00
|
|
|
|
|
|
|
import StatusBar from '../containers/StatusBar';
|
|
|
|
import * as List from '../containers/List';
|
|
|
|
import I18n from '../i18n';
|
2021-10-01 18:12:19 +00:00
|
|
|
import log, { events, logEvent } from '../utils/log';
|
2020-10-30 18:31:04 +00:00
|
|
|
import { withTheme } from '../theme';
|
|
|
|
import SafeAreaView from '../containers/SafeAreaView';
|
|
|
|
import TextInput from '../containers/TextInput';
|
|
|
|
import Button from '../containers/Button';
|
|
|
|
import { getUserSelector } from '../selectors/login';
|
|
|
|
import { PADDING_HORIZONTAL } from '../containers/List/constants';
|
|
|
|
import { themes } from '../constants/colors';
|
|
|
|
import { Encryption } from '../lib/encryption';
|
|
|
|
import RocketChat from '../lib/rocketchat';
|
|
|
|
import { logout as logoutAction } from '../actions/login';
|
|
|
|
import { showConfirmationAlert, showErrorAlert } from '../utils/info';
|
|
|
|
import EventEmitter from '../utils/events';
|
|
|
|
import { LISTENER } from '../containers/Toast';
|
|
|
|
import debounce from '../utils/debounce';
|
2021-10-01 18:12:19 +00:00
|
|
|
import sharedStyles from './Styles';
|
2020-10-30 18:31:04 +00:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
paddingHorizontal: PADDING_HORIZONTAL
|
|
|
|
},
|
|
|
|
title: {
|
|
|
|
fontSize: 16,
|
|
|
|
...sharedStyles.textMedium
|
|
|
|
},
|
|
|
|
description: {
|
|
|
|
fontSize: 14,
|
|
|
|
paddingVertical: 10,
|
|
|
|
...sharedStyles.textRegular
|
|
|
|
},
|
|
|
|
changePasswordButton: {
|
|
|
|
marginBottom: 4
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
interface IE2EEncryptionSecurityViewState {
|
|
|
|
newPassword: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IE2EEncryptionSecurityViewProps {
|
|
|
|
theme: string;
|
|
|
|
user: {
|
|
|
|
roles: string[];
|
|
|
|
id: string;
|
|
|
|
};
|
|
|
|
server: string;
|
|
|
|
encryptionEnabled: boolean;
|
|
|
|
logout(): void;
|
|
|
|
}
|
2020-10-30 18:31:04 +00:00
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityViewProps, IE2EEncryptionSecurityViewState> {
|
|
|
|
private newPasswordInputRef: any = React.createRef();
|
2020-10-30 18:31:04 +00:00
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
static navigationOptions = (): StackNavigationOptions => ({
|
|
|
|
title: I18n.t('E2E_Encryption')
|
|
|
|
});
|
2020-10-30 18:31:04 +00:00
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
state = { newPassword: '' };
|
|
|
|
|
|
|
|
onChangePasswordText = debounce((text: string) => this.setState({ newPassword: text }), 300);
|
|
|
|
|
|
|
|
setNewPasswordRef = (ref: TextInputComp) => (this.newPasswordInputRef = ref);
|
2020-10-30 18:31:04 +00:00
|
|
|
|
|
|
|
changePassword = () => {
|
|
|
|
const { newPassword } = this.state;
|
|
|
|
if (!newPassword.trim()) {
|
|
|
|
return;
|
|
|
|
}
|
2021-11-25 14:25:11 +00:00
|
|
|
// TODO: Remove ts-ignore when migrate the showConfirmationAlert
|
|
|
|
// @ts-ignore
|
2020-10-30 18:31:04 +00:00
|
|
|
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'),
|
2021-10-01 18:12:19 +00:00
|
|
|
onPress: async () => {
|
2020-10-30 18:31:04 +00:00
|
|
|
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'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-10-30 18:31:04 +00:00
|
|
|
|
|
|
|
resetOwnKey = () => {
|
2021-11-25 14:25:11 +00:00
|
|
|
// TODO: Remove ts-ignore when migrate the showConfirmationAlert
|
|
|
|
// @ts-ignore
|
2020-10-30 18:31:04 +00:00
|
|
|
showConfirmationAlert({
|
|
|
|
title: I18n.t('Are_you_sure_question_mark'),
|
|
|
|
message: I18n.t('E2E_encryption_reset_message'),
|
|
|
|
confirmationText: I18n.t('E2E_encryption_reset_confirmation'),
|
2021-10-01 18:12:19 +00:00
|
|
|
onPress: async () => {
|
2020-10-30 18:31:04 +00:00
|
|
|
logEvent(events.E2E_SEC_RESET_OWN_KEY);
|
|
|
|
try {
|
2021-01-25 17:14:45 +00:00
|
|
|
const res = await RocketChat.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 { logout } = this.props;
|
|
|
|
logout();
|
|
|
|
}
|
2020-10-30 18:31:04 +00:00
|
|
|
} catch (e) {
|
|
|
|
log(e);
|
|
|
|
showErrorAlert(I18n.t('E2E_encryption_reset_error'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-10-30 18:31:04 +00:00
|
|
|
|
|
|
|
renderChangePassword = () => {
|
|
|
|
const { newPassword } = this.state;
|
2021-01-25 17:14:45 +00:00
|
|
|
const { theme, encryptionEnabled } = this.props;
|
|
|
|
if (!encryptionEnabled) {
|
2020-10-30 18:31:04 +00:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<List.Section>
|
2021-10-01 18:12:19 +00:00
|
|
|
<Text style={[styles.title, { color: themes[theme].titleColor }]}>
|
|
|
|
{I18n.t('E2E_encryption_change_password_title')}
|
|
|
|
</Text>
|
|
|
|
<Text style={[styles.description, { color: themes[theme].bodyText }]}>
|
|
|
|
{I18n.t('E2E_encryption_change_password_description')}
|
|
|
|
</Text>
|
2020-10-30 18:31:04 +00:00
|
|
|
<TextInput
|
|
|
|
inputRef={this.setNewPasswordRef}
|
|
|
|
placeholder={I18n.t('New_Password')}
|
|
|
|
returnKeyType='send'
|
|
|
|
secureTextEntry
|
|
|
|
onSubmitEditing={this.changePassword}
|
|
|
|
testID='e2e-encryption-security-view-password'
|
|
|
|
theme={theme}
|
|
|
|
onChangeText={this.onChangePasswordText}
|
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
onPress={this.changePassword}
|
|
|
|
title={I18n.t('Save_Changes')}
|
|
|
|
theme={theme}
|
|
|
|
disabled={!newPassword.trim()}
|
|
|
|
style={styles.changePasswordButton}
|
|
|
|
testID='e2e-encryption-security-view-change-password'
|
|
|
|
/>
|
|
|
|
</List.Section>
|
|
|
|
|
|
|
|
<List.Separator />
|
|
|
|
</>
|
|
|
|
);
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-10-30 18:31:04 +00:00
|
|
|
|
|
|
|
render() {
|
|
|
|
const { theme } = this.props;
|
|
|
|
return (
|
|
|
|
<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
|
|
|
|
<StatusBar theme={theme} />
|
|
|
|
<List.Container>
|
|
|
|
<View style={styles.container}>
|
|
|
|
{this.renderChangePassword()}
|
|
|
|
|
|
|
|
<List.Section>
|
|
|
|
<Text style={[styles.title, { color: themes[theme].titleColor }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
|
2021-10-01 18:12:19 +00:00
|
|
|
<Text style={[styles.description, { color: themes[theme].bodyText }]}>
|
|
|
|
{I18n.t('E2E_encryption_reset_description')}
|
|
|
|
</Text>
|
2020-10-30 18:31:04 +00:00
|
|
|
<Button
|
|
|
|
onPress={this.resetOwnKey}
|
|
|
|
title={I18n.t('E2E_encryption_reset_button')}
|
|
|
|
theme={theme}
|
|
|
|
type='secondary'
|
|
|
|
backgroundColor={themes[theme].chatComponentBackground}
|
|
|
|
testID='e2e-encryption-security-view-reset-key'
|
|
|
|
/>
|
|
|
|
</List.Section>
|
|
|
|
</View>
|
|
|
|
</List.Container>
|
|
|
|
</SafeAreaView>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
const mapStateToProps = (state: any) => ({
|
2020-10-30 18:31:04 +00:00
|
|
|
server: state.server.server,
|
2021-01-25 17:14:45 +00:00
|
|
|
user: getUserSelector(state),
|
|
|
|
encryptionEnabled: state.encryption.enabled
|
2020-10-30 18:31:04 +00:00
|
|
|
});
|
|
|
|
|
2021-11-25 14:25:11 +00:00
|
|
|
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
2020-10-30 18:31:04 +00:00
|
|
|
logout: () => dispatch(logoutAction(true))
|
|
|
|
});
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(E2EEncryptionSecurityView));
|