134 lines
4.4 KiB
TypeScript
134 lines
4.4 KiB
TypeScript
import Clipboard from '@react-native-clipboard/clipboard';
|
|
import React, { useEffect, useLayoutEffect, useState } from 'react';
|
|
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { useDispatch } from 'react-redux';
|
|
import { StackActions, useNavigation } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
|
|
import { encryptionSetBanner } from '../actions/encryption';
|
|
import Button from '../containers/Button';
|
|
import * as HeaderButton from '../containers/HeaderButton';
|
|
import SafeAreaView from '../containers/SafeAreaView';
|
|
import StatusBar from '../containers/StatusBar';
|
|
import { LISTENER } from '../containers/Toast';
|
|
import I18n from '../i18n';
|
|
import { E2E_RANDOM_PASSWORD_KEY } from '../lib/constants';
|
|
import { useAppSelector } from '../lib/hooks';
|
|
import EventEmitter from '../lib/methods/helpers/events';
|
|
import { events, logEvent } from '../lib/methods/helpers/log';
|
|
import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
|
|
import UserPreferences from '../lib/methods/userPreferences';
|
|
import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
|
|
import { useTheme } from '../theme';
|
|
import sharedStyles from './Styles';
|
|
|
|
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
|
|
}
|
|
});
|
|
|
|
const E2ESaveYourPasswordView = () => {
|
|
const server = useAppSelector(state => state.server.server);
|
|
const navigation = useNavigation<StackNavigationProp<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'>>();
|
|
const dispatch = useDispatch();
|
|
const [password, setPassword] = useState('');
|
|
const { colors } = useTheme();
|
|
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
title: I18n.t('Save_Your_E2E_Password'),
|
|
headerLeft: () => <HeaderButton.CloseModal testID='e2e-save-your-password-view-close' />
|
|
});
|
|
}, [navigation]);
|
|
|
|
useEffect(() => {
|
|
const init = () => {
|
|
const password = UserPreferences.getString(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
|
|
if (password) setPassword(password);
|
|
};
|
|
init();
|
|
}, []);
|
|
|
|
const onSaved = () => {
|
|
logEvent(events.E2E_SAVE_PW_SAVED);
|
|
UserPreferences.removeItem(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
|
|
dispatch(encryptionSetBanner());
|
|
navigation.dispatch(StackActions.pop());
|
|
};
|
|
|
|
const onCopy = () => {
|
|
logEvent(events.E2E_SAVE_PW_COPY);
|
|
if (password) {
|
|
Clipboard.setString(password);
|
|
EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
|
|
}
|
|
};
|
|
|
|
const onHowItWorks = () => {
|
|
logEvent(events.E2E_SAVE_PW_HOW_IT_WORKS);
|
|
navigation.navigate('E2EHowItWorksView');
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-save-password-view'>
|
|
<StatusBar />
|
|
<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
|
|
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
|
|
<Text style={[styles.warning, { color: colors.dangerColor }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
|
|
<View style={styles.content}>
|
|
<Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</Text>
|
|
<Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text>
|
|
<Button
|
|
onPress={onCopy}
|
|
style={[styles.copyButton, { backgroundColor: colors.auxiliaryBackground }]}
|
|
title={I18n.t('Copy')}
|
|
type='secondary'
|
|
fontSize={12}
|
|
/>
|
|
</View>
|
|
<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
|
|
<Button
|
|
onPress={onHowItWorks}
|
|
style={{ backgroundColor: colors.auxiliaryBackground }}
|
|
title={I18n.t('How_It_Works')}
|
|
type='secondary'
|
|
testID='e2e-save-password-view-how-it-works'
|
|
/>
|
|
<Button onPress={onSaved} title={I18n.t('I_Saved_My_E2E_Password')} testID='e2e-save-password-view-saved-password' />
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
export default E2ESaveYourPasswordView;
|