API tools faq
paste
Advertisement
isuru93

Untitled

isuru93
Mar 30th, 2017
63
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.38 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from 'react'
  2. import {
  3. View,
  4. Text,
  5. AppRegistry,
  6. Image,
  7. StyleSheet,
  8. TextInput,
  9. TouchableOpacity,
  10. Dimensions,
  11. KeyboardAvoidingView,
  12. StatusBar,
  13. Platform,
  14. AsyncStorage
  15. }
  16. from 'react-native';
  17.  
  18. const background = require('../../../img/OTP-bg.png');
  19. const backBtn = require('../../../img/back.png');
  20. const { width, height } = Dimensions.get("window");
  21.  
  22. export default class Otp extends Component {
  23.  
  24. constructor(props) {
  25. super(props)
  26.  
  27. this.ResendOTP = this.ResendOTP.bind(this);
  28.  
  29. this.state = {
  30.  
  31. }
  32.  
  33. }
  34. onTapBack(){
  35. this.props.navigator.dismissModal({
  36. animated: true // does the pop have transition animation or does it happen immediately (optional)
  37. });
  38. }
  39.  
  40. render(){
  41. return(
  42. <Image source={background} style={styles.backgroundImage}>
  43. <StatusBar backgroundColor="#078f99" barStyle="light-content" />
  44.  
  45. <View style={{marginTop:20, padding: 10}}>
  46. <TouchableOpacity style={{width:20, height:20}} onPress ={()=> this.onTapBack()}>
  47. <Image source={backBtn} style={{resizeMode:'contain', width:20, height:20}}/>
  48. </TouchableOpacity>
  49. </View>
  50.  
  51. <View style = {{flexDirection : 'row',padding: 10,width:width, marginTop:20}}>
  52. <Text style={{flex:1, textAlign: 'center', color: '#ffffff', backgroundColor:'transparent', fontSize:25, fontFamily: 'Lato-Regular'}}>Verification Code</Text>
  53. </View>
  54.  
  55. <View style={{width:width, flexDirection : 'row', marginTop:20, alignItems: 'center', paddingLeft:20, paddingRight:20, justifyContent: 'center'}}>
  56. <TextInput style={{height:40, width:40, backgroundColor:'rgba(255,255,255,0.4)', marginRight:8, padding:10, textAlign: 'center', color:'#fff', fontWeight:'700'}}
  57. maxLength = {1}
  58.  
  59. keyboardType = "numeric"
  60. autoFocus = {true}
  61. ref= {(input)=> this.Number1Input= input }
  62. maxLength = {1}
  63. onChangeText = {(number1) => this.Next1(number1)}
  64. value={this.state.Number1}
  65. autoCorrect = {false}
  66. returnKeyType = 'next'
  67. onSubmitEditing = {() =>this.Number2Input.focus()}
  68. underlineColorAndroid = "transparent"/>
  69.  
  70. <TextInput style={{height:40, width:40, backgroundColor:'rgba(255,255,255,0.4)', marginRight:8, padding:10, textAlign: 'center', color:'#fff', fontWeight:'700'}}
  71. maxLength = {1}
  72. keyboardType = "numeric"
  73. underlineColorAndroid = "transparent"
  74. ref= {(input)=> this.Number2Input= input }
  75. maxLength = {1}
  76. onChangeText = {(number2) => this.Next2(number2) }
  77. value={this.state.Number2}
  78. autoCorrect = {false}
  79. returnKeyType = 'next'
  80. onSubmitEditing = {() =>this.Number3Input.focus()}
  81. />
  82.  
  83. <TextInput style={{height:40, width:40, backgroundColor:'rgba(255,255,255,0.4)', marginRight:8, padding:10, textAlign: 'center', color:'#fff', fontWeight:'700'}}
  84. maxLength = {1}
  85. keyboardType = "numeric"
  86. underlineColorAndroid = "transparent"
  87. ref= {(input)=> this.Number3Input= input }
  88. maxLength = {1}
  89. onChangeText = {(number3) => this.Next3(number3)}
  90. value={this.state.Number3}
  91. autoCorrect = {false}
  92. returnKeyType = 'next'
  93. onSubmitEditing = {() =>this.Number4Input.focus()}
  94. />
  95.  
  96. <TextInput style={{height:40, width:40, backgroundColor:'rgba(255,255,255,0.4)', marginRight:8, padding:10, textAlign: 'center', color:'#fff', fontWeight:'700'}}
  97. maxLength = {1}
  98. keyboardType = "numeric"
  99. underlineColorAndroid = "transparent"
  100. ref= {(input)=> this.Number4Input= input }
  101. maxLength = {1}
  102. onChangeText = {(number4) => this.Next4(number4)}
  103. value={this.state.Number4}
  104. autoCorrect = {false}
  105. returnKeyType = 'next'
  106. onSubmitEditing = {() =>this.Number5Input.focus()}
  107. />
  108.  
  109. <TextInput style={{height:40, width:40, backgroundColor:'rgba(255,255,255,0.4)', marginRight:8, padding:10, textAlign: 'center', color:'#fff', fontWeight:'700'}}
  110. maxLength = {1}
  111. keyboardType = "numeric"
  112. underlineColorAndroid = "transparent"
  113. ref= {(input)=> this.Number5Input= input }
  114. maxLength = {1}
  115. onChangeText = {(number5) => this.Next5(number5)}
  116. value={this.state.Number5}
  117. autoCorrect = {false}
  118. returnKeyType = 'next'
  119. onSubmitEditing = {() =>this.Number6Input.focus()}
  120. />
  121.  
  122. <TextInput style={{height:40, width:40, backgroundColor:'rgba(255,255,255,0.4)', marginRight:8, padding:10, textAlign: 'center', color:'#fff', fontWeight:'700'}}
  123. maxLength = {1}
  124. keyboardType = "numeric"
  125. underlineColorAndroid = "transparent"
  126. ref= {(input)=> this.Number6Input= input }
  127. maxLength = {1}
  128. onChangeText = {(number6) => this.Next6(number6)}
  129. value={this.state.number6}
  130. autoCorrect = {false}
  131. returnKeyType = 'done'
  132. />
  133. </View>
  134. <TouchableOpacity onPress= {() => this.ClearAll()} style = {{flexDirection : 'row',paddingLeft:60, paddingRight:60,width:width, marginTop:20,justifyContent :'center',alignItems:'center'}}>
  135. <Text style={{flex:1, textAlign: 'center', color: 'rgba(255,255,255,0.8)', backgroundColor:'transparent', fontSize:15, fontFamily: 'Lato-Light'}}>Clear all</Text>
  136. </TouchableOpacity>
  137. <View style = {{flexDirection : 'row',paddingLeft:60, paddingRight:60,width:width, marginTop:10}}>
  138. <Text style={{flex:1, textAlign: 'center', color: 'rgba(255,255,255,0.8)', backgroundColor:'transparent', fontSize:15, fontFamily: 'Lato-Light'}}>Please enter your verification code sent to {this.props.number}</Text>
  139. </View>
  140.  
  141. <TouchableOpacity onPress ={()=> this.ResendOTP()} style = {{flexDirection : 'row',padding: 10,width:width, justifyContent: 'center', marginTop:10}}>
  142. <View style={{borderBottomWidth:2, borderColor:'rgba(255,255,255,0.4)'}}><Text style={{textAlign: 'center', color: 'rgba(255,255,255,0.8)', backgroundColor:'transparent', fontSize:15, fontFamily: 'Lato-Light'}}>Resend the verification code?</Text></View>
  143. </TouchableOpacity>
  144.  
  145. </Image>
  146. );
  147.  
  148.  
  149. }
  150.  
  151. ClearAll(){
  152. this.setState({
  153. Number1 : false,
  154. Number2 : false,
  155. Number3 : false,
  156. Number4 : false,
  157. Number5 : false,
  158. number6 : false,
  159.  
  160. });
  161. this.Number1Input.focus()
  162. }
  163. Next1(number1){
  164. if(number1 == undefined){
  165. this.setState({Number1 : false});
  166. }else {
  167. this.setState({Number1 : number1});
  168. this.Number2Input.focus()
  169. }
  170.  
  171. }
  172. Next2(number2){
  173. if(number2 == undefined){
  174. this.setState({Number2 : false});
  175. }else {
  176. this.setState({Number2 : number2});
  177. this.Number3Input.focus()
  178. }
  179.  
  180. }
  181. Next3(number3){
  182. if(number3 == undefined){
  183. this.setState({Number3 : false});
  184. }else {
  185. this.setState({Number3 : number3});
  186. this.Number4Input.focus()
  187. }
  188.  
  189. }
  190. Next4(number4){
  191. if(number4 == undefined){
  192. this.setState({Number4 : false});
  193. }else {
  194. this.setState({Number4 : number4});
  195. this.Number5Input.focus()
  196. }
  197.  
  198. }
  199. Next5(number5){
  200. if(number5 == undefined){
  201. this.setState({Number5 : false});
  202. }else {
  203. this.setState({Number5 : number5});
  204. this.Number6Input.focus()
  205. }
  206.  
  207. }
  208. Next6(number6){
  209.  
  210. if(number6 == undefined){
  211. this.setState({Number6 : false});
  212. }else {
  213. this.setState({number6 : number6});
  214.  
  215. if(this.state.Number1 === false || this.state.Number2 === false || this.state.Number2Number3 === false || this.state.Number4 === false || this.state.Number5 === false ){
  216. alert('Please fill all the digits to submit !');
  217. }else{
  218.  
  219. let num1 = this.state.Number1;
  220. let num2 = this.state.Number2;
  221. let num3 = this.state.Number3;
  222. let num4 = this.state.Number4;
  223. let num5 = this.state.Number5;
  224. let num6 = number6;
  225.  
  226. let otp = num1 + num2 + num3 + num4 + num5 + num6 ;
  227.  
  228.  
  229. fetch('http://api.yohobed.com/api/otp',{
  230. method: 'POST',
  231. headers: {
  232.  
  233. 'Content-Type': 'application/json',
  234. },
  235. body: JSON.stringify({
  236. verification_code : otp,
  237. mobile: this.props.number,
  238. })
  239. }).then( response => response.json())
  240. .then( jsonData => {
  241. console.log('json test',jsonData);
  242.  
  243. if(jsonData.success === true){
  244. AsyncStorage.setItem('@isLogged:key', 'Logged');
  245. AsyncStorage.setItem('@customer_name:key', this.props.Customer);
  246. AsyncStorage.setItem('@customer_id:key', jsonData.customer_id.toString());
  247. AsyncStorage.setItem('@device_type:key', this.props.deviceType);
  248. AsyncStorage.setItem('@mobile:key', this.props.number);
  249. AsyncStorage.setItem('@email:key', this.props.email);
  250.  
  251. // alert(jsonData.success);
  252. //sessionsave <---- get JsonData.customer_id && jsonData.customer_name for session
  253.  
  254. this.props.navigator.showModal({
  255. screen: "yohobed.LandingTabViewController",
  256. navigatorStyle: { navBarHidden: true}
  257. });
  258.  
  259. }else {
  260. alert('OTP does not match or try sending otp again ?');
  261. this.ClearAll();
  262. }
  263.  
  264.  
  265. }).catch( error => alert('Error fetching: ' + error) );
  266.  
  267.  
  268. }
  269.  
  270. }
  271.  
  272. }
  273.  
  274. ResendOTP(){
  275. fetch('http://api.yohobed.com/api/again_otp',{
  276. method: 'POST',
  277. headers: {
  278. 'Content-Type': 'application/json',
  279. },
  280. body: JSON.stringify({
  281. mobile: this.props.number,
  282. })
  283. }).then( response => response.json())
  284. .then( jsonData => {
  285. if(jsonData.success === true){
  286. //sessionsave <---- get JsonData.customer_id && jsonData.customer_name for session
  287. }else {
  288. //Error View
  289. }
  290. }).catch( error => alert('Error fetching: ' + error) );
  291.  
  292.  
  293.  
  294. }
  295.  
  296.  
  297.  
  298.  
  299.  
  300.  
  301. }
  302.  
  303.  
  304. const styles = StyleSheet.create({
  305. backgroundImage: {
  306. flex: 1,
  307. resizeMode: 'cover',
  308. },
  309. input: {
  310. paddingLeft: 10,
  311.  
  312. width: 40,
  313. height: 40,
  314. textAlign: 'center'
  315.  
  316. },
  317. formContainer: {
  318. flex : 4,
  319. flexDirection: 'row',
  320. width: width,
  321. justifyContent : 'center'
  322. },
  323. verification : {
  324. alignItems : 'center'
  325. }
  326.  
  327.  
  328. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!