From 46625b03a83207b47c46434916d623d9eed5d0c9 Mon Sep 17 00:00:00 2001
From: AINDUSTRIES <contact.aindustries@gmail.com>
Date: Mon, 17 Mar 2025 20:01:23 +0100
Subject: [PATCH] Created register page

---
 app/pages/register.tsx  | 54 +++++++++++++++++++++++++++++++++++++++++
 app/routes/register.tsx | 17 +++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 app/pages/register.tsx
 create mode 100644 app/routes/register.tsx

diff --git a/app/pages/register.tsx b/app/pages/register.tsx
new file mode 100644
index 0000000..62275a2
--- /dev/null
+++ b/app/pages/register.tsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import client from "~/api/client";
+import { useUserStore } from "~/hooks/user";
+
+export default function RegisterPage() {
+  const user = useUserStore((state) => state.user);
+  const [error, setError] = useState(false);
+  const navigator = useNavigate();
+
+  async function login(formData: FormData) {
+    let username = formData.get("username");
+    let password = formData.get("password");
+    let email = formData.get("email");
+    let [_, status] = await client.POST("/register", {
+      body: {
+        username: username as string,
+        password: password as string,
+        email: email as string,
+      },
+    });
+    if (status === 200) {
+      navigator("/");
+    } else {
+      setError(true);
+    }
+  }
+
+  return user ? (
+    <h1>You are already logged in.</h1>
+  ) : (
+    <div>
+      <h1>Register</h1>
+      {error && (
+        <h2 style={{ color: "red" }}>An error occurred. Please try again.</h2>
+      )}
+      <form action={login}>
+        <label>
+          Username:
+          <input type="text" name="username" />
+        </label>
+        <label>
+          Password:
+          <input type="password" name="password" />
+        </label>
+        <label>
+          Email:
+          <input type="email" name="email" />
+        </label>
+        <button type="submit">Register</button>
+      </form>
+    </div>
+  );
+}
diff --git a/app/routes/register.tsx b/app/routes/register.tsx
new file mode 100644
index 0000000..c829897
--- /dev/null
+++ b/app/routes/register.tsx
@@ -0,0 +1,17 @@
+import type { Route } from "./+types/login";
+import RegisterPage from "../pages/register";
+
+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 Register() {
+  return <RegisterPage />;
+}