104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
|
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;
|