Mr.Paresh Chavda
import React, { Component } from 'react';
import {
Text, View, TouchableOpacity, StatusBar, KeyboardAvoidingView, AsyncStorage,
Image, TextInput, Platform, StyleSheet, ActivityIndicator, Dimensions, ScrollView
} from 'react-native';
import AppHelper from '../../Helpers/AppHelper'
import HelperConstant from '../../Helpers/HelperConstant'
import DeviceInfo from 'react-native-device-info';
import LinearGradient from 'react-native-linear-gradient';
import { Actions } from 'react-native-router-flux';
import CodeInput from 'react-native-code-input';
const { lockImage, logoIcon, backgroundImage } = HelperConstant
const { height, width } = Dimensions.get('window')
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {
mobile: '',
countryCode: '',
otp: '',
otpError: false,
otpErrorMsg: '',
spinner: false,
noInternetView: false,
applicationVersion: null,
fcmToken: null,
countryId: null
}
}
componentDidMount() {
this.getData()
const { navigation } = this.props;
const mobile = navigation.getParam('mobile');
const countryCode = navigation.getParam('countryCode');
const countryId = navigation.getParam('countryId');
console.log(mobile, ' ', countryCode, ' ', countryId)
this.setState({
mobile: mobile,
countryCode: countryCode,
countryId: countryId
})
var Version = DeviceInfo.getVersion()
this.setState({ applicationVersion: Version })
}
getData = async () => {
try {
const fcmToken = await AsyncStorage.getItem('fcmToken')
if (fcmToken !== null) { this.setState({ fcmToken: fcmToken }) }
} catch (e) { console.log(e) }
}
validatingUserData = () => {
const { otp } = this.state;
if (otp !== '' && otp !== null) {
if (otp.length != 4) {
this.setState({ otpError: true, otpErrorMsg: 'Enter valid otp number' })
}
else {
this.setState({ otpError: false }, () => {
this.otpVerifyApi()
})
}
} else {
this.setState({ otpError: true, otpErrorMsg: 'Enter otp number' })
}
}
async otpVerifyApi() {
AppHelper.checkinternetconnection().then(isConnect => {
if (isConnect) {
console.log(HelperConstant.ConsoleLogProjectName + 'API-VERIFICATION-MOBILE' + HelperConstant.ConsoleLogDeveloperName + isConnect);
this.setState({ spinner: true })
let headers = new Headers({ 'Content-Type': 'multipart/form-data' })
var formData = new FormData();
formData.append("mobile_number", this.state.mobile);
formData.append("otp", this.state.otp);
formData.append("phone_code", this.state.countryCode);
formData.append("country_id", this.state.countryId);
formData.append("device_type", Platform.OS);
formData.append("device_token", this.state.fcmToken);
console.log(formData)
AppHelper.commonfetchurl(HelperConstant.verifyotp, 'POST', headers, formData)
.then(response => response.json())
.then(response => {
console.log(response)
this.setState({ spinner: false })
if (response.status === 1) {
if (response.data.otp_verified == true) {
Actions.push('ForgotCreatePin', {
mobile: this.state.mobile,
countryCode: this.state.countryCode,
countryId: this.state.countryId
})
} else {
this.setState({ otpError: true, otpErrorMsg: response.message })
}
} else {
this.setState({ otpError: true, otpErrorMsg: response.message })
}
})
.catch((error) => {
console.log(error)
this.setState({ spinner: false })
});
} else {
this.setState({ noInternetView: true, spinner: false })
}
});
}
async loginApi() {
AppHelper.checkinternetconnection().then(isConnect => {
if (isConnect) {
console.log(HelperConstant.ConsoleLogProjectName + 'API-VERIFICATION-MOBILE' + HelperConstant.ConsoleLogDeveloperName + isConnect);
// this.setState({ spinner: true })
let headers = new Headers({ 'Content-Type': 'multipart/form-data' })
var formData = new FormData();
formData.append("mobile_number", this.state.mobile);
formData.append("phone_code", this.state.countryCode);
console.log(formData)
AppHelper.commonfetchurl(HelperConstant.forgetpin, 'POST', headers, formData)
.then(response => response.json())
.then(response => {
console.log(response)
this.setState({ spinner: false })
if (response.status === 1) {
AppHelper.alertDialog('OTP Sent', 'Dear customer, your OTP sent on this number - ' + this.state.mobile)
} else {
AppHelper.alertDialog('Something went to wrong', response.message)
}
})
.catch((error) => {
console.log(error)
this.setState({ spinner: false })
});
} else {
this.setState({ noInternetView: true, spinner: false })
}
});
}
render() {
return (
Actions.pop()}>
Back
Enter OTP
Send OTP on this number{'\n'}{this.state.mobile}
{
this.state.spinner &&
}
{
this.setState({ otp: otp }, () => {
this.validatingUserData()
})
}}
/>
{
this.state.otpError &&
{this.state.otpErrorMsg}
}
this.loginApi()}>
If you did't receive a code ! Resend
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: HelperConstant.backColor
},
logoStyle: {
margin: 10,
marginBottom: 40,
height: width * 0.2,
width: (width * 0.2),
alignSelf: 'center'
},
subCard: {
marginTop: 60,
width: '96%',
borderRadius: 10,
padding: 20,
},
singalInputCard: {
padding: Platform.OS === 'ios' ? 10 : 8,
alignSelf: 'center',
backgroundColor: HelperConstant.WightColor,
width: '96%',
marginVertical: 10,
flexDirection: 'row',
overflow: 'hidden', borderColor: '#d4d4d4', borderRadius: 10, borderWidth: 1
},
loginButtonCard: {
padding: 14,
justifyContent: 'center',
alignItems: 'center',
elevation: 3,
shadowColor: HelperConstant.BlackColor,
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
borderRadius: 10,
alignSelf: 'center',
backgroundColor: HelperConstant.SkyBlueColor,
width: '96%',
marginTop: 20,
},
iconStyle: {
paddingHorizontal: 10,
alignSelf: 'center',
height: (width * 0.2) / 3,
width: (width * 0.2) / 3,
padding: 5,
},
input: {
borderColor: HelperConstant.BlackColor,
borderWidth: 2,
},
loginText: {
fontSize: 40, width: '96%', alignSelf: 'center', textAlign: 'center',
fontFamily: HelperConstant.FontFamilyRalBold, color: HelperConstant.BlackColor
},
textTitle: {
fontSize: (width * 0.2) / 5, width: '96%', alignSelf: 'center', marginTop: 30,
fontFamily: HelperConstant.FontFamilyMid, color: HelperConstant.BlackColor
},
textsubTitle: {
fontSize: (width * 0.2) / 3.4, width: '96%', alignSelf: 'center', marginTop: 10,
fontFamily: HelperConstant.FontFamilyReg, color: HelperConstant.BlackColor, textAlign: 'center',
},
textwelcome: {
fontSize: (width * 0.2) / 5, width: '96%', alignSelf: 'center', marginTop: 10,
fontFamily: HelperConstant.FontFamilyReg, color: HelperConstant.BlackColor
}
});
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment