{"size": 2070, "ext": "js", "max_stars_repo_path": "login/loginForm.js", "max_stars_repo_name": "McLukke/whats-for-dinner", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "login/loginForm.js", "max_issues_repo_name": "McLukke/whats-for-dinner", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "login/loginForm.js", "max_forks_repo_name": "McLukke/whats-for-dinner", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 19.9038461538, "max_line_length": 98, "alphanum_fraction": 0.6}
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet } from 'react-native';
import {
  Button,
  FormLabel,
  FormInput,
  FormValidationMessage
} from 'react-native-elements';
import { Actions } from 'react-native-router-flux';

const initErrorState = {
  username: false,
  password: false,
  message: 'This field is required'
};

const initState = {
  username: '',
  password: '',
  errors: initErrorState
};

export default class LoginForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = initState;
  }

  validate = () => {
    const hasErrors = true;

    // validate stuff

    return [
      hasErrors,
      {
        ...initErrorState,
        username: true,
        password: true
      }
    ];
  }

  handleLogin = () => {
    const [hasErrors, errors] = this.validate();

    if (hasErrors) {
      return this.setState({ errors });
    }

    return Actions.home;
  }

  render() {
    const errors = this.state.errors;

    return (
      <View style={styles.form}>
        <FormLabel>Username</FormLabel>
        <FormInput
          onChange={e => this.setState({ username: e.target.value })}
        />
        {errors.username ? <FormValidationMessage>{errors.message}</FormValidationMessage> : null}

        <FormLabel>Password</FormLabel>
        <FormInput
          onChange={e => this.setState({ password: e.target.value })}
          secureTextEntry
        />
        {errors.password ? <FormValidationMessage>{errors.message}</FormValidationMessage> : null}

        <Button
          title='Log In'
          onPress={this.handleLogin}
          textStyle={styles.btnTextStyle}
          buttonStyle={styles.loginBtn}
        />
      </View>
    );
  }
}

LoginForm.propTypes = {
  resetTabs: PropTypes.function
};

const styles = StyleSheet.create({
  form: {
    width: '100%'
  },
  btnTextStyle: {
    fontWeight: 'bold'
  },
  loginBtn: {
    marginTop: 20,
    backgroundColor: 'blue',
    borderRadius: 30,
    width: '60%',
    alignSelf: 'center'
  }
});
