{"size": 2505, "ext": "js", "max_stars_repo_path": "src/components/login-form.js", "max_stars_repo_name": "DeFrameArt/admin-portal", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/login-form.js", "max_issues_repo_name": "DeFrameArt/admin-portal", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/login-form.js", "max_forks_repo_name": "DeFrameArt/admin-portal", "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": 29.8214285714, "max_line_length": 106, "alphanum_fraction": 0.6159680639}
import React, { Component } from 'react';
import {Field, reduxForm} from 'redux-form';
import { Link } from 'react-router-dom';
import * as EmailValidator from 'email-validator';
import { loginUser} from '../actions/index';
import {connect} from 'react-redux';

//import stylesheet
import '../styles/login-form.css';


class LoginForm extends Component{
  renderField(field){
    const { meta : { touched, error } } =field
    // const className =`form-group ${field.meta.touched && field.meta.error ?'has-danger': ''}`
    //above is the className before destructing.
    const className =`form-group ${touched && error ? "color:blue;" : ''}`
    return(
      <div className= {className}>

        <input
          className="form-control form-input"
          {...field.input}
          type={ field.type }
          placeholder={field.placeholder}
        />
        <div className="text-help">
          {/*  this className text-help will work with class has-danger so that the text also apper red*/}
          {touched ? error: ''}
        </div>
      </div>
        )
  }
  onSubmit(values){
    this.props.loginUser(values)

  }
render(){
  const{ handleSubmit } = this.props
  return(
    <div className="fluid-container d-flex align-items-md-center justify-content-center login-container">
      <div className="login-form col-md-12 col-lg-3 ">
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            name ="email"
            component={this.renderField}
            type="email"
            placeholder="Insert email"
          />
          <Field
            name ="password"
            component={this.renderField}
            type="password"
            placeholder="Password"
          />
          <button type="submit" className = "btn btn-block form-btn"> Submit </button><hr />
          <Link to="/register" className ="btn btn-block form-btn">Register</Link>
        </form>
      </div>
    </div>
  )
}

}

function validate(values){
const errors = {};
//Validate the inputs from 'values'
if(!EmailValidator.validate(values.email)){
  errors.email="Email is not valid"
}
if(!values.password ||values.password.length<6){
  errors.password="Password is not valid"
}
// // if(!values.password || values.password.length<10){
// //   errors.password="Password doesnot match"
// // }we can add [password setting also if we want]
return errors
}
export default reduxForm({
  form:'SignInForm',
  validate,
})(connect (null,{loginUser})(LoginForm))
