campus_react_local/App/views/Login/LoginByVerificationCodeView...

/**
 * Created by zack on 2018/6/24.
 */
/**
 * Created by zack on 2018/6/19.
 */
import {
	View,
	Text,
	StyleSheet,
	TouchableOpacity,
	Platform,
	Image,TextInput
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
import HttpTools from '../../network/HttpTools'
import {signUpByEmail, signUpByPhone, userSmsCode, userEmailCode, userSmsCodeLogin} from '../../network/API'
import ToastMsg from '../../utils/ToastMsg'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import BaseNavigationBarStyle from '../base/BaseNavigationBarStyle'

export default class LoginByVerificationCodeViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			account: '',
			verificationCode: '',
			password: '',
			phoneCode: '86',
			isEmailLoginType: false
		}
	}

	clickBackButton() {
		this.props.navigator.pop()
	}

	getVerificationCode() {
		console.log('smscode')
		if (!this.state.account.length) {
			if (this.state.isEmailLoginType) {
				ToastMsg.show('请输入您的邮箱')
			}else  {
				ToastMsg.show('请输入您的手机号')
			}

			return;
		}

		let param
		let url = ''
		if (this.state.isEmailLoginType) {
			url = userEmailCode
			param = JSON.stringify({
				email: this.state.account,
				purpose: "login"

			})
		}else {
			url = userSmsCode
			param = JSON.stringify({
				phone: this.state.account,
				phone_code: this.state.phoneCode,
				purpose: "login"
			})
		}

		HttpTools.post(url, param, (response) => {
			ToastMsg.show('验证码发送成功')
			console.log(response)
		}, (error) => {
			console.warn(error)
		})
	}

	login() {
		if (!this.state.account.length) {
			if (this.state.isEmailLoginType) {
				ToastMsg.show('请输入您的邮箱')
			}else  {
				ToastMsg.show('请输入您的手机号')
			}

			return;
		}

		if (!this.state.verificationCode.length) {
			ToastMsg.show('请输入您的验证码')
			return;
		}

		let param
		if (this.state.isEmailLoginType) {
			param = JSON.stringify({
				code: this.state.verificationCode,
				forget_me: true,
				email: this.state.account
			})
		}else {
			param = JSON.stringify({
				code: this.state.verificationCode,
				forget_me: true,
				phone: this.state.account
			})
		}

		HttpTools.post(userSmsCodeLogin, param, (response) => {
			if (response && response.token) {
				global.token = response.token
				GlobalUserStorageTool.save(UserStorageKey.UserInfo, response)
				this.props.navigator.pop()
				ToastMsg.show('登录成功')
			}else {
				ToastMsg.show('登录失败')
			}
		}, (error) => {
			ToastMsg.show('登录成功')
		})
	}

	goToCountCodeList() {
		this.props.navigator.push({
			screen: 'CountCodeListViewController',
			title: '国家和地区',
			backButtonTitle: '',
			passProps: {
				didSelectedItem: (phoneCode)=> {
					this.setState({phoneCode: phoneCode})
				}
			},
			navigatorStyle: BaseNavigationBarStyle
		})
	}

	didSelectedTag() {
		this.setState({isEmailLoginType: !this.state.isEmailLoginType})
	}

	loginWithAccount() {
		this.props.navigator.push({
			screen: 'LoginViewController',
			title: '',
			backButtonTitle: '',
			passProps: {

			},
			navigatorStyle: {
				navBarHidden: true
			}
		})
	}

	renderAccountView(isEmailLoginType) {
		if (!isEmailLoginType) {
			return(
				<View style={{width: ScreenDimensions.width - 30, height: 49, flexDirection: 'row', alignItems: 'center'}}>
					<TouchableOpacity onPress={() => {
						this.goToCountCodeList()
					}} style={{marginLeft: 0, width: 43, height: 47, justifyContent: 'center', }}>
						<Text style={{color: '#b8bcbf', fontSize: 14}}>{this.state.phoneCode}</Text>
					</TouchableOpacity>

					<View style={{width: 0.5, height: 21,backgroundColor: 'rgba(80, 80, 80, 0.36)'}}/>
					<TextInput
						onChangeText={(text) => {
						this.setState({account: text})
					}}
					   keyboardType={'email-address'}
					   placeholder={ '请输入手机号'} placeholderTextColor={'#b8bcbf'}
					   style={[styles.AccountTextInput, {width: ScreenDimensions.width - 30 - 44, paddingLeft: 17}]}/>
				</View>
			)
		}else {
			return(
				<TextInput onChangeText={(text) => {
					this.setState({account: text})
				}} keyboardType={'email-address'} placeholder={'请输入邮箱'} placeholderTextColor={'#b8bcbf'} style={[styles.AccountTextInput, {width: ScreenDimensions.width - 30,}]}/>
			)
		}
	}


	render() {
		return(
			<View style={styles.View}>
				<View style={styles.NavigationBarBgView}>
					<View style={styles.NavigationBar}>
						<TouchableOpacity onPress={() => {
							this.clickBackButton()
						}} style={styles.BackImageView}>
							<Image source={require("../../resources/images/TabBar/Learn/btn_back.png")}/>
						</TouchableOpacity>

						<Image source={require('../../resources/images/LoginSignUp/logo.png')} style={styles.LogoImageView}/>
					</View>
				</View>

				<View style={styles.TagButtonView}>
					<TouchableOpacity onPress={() => {
						if (this.state.isEmailLoginType) {
							this.didSelectedTag()
						}
					}} style={[{marginRight: 92}]}>
						<Text style={this.state.isEmailLoginType === false ? styles.TagButtonTextSelected : styles.TagButtonTextNormal}>{'手机验证码'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						if (!this.state.isEmailLoginType) {
							this.didSelectedTag()
						}
					}}  style={styles.TagButtonText}>
						<Text style={this.state.isEmailLoginType === true ? styles.TagButtonTextSelected : styles.TagButtonTextNormal}>{'邮箱验证码'}</Text>
					</TouchableOpacity>
				</View>

				<View style={styles.AccountTextInputBgView}>
					{this.renderAccountView(this.state.isEmailLoginType)}
					<View style={styles.LineView}/>
				</View>

				<View style={styles.VerifyTextInputBgView}>
					<View style={styles.VerifyTextInputContainerView}>
						<TextInput onChangeText={(text) => {
							this.setState({verificationCode: text})
						}} keyboardType={'phone-pad'} placeholder={'请输入验证码'} placeholderTextColor={'#b8bcbf'} style={styles.VerifyTextInput}/>
						<TouchableOpacity onPress={() => {
							this.getVerificationCode()
						}} style={styles.VerifyButtonBgView}>
							<View style={styles.VerifyLineView}/>
							<Text style={styles.VerifyButtonText}>{'获取验证码'}</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.LineView}/>
				</View>


				<TouchableOpacity onPress={() => {
					this.login()
				}} style = {styles.SignUpButton}>
					<Text style={styles.SignUpButtonText}>{'登录'}</Text>
				</TouchableOpacity>

				<View style={styles.BottomLoginAndSignUpBgView}>
					<TouchableOpacity onPress={() => {
						this.loginWithAccount()
					}}>
						<Text style={styles.AccountLoginText}>{'账号登录'}</Text>
					</TouchableOpacity>

					<TouchableOpacity onPress={() => {
						this.props.navigator.push({
							screen: 'SignUpViewController',
							title: '',
							backButtonTitle: '',
							passProps: {

							},
							navigatorStyle: {
								navBarHidden: true
							}
						})
					}}>
						<Text style={styles.SignUpText}>{'免费注册'}</Text>
					</TouchableOpacity>
				</View>

				<View style={styles.BottomSignUpView}>
					<View style={styles.VBgView}>
						<View style={[styles.VLineView, {marginLeft: 15,}]}/>
						<Text style={styles.VText}>{'使用其他方式登录'}</Text>
						<View style={styles.VLineView}/>
						<View />
					</View>

					<View style={styles.IconBgView}>
						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/wechat.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/QQ.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/weibo.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/Facebook.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/twitter.png')}/>
						</TouchableOpacity>

						<TouchableOpacity style={styles.IconView}>
							<Image source={require('../../resources/images/LoginSignUp/Google.png')}/>
						</TouchableOpacity>
					</View>
				</View>

			</View>
		)
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		backgroundColor: 'white'
	},
	NavigationBarBgView: {
		position: 'absolute',
		left: 0,
		top: 0,
		height: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		backgroundColor: "#ffffff",
		shadowColor: "#eeeeee",
		shadowOffset: {
			width: 0,
			height: -1
		},
		shadowRadius: 0,
		shadowOpacity: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		elevation: 5, //only for android
	},
	NavigationBar: {
		position: 'absolute',
		left: 0,
		top: 0,
		height: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		backgroundColor: "#ffffff",
		shadowColor: "#eeeeee",
		shadowOffset: {
			width: 0,
			height: -1
		},
		shadowRadius: 0,
		shadowOpacity: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		elevation: 5, //only for android
	},
	LogoImageView: {
		width: 80,
		height: 25,
	},
	BackImageView: {
		position: 'absolute',
		left: 15,
		top: (NavigationBarHeight.height - 15)/2.0
	},
	AccountTextInputBgView: {
		width: ScreenDimensions.width - 30,
		height: 50,
		marginLeft: 15,
		marginTop: 35
	},
	LineView: {
		width: ScreenDimensions.width - 30,
		backgroundColor: '#efeff4',
		height: 0.5,
	},
	AccountTextInput: {
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:49,
	},
	VerifyTextInputBgView: {
		width: ScreenDimensions.width - 30,
		height: 50,
		marginLeft: 15,
		marginTop: 28
	},
	VerifyTextInputContainerView: {
		width: ScreenDimensions.width - 30,
		height: 49,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	VerifyTextInput: {
		width: ScreenDimensions.width - 30 - 100,
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:49,
	},
	VerifyButtonBgView: {
		width: 100,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	VerifyButtonText: {
		fontSize: 14,
		color: '#5a9cd9',
	},
	VerifyLineView: {
		width: 1,
		height: 21,
		backgroundColor: 'rgba(80, 80, 80, 0.36)'
	},
	PasswordTextInputBgView: {
		width: ScreenDimensions.width - 30,
		height: 50,
		marginLeft: 15,
		marginTop: 28,
	},
	PasswordTextInput: {
		width: ScreenDimensions.width - 30,
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:49,
	},
	SignUpButton: {
		width:ScreenDimensions.width - 30,
		height: 50,
		backgroundColor: '#e66a6a',
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 5,
		marginTop: 26,
		marginLeft: 15,
	},
	SignUpButtonText: {
		fontSize: 16,
		color: '#ffffff'
	},
	LoginButtonBgView: {
		width: ScreenDimensions.width,
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 18
	},
	LoginButton: {

	},
	LoginText1: {
		fontSize: 14,
		color: '#909090'
	},
	LoginText2: {
		fontSize: 14,
		color: '#5a9cd9'
	},
	BottomSignUpView: {
		position: 'absolute',
		left: 0,
		bottom: 0,
		width: ScreenDimensions.width,
		height: 100,
	},
	VBgView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		width: ScreenDimensions.width
	},
	VLineView: {
		width: (ScreenDimensions.width - 120 - 15*4)/2.0,
		height: 0.5,
		backgroundColor: '#e1e3e6'
	},
	VText: {
		fontSize: 14,
		color: '#8c8c8c',
		width: 120,
		textAlign: 'center'
	},
	IconBgView: {
		width: ScreenDimensions.width,
		height: 25,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-around',
		marginTop: 32
	},
	IconView: {
		width: 25,
		height: 25,
	},
	TagButtonView: {
		width: ScreenDimensions.width,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		marginTop: NavigationBarHeight.height + 40
	},
	TagButtonTextNormal: {
		fontSize: 16,
		color: '#505050',
	},
	TagButtonTextSelected: {
		fontSize: 16,
		color: '#5a9cd9',
	},
	BottomLoginAndSignUpBgView: {
		width: ScreenDimensions.width - 30,
		marginLeft: 15,
		marginTop: 23,
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	AccountLoginText: {
		fontSize: 13,
		color: '#979696',
	},
	SignUpText: {
		fontSize: 13,
		color: '#7dafe0',
	},


})