2020-09-11 14:31:38 +00:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { connect } from 'react-redux';
|
2021-10-01 18:12:19 +00:00
|
|
|
import { Clipboard, ScrollView, StyleSheet, Text, View } from 'react-native';
|
2020-09-11 14:31:38 +00:00
|
|
|
|
|
|
|
import { encryptionSetBanner as encryptionSetBannerAction } from '../actions/encryption';
|
|
|
|
import { E2E_RANDOM_PASSWORD_KEY } from '../lib/encryption/constants';
|
2020-10-30 16:15:58 +00:00
|
|
|
import * as HeaderButton from '../containers/HeaderButton';
|
2020-09-11 14:31:38 +00:00
|
|
|
import scrollPersistTaps from '../utils/scrollPersistTaps';
|
|
|
|
import SafeAreaView from '../containers/SafeAreaView';
|
|
|
|
import UserPreferences from '../lib/userPreferences';
|
2021-10-01 18:12:19 +00:00
|
|
|
import { events, logEvent } from '../utils/log';
|
2020-09-11 14:31:38 +00:00
|
|
|
import StatusBar from '../containers/StatusBar';
|
|
|
|
import { LISTENER } from '../containers/Toast';
|
|
|
|
import { themes } from '../constants/colors';
|
|
|
|
import EventEmitter from '../utils/events';
|
|
|
|
import Button from '../containers/Button';
|
|
|
|
import { withTheme } from '../theme';
|
|
|
|
import I18n from '../i18n';
|
2021-10-01 18:12:19 +00:00
|
|
|
import sharedStyles from './Styles';
|
2020-09-11 14:31:38 +00:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
flex: 1,
|
|
|
|
padding: 44,
|
|
|
|
paddingTop: 32
|
|
|
|
},
|
|
|
|
content: {
|
|
|
|
marginVertical: 68,
|
|
|
|
alignItems: 'center'
|
|
|
|
},
|
|
|
|
warning: {
|
|
|
|
fontSize: 14,
|
|
|
|
...sharedStyles.textMedium
|
|
|
|
},
|
|
|
|
passwordText: {
|
|
|
|
marginBottom: 8,
|
|
|
|
...sharedStyles.textAlignCenter
|
|
|
|
},
|
|
|
|
password: {
|
|
|
|
fontSize: 24,
|
|
|
|
marginBottom: 24,
|
|
|
|
...sharedStyles.textBold
|
|
|
|
},
|
|
|
|
copyButton: {
|
|
|
|
width: 72,
|
|
|
|
height: 32
|
|
|
|
},
|
|
|
|
info: {
|
|
|
|
fontSize: 14,
|
|
|
|
marginBottom: 64,
|
|
|
|
...sharedStyles.textRegular
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
class E2ESaveYourPasswordView extends React.Component {
|
|
|
|
static navigationOptions = ({ navigation }) => ({
|
2020-10-30 16:15:58 +00:00
|
|
|
headerLeft: () => <HeaderButton.CloseModal navigation={navigation} testID='e2e-save-your-password-view-close' />,
|
2020-09-11 14:31:38 +00:00
|
|
|
title: I18n.t('Save_Your_E2E_Password')
|
2021-10-01 18:12:19 +00:00
|
|
|
});
|
2020-09-11 14:31:38 +00:00
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
server: PropTypes.string,
|
|
|
|
navigation: PropTypes.object,
|
|
|
|
encryptionSetBanner: PropTypes.func,
|
|
|
|
theme: PropTypes.string
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-09-11 14:31:38 +00:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.mounted = false;
|
|
|
|
this.state = { password: '' };
|
|
|
|
this.init();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.mounted = true;
|
|
|
|
}
|
|
|
|
|
2021-10-01 18:12:19 +00:00
|
|
|
init = async () => {
|
2020-09-11 14:31:38 +00:00
|
|
|
const { server } = this.props;
|
|
|
|
try {
|
|
|
|
// Set stored password on local state
|
2021-10-01 18:12:19 +00:00
|
|
|
const password = await UserPreferences.getStringAsync(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
|
2020-09-11 14:31:38 +00:00
|
|
|
if (this.mounted) {
|
|
|
|
this.setState({ password });
|
|
|
|
} else {
|
|
|
|
this.state.password = password;
|
|
|
|
}
|
|
|
|
} catch {
|
|
|
|
// Do nothing
|
|
|
|
}
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-09-11 14:31:38 +00:00
|
|
|
|
2021-10-01 18:12:19 +00:00
|
|
|
onSaved = async () => {
|
2020-09-11 14:31:38 +00:00
|
|
|
logEvent(events.E2E_SAVE_PW_SAVED);
|
|
|
|
const { navigation, server, encryptionSetBanner } = this.props;
|
|
|
|
// Remove stored password
|
2021-10-01 18:12:19 +00:00
|
|
|
await UserPreferences.removeItem(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
|
2020-09-11 14:31:38 +00:00
|
|
|
// Hide encryption banner
|
|
|
|
encryptionSetBanner();
|
|
|
|
navigation.pop();
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-09-11 14:31:38 +00:00
|
|
|
|
|
|
|
onCopy = () => {
|
|
|
|
logEvent(events.E2E_SAVE_PW_COPY);
|
|
|
|
const { password } = this.state;
|
|
|
|
Clipboard.setString(password);
|
|
|
|
EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-09-11 14:31:38 +00:00
|
|
|
|
|
|
|
onHowItWorks = () => {
|
|
|
|
logEvent(events.E2E_SAVE_PW_HOW_IT_WORKS);
|
|
|
|
const { navigation } = this.props;
|
|
|
|
navigation.navigate('E2EHowItWorksView');
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
2020-09-11 14:31:38 +00:00
|
|
|
|
|
|
|
render() {
|
|
|
|
const { password } = this.state;
|
|
|
|
const { theme } = this.props;
|
|
|
|
|
|
|
|
return (
|
2020-10-30 18:31:04 +00:00
|
|
|
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='e2e-save-password-view'>
|
2020-10-30 13:59:44 +00:00
|
|
|
<StatusBar />
|
2021-10-01 18:12:19 +00:00
|
|
|
<ScrollView
|
|
|
|
{...scrollPersistTaps}
|
|
|
|
style={sharedStyles.container}
|
|
|
|
contentContainerStyle={sharedStyles.containerScrollView}>
|
2020-09-11 14:31:38 +00:00
|
|
|
<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
|
2021-10-01 18:12:19 +00:00
|
|
|
<Text style={[styles.warning, { color: themes[theme].dangerColor }]}>
|
|
|
|
{I18n.t('Save_Your_Encryption_Password_warning')}
|
|
|
|
</Text>
|
2020-09-11 14:31:38 +00:00
|
|
|
<View style={styles.content}>
|
|
|
|
<Text style={[styles.passwordText, { color: themes[theme].bodyText }]}>{I18n.t('Your_password_is')}</Text>
|
|
|
|
<Text style={[styles.password, { color: themes[theme].bodyText }]}>{password}</Text>
|
|
|
|
<Button
|
|
|
|
onPress={this.onCopy}
|
|
|
|
style={[styles.copyButton, { backgroundColor: themes[theme].auxiliaryBackground }]}
|
|
|
|
title={I18n.t('Copy')}
|
|
|
|
type='secondary'
|
|
|
|
fontSize={12}
|
|
|
|
theme={theme}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
<Text style={[styles.info, { color: themes[theme].bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
|
|
|
|
<Button
|
|
|
|
onPress={this.onHowItWorks}
|
|
|
|
style={{ backgroundColor: themes[theme].auxiliaryBackground }}
|
|
|
|
title={I18n.t('How_It_Works')}
|
|
|
|
type='secondary'
|
|
|
|
theme={theme}
|
2020-10-30 18:31:04 +00:00
|
|
|
testID='e2e-save-password-view-how-it-works'
|
2020-09-11 14:31:38 +00:00
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
onPress={this.onSaved}
|
|
|
|
title={I18n.t('I_Saved_My_E2E_Password')}
|
|
|
|
theme={theme}
|
2020-10-30 18:31:04 +00:00
|
|
|
testID='e2e-save-password-view-saved-password'
|
2020-09-11 14:31:38 +00:00
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
</ScrollView>
|
|
|
|
</SafeAreaView>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
|
server: state.server.server
|
|
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
|
|
encryptionSetBanner: () => dispatch(encryptionSetBannerAction())
|
|
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(E2ESaveYourPasswordView));
|