frontend: impl /login and /dashboard

3 files changed, 91 insertions, 16 deletions

diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
index f39c7eb..f5a46ca 100644
--- a/frontend/app/routes/_index.tsx
+++ b/frontend/app/routes/_index.tsx
@@ -1,9 +1,26 @@
 import type { MetaFunction } from "@remix-run/node";
+import { Link } from "@remix-run/react";
 
 export const meta: MetaFunction = () => {
   return [{ title: "Albatross.swift" }];
 };
 
 export default function Index() {
-  return <p>iOSDC 2024 Albatross.swift</p>;
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-blue-600 mb-4">
+          iOSDC 2024 Albatross.swift
+        </h1>
+        <p>
+          <Link
+            to="/login"
+            className="text-lg text-white bg-blue-500 px-4 py-2 rounded hover:bg-blue-600 transition duration-300"
+          >
+            Login
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index 535642c..7fda6d7 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -12,11 +12,34 @@ export default function Dashboard() {
   const user = useLoaderData<typeof loader>()!;
 
   return (
-    <div>
-      <h1>
-        #{user.userId} {user.displayUsername} (@{user.username})
-      </h1>
-      {user.isAdmin && <p>Admin</p>}
+    <div className="min-h-screen bg-gray-100 p-8">
+      <div className="bg-white p-6 rounded shadow-md max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold mb-4">
+          {user.username}{" "}
+          {user.isAdmin && <span className="text-red-500 text-lg">admin</span>}
+        </h1>
+        <h2 className="text-2xl font-semibold mb-2">User</h2>
+        <div className="mb-6">
+          <ul className="list-disc list-inside">
+            <li>Name: {user.displayUsername}</li>
+          </ul>
+        </div>
+        <h2 className="text-2xl font-semibold mb-2">Team</h2>
+        <div className="mb-6">
+          <ul className="list-disc list-inside">
+            <li>Name: {user.displayUsername}</li>
+            <li>
+              Members: {user.displayUsername} ({user.username})
+            </li>
+          </ul>
+        </div>
+        <h2 className="text-2xl font-semibold mb-2">Game</h2>
+        <div>
+          <ul className="list-disc list-inside">
+            <li>TODO</li>
+          </ul>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
index 0da2616..40ad66f 100644
--- a/frontend/app/routes/login.tsx
+++ b/frontend/app/routes/login.tsx
@@ -17,15 +17,50 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export default function Login() {
   return (
-    <Form method="post">
-      <input type="username" name="username" required />
-      <input
-        type="password"
-        name="password"
-        autoComplete="current-password"
-        required
-      />
-      <button>Log In</button>
-    </Form>
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+      <Form
+        method="post"
+        className="bg-white p-8 rounded shadow-md w-full max-w-sm"
+      >
+        <h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
+        <div className="mb-4">
+          <label
+            htmlFor="username"
+            className="block text-sm font-medium text-gray-700"
+          >
+            Username
+          </label>
+          <input
+            type="text"
+            name="username"
+            id="username"
+            required
+            className="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+        <div className="mb-6">
+          <label
+            htmlFor="password"
+            className="block text-sm font-medium text-gray-700"
+          >
+            Password
+          </label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            autoComplete="current-password"
+            required
+            className="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition duration-300"
+        >
+          Log In
+        </button>
+      </Form>
+    </div>
   );
 }