141 lines
3.7 KiB
JavaScript
141 lines
3.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import _ from 'lodash';
|
|
import PropTypes from 'prop-types';
|
|
import { sha256 } from 'js-sha256';
|
|
import Modal from 'react-native-modal';
|
|
import useDeepCompareEffect from 'use-deep-compare-effect';
|
|
|
|
import TextInput from '../TextInput';
|
|
import I18n from '../../i18n';
|
|
import EventEmitter from '../../utils/events';
|
|
import { withTheme } from '../../theme';
|
|
import { withSplit } from '../../split';
|
|
import { themes } from '../../constants/colors';
|
|
import Button from '../Button';
|
|
import sharedStyles from '../../views/Styles';
|
|
import RocketChat from '../../lib/rocketchat';
|
|
import styles from './styles';
|
|
|
|
export const TWO_FACTOR = 'TWO_FACTOR';
|
|
|
|
const methods = {
|
|
totp: {
|
|
text: 'Open_your_authentication_app_and_enter_the_code',
|
|
keyboardType: 'numeric'
|
|
},
|
|
email: {
|
|
text: 'Verify_your_email_for_the_code_we_sent',
|
|
keyboardType: 'numeric'
|
|
},
|
|
password: {
|
|
title: 'Please_enter_your_password',
|
|
text: 'For_your_security_you_must_enter_your_current_password_to_continue',
|
|
secureTextEntry: true,
|
|
keyboardType: 'default'
|
|
}
|
|
};
|
|
|
|
const TwoFactor = React.memo(({ theme, split }) => {
|
|
const [visible, setVisible] = useState(false);
|
|
const [data, setData] = useState({});
|
|
const [code, setCode] = useState('');
|
|
|
|
const method = methods[data.method];
|
|
const isEmail = data.method === 'email';
|
|
|
|
const sendEmail = () => RocketChat.sendEmailCode();
|
|
|
|
useDeepCompareEffect(() => {
|
|
if (!_.isEmpty(data)) {
|
|
setCode('');
|
|
setVisible(true);
|
|
} else {
|
|
setVisible(false);
|
|
}
|
|
}, [data]);
|
|
|
|
const showTwoFactor = args => setData(args);
|
|
|
|
useEffect(() => {
|
|
EventEmitter.addEventListener(TWO_FACTOR, showTwoFactor);
|
|
|
|
return () => EventEmitter.removeListener(TWO_FACTOR);
|
|
}, []);
|
|
|
|
const onCancel = () => {
|
|
const { cancel } = data;
|
|
if (cancel) {
|
|
cancel();
|
|
}
|
|
setData({});
|
|
};
|
|
|
|
const onSubmit = () => {
|
|
const { submit } = data;
|
|
if (submit) {
|
|
if (data.method === 'password') {
|
|
submit(sha256(code));
|
|
} else {
|
|
submit(code);
|
|
}
|
|
}
|
|
setData({});
|
|
};
|
|
|
|
const color = themes[theme].titleText;
|
|
return (
|
|
<Modal
|
|
transparent
|
|
avoidKeyboard
|
|
useNativeDriver
|
|
isVisible={visible}
|
|
hideModalContentWhileAnimating
|
|
>
|
|
<View style={styles.container} testID='two-factor'>
|
|
<View style={[styles.content, split && [sharedStyles.modal, sharedStyles.modalFormSheet], { backgroundColor: themes[theme].backgroundColor }]}>
|
|
<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
|
|
{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
|
|
<TextInput
|
|
value={code}
|
|
theme={theme}
|
|
returnKeyType='send'
|
|
autoCapitalize='none'
|
|
onChangeText={setCode}
|
|
onSubmitEditing={onSubmit}
|
|
keyboardType={method?.keyboardType}
|
|
secureTextEntry={method?.secureTextEntry}
|
|
error={data.invalid && { error: 'totp-invalid', reason: I18n.t('Code_or_password_invalid') }}
|
|
testID='two-factor-input'
|
|
/>
|
|
{isEmail && <Text style={[styles.sendEmail, { color }]} onPress={sendEmail}>{I18n.t('Send_me_the_code_again')}</Text>}
|
|
<View style={styles.buttonContainer}>
|
|
<Button
|
|
title={I18n.t('Cancel')}
|
|
type='secondary'
|
|
backgroundColor={themes[theme].chatComponentBackground}
|
|
style={styles.button}
|
|
onPress={onCancel}
|
|
theme={theme}
|
|
/>
|
|
<Button
|
|
title={I18n.t('Send')}
|
|
type='primary'
|
|
style={styles.button}
|
|
onPress={onSubmit}
|
|
theme={theme}
|
|
testID='two-factor-send'
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
});
|
|
TwoFactor.propTypes = {
|
|
theme: PropTypes.string,
|
|
split: PropTypes.bool
|
|
};
|
|
|
|
export default withSplit(withTheme(TwoFactor));
|