smscode

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  AsyncStorage,
  Text, Image,
  TextInput,
  TouchableOpacity,
  View,
  Platform,
  Alert
} from 'react-native';

import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
import Form from 'react-native-form';
import CountryPicker from 'react-native-country-picker-modal';
import { global } from './global.js';

const api = new Frisbee({
  baseURI: 'https://api.authy.com',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 20;

// if you want to customize the country picker
const countryPickerCustomStyles = {};

// your brand's theme primary color
const brandColor = '#744BAC';

const styles = StyleSheet.create({
  countryPicker: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  container: {
    flex: 1,
    width: undefined,
    height: undefined,
    backgroundColor: 'transparent',
    justifyContent: 'center',

  },
  header: {
    textAlign: 'center',
    marginTop: 60,
    fontSize: 22,
    margin: 20,
    color: '#4A4A4A',
  },
  form: {
    margin: 20
  },
  textInput: {
    padding: 0,
    margin: 0,
    flex: 1,
    fontSize: 20,
    color: brandColor
  },
  button: {
    marginTop: 20,
    height: 50,
    backgroundColor: brandColor,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontFamily: 'Helvetica',
    fontSize: 16,
    fontWeight: 'bold'
  },
  wrongNumberText: {
    margin: 10,
    fontSize: 14,
    textAlign: 'center'
  },
  disclaimerText: {
    marginTop: 30,
    fontSize: 12,
    color: 'grey'
  },
  callingCodeView: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  callingCodeText: {
    fontSize: 20,
    color: brandColor,
    fontFamily: 'Helvetica',
    fontWeight: 'bold',
    paddingRight: 10
  }
});

const tabs = [
  {
    label: 'Search',
    screen: 'example.jobslist',
    icon: require('../../img/search.png'),
    title: 'Navigation Types',
  }, {
    label: 'Inbox',
    screen: 'example.chatlist',
    icon: require('../../img/chat.png'),
    title: 'Navigation Actions',
  }, {
    label: 'Saved',
    screen: 'example.newjob',
    icon: require('../../img/search.png'),
    title: 'Navigation Types',
  }, {
    label: 'My Profile',
    screen: 'example.jobslist',
    icon: require('../../img/search.png'),
    title: 'My profile',
  }
];


export default class example extends Component {



  componentWillMount() {




  }


  constructor(props) {
    super(props);
    const to = 'hidden';
    this.props.navigator.toggleNavBar({
      to,
      animated: false,
    });
    this.state = {
      enterCode: false,
      spinner: false,
      phoneno: '',
      verificationcode: '',
      country: {
        cca2: 'SG',
        callingCode: '65'
      }
    };






  }

  _getCode = () => {

    this.setState({ spinner: true });

    setTimeout(async () => {

      try {

        const res = await api.post('/protected/json/phones/verification/start', {
          body: {
            api_key: '',
            country_code: '',
            phone_number: this.state.phoneno,
            via: 'sms',
            code_length: '6'
          }
        });

        if (res.err) throw res.err;

        this.setState({
          spinner: false,
          enterCode: true,
          verification: res.body
        });
        this.refs.form.refs.textInput.setNativeProps({ text: '' });

        setTimeout(() => {
          Alert.alert('Sent!', "We've sent you a verification code", [{
            text: 'OK',
            onPress: () => this.refs.form.refs.textInput.focus()
          }]);
        }, 100);

      } catch (err) {
        // <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
        this.setState({ spinner: false });
        setTimeout(() => {
          Alert.alert('Oops!', err.message);
        }, 100);
      }

    }, 100);

  }

  _verifyCode = () => {

    this.setState({ spinner: true });

    setTimeout(async () => {

      try {

        const res = await api.get('/protected/json/phones/verification/check', {
          body: {
            api_key: '',
            country_code: '',
            phone_number: this.state.phoneno,
            verification_code: this.state.verificationcode
          }
        });

        if (res.err) throw res.err;

        this.refs.form.refs.textInput.blur();
        // <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
        this.setState({ spinner: false });
        setTimeout(() => {
          this.props.navigator.push({
            screen: 'example.newuser',
            passProps: {
              phonenumber: this.state.phoneno,
            },
            title: 'Signup',
          });
        }, 100);

      } catch (err) {
        // <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
        this.setState({ spinner: false });
        setTimeout(() => {
          Alert.alert('Oops!', err.message);
        }, 100);
      }

    }, 100);

  }

  _onChangeText = (val) => {
    if (this.state.enterCode) {
      this.setState({ verificationcode: val });
      if (val.length == MAX_LENGTH_CODE) {
        this._verifyCode();
      }
    } else {
      this.setState({ phoneno: val });
    }
  }

  _tryAgain = () => {
    this.refs.form.refs.textInput.setNativeProps({ text: '' })
    this.refs.form.refs.textInput.focus();
    this.setState({ enterCode: false });
  }

  _getSubmitAction = () => {
    this.state.enterCode ? this._verifyCode() : this._getCode();
  }

  _changeCountry = (country) => {
    this.setState({ country });
    this.refs.form.refs.textInput.focus();
  }



  _renderCountryPicker = () => {

    if (this.state.enterCode)
      return (
        <View />
      );

    return (
      <CountryPicker
        ref={'countryPicker'}
        closeable
        style={styles.countryPicker}
        onChange={this._changeCountry}
        cca2={this.state.country.cca2}
        styles={countryPickerCustomStyles}
        translation='eng' />
    );

  }

  _renderCallingCode = () => {

    if (this.state.enterCode)
      return (
        <View />
      );

    return (
      <View style={styles.callingCodeView}>
        <Text style={styles.callingCodeText}>+{this.state.country.callingCode}</Text>
      </View>
    );

  }

  render() {

    let headerText = `What's your ${this.state.enterCode ? 'verification code' : 'phone number'}?`
    let buttonText = this.state.enterCode ? 'Verify confirmation code' : 'Send confirmation code';
    let textStyle = this.state.enterCode ? {
      height: 50,
      textAlign: 'center',
      fontSize: 40,
      fontWeight: 'bold',
      fontFamily: 'Courier'
    } : {};

    return (

      <View style={styles.container}>

        <Image
          source={require('../../img/masonry/a848dHxA4e.jpeg')}
          style={styles.container}>


          <Form ref={'form'} style={styles.form}>

            <View style={{ flexDirection: 'row' }}>
              {this._renderCountryPicker()}
              {this._renderCallingCode()}
              <TextInput
                ref={'textInput'}
                name={this.state.enterCode ? 'code' : 'phoneNumber'}
                type={'TextInput'}
                underlineColorAndroid={'transparent'}
                autoCapitalize={'none'}
                autoCorrect={false}
                onChangeText={this._onChangeText}
                placeholder={this.state.enterCode ? '_ _ _ _ _ _' : 'Phone Number'}
                keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
                style={[styles.textInput, textStyle]}
                returnKeyType='go'
                autoFocus
                placeholderTextColor={brandColor}
                selectionColor={brandColor}
                maxLength={this.state.enterCode ? 6 : 20}
                onSubmitEditing={this._getSubmitAction} />
            </View>
            <TouchableOpacity style={styles.button} onPress={this._getSubmitAction}>
              <Text style={styles.buttonText}>{buttonText}</Text>
            </TouchableOpacity>
          </Form>
        </Image>
        <Spinner
          visible={this.state.spinner}
          textContent={'One moment...'}
          textStyle={{ color: '#fff' }} />

      </View>

    );
  }
}