Created login page

app/pages/login.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import client from "~/api/client";
+import { useUserStore } from "~/hooks/user";
+
+export default function LoginPage() {
+  const user = useUserStore((state) => state.user);
+  const setUser = useUserStore((state) => state.setUser);
+  const [error, setError] = useState(false);
+  const navigator = useNavigate();
+
+  async function login(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    let username = formData.get("username");
+    let password = formData.get("password");
+    let [newUser, status] = await client.POST("/login", {
+      body: {
+        username: username as string,
+        password: password as string,
+      },
+    });
+    if (status === 200) {
+      console.log(newUser);
+      setUser(newUser);
+      navigator("/");
+    } else {
+      setError(true);
+    }
+  }
+
+  return (
+    <div>
+      {user !== null ? (
+        <h1>You are already logged in.</h1>
+      ) : (
+        <>
+          <h1>Login</h1>
+          {error && (
+            <h2 style={{ color: "red" }}>
+              An error occurred. Please try again.
+            </h2>
+          )}
+          <form onSubmit={login}>
+            <label>
+              Username:
+              <input type="text" name="username" />
+            </label>
+            <label>
+              Password:
+              <input type="password" name="password" />
+            </label>
+            <button type="submit">Login</button>
+          </form>
+        </>
+      )}
+    </div>
+  );
+}

app/routes/login.tsx

@@ -0,0 +1,17 @@
+import type { Route } from "./+types/login";
+import LoginPage from "../pages/login";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Aindustries' casino" },
+    { name: "description", content: "Welcome to React Router!" },
+  ];
+}
+
+export async function clientLoader() {}
+
+export function HydrateFallback() {}
+
+export default function Login() {
+  return <LoginPage />;
+}