aboutsummaryrefslogtreecommitdiffstats
path: root/public/projects/react-small-apps/apps/todos/src/views/LoginForm
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-02-20 16:11:50 +0100
committerArmand Philippot <git@armandphilippot.com>2022-02-20 16:15:08 +0100
commit73a5c7fae9ffbe9ada721148c8c454a643aceebe (patch)
treec8fad013ed9b5dd589add87f8d45cf02bbfc6e91 /public/projects/react-small-apps/apps/todos/src/views/LoginForm
parentb01239fbdcc5bbc5921f73ec0e8fee7bedd5c8e8 (diff)
chore!: restructure repo
I separated public files from the config/dev files. It improves repo readability. I also moved dotenv helper to public/inc directory and extract the Matomo tracker in the same directory.
Diffstat (limited to 'public/projects/react-small-apps/apps/todos/src/views/LoginForm')
-rw-r--r--public/projects/react-small-apps/apps/todos/src/views/LoginForm/LoginForm.js84
1 files changed, 84 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/views/LoginForm/LoginForm.js b/public/projects/react-small-apps/apps/todos/src/views/LoginForm/LoginForm.js
new file mode 100644
index 0000000..6c90e67
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/views/LoginForm/LoginForm.js
@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { Button, Fieldset, Input } from "../../components/forms";
+import { login } from "../../store/auth/auth.slice";
+
+function LoginForm() {
+ const [inputEmailValue, setInputEmailValue] = useState("");
+ const [inputPasswordValue, setInputPasswordValue] = useState("");
+ const [errorMsg, setErrorMsg] = useState("");
+ const usersList = useSelector((state) => state.users);
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const getCurrentUser = (email) => {
+ return usersList.find((user) => user.email === email);
+ };
+
+ const isValidUser = (email) => {
+ const currentUser = getCurrentUser(email);
+ return currentUser ? true : false;
+ };
+
+ const isValidPassword = (currentUser, password) => {
+ return currentUser.password === password;
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (isValidUser(inputEmailValue)) {
+ const currentUser = getCurrentUser(inputEmailValue);
+
+ if (isValidPassword(currentUser, inputPasswordValue)) {
+ setErrorMsg("");
+ dispatch(login(currentUser));
+ navigate("/");
+ } else {
+ setErrorMsg("The password does not match.");
+ }
+ } else {
+ setErrorMsg("This email address does not exist.");
+ }
+ };
+
+ const displayError = (msg) => {
+ return msg ? <p>{msg}</p> : "";
+ };
+
+ return (
+ <form
+ action="#"
+ method="post"
+ className="form form--login"
+ onSubmit={handleSubmit}
+ >
+ {displayError(errorMsg)}
+ <Fieldset legend="Sign In">
+ <Input
+ label="Email"
+ id="login-email"
+ name="login-email"
+ value={inputEmailValue}
+ updateValue={setInputEmailValue}
+ type="email"
+ required
+ />
+ <Input
+ label="Password"
+ id="login-password"
+ name="login-password"
+ value={inputPasswordValue}
+ updateValue={setInputPasswordValue}
+ type="password"
+ required
+ />
+ <Button type="submit" modifiers={["submit"]}>
+ Log in
+ </Button>
+ </Fieldset>
+ </form>
+ );
+}
+
+export default LoginForm;