feat: implement login

client/src/api/users.ts

@@ -84,32 +84,29 @@ export async function createUser(
 }
 
 // Login
-// export async function loginUser(
-//   username: string,
-//   email: string,
-//   password: string,
-// ) {
-//   try {
-//     const response: AxiosResponse<IUser> = await axios.post(
-//       `${BASE_URL}/users`,
-//       {
-//         username,
-//         email,
-//         password,
-//       },
-//       {
-//         headers: {
-//           "Content-Type": "application/json",
-//         },
-//       },
-//     );
-
-//     const data = response.data;
-
-//     return data;
-//   } catch (err) {
-//     if (err instanceof Error) {
-//       handleRequestError(err);
-//     }
-//   }
-// }
+export async function login(email: string, password: string) {
+  try {
+    const response: AxiosResponse<IUser> = await axios.post(
+      `${BASE_URL}/users/login`,
+      {
+        email,
+        password,
+      },
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+
+    const data = response.data;
+
+    console.log(data);
+
+    return data;
+  } catch (err) {
+    if (err instanceof Error) {
+      handleRequestError(err);
+    }
+  }
+}

client/src/components/LoginForm.tsx

@@ -0,0 +1,56 @@
+import { useRouter } from "next/router";
+import { FormEvent, useState } from "react";
+
+import { Button } from "~/components/ui/Button";
+import { Input } from "~/components/ui/Input";
+
+import { login } from "~/api/users";
+
+export function LoginForm() {
+  const router = useRouter();
+
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    try {
+      const user = await login(email, password);
+
+      console.log(user);
+
+      // if (user) {
+      //   router.replace(`/${user?.username}`);
+      // }
+    } catch (err) {
+      // Err if username exists
+      // Err if email exists
+      console.log(err);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="mb-4 flex w-80 flex-col gap-2">
+        <Input
+          name="email"
+          value={email}
+          required
+          placeholder="Email"
+          onChange={(e) => setEmail(e.target.value)}
+        />
+
+        <Input
+          name="password"
+          value={password}
+          required
+          placeholder="Password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
+
+      <Button classes="w-full">Login</Button>
+    </form>
+  );
+}

client/src/pages/auth.tsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { CreateAccountForm } from "~/components/CreateAccountForm";
+import { LoginForm } from "~/components/LoginForm";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -21,7 +22,11 @@ export default function LoginPage() {
         <h2 className="text-center font-semibold">Create Account</h2>
       </div>
 
-      <CreateAccountForm />
+      <div className="space-y-10">
+        <CreateAccountForm />
+
+        <LoginForm />
+      </div>
     </div>
   );
 }