Sha256-2

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Button,
    TextInput,
    Image,
    TouchableOpacity,
    Text,
    ActivityIndicator,
    ToastAndroid,
    StatusBar,
    Alert,
    AsyncStorage,
    AppRegistry,
    Platform
} from 'react-native'
import {RequestHelper, setInitialRoute} from '../property/Helpers';
import {StackNavigator, NavigationActions} from 'react-navigation';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import placeholder from 'rn-placeholder';
import {connect} from 'react-redux';
import HomeScreen from './HomeMenuScreen';
import {saveToken} from '../store/action/UserAction';
import RegisterScreen from './RegistrationScreen'
import {QTextInput, QButtonImage, QButtonText} from '../component/elements';
import Entypo from 'react-native-vector-icons/Entypo';
import { sha256 } from 'react-native-sha256';

class LoginScreen extends Component {
    static navigationOptions = {
        header: null
    };

    constructor(props) {
        super(props);
        this.props = props;
        this.state = {
            username: null,
            password: null,
            isReady: false,
            token: null,
            hidePassword:true,
            // instruksi: false,
            loading: false
        };
        this.inputFile = {};
        this.instruksi = this
            .instruksi
            .bind(this);
    }

    componentDidMount = async() => {
        const v = await AsyncStorage.getItem("accessToken");
        if (v != undefined) {
            this.setState({token_storage: v});
            setInitialRoute('Home', this.props);
        };
    };

    // onChange = () => {     console.log(this.props); this.props.LoginRequest(true)
    //     console.log(this.props); }

    handleUserName = (text) => {
        this.setState({username: text})
    };

    handlePassword = (text) => {
        this.setState({password: text})
    };

    focusNext(id) {
        this
            .inputFile[id]
            .focus();
    };

    instruksi() {
        this.setState({loading: true});
        setTimeout(() => {
            this.setState({instruksi: true, loading: false})
        }, 2000)
    }

    managePasswordVisibility = () =>{
        this.setState({hidePassword: !this.state.hidePassword});
    }

    //Ecnryp MD5
    hashmd5(textin) {
        md5 = require('js-md5');
        md5(textin);
        var hash = md5.create();
        hash.update(textin);
        return hash.hex();
    }

    //Encryp SHA256
    Sha256(){
    sha256("Test").then( hash => {
        console.log(hash);
    })}

