From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 20 Feb 2022 16:11:50 +0100
Subject: 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.
---
 .../apps/todos/src/views/LoginForm/LoginForm.js    | 84 ++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 public/projects/react-small-apps/apps/todos/src/views/LoginForm/LoginForm.js

(limited to 'public/projects/react-small-apps/apps/todos/src/views/LoginForm')

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;
-- 
cgit v1.2.3