{"size": 1457, "ext": "js", "max_stars_repo_path": "osa5/bloglist-frontend-master/src/components/LoginForm.js", "max_stars_repo_name": "EskelinenAntti/fullstack-open-2020", "max_stars_repo_stars_event_min_datetime": "2020-05-23T11:58:01.000Z", "max_stars_repo_stars_event_max_datetime": "2020-05-23T11:58:01.000Z", "max_issues_repo_path": "osa5/bloglist-frontend-master/src/components/LoginForm.js", "max_issues_repo_name": "EskelinenAntti/fullstack-open-2020", "max_issues_repo_issues_event_min_datetime": "2021-05-11T05:21:39.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-11T05:21:39.000Z", "max_forks_repo_path": "osa5/bloglist-frontend-master/src/components/LoginForm.js", "max_forks_repo_name": "EskelinenAntti/fullstack-open-2020", "max_forks_repo_forks_event_min_datetime": "2020-05-11T19:21:59.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-07T17:29:28.000Z"}
{"max_stars_count": 1, "max_issues_count": 1, "max_forks_count": 4, "avg_line_length": 21.4264705882, "max_line_length": 65, "alphanum_fraction": 0.5566231984}
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { login } from '../reducers/userReducer'
import {
  Typography,
  Button
} from '@material-ui/core'

const LoginForm = () => {

  const dispatch = useDispatch()

  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = async (event) => {
    event.preventDefault()

    const credentials =
      {
        username,
        password
      }

    dispatch(login(credentials))
    setUsername('')
    setPassword('')

  }

  return (
    <div>
      <Typography variant='h2'>Log in to application</Typography>
      <form onSubmit={handleLogin}>
        <div>
          username
          <input
            type='text'
            id='username'
            value={username}
            name='Username'
            onChange={({ target }) => setUsername(target.value)}
          />
        </div>
        <div>
          password
          <input
            id='password'
            type='password'
            value={password}
            name='Password'
            onChange={({ target }) => setPassword(target.value)}
          />
        </div>
        <Button id='login-button' type='submit'>login</Button>
      </form>
    </div>
  )
}

// This is no longer required after refactoring to using redux.
/*
LoginForm.propTypes = {
  onUserLoggedIn: PropTypes.func.isRequired
}
*/

export default LoginForm