From a74521625d9804874111018e471654b77bac97be Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Tue, 19 May 2026 15:36:58 +0200
Subject: [PATCH] Implement dirty simple login

---
 client/index.html             |   2 +-
 client/src/index.tsx          |  10 ++-
 client/src/routes/index.tsx   |  11 +++-
 client/src/routes/login.tsx   | 111 ++++++++++++++++++++++++++++++++++
 client/src/routes/sign-in.tsx |  27 ++++++++-
 client/src/userContext.ts     |   5 ++
 client/vite.config.ts         |   2 +-
 7 files changed, 163 insertions(+), 5 deletions(-)
 create mode 100644 client/src/routes/login.tsx
 create mode 100644 client/src/userContext.ts

diff --git a/client/index.html b/client/index.html
index 6b04374..bbfd12d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full">
 
 <head>
   <meta charset="UTF-8" />
diff --git a/client/src/index.tsx b/client/src/index.tsx
index cf78bc1..dca4763 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -4,6 +4,7 @@ import { createRouter, RouterProvider } from "@tanstack/solid-router";
 import { render } from "solid-js/web";
 
 import { routeTree } from "./routeTree.gen";
+import UserContext from "./userContext";
 
 // Keep polyfill out of the bundle. You can see this as vite generates two js bundles, one with only the polyfill and one without.
 if (!("Temporal" in globalThis)) {
@@ -29,4 +30,11 @@ declare module "@tanstack/solid-router" {
   }
 }
 
-render(() => <RouterProvider router={router} />, document.body);
+render(
+  () => (
+    <UserContext.Provider value={{ isSignedIn: false }}>
+      <RouterProvider router={router} />
+    </UserContext.Provider>
+  ),
+  document.body,
+);
diff --git a/client/src/routes/index.tsx b/client/src/routes/index.tsx
index b46075b..7fd997a 100644
--- a/client/src/routes/index.tsx
+++ b/client/src/routes/index.tsx
@@ -1,7 +1,16 @@
 import { createFileRoute, Navigate } from "@tanstack/solid-router";
+import { useContext } from "solid-js";
+
+import UserContext from "../userContext";
 
 export const Route = createFileRoute("/")({
   component() {
-    return <Navigate to="/times" />;
+    const userContext = useContext(UserContext);
+
+    if (userContext.isSignedIn) {
+      return <Navigate to="/times" />;
+    }
+
+    return <Navigate to="/login" />;
   },
 });
diff --git a/client/src/routes/login.tsx b/client/src/routes/login.tsx
new file mode 100644
index 0000000..31d339b
--- /dev/null
+++ b/client/src/routes/login.tsx
@@ -0,0 +1,111 @@
+import { createFileRoute, useNavigate } from "@tanstack/solid-router";
+import { useContext } from "solid-js";
+
+import Body from "../Body";
+import UserContext from "../userContext";
+
+export const Route = createFileRoute("/login")({
+  component: Login,
+});
+//   <!--
+//   This example requires updating your template:
+
+//   ```
+//   <html class="h-full bg-white dark:bg-gray-900">
+//   <body class="h-full">
+//   ```
+// -->
+
+//TODO remove this with sign in and Passkey implementation (see sign-in page)
+// Template from Tailwind Plus component
+function Login() {
+  const navigate = useNavigate();
+  const userContext = useContext(UserContext);
+
+  async function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    const formData = new FormData(event.target as HTMLFormElement);
+    const username = formData.get("username");
+    const password = formData.get("password");
+
+    const value = btoa(`${username}:${password}`);
+    const response = await fetch("/api/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${value}`,
+      },
+    });
+
+    console.debug("Login response", response);
+
+    if (!response.ok) {
+      //TODO
+      alert("Login failed");
+      return;
+    }
+
+    // Simple state management for now
+    userContext.isSignedIn = true;
+    await navigate({ to: "/times" });
+  }
+
+  return (
+    <Body class="dark:bg-gray h-full bg-white">
+      <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+        <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+          <form onSubmit={handleSubmit} class="space-y-6">
+            <div>
+              <label
+                for="username"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100"
+              >
+                Username
+              </label>
+              <div class="mt-2">
+                <input
+                  id="username"
+                  type="text"
+                  name="username"
+                  required
+                  autocomplete="username"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                />
+              </div>
+            </div>
+
+            <div>
+              <div class="flex items-center justify-between">
+                <label
+                  for="password"
+                  class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100"
+                >
+                  Password
+                </label>
+              </div>
+              <div class="mt-2">
+                <input
+                  id="password"
+                  type="password"
+                  name="password"
+                  required
+                  autocomplete="current-password"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                />
+              </div>
+            </div>
+
+            <div>
+              <button
+                type="submit"
+                class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
+              >
+                Sign in
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Body>
+  );
+}
diff --git a/client/src/routes/sign-in.tsx b/client/src/routes/sign-in.tsx
index c974f5d..38a7157 100644
--- a/client/src/routes/sign-in.tsx
+++ b/client/src/routes/sign-in.tsx
@@ -8,13 +8,38 @@ export const Route = createFileRoute("/sign-in")({
 });
 
 function SignIn() {
+  async function handleSignIn() {
+    console.debug("Signing in...");
+
+    const user = "yealch";
+    const password = "password";
+    const value = btoa(`${user}:${password}`);
+    const response = await fetch("/api/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${value}`,
+      },
+    });
+
+    console.debug("Login response", response, await response.json());
+
+    const getUsersResponse = await fetch("/api/users", {
+      method: "GET",
+    });
+
+    console.debug("Get users response", getUsersResponse, await getUsersResponse.json());
+  }
   return (
     <Body class="h-dvh p-4 md:p-6">
       <main class="grid h-full items-end">
         <h1 class="text-center font-serif text-6xl font-black text-purple-900">Welcome</h1>
         <section class="rounded-3xl p-6 text-base leading-6">
           {/* TODO: Button states styles */}
-          <button class="mt-6 flex w-full items-center justify-center gap-2 rounded-full bg-purple-300 px-6 py-4">
+          <button
+            onClick={handleSignIn}
+            class="mt-6 flex w-full items-center justify-center gap-2 rounded-full bg-purple-300 px-6 py-4"
+          >
             <Icon class="size-6 fill-slate-950" name="passkey" />
             <span>Sign in with Passkey</span>
           </button>
diff --git a/client/src/userContext.ts b/client/src/userContext.ts
new file mode 100644
index 0000000..216cb2f
--- /dev/null
+++ b/client/src/userContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from "solid-js";
+
+export default createContext({
+  isSignedIn: false,
+});
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 56ff9b7..810eea6 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://127.0.0.1:3000/",
+        target: "http://127.0.0.1:8080/",
         changeOrigin: true,
         // ws: true,
       },
-- 
2.51.2