ilink-world/screens/login/ui/Login.ui.js

import React, { Component } from 'react';
import {

     StyleSheet,
     Text,
     View,
     Image,
     Animated,
     BackHandler,
     TouchableOpacity,
     PermissionsAndroid,
     Platform,
     ProgressBarAndroid,
     ScrollView,
     Alert,
     StatusBar,
     AsyncStorage
} from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
import { Sae } from 'react-native-textinput-effects';
import Button from 'apsl-react-native-button';
let theme = require('./../../../utils/theme.json');
import { login, saveNewuser, getCountryNetwork } from './../../../webservice/AuthApi';
import * as Animatable from 'react-native-animatable';
import isEqual from 'lodash/isEqual'
import { getPositionInformation } from './../../../webservice/MapService'
import SwitchSelector from 'react-native-switch-selector'
import I18n from 'react-native-i18n'
let route = require('./../../../route.json');
require('./../../../utils/Translations')
let country = require('./../../../utils/country_code.json');
import { IlinkEmitter } from './../../../utils/events'
import { readUser } from "../../../webservice/AuthApi";
import { MaterialDialog } from "react-native-material-dialog"
import Spinner from "react-native-loading-spinner-overlay"
import Geolocation from "react-native-geolocation-service"
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000 }
const propTypes = {
     coordinate: PropTypes.shape({
          latitude: PropTypes.number.isRequired,
          longitude: PropTypes.number.isRequired,
     }),
     children: PropTypes.node,
     geolocationOptions: PropTypes.shape({
          enableHighAccuracy: PropTypes.bool,
          timeout: PropTypes.number,
          maximumAge: PropTypes.number,
     }),
     heading: PropTypes.number,
     enableHack: PropTypes.bool,
};
const widthButton = responsiveWidth(80) > 350 ? 350 : responsiveWidth(80)
export class LoginUi extends Component {

