SignIn.js

import { Header, Icon, Left } from "native-base";
import React, { Component } from "react";
import {
  ActivityIndicator,
  Image,
  Keyboard,
  Platform,
  StyleSheet,
  View
} from "react-native";
import { Actions } from "react-native-router-flux";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { Block, Button, InputCustom, Text } from "../../components/common";
import * as theme from "../../consts/themes";
import { sharedActions, sharedTypes } from "../../state/shared";
import { userActions } from "../../state/user";
import { colors, images } from "../../theme";
import { validateEmail, validatePassword } from "../../utils/validateHelper";

const { PROMPT_TYPE } = sharedTypes;

class SignIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      loading: false,
      errors: {
        email: "",
        password: ""
      }
    };
  }

  componentWillMount() {
    if (Platform.OS === "android") {
      this.keyboardWillShowSub = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow
      );
      this.keyboardWillHideSub = Keyboard.addListener(
        "keyboardWillHide",
        this.keyboardWillHide
      );
    } else {
      this.keyboardWillShowSub = Keyboard.addListener(
        "keyboardDidShow",
        this.keyboardWillShow
      );
      this.keyboardWillHideSub = Keyboard.addListener(
        "keyboardDidHide",
        this.keyboardWillHide
      );
    }
  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }

  toggleLoading() {
    this.setState({ loading: !this.state.loading });
  }

  validate = () => {
    const { email, password } = this.state;
    if (!email) {
      return "Please input your email!";
    }

    if (!password) {
      return "Please input your password!";
    }

    if (!validateEmail(email)) {
      return "Please enter correct email ID!";
    }

    if (!validatePassword(password)) {
      return "Password must contain at least 8 characters, a lowercase, uppercase letter and a number";
    }

    return false;
  };

  onSigninPressed = async () => {
    const { email, password } = this.state;
    const message = this.validate();
    if (message) {
      this.props.pushMessage({
        message,
        title: "Signin",
        type: PROMPT_TYPE.ERROR
      });
    } else this.props.signin({ email, password });
  };

  handleLogin() {
    const { navigation } = this.props;
    const { email, password } = this.state;
    const errors = {};
    const VALID_EMAIL = "asasd@gmail.com";
    const VALID_PASSWORD = "asasd@gmail.com";

    Keyboard.dismiss();
    this.setState({ loading: true });

    // check with backend API or with some static data
    if (email !== VALID_EMAIL) {
      errors.email = "Invalid email";
    }
    if (password !== VALID_PASSWORD) {
      errors.password = "Invalid password";
    }

    this.setState({ errors, loading: false });

    if (!errors.length) {
      navigation.navigate("Browse");
    }
  }

  render() {
    const { loading, errors } = this.state;
    const hasErrors = key => (errors[key] ? styles.hasErrors : null);

    return (
      <Block flex={1} style={styles.container}>
        <Header transparent>
          <Left>
            <Button transparent onPress={() => Actions.pop()}>
              <Icon name="arrow-back" />
            </Button>
          </Left>
        </Header>
        <Block flex={1} center style={styles.content}>
          <Image style={styles.logo} source={images.LOGO} />
          <View style={styles.inputContainer}>
            <InputCustom
              label="Email"
              error={hasErrors("email")}
              style={[styles.input, hasErrors("email")]}
              defaultValue={this.state.email}
              iconName="mail"
              onChangeText={text => this.setState({ email: text })}
            />
            <InputCustom
              secure
              label="Password"
              error={hasErrors("password")}
              style={[styles.input, hasErrors("password")]}
              iconName="lock"
              defaultValue={this.state.password}
              onChangeText={text => this.setState({ password: text })}
            />
          </View>
          <Button
            gradient
            style={styles.button}
            onPress={this.handleLogin.bind(this)}
          >
            {loading ? (
              <ActivityIndicator size="small" color="white" />
            ) : (
              <Text bold white center>
                Login
              </Text>
            )}
          </Button>
        </Block>
      </Block>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.TEXT_LIGHT
  },
  content: {
    justifyContent: "space-evenly",
    paddingLeft: "7.5%",
    paddingRight: "7.5%"
  },
  logo: {
    height: 160,
    width: 160
  },
  inputContainer: {
    width: "100%"
  },
  button: {
    width: "100%"
  },
  login: {
    flex: 1,
    justifyContent: "center"
  },
  input: {
    borderRadius: 0,
    borderWidth: 0,
    borderBottomColor: theme.colors.gray2,
    borderBottomWidth: StyleSheet.hairlineWidth
  },
  hasErrors: {
    borderBottomColor: theme.colors.accent
  }
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      signin: userActions.requestSigninAction,
      pushMessage: sharedActions.pushMessage
    },
    dispatch
  );

export default connect(
  null,
  mapDispatchToProps
)(SignIn);