Add login page

src/App.js

@@ -5,6 +5,7 @@ import Survey from "./pages/survey";
 import Shortcuts from "./pages/shortcuts";
 import BugReport from "./pages/bug_report";
 import SignUp from "./pages/signup";
+import Login from "./pages/login";
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
         <Route path="/shortcuts" element={<Shortcuts />} />
         <Route path="/bug_report" element={<BugReport />} />
         <Route path="/signup" element={<SignUp />} />
+        <Route path="/login" element={<Login />} />
       </Routes>
     </Router>
   );

src/pages/landing_page.jsx

@@ -47,7 +47,7 @@ export default function LandingPage() {
             </Link>
           </div>
           <div>
-            <Link to="" className="me-5 font-semibold">
+            <Link to="/login" className="me-5 font-semibold">
               Log in
             </Link>
             <Link

src/pages/login.jsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import logo from "../assets/logo_light_46.png";
+import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons";
+import axios from "axios";
+
+export default function Login() {
+  const [formValues, setFormValues] = useState({
+    email: "",
+    password: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleChange = (e) =>
+    setFormValues((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+
+  const onSubmit = async () => {
+    await axios
+      .post(`${process.env.REACT_APP_BACKEND_URL}/login`, {
+        email: formValues.email,
+        password: formValues.password,
+      })
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((err) => {});
+  };
+
+  useEffect(() => {
+    document.title = "Log in | drawDB";
+  });
+
+  return (
+    <div className="grid grid-cols-5 h-screen select-none">
+      <div className="col-span-2 lg:col-span-3 sm:col-span-full md:col-span-full flex flex-col justify-center items-center my-6 mx-2">
+        <Link to="/">
+          <img src={logo} alt="logo" className="mx-auto h-[38px]" />
+        </Link>
+        <div className="text-lg my-1.5 text-center font-bold text-slate-600">
+          Welcome back!
+        </div>
+        <div className="w-[54%] sm:w-[70%]">
+          <label
+            className="mb-0.5 text-sm font-bold text-slate-500"
+            htmlFor="email"
+          >
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            className="py-1.5 px-3 block w-full mb-1 border rounded border-slate-400 hover:shadow focus:outline-blue-500"
+            onChange={handleChange}
+          />
+          <label
+            className="mb-0.5 text-sm font-bold text-slate-500"
+            htmlFor="password"
+          >
+            Password
+          </label>
+          <div className="flex items-center mb-3">
+            <input
+              id="password"
+              name="password"
+              type={showPassword ? "text" : "password"}
+              className="py-1.5 px-3 block w-full border rounded-l border-slate-400 hover:shadow focus:outline-blue-500"
+              onChange={handleChange}
+            />
+            <button
+              className="bg-gray-200 py-1.5 px-2 rounded-r border border-slate-400"
+              onClick={() => {
+                setShowPassword((prev) => !prev);
+              }}
+            >
+              {showPassword ? (
+                <IconEyeOpened style={{ color: "rgb(22 74 110)" }} />
+              ) : (
+                <IconEyeClosedSolid style={{ color: "rgb(22 74 110)" }} />
+              )}
+            </button>
+          </div>
+
+          <button
+            className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold"
+            onClick={onSubmit}
+          >
+            Log in
+          </button>
+          <div className="text-sm text-center">
+            Don't have an account?
+            <Link
+              to="/signup"
+              className="ms-2 font-semibold text-indigo-700 hover:underline"
+            >
+              Sign up here.
+            </Link>
+          </div>
+          <div className="flex items-center justify-center my-1">
+            <hr className="border-slate-400 flex-grow" />
+            <div className="text-sm font-semibold mx-2 text-slate-400">or</div>
+            <hr className="border-slate-400 flex-grow" />
+          </div>
+          <button className="w-full px-3 py-2.5 mt-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
+            Google
+          </button>
+          <button className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
+            Github
+          </button>
+        </div>
+      </div>
+      <div className="bg-indigo-300 col-span-3 sm:hidden md:hidden lg:col-span-2 overflow-y-hidden"></div>
+    </div>
+  );
+}

src/pages/signup.jsx

@@ -138,7 +138,7 @@ export default function SignUp() {
           <div className="text-sm text-center">
             Already have an account?
             <Link
-              to=""
+              to="/login"
               className="ms-2 font-semibold text-indigo-700 hover:underline"
             >
               Log in here.