1import React from 'react'
2import axios from 'axios'
3import { useHistory } from 'react-router-dom'
4function Login() {
5 const history = useHistory()
6 const [formData, setFormData] = React.useState({
7 email: '',
8 password: '',
9 })
10 const handleChange = (e) => {
11 setFormData({ ...formData, [e.target.name]: e.target.value })
12 }
13 const handleSubmit = async (e) => {
14 e.preventDefault()
15 try {
16 await axios.post('LOGIN API ADDRESS HERE', formData)
17 history.push('/')
18 } catch (e) {
19 console.log(e.response.data)
20 }
21
22 console.log('Form has been submitted')
23 }
24
25 return (
26 <section className="section">
27 <div className="container">
28 <div className="columns">
29 <form
30 className="column is-half is-offset-one-quarter"
31 onSubmit={handleSubmit}
32 >
33 <div className="field">
34 <label className="label" htmlFor="email">
35 Email
36 </label>
37 <div className="control">
38 <input
39 className="input"
40 name="email"
41 id="email"
42 onChange={handleChange}
43 placeholder="Email"
44 />
45 </div>
46 </div>
47 <div className="field">
48 <label className="label" htmlFor="password">
49 Password
50 </label>
51 <div className="control">
52 <input
53 className="input"
54 name="password"
55 id="password"
56 type="password"
57 onChange={handleChange}
58 placeholder="Password"
59 />
60 </div>
61 </div>
62
63 <div className="field">
64 <button type="submit" className="button is-fullwidth is-warning">
65 Login
66 </button>
67 </div>
68 </form>
69 </div>
70 </div>
71 </section>
72 )
73}
74export default Login
75