82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import Form from "react-bootstrap/Form";
|
|
import Button from "react-bootstrap/Button";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { errorOccured, loadingStarted } from "../features/user/userSlice";
|
|
import { signInUser } from "../backend/backend";
|
|
|
|
const Login = (props) => {
|
|
const { onClickForgottenPswd } = props;
|
|
|
|
const [state, setState] = useState({ email: "", password: "" });
|
|
|
|
// onChange function
|
|
const handleChange = (e) => {
|
|
const newState = { ...state };
|
|
newState[e.target.name] = e.target.value;
|
|
setState(newState);
|
|
dispatch(errorOccured(""));
|
|
};
|
|
|
|
const errorMsg = useSelector((state) => state.user.error);
|
|
const dispatch = useDispatch();
|
|
|
|
// Submit function (Create account)
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (state.email === "") {
|
|
dispatch(errorOccured("Email is required."));
|
|
return;
|
|
} else if (state.password === "") {
|
|
dispatch(errorOccured("Password is required."));
|
|
return;
|
|
}
|
|
dispatch(loadingStarted());
|
|
signInUser(state);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Form noValidate onSubmit={handleSubmit} className="w-100">
|
|
<Form.Control
|
|
type="email"
|
|
placeholder="Email"
|
|
name="email"
|
|
size="lg"
|
|
className="mb-2 w-100"
|
|
onChange={handleChange}
|
|
isInvalid={
|
|
errorMsg.indexOf("mail") !== -1 ||
|
|
errorMsg.indexOf("identifier") !== -1
|
|
}
|
|
/>
|
|
<Form.Control
|
|
type="text"
|
|
placeholder="Password"
|
|
name="password"
|
|
size="lg"
|
|
className="mb-2 w-100"
|
|
onChange={handleChange}
|
|
isInvalid={errorMsg !== ""}
|
|
/>
|
|
<Form.Control.Feedback type="invalid">{errorMsg}</Form.Control.Feedback>
|
|
<Button variant="primary" type="submit" size="lg" className="w-100">
|
|
<b>Log In</b>
|
|
</Button>
|
|
</Form>
|
|
<Button
|
|
variant="link"
|
|
type="link"
|
|
className="w-100"
|
|
id="link-button"
|
|
onClick={onClickForgottenPswd}
|
|
>
|
|
Forgotten password?
|
|
</Button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Login;
|