campus_react_local/App/views/Login/LoginViewController.js

/**
 * 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, login} from '../../network/API'
import ToastMsg from '../../utils/ToastMsg'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import ActionSheet from 'react-native-actionsheet'
import BaseNavigationBarStyle from '../base/BaseNavigationBarStyle'


export default class LoginViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			account: props.account,
			password: '',
			isRememberAccount: true
		}
	}

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

	login() {
		if (this.state.account === null || !this.state.account.length) {
			ToastMsg.show('请输入您的账号')
			return;
		}

		if (!this.state.password.length) {
			ToastMsg.show("请输入您的密码");
			return
		}

		if (this.state.password.length < 6) {
			ToastMsg.show("密码长度不能少于6位");
			return
		}

		let param = JSON.stringify({
			forget_me: false,
			password: this.state.password,
			username: this.state.account
		})

		HttpTools.post(login, param, (response) => {
			console.log(response)
			if (response && response.token) { //登录成功
				GlobalUserStorageTool.save(UserStorageKey.UserInfo, response)
				GlobalUserStorageTool.save(UserStorageKey.AccountAndPassword, {account: this.state.account, password: this.state.password})
				global.token = response.token
				this.props.navigator.popToRoot()

			}else {
				ToastMsg.show(response.msg)
			}
		}, (error) => {
			ToastMsg.show('登录失败')
		})
	}

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

	resetPassword() {
		this.props.navigator.push({
			screen: 'ForgotPasswordViewController',
			title: '',
			backButtonTitle: '',
			passProps: {
				didSelectedItem: (phoneCode)=> {
					this.setState({phoneCode: phoneCode})
				}
			},
			navigatorStyle: {
				navBarHidden: true
			}
		})
	}


	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.AccountTextInputBgView}>
					<TextInput onChangeText={(text) => {
						this.setState({account: text})
					}} keyboardType={'email-address'} placeholder={'请输入邮箱或手机号'} placeholderTextColor={'#b8bcbf'} style={styles.AccountTextInput}/>
					<View style={styles.LineView}/>
				</View>

				<View style={styles.PasswordTextInputBgView}>
					<View style={styles.PasswordContainerView}>
						<TextInput onChangeText={(text) => {
							this.setState({password: text})
						}} secureTextEntry={true} placeholder={'请输入密码'} placeholderTextColor={'#b8bcbf'} style={styles.PasswordTextInput}/>
						<TouchableOpacity onPress={() => {
							this.resetPassword()
						}}>
							<Text style={styles.ForgotPasswordButtonText}>{'忘记密码'}</Text>
						</TouchableOpacity>
					</View>
					<View style={styles.LineView}/>
				</View>

				<View style={styles.CheckBoxAndSignUpBgView}>
					<Text style={{color: '#e66a6a', fontSize: 12}}>{'密码错误'}</Text>
				</View>

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

				<View style={styles.BottomLoginAndSignUpBgView}>
					<TouchableOpacity onPress={() => {
						this.loginByVerificationCode()
					}}>
						<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: NavigationBarHeight.height + 20
	},
	LineView: {
		width: ScreenDimensions.width - 30,
		backgroundColor: '#efeff4',
		height: 0.5,
	},
	AccountTextInput: {
		width: ScreenDimensions.width - 30,
		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,
	},
	PasswordContainerView: {
		width: ScreenDimensions.width - 30,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center'
	},
	PasswordTextInput: {
		width: ScreenDimensions.width - 30 - 60,
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:49,
	},
	ForgotPasswordButton: {

	},
	ForgotPasswordButtonText: {
		fontSize: 14,
		color: '#666666'
	},
	CheckBoxAndSignUpBgView: {
		marginTop: 25,
		width: ScreenDimensions.width - 30,
		marginLeft: 15,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',

	},
	CheckBoxBgView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
	},
	CheckBoxImageView: {
		width: 13,
		height: 13,
		marginRight: 3,
	},
	CheckBoxText: {
		fontSize: 14,
		color: '#979696'
	},
	FreeSignUpButtonText: {
		fontSize: 14,
		color: '#5a9cd9'
	},
	SignUpButton: {
		width:ScreenDimensions.width - 30,
		height: 50,
		backgroundColor: '#e66a6a',
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 5,
		marginTop: 20,
		marginLeft: 15,
	},
	SignUpButtonText: {
		fontSize: 16,
		color: '#ffffff'
	},
	LoginButtonBgView: {
		width: ScreenDimensions.width,
		marginTop: 18
	},
	LoginButton: {
		marginLeft: 15,
	},
	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,
	},
	BottomLoginAndSignUpBgView: {
		width: ScreenDimensions.width - 30,
		marginLeft: 15,
		marginTop: 23,
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	AccountLoginText: {
		fontSize: 13,
		color: '#979696',
	},
	SignUpText: {
		fontSize: 13,
		color: '#7dafe0',
	},
})