Locaft-backend/src/components/SignIn.js

48 lines
1.7 KiB
JavaScript
Raw Normal View History

2020-11-25 08:04:55 -08:00
import React, { useState } from 'react';
2020-11-09 08:45:04 -08:00
import { Link } from 'react-router-dom';
2020-11-28 09:28:50 -08:00
import { Provider } from 'react-redux';
import store from './store';
2020-11-25 08:04:55 -08:00
const SignInForm = () => {
let [data,setData] = useState({
2020-11-09 08:45:04 -08:00
email: '',
password: ''
2020-11-25 08:04:55 -08:00
});
2020-11-09 08:45:04 -08:00
2020-11-25 08:04:55 -08:00
const handleChange = e => {
setData({...data,[e.target.name]: e.target.value});
2020-11-09 08:45:04 -08:00
}
2020-11-25 08:04:55 -08:00
const submitData = () => {
console.log(data);
2020-11-09 08:45:04 -08:00
}
2020-11-25 08:04:55 -08:00
2020-11-09 08:45:04 -08:00
2020-11-25 08:04:55 -08:00
let {email,password} = data;
2020-11-09 08:45:04 -08:00
return (
2020-11-28 09:28:50 -08:00
2020-11-09 08:45:04 -08:00
<div className="FormCenter">
2020-11-28 09:28:50 -08:00
<Provider store={store}></Provider>
2020-11-25 08:04:55 -08:00
<form className="FormFields">
2020-11-09 08:45:04 -08:00
<div className="FormField">
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
2020-11-25 08:04:55 -08:00
<input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => handleChange(e)} />
2020-11-09 08:45:04 -08:00
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="password">Password</label>
2020-11-25 08:04:55 -08:00
<input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => handleChange(e)} />
2020-11-09 08:45:04 -08:00
</div>
<div className="FormField">
2020-11-25 08:04:55 -08:00
<button className="FormField__Button mr-20" onClick={() => submitData()}>Sign In</button> <Link exact to="/sign-up" className="FormField__Link">Not a member?</Link>
2020-11-09 08:45:04 -08:00
</div>
</form>
</div>
);
}
export default SignInForm;