first commit

src/Components/Login/Login.js

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import Button from "../../pageElements/Button";
+import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
+import { Link, useNavigate, createSearchParams } from "react-router-dom";
+import "../../styles/login.scss";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const auth = getAuth();
+  const [isBusy, setIsBusy] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [notice, setNotice] = useState("");
+  //const [searchParams, setSearchParams] = useSearchParams();
+  const userLogin = async (e) => {
+    e.preventDefault();
+    if (isBusy) {
+      return;
+    }
+    setIsBusy(true);
+    setNotice("");
+    try {
+      const userCredential = await signInWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      // Signed in
+      userCredential?.user && navigate("/dashboard");
+    } catch (error) {
+      if (
+        ["auth/invalid-login-credentials", "auth/invalid-email"].includes(
+          error.code
+        )
+      ) {
+        setNotice("Incorrect email or password.");
+      } else {
+        setNotice(`Error occured (${error.code}).`);
+      }
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  const mode = "enterEmail";
+
+  function handleClick(e) {
+    e.preventDefault();
+    console.log("handleClick fired");
+    //searchParams.set("mode", mode);
+    //setSearchParams(searchParams);
+    //navigate(`/passwordreset/?mode=enterEmail`);
+    navigate({
+      pathname: "/passwordreset/",
+      search: `?${createSearchParams({
+        mode: "enterEmail",
+      })}`,
+    });
+  }
+
+  return (
+    <div className="login-container">
+      <div className="login-form-wrapper">
+        <form className="login-form">
+          <div className="login-header">
+            <h2 className="login-header-text">Login to Novodraft</h2>
+          </div>
+          <div className="form-floating mb-3">
+            <input
+              type="email"
+              className="form-control"
+              id="emailInput"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={isBusy}
+            ></input>
+            <label htmlFor="emailInput" className="form-label">
+              Email
+            </label>
+          </div>
+          <div className="password-input-container">
+            <div className="form-floating mb-3">
+              <input
+                type="password"
+                className="form-control"
+                id="passwordInput"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={isBusy}
+              ></input>
+              <label htmlFor="passwordInput" className="form-label">
+                Password
+              </label>
+              <button className="recover-link" onClick={handleClick}>
+                Forgot password?
+              </button>
+            </div>
+          </div>
+          <div className="alert-box">
+            {"" !== notice && (
+              <div className="login-alert" role="alert">
+                {notice}
+              </div>
+            )}
+          </div>
+          <div className="login-button-wrapper">
+            <Button
+              className="primary-button"
+              onClick={(e) => userLogin(e)}
+              labelText="Submit"
+              disabled={isBusy}
+            />
+          </div>
+          <div className="mt-3 text-center">
+            <div className="register-box">
+              <Link className="create-link" to="/signup">
+                Create an account.
+              </Link>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;