    SomethisReing = async() => {
        if (this.state.username == null || this.state.password == null || this.state.username.trim() == "" || this.state.password.trim() == "") {
            Alert.alert("Error", "Please fill a valid username and password!");
        } else {
            if (!this.state.isReady) {
                this.setState({isReady: true});
                let bodyParameter = {
                    email: this.state.username,
                    password: this.state.password
                };
                console.log("username = " + this.state.username);
                console.log("password = " + this.state.password);
                var password_enkrip = this.Sha256(this.state.password);
                console.log("password enkrip = " + password_enkrip);
                try {
                    var data = await RequestHelper('https://reqres.in/api/login', 'POST', bodyParameter);
                    this.setState({isReady: false});
                    if (data.error != undefined) {
                        Alert.alert("Error", data.error);
                    } else if (data.token != undefined) {
                        this.setState({token: data.token});
                        // AsyncStorage.setItem("accessToken", data.token); setInitialRoute('Home',
                        // this.props); save to persist redux
                        this
                            .props
                            .saveUserToken(data.token);
                        this
                            .props
                            .openDashboard();
                    }
                    // setInitialRoute('HomeScreen', this.props);
                    // this.props.navigation.navigate('HomeScreen');
                } catch (error) {
                    ToastAndroid.show(error.message, 0);
                    this.setState({isReady: false});
                }
            }
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.headerText}>Login QInsurrance</Text>
                <View style={styles.direktion}>
                    <FontAwesome name='user' size={40} style={styles.user}/>
                    <QTextInput
                        textStyle={styles.EditText}
                        label={''}
                        underlineColorAndroid='transparent'
                        placeholderText="Username"
                        blurOnSubmit={false}
                        returnKeyType={"next"}
                        onSubmitEditing={() => {
                        this.focusNext('password')
                    }}
                        ref={input => {
                        this.inputFile['username'] = input;
                    }}
                        onTextChanged={this.handleUserName}/>
                </View>

                <View style={styles.direktion}>
                    <FontAwesome name='lock' size={40} style={styles.lock}/>
                    <QTextInput
                        textStyle={styles.EditText}
                        underlineColorAndroid="transparent"
                        placeholderText="Password"
                        blurOnSubmit={true}
                        label={''}
                        secureText={this.state.hidePassword}
                        returnKeyType={"done"}
                        onSubmitEditing={() => {
                        this.SomethisReing()
                    }}
                        ref={input => {
                        this.inputFile['password'] = input;
                    }}
                        onTextChanged={this.handlePassword}/>

                    <TouchableOpacity
                        activeOpacity={0.8}
                        style={styles.visibilityBtn}
                        onPress={this.managePasswordVisibility}>
                            {
                                this.state.hidePassword
                            ?<Entypo name="eye-with-line" size={30}/>
                            :<Entypo name="eye" size={30}/>
                            }
                    </TouchableOpacity>

                </View>

              {this.state.isReady
                        ? <ActivityIndicator color="blue" size="small" animating/>
                        :
                <QButtonText
                    btnStyle={styles.EditButton}
                    btnText={styles.buttonText}
                    content={'LOGIN'}
                    onPress={this.SomethisReing}
                    />
              }

                <View
                    style={[
                    styles.direktion, {
                    justifyContent: 'center',
                    marginTop: 5
                    }
                ]}>
                    <QButtonText
                        activeOpacity={0.7}
                        btnStyle={styles.buttonView}
                        onPress={() => this.props.goTo("Register")}
                        content={'No Account yet? Register Here'}/>
                </View>
            </View>
        );
    };
};

const styles = StyleSheet.create({
    direktion: {
        flexDirection: 'row',

    },
    Icons: {
        height: 50,
        width: 50,
        marginLeft: 10,
        color: 'black'
    },
    container: {
        flex: 1,
        backgroundColor: '#364854',
        justifyContent: 'center',
        paddingLeft: 60,
        paddingRight: 60
    },
    headerText: {
        fontWeight: 'bold',
        alignSelf: 'center',
        fontSize: 24,
        color: '#fff',
        paddingBottom: 10,
        marginBottom: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#199283',
        alignSelf: 'center'
    },
    EditText: {
        padding: 10,
        marginTop: 5,
        marginLeft: 5,
        width: 260,
        alignSelf: 'stretch',
        height: 40,
        marginBottom: 30,
        color: '#fff',
        borderBottomWidth: 1,
        borderBottomColor: '#fff'
    },
    EditButton: {
        alignItems: 'center',
        backgroundColor: '#59cbbd',
        paddingTop: 5,
        paddingBottom: 5,
        borderRadius: 20,
        borderWidth: 1
    },
    visibilityBtn:
    {
      position: 'absolute',
      right: 1,
      top: 10,
      height: 40,
      width: 40,
      padding: 5,

    },
    user: {
        paddingBottom: 10,
        color: 'black',
        alignSelf: 'center'
    },
    lock: {
        paddingBottom: 10,
        color: 'black',
        alignSelf: 'center'
    },
    buttonText: {
        color: '#000',
        fontWeight: 'bold',
        fontSize: 20
    },
    buttonView: {
        flexDirection: 'row',
        backgroundColor: 'transparent',
        borderRadius: null,
        padding: null
    }
})

const mapStateToProps = (state, props) => {
    return {user: state.user};
};

const mapDispatchToProps = (dispatch, props) => {
    return {
        goTo: (page, params) => dispatch(NavigationActions.navigate({routeName: page, params: params})),
        saveUserToken: (token) => dispatch(saveToken(token)),
        openDashboard: () => dispatch(NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({routeName: 'Home'})]
        }))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);