From 83eb5656c1d63dcf607c3b6b159a463a4d61108f Mon Sep 17 00:00:00 2001
From: AINDUSTRIES <contact.aindustries@gmail.com>
Date: Mon, 17 Mar 2025 20:01:13 +0100
Subject: [PATCH] Created login page

---
 app/pages/login.tsx  | 59 ++++++++++++++++++++++++++++++++++++++++++++
 app/routes/login.tsx | 17 +++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 app/pages/login.tsx
 create mode 100644 app/routes/login.tsx

diff --git a/app/pages/login.tsx b/app/pages/login.tsx
new file mode 100644
index 0000000..7ead167
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
new file mode 100644
index 0000000..8e0d010
--- /dev/null
+++ b/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 />;
+}