339 lines
8.9 KiB
JavaScript
Executable File
339 lines
8.9 KiB
JavaScript
Executable File
import React, { Component } from "react";
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
View,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
SafeAreaView,
|
|
Keyboard,
|
|
TouchableWithoutFeedback
|
|
} from "react-native";
|
|
import { observable } from "mobx";
|
|
import { observer, inject } from "mobx-react/native";
|
|
import Text from "react-native-text";
|
|
import theme from "../../config/colors";
|
|
import firebase from "react-native-firebase";
|
|
import Header from "../../components/Public/signInUpHeader";
|
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
|
import Size from "../../config/size";
|
|
import { width, height } from "../../config/screen";
|
|
import { Button } from "react-native-elements";
|
|
import CodeInput from "react-native-confirmation-code-input";
|
|
const size = new Size();
|
|
import Toast, { DURATION } from "react-native-easy-toast";
|
|
import Countdown, { CountdownStatus } from "rn-countdown";
|
|
import { Fonts } from "../../config/fonts";
|
|
|
|
@inject(["userStore"])
|
|
@observer
|
|
export default class SignUpVerify extends Component {
|
|
@observable
|
|
resend = false;
|
|
|
|
@observable
|
|
signInData = {
|
|
email: "",
|
|
countryCode: "852",
|
|
mobile: "",
|
|
pwd: "",
|
|
name: "",
|
|
verificationCode:""
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = this.props.userStore;
|
|
}
|
|
|
|
componentDidMount() {
|
|
// this.startToCount();
|
|
}
|
|
|
|
componentWillUnmount = () => {
|
|
// clearInterval(this.interval);
|
|
};
|
|
|
|
state = { checked: false };
|
|
|
|
navigatieAction(page) {
|
|
this.props.navigation.navigate(page);
|
|
}
|
|
|
|
startToCount() {
|
|
this.interval = setInterval(() => {
|
|
this.count();
|
|
}, 1000);
|
|
}
|
|
|
|
count() {
|
|
this.store.countdown -= 1;
|
|
if (this.store.countdown == 0) {
|
|
this.resend = true;
|
|
clearInterval(this.interval);
|
|
}
|
|
}
|
|
|
|
signupAction() {
|
|
if(this.store.signUpData.verificationCode == "" || this.store.signUpData.verificationCode == null){
|
|
this.refs.toast.show('Please enter the verification no.')
|
|
}else{
|
|
this.store.signupPost( this);
|
|
}
|
|
}
|
|
|
|
resendAction() {
|
|
this.store.countdown = 10;
|
|
this.resend = false;
|
|
this.startToCount();
|
|
}
|
|
|
|
handleClickCountdown = () => {
|
|
var bodyFormData = new FormData();
|
|
|
|
bodyFormData.append("country_code", "852");
|
|
bodyFormData.append("phone_number",this.store.signUpData.mobile.toString() );
|
|
|
|
this.store.sendsmsVerify(bodyFormData, this);
|
|
};
|
|
|
|
startToCountDown = () => {
|
|
this.countdown && this.countdown.startCountdown();
|
|
};
|
|
|
|
handleNetworkFailed = () => alert("network failed");
|
|
|
|
handleStopCountdown = () => this.countdown && this.countdown.stopCountdown();
|
|
|
|
countDownButton() {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<Countdown
|
|
ref={r => (this.countdown = r)}
|
|
time={60}
|
|
onPress={this.handleClickCountdown}
|
|
onNetworkFailed={this.handleNetworkFailed}
|
|
onDidFinishCountdown={this.handleCountdownOver}
|
|
>
|
|
{({ status, time }) => {
|
|
let title, containerStyle, titleStyle;
|
|
switch (status) {
|
|
case CountdownStatus.Idle:
|
|
title = "send";
|
|
containerStyle = styles.countdown;
|
|
titleStyle = styles.countdownTitle;
|
|
break;
|
|
case CountdownStatus.Counting:
|
|
title = `sent(${time})`;
|
|
containerStyle = styles.countdown;
|
|
titleStyle = styles.countdownTitle;
|
|
break;
|
|
case CountdownStatus.Over:
|
|
title = "resend";
|
|
containerStyle = styles.countdown;
|
|
titleStyle = styles.countdownTitle;
|
|
break;
|
|
}
|
|
return (
|
|
<View style={containerStyle}>
|
|
<Text style={titleStyle}>{title}</Text>
|
|
</View>
|
|
);
|
|
}}
|
|
</Countdown>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
|
|
<View style={styles.container}>
|
|
<View style={styles.mainContainer}>
|
|
<Header navigation={this.props.navigation} back = {true} />
|
|
|
|
<View
|
|
style={{
|
|
backgroundColor: theme.inputBgc,
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
marginTop: 30,
|
|
height: verticalScale(40),
|
|
borderRadius: 5,
|
|
justifyContent: "center"
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
// backgroundColor:theme.inputBgc,
|
|
color: theme.foodNameColor,
|
|
fontSize: 15,
|
|
paddingRight: 30,
|
|
paddingLeft: 30,
|
|
fontFamily: Fonts.century
|
|
}}
|
|
underlineColorAndroid="rgba(0,0,0,0)"
|
|
>
|
|
{this.store.signUpData.mobile}
|
|
</Text>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
marginTop: 30,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between"
|
|
}}
|
|
>
|
|
{this.countDownButton()}
|
|
|
|
<View
|
|
style={{
|
|
backgroundColor: theme.inputBgc,
|
|
marginLeft: 10,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
height: verticalScale(40),
|
|
borderRadius: 5,
|
|
flex: 1
|
|
}}
|
|
>
|
|
<TextInput
|
|
style={{
|
|
// backgroundColor:theme.inputBgc,
|
|
color: theme.foodNameColor,
|
|
fontSize: size.getSize(12),
|
|
paddingRight: 30,
|
|
paddingLeft: 40,
|
|
fontFamily: Fonts.century,
|
|
alignSelf: 'stretch'
|
|
}}
|
|
onChangeText = {(text)=>this.store.signUpData.verificationCode = text}
|
|
keyboardType = {'numeric'}
|
|
underlineColorAndroid="rgba(0,0,0,0)"
|
|
placeholder="verification no."
|
|
placeholderStyle={{
|
|
fontWeight: "bold",
|
|
fontFamily: Fonts.century,
|
|
fontSize: size.getSize(10)
|
|
}}
|
|
placeholderTextColor={theme.foodNameColor}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: 60,
|
|
width: "100%"
|
|
}}
|
|
>
|
|
|
|
</View>
|
|
</View>
|
|
|
|
<Toast ref="toast" />
|
|
<TouchableOpacity
|
|
style={styles.signupButton}
|
|
onPress={() => {
|
|
this.signupAction();
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 18,
|
|
fontFamily: Fonts.century,
|
|
color: "white",
|
|
fontWeight: "bold"
|
|
}}
|
|
>
|
|
Register
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: Fonts.century,
|
|
color: "white",
|
|
fontWeight: "bold"
|
|
}}
|
|
>
|
|
No More Hangry
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
backgroundColor: "white"
|
|
},
|
|
|
|
mainContainer: {
|
|
width: width,
|
|
flex: 1
|
|
},
|
|
|
|
loginButton: {
|
|
width: scale(200),
|
|
height: verticalScale(50),
|
|
marginTop: moderateScale(30)
|
|
},
|
|
|
|
signupButton: {
|
|
width: width,
|
|
height: verticalScale(50)
|
|
},
|
|
phoneCell: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 15,
|
|
height: 40,
|
|
borderBottomWidth: 1,
|
|
borderColor: "#ebebeb",
|
|
width: width,
|
|
backgroundColor: "#fff"
|
|
},
|
|
phoneInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
input: {
|
|
height: 30,
|
|
width: width * 0.4,
|
|
marginLeft: 10,
|
|
padding: 0,
|
|
fontSize: 14
|
|
},
|
|
countdown: {
|
|
borderRadius: 5,
|
|
borderWidth: 2,
|
|
borderColor: theme.coolGrey,
|
|
height: verticalScale(40),
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
countdownTitle: {
|
|
color: theme.coolGrey,
|
|
fontSize: 12
|
|
},
|
|
signupButton: {
|
|
backgroundColor: theme.mainColor,
|
|
width: width,
|
|
height: verticalScale(60),
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}
|
|
});
|