Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import {
- Dimensions, AsyncStorage, View, Image, TouchableHighlight, Text, Button,
- ActivityIndicator, Keyboard, Alert
- } from 'react-native';
- import { TextField } from 'react-native-material-textfield';
- import { FontAwesome } from '@expo/vector-icons';
- import { connect } from 'react-redux';
- import { NavigationActions } from 'react-navigation';
- import { AppConstants } from "../app-utils.js";
- import Files from '../Files';
- const { width, height} = Dimensions.get('window');
- const SCREEN_WIDTH = width > height ? width : height;
- const isSmallDevice = SCREEN_WIDTH <= 414;
- import {
- login,
- updateFieldError,
- updateFieldLoginSuccess,
- } from '../actions/LoginActions';
- class Login extends Component {
- static navigationOptions = () => ({
- header: null
- });
- constructor(props) {
- super(props);
- this.onFocus = this.onFocus.bind(this);
- this._login = this._login.bind(this);
- this.onChangeText = this.onChangeText.bind(this);
- this.onSubmitEmail = this.onSubmitEmail.bind(this);
- this.onSubmitPassword = this.onSubmitPassword.bind(this);
- this.onAccessoryPress = this.onAccessoryPress.bind(this);
- this.emailRef = this.updateRef.bind(this, 'email');
- this.passwordRef = this.updateRef.bind(this, 'password');
- this.renderPasswordAccessory = this.renderPasswordAccessory.bind(this);
- this.state = {
- email: '',
- password: '',
- errors: {},
- secureTextEntry: true,
- }
- }
- onFocus() {
- let { errors = {} } = this.props;
- for (let name in errors) {
- let ref = this[name];
- if (ref && ref.isFocused()) {
- delete errors[name];
- }
- }
- this.setState({ errors });
- }
- onChangeText(text) {
- ['email', 'password']
- .map((name) => ({ name, ref: this[name] }))
- .forEach(({ name, ref }) => {
- if (ref.isFocused()) {
- this.setState({ [name]: text });
- }
- });
- }
- onSubmitEmail() {
- this.password.focus();
- }
- onSubmitPassword() {
- this.password.blur();
- }
- _navigateLoginNative() {
- const resetAction = NavigationActions.reset({
- index: 0,
- actions: [
- NavigationActions.navigate({ routeName: 'LoginNative' })
- ]
- })
- this.props.navigation.dispatch(resetAction);
- }
- _login() {
- Keyboard.dismiss();
- let errors = {};
- ['email', 'password']
- .forEach((name) => {
- let value = this[name].value();
- if (!value) {
- if (name == 'email')
- errors[name] = 'Email obrigatório!';
- else
- errors[name] = 'Senha obrigatória!';
- }
- });
- this.setState({ errors });
- if (Object.keys(errors).length == 0) {
- let { navigate } = this.props.navigation;
- let { email, password } = this.state;
- this.props.login({ email, password, navigate });
- }
- }
- updateRef(name, ref) {
- this[name] = ref;
- }
- renderBtnLogin() {
- if (this.props.loginInProgress) {
- return (
- <ActivityIndicator color={AppConstants.secondaryColor} size="large" />
- );
- }
- return (
- <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 10 }}>
- <TouchableHighlight
- style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: AppConstants.secondaryColor, width: 300, height: 40 }}
- underlayColor={AppConstants.secondaryColor}
- onPress={() => this._login()}
- >
- <Text style={{ color: '#FFF', fontSize: 18, fontWeight: 'bold' }}>
- ENTRAR
- </Text>
- </TouchableHighlight>
- </View>
- );
- }
- onAccessoryPress() {
- this.setState(({ secureTextEntry }) => ({ secureTextEntry: !secureTextEntry }));
- }
- renderPasswordAccessory() {
- let { secureTextEntry } = this.state;
- let name = secureTextEntry ?
- 'eye' :
- 'eye-slash';
- return (
- <FontAwesome
- name={name}
- size={16}
- color={AppConstants.primaryColor}
- onPress={this.onAccessoryPress}
- suppressHighlighting
- disabled={this.props.loginInProgress}
- />
- );
- }
- componentWillUnmount() {
- Keyboard.dismiss();
- }
- componentDidUpdate() {
- if (this.props.error) {
- Alert.alert(
- '',
- this.props.error
- )
- this.props.updateFieldError('');
- }
- if (this.props.loginSuccess) {
- this.setState({ ['password']: '' });
- this.props.updateFieldLoginSuccess(false);
- }
- }
- render() {
- let { errors = {}, secureTextEntry, ...data } = this.state;
- return (
- <View
- style={{
- flex: 1,
- backgroundColor: AppConstants.backgroundColor,
- }}
- >
- <View
- style={{
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- alignItems: 'center'
- }}
- >
- {
- isSmallDevice
- ?
- <Image
- style={{flex: 1}}
- source={Files.images.login_background}
- />
- :
- <Image
- style={{flex: 1}}
- source={Files.images.home_background}
- />
- }
- </View>
- <View
- style={{
- flex: 1,
- justifyContent: 'center',
- marginLeft: 30,
- marginRight: 30
- }}
- >
- <TextField
- ref={this.emailRef}
- value={data.email}
- label='E-mail'
- keyboardType='email-address'
- iconColor={AppConstants.primaryColor}
- textColor={AppConstants.primaryColor}
- tintColor='#FFF'
- baseColor='#FFF'
- fontSize={20}
- labelFontSize={12}
- autoCapitalize='none'
- autoCorrect={true}
- enablesReturnKeyAutomatically={true}
- onFocus={this.onFocus}
- onChangeText={this.onChangeText}
- onSubmitEditing={this.onSubmitEmail}
- returnKeyType='next'
- error={errors.email}
- disabled={this.props.loginInProgress}
- />
- <TextField
- ref={this.passwordRef}
- value={data.password}
- textColor={AppConstants.primaryColor}
- tintColor='#FFF'
- baseColor='#FFF'
- fontSize={20}
- labelFontSize={12}
- secureTextEntry={secureTextEntry}
- autoCapitalize='none'
- autoCorrect={false}
- enablesReturnKeyAutomatically={true}
- onFocus={this.onFocus}
- onChangeText={this.onChangeText}
- onSubmitEditing={this.onSubmitPassword}
- returnKeyType='done'
- label='Senha'
- error={errors.password}
- renderAccessory={this.renderPasswordAccessory}
- disabled={this.props.loginInProgress}
- />
- <View style={{ marginTop: 10 }}>
- {this.renderBtnLogin()}
- </View>
- <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 10 }}>
- <TouchableHighlight
- underlayColor='transparent'
- onPress={() => this._navigateLoginNative()}
- >
- <Text style={{ color: '#FFF', fontSize: 14 }}>
- Esqueci minha senha
- </Text>
- </TouchableHighlight>
- </View>
- </View>
- </View>
- );
- }
- }
- const mapStateToProps = state => (
- {
- error: state.LoginReducer.error,
- loginInProgress: state.LoginReducer.loginInProgress,
- loginSuccess: state.LoginReducer.loginSuccess
- }
- );
- export default connect(mapStateToProps, {
- login,
- updateFieldError,
- updateFieldLoginSuccess,
- })(Login);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement