user login

5 files changed, 97 insertions, 2 deletions

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index eb5399f..6019704 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -5,10 +5,13 @@ import {
   RouterProvider,
 } from 'react-router-dom';
 import Home from './routes/Home.tsx';
-import Login from './routes/Login.tsx';
+import Login, { loginAction } from './routes/Login.tsx';
 import GolfEntry from './routes/golf/GolfEntry.tsx';
 import GolfPlay from './routes/golf/GolfPlay.tsx';
 import GolfWatch from './routes/golf/GolfWatch.tsx';
+import UserEdit from './routes/users/Edit.tsx';
+import TeamNew from './routes/teams/New.tsx';
+import TeamEdit from './routes/teams/Edit.tsx';
 
 const router = createBrowserRouter([
   {
@@ -18,6 +21,19 @@ const router = createBrowserRouter([
   {
     path: "/login/",
     element: (<Login />),
+    action: loginAction,
+  },
+  {
+    path: "/users/:userId/",
+    element: (<UserEdit />),
+  },
+  {
+    path: "/teams/new/",
+    element: (<TeamNew />),
+  },
+  {
+    path: "/teams/:teamId/",
+    element: (<TeamEdit />),
   },
   {
     path: "/golf/entry/",
diff --git a/frontend/src/routes/Login.tsx b/frontend/src/routes/Login.tsx
index 1945abe..f3fa00e 100644
--- a/frontend/src/routes/Login.tsx
+++ b/frontend/src/routes/Login.tsx
@@ -1,4 +1,4 @@
-import { Form } from "react-router-dom";
+import { redirect, Form, ActionFunctionArgs } from "react-router-dom";
 
 export default function Login() {
   return (
@@ -17,3 +17,22 @@ export default function Login() {
     </div>
   );
 };
+
+export async function loginAction({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const username = formData.get("username");
+  const password = formData.get("password");
+
+  const res = await fetch("/api/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ username, password }),
+  });
+  if (!res.ok) {
+    throw res;
+  }
+  const { userId } = await res.json();
+  return redirect(`/users/${userId}/`);
+};
diff --git a/frontend/src/routes/teams/Edit.tsx b/frontend/src/routes/teams/Edit.tsx
new file mode 100644
index 0000000..0b3ed74
--- /dev/null
+++ b/frontend/src/routes/teams/Edit.tsx
@@ -0,0 +1,19 @@
+import { Form } from "react-router-dom";
+
+export default function Edit() {
+  return (
+    <div>
+      <h1>Albatross.swift</h1>
+      <h2>
+        Team Edit
+      </h2>
+      <Form method="post">
+        <label>Team name</label>
+        <input type="text" name="name" />
+        <label>Icon</label>
+        <input type="text" name="icon" disabled />
+        <button type="submit">Save</button>
+      </Form>
+    </div>
+  );
+};
diff --git a/frontend/src/routes/teams/New.tsx b/frontend/src/routes/teams/New.tsx
new file mode 100644
index 0000000..2712cd5
--- /dev/null
+++ b/frontend/src/routes/teams/New.tsx
@@ -0,0 +1,19 @@
+import { Form } from "react-router-dom";
+
+export default function New() {
+  return (
+    <div>
+      <h1>Albatross.swift</h1>
+      <h2>
+        Team New
+      </h2>
+      <Form method="post">
+        <label>Team name</label>
+        <input type="text" name="name" />
+        <label>Icon</label>
+        <input type="text" name="icon" disabled />
+        <button type="submit">Create</button>
+      </Form>
+    </div>
+  );
+};
diff --git a/frontend/src/routes/users/Edit.tsx b/frontend/src/routes/users/Edit.tsx
new file mode 100644
index 0000000..fa2a826
--- /dev/null
+++ b/frontend/src/routes/users/Edit.tsx
@@ -0,0 +1,22 @@
+import { Form, Link } from "react-router-dom";
+
+export default function Edit() {
+  return (
+    <div>
+      <h1>Albatross.swift</h1>
+      <h2>
+        User Edit
+      </h2>
+      <Form method="post">
+        <label>Display name</label>
+        <input type="text" name="display_name" />
+        <label>Icon</label>
+        <input type="text" name="icon" disabled />
+        <button type="submit">Save</button>
+      </Form>
+      <p>
+        <Link to="/teams/new/">Create a new team</Link>
+      </p>
+    </div>
+  );
+};