     handlePhoneRef = ref => this.phoneRef = ref;
     handlePasswordRef = ref => this.passRef = ref;
     static defaultProps = {
          enableHack: false,
          geolocationOptions: null,
     };
     async requestCameraPermission() {
          if (Platform.OS === "android") {
               try {
                    const granted = await PermissionsAndroid.request(
                         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                         {
                              'title': 'Cool Photo App Camera Permission',
                              'message': 'Cool Photo App needs access to your camera ' +
                                   'so you can take awesome pictures.'
                         }
                    )
                    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                         this.watchLocation()
                    } else {
                         this.setState({ loadingDialog: false })
                         Alert.alert(I18n.t("TITLE_UNABLE_TO_AUTORISE"),
                              I18n.t("MISSING_AUTORISATION_LOCATION"),
                              [{
                                   text: I18n.t("RESTART"), onPress: () => {
                                        this.requestCameraPermission()
                                   }
                              }, {
                                   text: I18n.t("QUIT_"), onPress: () => {
                                        BackHandler.exitApp()
                                   }
                              }],
                              { cancelable: false }
                         )
                    }
               } catch (err) {
                    console.warn(err)
                    this.setState({ loadingDialog: false })
                    Alert.alert(I18n.t("TITLE_ERROR_SURVENU"),
                         I18n.t("TEXT_ERROR_START_APPLICATION"),
                         [{
                              text: I18n.t("RESTART"), onPress: () => {
                                   this.requestCameraPermission()
                              }
                         }, {
                              text: I18n.t("QUIT_"), onPress: () => {
                                   // BackHandler.exitApp()
                              }
                         }],
                         { cancelable: false }
                    )

               }
          } else {
               this.watchLocation()

          }
     }

     showConnexionAlertError() {
          this.setState({ loadingDialog: false })

          Alert.alert(I18n.t("TITLE_PROBLE_COME"),
               I18n.t("TEXT_UNABLE_TO_GET_YOUR_POSITION"),
               [{
                    text: I18n.t("QUIT_"), onPress: () => {
                         BackHandler.exitApp()
                    }
               }, {
                    text: I18n.t("RESTART"),
                    onPress: () => {
                         this.setState({ loadingDialog: true })
                         this.watchLocation()
                    }
               }],
               { cancelable: false }
          )
     }
     _storeData = async (position) => {
          try {
               console.warn("save result", await AsyncStorage.setItem('position', JSON.stringify(position)));
          } catch (error) {
               console.warn("store error", error)
          }
     };
     _retrieveData = async () => {
          try {
               const value = await AsyncStorage.getItem('position');
               if (value !== null) {
                    let re = JSON.parse(value)
                    re.longitudeDelta = 0.04
                    re.latitudeDelta = 0.01
                    const pos = JSON.parse(value)
                    this.setState({ region: re, oldPosition: pos })
               }
          } catch (error) {
               console.warn(error)
          }
     };
     watchLocation(geo = null) {
          const options = geo == null ? GEOLOCATION_OPTIONS : geo
          this.watchID = Geolocation.getCurrentPosition((position) => {
               const myLastPosition = this.state.myPosition;
               const myPosition = position.coords;
               if (!isEqual(myPosition, myLastPosition)) {
                    console.warn(myPosition)
                    if (myPosition.longitude !== 0 && myPosition.latitude !== 0) {
                         this._storeData(myPosition)
                         this.retreiveinformationFromPosition(myPosition)
                    } else {
                         if (!this.state.alreadyRetry) {
                              this.setState({ alreadyRetry: true })
                              let geo = { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 }
                              this.watchLocation(geo)
                         } else {
                              if (this.state.oldPosition) {
                                   this.retreiveinformationFromPosition(this.state.oldPosition)
                              } else {
                                   Geolocation.watchPosition((position) => {
                                        if (position.longitude !== 0 && position.latitude !== 0) {
                                             this._storeData(position)
                                             this.retreiveinformationFromPosition(position)
                                        } else {
                                             Alert.alert(I18n.t("UNABLE_GET_INFORMATION")
                                                  , I18n.t('UNABLE_GET_INFORMATION_TEXT'),
                                                  [{ text: I18n.t("EXIT"), onPress: () => { BackHandler.exitApp() } },
                                                  { text: I18n.t("RESTART"), onPress: () => { this.watchLocation() } }],
                                                  { cancelable: false }
                                             )
                                        }
                                   }, (error) => {
                                        this.setState({ loadingDialog: false })
                                        Alert.alert(I18n.t("TITLE_ERROR_SURVENU"),
                                             I18n.t("TEXT_ERROR_START_APPLICATION"),
                                             [{
                                                  text: "Ok", onPress: () => {
                                                       BackHandler.exitApp()
                                                  }
                                             }],
                                             { cancelable: false })
                                   }, GEOLOCATION_OPTIONS)
                              }
                         }
                    }
               }

          }, (positionError) => {
               console.warn(positionError)
               Alert.alert(I18n.t("UNABLE_GET_INFORMATION")
                    , I18n.t('UNABLE_GET_INFORMATION_TEXT'),
                    [{ text: I18n.t("EXIT"), onPress: () => { BackHandler.exitApp() } },
                    { text: I18n.t("RESTART"), onPress: () => { this.watchLocation() } }],
                    { cancelable: false }
               )
          }
               , options)
     }


     retreiveinformationFromPosition(myPosition) {
          getPositionInformation(myPosition).then((response) => {
               console.log(response, myPosition)
               if (response.results !== undefined) {
                    if (response.results.length > 0) {
                         let most = response.results[0]
                         let { address_components, formatted_address, place_id } = most
                         this.setState({ address: address_components, textadress: formatted_address, place: place_id })
                         let results = response.results;
                         let shortcountry;
                         let mcountry;
                         for (let i = 0; i < results[0].address_components.length; i++) {
                              for (let j = 0; j < results[0].address_components[i].types.length; j++) {
                                   if (results[0].address_components[i].types[j] === "country") {
                                        mcountry = results[0].address_components[i];
                                        shortcountry = mcountry.short_name;
                                        this.setState({ shortCountry: mcountry.short_name, longCountry: mcountry.long_name })
                                        this.getNetworks(mcountry.long_name)
                                   }
                              }
                         }
                         for (let i of country) {
                              if (i.code === shortcountry) {
                                   this.setState({ indicatif: i.dial_code, enterPhone: i.dial_code })
                              }
                         }
                    } else {

                    }
                    this.setState({ phoneEnabled: true, loadingDialog: false });

               } else {
                    console.log(myPosition, response)
                    this.showConnexionAlertError()
               }
          }).catch((e) => {

               this.setState({ phoneEnabled: true, loadingDialog: false });
               Alert.alert(I18n.t("TITLE_PROBLE_COME"),
                    I18n.t("TEXT_UNABLE_TO_GET_COUNTRY_INFO"), [{
                         text: I18n.t("NO"), onPress: () => {
                              BackHandler.exitApp()
                         }
                    }, {
                         text: I18n.t("YES"), onPress: () => {
                              this.watchLocation()
                         }
                    }], { cancelable: false })
          });
     }

     componentDidMount() {
          this._retrieveData()
          this.requestCameraPermission()

     }
     componentWillUnmount() {
          if (this.focusListener)
               this.focusListener.remove()
     }

     getNetworks(pays) {

          if (pays) {
               getCountryNetwork(pays).then((result) => {
                    this.reseaux = [];
                    let networks = result[0];
                    for (let prop in networks) {
                         if (networks[prop] !== "" && networks[prop].toLowerCase() !== pays.toLowerCase()) {
                              this.reseaux.push(networks[prop]);
                         }
                    }
                    this.setState({ networks: this.reseaux });

               }, (err) => {
                    console.log(err);
               });
          } else {
               let msg = "impossible de récupérer le nom du pays";
          }
     }

     constructor(props) {
          super(props);
          this.state = this.initState();
          this.Animation = new Animated.Value(0);
          this.BackgroundColorConfig = this.Animation.interpolate(
               {
                    inputRange: [0, 0.5, 1],
                    outputRange: this.state.colorsscheme
               });
          this.BackgroundColorConfigAdmin = this.Animation.interpolate(
               {
                    inputRange: [0, 0.5, 1],
                    outputRange: this.state.colorsscheme.reverse()
               })

     }

     StartBackgroundColorAnimation = (value) => {
          this.Animation.setValue(value === 0 ? 0 : 1);
          this.setState({ stateLogin: value, typeaccount: value })
          Animated.timing(
               this.Animation,
               {
                    toValueF: value === 1 ? 0 : 1,
                    duration: 500
               }
          ).start();
     }

     async gotoHome() {

          IlinkEmitter.emit("userconnect")
          let readU = await readUser()
          let road = "";
          if (!readU.category)
               road = "App"
          else {
               switch (readU.category) {
                    case 'geolocated':
                         road = "AgentApp"
                         break;
                    case 'super':
                         road = "adminApp"
                         break
                    default:
                         road = "supAdminApp"
               }
          }

          this.props.navigation.navigate(road)


     }

     gotoTypeCreated() {
          this.props.navigation.push(route.typeaccountcreate, {
               type: this.state.typeaccount,
          });
     }
     initState() {
          return {
               password: "",
               typeaccount: 0,
               enterPhone: "",
               isLoging: false,
               phoneEnabled: false,
               snackVisible: false,
               snackText: '',
               loadingDialog: true,
               stateLogin: -1,
               colorsscheme: [theme.primary, theme.primaryDark, theme.primaryDarkAdvanced]
          }
     }
     options = [
          { label: I18n.t('USER'), value: 0 },
          { label: I18n.t('AGENT'), value: 1 },
     ]

     BackgroundColorConfig: null
     BackgroundColorConfigAdmin: null
     render() {

          return (
               <Animated.View style={[style.container,
               { backgroundColor: this.BackgroundColorConfig }]}>
                    <StatusBar
                         backgroundColor={theme.primaryDark}
                         barStyle="light-content"
                         translucent={false}

                    /><Spinner
                         visible={this.state.loadingDialog}
                         textContent={I18n.t("LOADING_PROGRESS")}
                         textStyle={{ color: '#FFF' }}
                    />

                    <ScrollView>
                         <TouchableOpacity onPress={() => {

                              this.props.navigation.push(route.helpmenu)

                         }} >
                              <View style={{
                                   alignSelf: 'flex-end',
                                   justifyContent: 'center',
                                   alignItems: 'center',
                                   backgroundColor: theme.primaryLight,
                                   height: 32,
                                   borderRadius: 12,
                                   marginTop: 30,
                                   marginRight: 20
                              }}>
                                   <Text style={{ color: 'white', fontSize: 18, fontWeight: 'bold', padding: 5 }}>{I18n.t('HELP')}</Text>
                              </View>
                         </TouchableOpacity>
                         <View style={style.logoContaner}>
                              <Image style={style.logo} source={require('./../../../datas/img/icon3.png')} />
                         </View>
                         <Animatable.View ref={this.handlePhoneRef}>
                              <Sae
                                   label={this.state.stateLogin !== 1 ? I18n.t('PHONE_NUMBER') : I18n.t('PHONE_NUMBER_ADMIN')}
                                   iconClass={FontAwesomeIcon}
                                   iconName={'phone'}
                                   iconColor={'white'}
                                   keyboardType={"numeric"}
                                   enabled={this.state.phoneEnabled}
                                   style={style.input}
                                   autoCapitalize={'none'}
                                   autoCorrect={false}
                                   value={this.state.enterPhone}
                                   ref={(com) => { this.numberRef = com }}
                                   onChangeText={(text) => this.setState({ enterPhone: text })}
                                   labelStyle={style.labelInput}
                              />
                         </Animatable.View>
                         <Animatable.View ref={this.handlePasswordRef}>
                              <Sae
                                   label={I18n.t('PASSWORD')}
                                   ref={component => { this._pass = component }}
                                   iconClass={FontAwesomeIcon}
                                   iconName={'lock'}
                                   style={style.input}
                                   iconColor={'white'}
                                   labelStyle={style.labelInput}
                                   autoCapitalize={'none'}
                                   secureTextEntry={true}
                                   onChangeText={(text) => this.setState({ password: text })}
                                   autoCorrect={false}
                              />
                         </Animatable.View>


                         <View style={separator.btnContainer}>
                              <TouchableOpacity onPress={() => {
                                   this.gotoForgottenPass()
                              }}>
                                   <Text style={style.lostpassword}>
                                        {I18n.t("FORGOTTEN_PASSWORD")}
                                   </Text>
                              </TouchableOpacity>
                              <View style={style.contentSwitch}>
                                   <SwitchSelector options={this.options}
                                        initial={0}
                                        buttonColor={theme.accentLight}
                                        backgroundColor={theme.primaryDark}
                                        textColor='white'
                                        bold={true}
                                        hasPadding
                                        height={32}
                                        style={style.switch}
                                        onPress={(value) => {
                                             this.StartBackgroundColorAnimation(value)
                                        }} />
                              </View>
                              <Button style={style.loginBtn1}
                                   isLoading={this.state.isLoging}
                                   onPress={() => { this.connectClicked() }}
                              >
                                   <Text style={style.loginBtnText2}>{I18n.t("CONNECT_USER")}</Text>
                              </Button>
                              <View style={separator.container}>
                                   <View style={separator.line} />
                                   <Text style={separator.text}>{I18n.t("OR_BIG")}</Text>
                                   <View style={separator.line} />
                              </View>
                              <Button style={style.loginBtn}
                                   onPress={() => {
                                        this.gotoTypeCreated()
                                   }}
                              >
                                   <Text style={style.loginBtnText}>{I18n.t("CREATE_ACCOUNT")} </Text>
                              </Button>
                         </View>

                    </ScrollView>

               </Animated.View>

          )
     }

     gotoForgottenPass() {
          this.props.navigation.push(route.forgotpass, {
               type: this.state.typeaccount,
          })
     }

     connectClicked() {

          if (this.state.password === null || this.state.password === undefined || this.state.password.length < 3 || this.state.password.lenght < 3) {
               this.passRef.shake(800)
          }
          else {
               this.setState(previousState => {
                    return { isLoging: !previousState.isLoging };
               })
               login(this.state.enterPhone, this.state.password, this.state.typeaccount).then((responseJson) => {
                    console.warn(responseJson)

                    if (responseJson.success === 1) {
                         this.setState(previousState => {
                              return { isLoging: !previousState.isLoging };
                         })
                         const user = responseJson;
                         if (!user.error) {
                              if (user.etat === "1" || user.etat === 1) {
                                   saveNewuser(user);
                                   this.setState({ user: user })

                                   Alert.alert(
                                        I18n.t("CONNEXION_SUCCESSFUL"),
                                        I18n.t("CONNEXION_SUCCESSFULL_TEXT"),
                                        [
                                             {
                                                  text: 'Ok', onPress: () => {
                                                       this.setState(previousState => {
                                                            return { isLoging: !previousState.isLoging };
                                                       })
                                                       this.gotoHome()
                                                  }
                                             }
                                        ],
                                        { cancelable: false }
                                   )
                              } else {
                                   if (user.category !== 'super') {
                                        this.props.navigation.push(route.activateaccount, {
                                             type: this.state.typeaccount,
                                             user: user
                                        })

                                   } else {
                                        if (user.etat_demande === 0 || user.etat_demande === '0') {
                                             Alert.alert(
                                                  I18n.t('DONT_VALIDATE_ACCOUNT'),
                                                  I18n.t('UNVALIDATE_ACCOUNT_TEXT'),
                                                  [
                                                       { text: 'Ok', onPress: () => { } }
                                                  ],
                                                  { cancelable: false }
                                             )
                                        } else {
                                             this.props.navigation.push(route.activateaccount, {
                                                  type: this.state.typeaccount,
                                                  user: user
                                             })
                                        }
                                   }
                              }
                         } else {
                              this.setState(previousState => {
                                   return { isLoging: !previousState.isLoging };
                              })
                              Alert.alert(
                                   I18n.t("UNABLE_TO_CONNECT_TITLE"),
                                   I18n.t('TEXT_NETWORK_UNABLE')
                                   ,
                                   [
                                        { text: I18n.t("NO"), onPress: () => { BackHandler.exitApp() } },
                                        { text: I18n.t("YES"), onPress: () => { this.connectClicked() } }

                                   ],
                                   { cancelable: false }
                              )
                         }

                    } else if (responseJson === null) {
                         this.setState(previousState => {
                              return { isLoging: !previousState.isLoging };
                         })

                    } else {
                         console.log(responseJson)
                         let message = '';
                         switch (responseJson.error) {
                              case 1:
                                   this.phoneRef.shake(1200);
                                   this.passRef.shake(1200);
                                   message = I18n.t("UNABLE_TO_CONNECT")
                                   break;
                              case -1:
                                   this.phoneRef.shake(1200);
                                   message = I18n.t('WRONG_PHONE_NUMBER')
                                   break;
                              case -2:
                                   message = I18n.t('WRONG_PHONE_NUMBER');
                                   this.phoneRef.shake(1200);
                                   break;
                              case -3:
                                   message = I18n.t("WRONG_PASSWORD")
                                   this.passRef.shake(1200);
                                   break;
                              default:
                                   this.passRef.shake(1200);
                                   message = null
                                   break;
                         }

                         if (message === null) {
                              Alert.alert(
                                   I18n.t("UNABLE_TO_CONNECT_TITLE"),
                                   I18n.t('TEXT_NETWORK_UNABLE')
                                   ,
                                   [
                                        {
                                             text: I18n.t("NO"), onPress: () => {
                                                  BackHandler.exitApp()
                                             }
                                        },
                                        {
                                             text: I18n.t("YES"), onPress: () => {
                                                  this.connectClicked()
                                             }
                                        }

                                   ],
                                   { cancelable: false }
                              )
                         } else {
                              Alert.alert(
                                   I18n.t("UNABLE_TO_CONNECT_TITLE"),
                                   message
                                   ,
                                   [

                                        {
                                             text: "OK", onPress: () => {
                                             }
                                        }

                                   ],
                                   { cancelable: false }
                              )
                              this.setState(previousState => {
                                   return {
                                        isLoging: !previousState.isLoging,
                                        snackVisible: true, snackText: message
                                   };
                              })
                              setTimeout(() => {
                                   this.setState({ snackVisible: false })
                              }, 2000)
                         }

                    }
               })
                    .catch((e) => {
                         this.setState(previousState => {
                              return { isLoging: !previousState.isLoging };
                         })
                         Alert.alert(
                              I18n.t("UNABLE_TO_CONNECT_TITLE"),
                              I18n.t('TEXT_NETWORK_UNABLE')
                              ,
                              [
                                   { text: I18n.t("NO"), onPress: () => { BackHandler.exitApp() } },
                                   { text: I18n.t("YES"), onPress: () => { this.connectClicked() } }

                              ],
                              { cancelable: false }
                         )

                    })
          }
     }
}
const separator = StyleSheet.create({
     line: {
          height: 1.5,
          flex: 1,
          backgroundColor: 'white',
          marginLeft: 30,
          marginRight: 30
     },

     text: {
          color: 'white',
          fontWeight: 'bold',

     },
     container: {
          flexDirection: 'row',
          alignItems: 'center'
     },
     btnContainer: {
          flexDirection: 'column',
          justifyContent: 'center',

     },
})
const style = StyleSheet.create({
     container: {
          flex: 1,
          justifyContent: "center"
     },
     switch: {
          margin: 15,
     },
     contentSwitch: {
          width: responsiveWidth(70),
          alignItems: 'center',
          alignSelf: "center",
          marginTop: 10,
          marginLeft: 10
     },
     lostpassword: {
          color: 'white',
          alignSelf: 'flex-end',

          marginTop: 60,
          fontWeight: 'bold',
          marginRight: 20
     },
     logoContaner: {
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
     },
     logo: {
          width: responsiveWidth(90),
          resizeMode: "contain"
     },
     title: {
          fontSize: responsiveFontSize(4),
          alignSelf: 'center',
          fontWeight: 'bold',
          color: 'white',
     },
     loginBtnText: {
          color: theme.primary,
          fontWeight: 'bold',
          fontSize: 15

     },

     loginBtnText2: {
          color: "white",
          fontWeight: 'bold',
          fontSize: 15

     },

     loginBtn: {
          width: widthButton,
          height: 48,
          alignSelf: 'center',
          marginTop: 20,
          borderRadius: responsiveHeight(4),
          backgroundColor: 'white',
          borderColor: 'transparent',
     },

     loginBtn1: {
          width: widthButton,
          marginTop: responsiveHeight(2),
          height: 48,
          alignSelf: 'center',
          borderRadius: responsiveHeight(4),
          backgroundColor: theme.accentLight,
          borderColor: 'transparent',
     },

     input: {
          width: responsiveWidth(70),
          alignSelf: 'center',
          marginTop: 5,

     },
     labelInput: {
          color: "white",
          fontWeight: 'normal',
     }
})