Login.js 9.19 KB
import React, {useState, useEffect} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    TouchableOpacity,
    KeyboardAvoidingView,
    Platform,
    Alert,
} from 'react-native';
import InputIcon from '../../components/Input/InputIcon';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {useNavigation} from '@react-navigation/native';
import {
    TABNAVIGATOR,
    FORGOTPASSWORD,
    CONFIRMEMAIL,
} from '../../routers/ScreenNames';
import {checkFormatArray} from '../../Config/Functions';
import {loginApi} from '../../apis/Functions/users';
import KEY from '../../assets/AsynStorage';
import AsyncStorage from '@react-native-community/async-storage';
import {showLoading, hideLoading} from '../../actions/loadingAction';
import {saveUserToRedux} from '../../actions/users';
import {connect} from 'react-redux';
import messaging from '@react-native-firebase/messaging';
import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import {showAlert, TYPE} from '../../components/DropdownAlert';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import TouchID from 'react-native-touch-id';
import {call} from 'redux-saga/effects';
import KeychainService from '../../services/keychainService';
import * as Keychain from 'react-native-keychain';


const Login = (props) => {
    const {navigation} = props;

    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');

    const navigate = useNavigation();
    const optionalConfigObject = {
        title: 'Authentication Required', // Android
        color: '#e00606', // Android,
        fallbackLabel: '', // iOS (if empty, then label is hidden)
    };

    const getTokenDevice = async () => {
        let fcmToken = await AsyncStorage.getItem(KEY.FIREBASE);

        if (!fcmToken) {
            fcmToken = await messaging().getToken();
            if (fcmToken) {
                AsyncStorage.setItem(KEY.FIREBASE, fcmToken);
            }
        }
    };

    useEffect(() => {
        props.hideLoading();
        getAccount();
        getTokenDevice();
    }, []);

    const getAccount = async () => {
        const jsonValue = await AsyncStorage.getItem(KEY.ACCOUNT);
        const account = JSON.parse(jsonValue);
        if (account) {
            onSubmitLogin(account.email, account.pass);
        } else {
            try {
                // Retrieve the credentials
                const credentials = await Keychain.getGenericPassword();
                if (credentials) {
                    console.log(
                        'Credentials successfully loaded for user ' + credentials
                    );
                } else {
                    console.log('No credentials stored');
                }
            } catch (error) {
                console.log("Keychain couldn't be accessed!", error);
            }
        }
    };

    function* authorize() {
        let isFingerPrintAuthenticated = yield call(KeychainService.getCredentials);
    }

    const onSubmitLogin = async (email, pass) => {
        const titles = [
            I18n.t('Username').toLowerCase(),
            I18n.t('Password').toLowerCase(),
        ];

        const index = checkFormatArray([email, pass]);

        if (index === true) {
            let firebase = await AsyncStorage.getItem(KEY.FIREBASE);
            props.showLoading();
            const res = await loginApi({
                email,
                password: pass,
                platform: Platform.OS,
                device_token: firebase,
                account_type: 'CUSTOMER',
            });

            props.hideLoading();
            if (res.data) {
                if (res.data.code == 200 && res.data.data) {
                    const jsonValue = JSON.stringify({email, pass});
                    AsyncStorage.setItem(KEY.TOKEN, res.data.data.token);
                    AsyncStorage.setItem(KEY.ACCOUNT, jsonValue);
                    props.saveUserToRedux(res.data.data);
                    navigate.reset({
                        index: 1,
                        routes: [{name: TABNAVIGATOR}],
                    });
                    await Keychain.setGenericPassword(email, pass);
                } else {
                    showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
                }
            } else {
                showAlert(
                    TYPE.ERROR,
                    I18n.t('Notification'),
                    I18n.t('Systemmaintenance'),
                );
            }
        } else {
            showAlert(
                TYPE.WARN,
                I18n.t('Notification'),
                I18n.t('Please_fill_in') + titles[index],
            );
        }
    };
    const clickFingerprintHandler = () => {
        TouchID.isSupported()
            .then(authenticate => {
                console.log(authenticate);
                pressHandler();
            })
            .catch(error => {
                showAlert(TYPE.WARN, I18n.t('Notification'), 'TouchID not supported');
            });
    };

    const pressHandler = () => {
        TouchID.authenticate('to demo this react-native component', optionalConfigObject)
            .then(success => {
                console.log(success);
                onSubmitLogin('thuynt@dcv.vn', '123456');
                showAlert(TYPE.WARN, I18n.t('Notification'), 'success');
            })
            .catch(error => {
                console.log(error);
                showAlert(TYPE.WARN, I18n.t('Notification'), 'Authentication Failed');
            });
    };

    return (
        <View
            style={{
                flex: 1,
                paddingHorizontal: 20,
                paddingTop: 20,
                backgroundColor: 'white',
            }}>
            <InputIcon
                icon={R.images.iconUser3}
                title={'Email'}
                onChangeText={(val) => setEmail(val)}
                value={email}
            />
            <InputIcon
                icon={R.images.iconLock}
                title={'Password'}
                isPassWord={true}
                onChangeText={(val) => setPass(val)}
                value={pass}
            />
            <TouchableOpacity
                onPress={() => navigate.navigate(CONFIRMEMAIL)}
                style={styles.forgotView}>
                <AppText i18nKey={'ForgotPassword'} style={styles.txtTitle}/>
            </TouchableOpacity>

            <View
                style={{
                    marginVertical: 20,
                    alignItems: 'center',
                }}>
                <TouchableOpacity
                    onPress={() => onSubmitLogin(email, pass)}
                    style={styles.wrapLogin}>
                    <AppText i18nKey={'Login'} style={styles.txtLogin}/>
                    <Image source={R.images.iconRight1} style={styles.imgIcon}/>
                </TouchableOpacity>

                <View style={{flexDirection: 'row', marginTop: WIDTHXD(50)}}>
                    <TouchableOpacity
                        onPress={() => {
                            clickFingerprintHandler();
                        }}>
                        <EntypoIcon name={'fingerprint'} size={WIDTHXD(80)} color={R.colors.main}/>
                    </TouchableOpacity>
                    <View style={{width: WIDTHXD(80)}}/>
                    <TouchableOpacity
                        onPress={() => {
                            // navigation.navigate('REGISTOR');
                        }}>
                        <Icon name={'face-recognition'} size={WIDTHXD(80)} color={R.colors.main}/>
                    </TouchableOpacity>
                </View>

                <View style={styles.row}>
                    <AppText i18nKey={'Have_account'} style={styles.txtTitle}/>
                    <TouchableOpacity
                        onPress={() => {
                            navigation.navigate('REGISTOR');
                        }}>
                        <AppText i18nKey={'Register'} style={styles.txtRegistor}/>
                    </TouchableOpacity>
                </View>
            </View>
            <View style={{height: 100}}/>
        </View>
    );
};

const styles = StyleSheet.create({
    forgotView: {
        marginVertical: 20,
        alignItems: 'flex-end',
    },
    txtTitle: {
        fontSize: getFontXD(42),
        color: '#929292',
    },
    txtLogin: {
        fontSize: getFontXD(48),
        color: 'white',
        fontWeight: '700',
    },
    wrapLogin: {
        width: WIDTHXD(512),
        height: HEIGHTXD(150),
        backgroundColor: '#1C6AF6',
        borderRadius: 30,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    imgIcon: {
        width: WIDTHXD(72),
        height: HEIGHTXD(72),
        marginLeft: 5,
    },
    row: {
        flexDirection: 'row',
        marginTop: 30,
    },
    txtRegistor: {
        marginLeft: WIDTHXD(10),
        fontSize: getFontXD(42),
        color: '#1473E6',
    },
});

const mapStateToProps = (state) => {
    return {};
};
export default connect(mapStateToProps, {
    showLoading,
    hideLoading,
    saveUserToRedux,
})(Login);