Login Screen

import React, {Component} from 'react';
import {View, Text, Image, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native';

import styles from './styles';
import Images from 'res/images';
import Constant from 'res/constant';
import Strings from 'res/strings';
import Colors from 'res/colors';
import { ScrollView } from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-community/async-storage';
import axios from 'axios';
import Modal from 'react-native-modal';
import Toast from 'react-native-simple-toast';
// import Icon from 'react-native-vector-icons/Entypo';


export default class LoginScreen extends React.Component {
  constructor (props) {
    super (props);

    this.state = {
      // secureTextEntry: true,

      alertVisibility: false,
      alertContentTitle: Strings.request_failed,
      alertContentInfo: Strings.email_not_valid,

      loadingVisibility: false,
      nik:'',
      password:''
    }

    // this.isLogin();
  }

  // async isLogin() {
  //   const { navigation } = this.props;
  //     navigation.navigate('Dashboard');
  // }

  handleEmail(val) {
    this.setState({ nik: val });
  }

  handlePassword(val) {
    this.setState({ password: val });
  }

  validateLogin(nik, password) {

    if (nik === '') {
      this.setState({
        alertContentTitle: Strings.login_failed,
        alertContentInfo: Strings.email_empty,
        alertVisibility: true
      });
    }

    else if (password === '') {
      this.setState({
        alertContentTitle: Strings.login_failed,
        alertContentInfo: Strings.password_empty,
        alertVisibility: true
      });
    } else {
      this.login();
    }
  }

  login() {
    const { navigation } = this.props;
    const { nik, password } = this.state;

    this.setState({ loadingVisibility: true });

    const body = {
      nik,
      password
    };

    axios.post(`${Constant.BASE_URL}`, body)
      .then((response) => {
        console.log('res',response);
        if (response.data.message === true) {
          console.log('Success Login');

          // Login data
          AsyncStorage.setItem('userData', response.data);
          AsyncStorage.setItem('user_id', response.data.data.user_id);
          AsyncStorage.setItem('user_name', response.data.data.user_name);
          AsyncStorage.setItem('user_email', response.data.data.user_email);
          AsyncStorage.setItem('user_desc', response.data.data.user_desc);
          AsyncStorage.setItem('bu_org', response.data.data.bu_org);
          AsyncStorage.setItem('cmpy_code', response.data.data.cmpy_code.toString());
          AsyncStorage.setItem('cmpy_name', response.data.data.cmpy_name);
          AsyncStorage.setItem('token', response.data.data.token);


          navigation.replace('Dashboard');
          this.setState({ loadingVisibility: false });
        } else {
          this.setState({ loadingVisibility: false });
          Toast.show(response.data.message, Toast.LONG);
          console.log('failed_login:', response.data.status);
        }
      })
      .catch((error) => {
        this.setState({ loadingVisibility: false });
        Toast.show(error.response.data.error_msg, Toast.LONG);
        console.log('error_login:', error);
      });
  }

  // checkIsNullInt(param) {
  //   if (param != null) {
  //     return param;
  //   }

  //   return 0;
  // }

  // checkIsNullString(param) {
  //   if (param != null) {
  //     return param;
  //   }

  //   return '';
  // }


    render() {

      const {
        nik, password, alertVisibility, alertContentTitle, alertContentInfo, loadingVisibility
      } = this.state;
        return(
          <View>
            <ScrollView>
            <View style={styles.viewContainer}>
              <View style={{flexDirection:'row'}}>
                <Text style={styles.txtTitle}>Mobile </Text>
                <Text style={styles.txtTitleCRM}>CRM</Text>
              </View>
              <Image source={Images.user} style={styles.imgUser}></Image>

              <TextInput style={styles.InputTxt}
                placeholder="  NIK"
                onChangeText={(val) => this.handleEmail(val)}
              />

              <View >
                <TextInput style={styles.InputTxt}
                  placeholder="  Password"
                  onChangeText={(val) => this.handlePassword(val)}
                />


                  {/* <TouchableOpacity
                  style={styles.containerIconEye}
                  onPress={() => this.setState({ secureTextEntry: !secureTextEntry })}
                >
                  <Icon
                    style={styles.iconEye}
                    name={this.state.secureTextEntry === true ? 'eye' : 'eye-with-line'}
                    size={20}
                  />
                </TouchableOpacity> */}

              </View>

              <TouchableOpacity onPress={() => this.validateLogin(nik, password)} style={styles.btnLogin}>
                  <Text style={{textAlign:'center', marginTop:10}}>Login</Text>
              </TouchableOpacity>

              {/* <TouchableWithoutFeedback >
                <View style={{marginTop:10}}>
                  <Text style={{color:'#3642ad', textAlign:'center'}}>forgot password</Text>
                  <View style={{height:1, width:105, backgroundColor:'#3642ad', alignSelf:'center'}}></View>
                </View>
              </TouchableWithoutFeedback> */}

              <View style={{flexDirection:'row', marginTop:120}}>
                <Text>Having Issue? </Text>
                <Text>please contact</Text>
              </View>
              <Text style={{color:'#3642ad', textAlign:'center'}}>mis@sigma.co.id</Text>
              <View style={{height:1, width:105, backgroundColor:'#3642ad', alignSelf:'center'}}></View>

            </View>
            </ScrollView>

            <Modal
            Visible={alertVisibility}
            backdropColor={Colors.blackTransparent}
            onBackdropPress={() => { this.setState({ alertVisibility: false }); }}
            onRequestClose={() => { this.setState({ alertVisibility: false }); }}
            style={styles.containerAlert}
          >
            <View style={styles.containerContentInAlert}>
              {/* Title */}
              <Text style={styles.titleInAlert}>{alertContentTitle}</Text>

              {/* Information */}
              <Text style={styles.informationInAlert}>{alertContentInfo}</Text>

              {/* Button OK */}
              <TouchableOpacity onPress={() => { this.setState({ alertVisibility: false }); }}>
                <Text style={styles.ok}>{Strings.ok}</Text>
              </TouchableOpacity>
            </View>
          </Modal>

            {/* Loading */}
            <Modal
              visible={loadingVisibility}
              animationType="fade"
              backdropColor={Colors.blackTransparent}
            >
              <View style={styles.loading}>
                <ActivityIndicator size="large" color={Colors.blueButton} />
              </View>
            </Modal>
          </View>
        );
    }
}