add auth system: users, login, JWT, protected routes

Domain: User entity, AuthPort/PasswordHashPort/SecretStore ports. Adapters: auth (argon2 hashing, JWT tokens), secret-store (env-based), config-sqlite user repository, http-api auth routes + extractors. Application: auth_service. SPA: login page, auth client, protected router.
2026-06-19 01:39:42 +02:00
parent 4139330234
commit adda731dc6
41 changed files with 1331 additions and 153 deletions
--- a/spa/src/pages/login.tsx
+++ b/spa/src/pages/login.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react"
+import { useNavigate } from "@tanstack/react-router"
+import { useLogin, useRegister, useAuthStatus } from "@/api/auth"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { toast } from "sonner"
+
+export function LoginPage() {
+  const navigate = useNavigate()
+  const { data: status } = useAuthStatus()
+  const login = useLogin()
+  const register = useRegister()
+
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+
+  const isSetup = status?.needs_setup ?? false
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    try {
+      if (isSetup) {
+        await register.mutateAsync({ username, password })
+        toast.success("Account created")
+        await login.mutateAsync({ username, password })
+      } else {
+        await login.mutateAsync({ username, password })
+      }
+      navigate({ to: "/" })
+    } catch (err) {
+      toast.error(String(err))
+    }
+  }
+
+  return (
+    <div className="flex min-h-svh items-center justify-center p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-center text-xl">
+            {isSetup ? "K-Frame Setup" : "K-Frame Login"}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="grid gap-4">
+            {isSetup && (
+              <p className="text-muted-foreground text-center text-sm">
+                Create your admin account to get started.
+              </p>
+            )}
+            <div className="grid gap-2">
+              <Label>Username</Label>
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label>Password</Label>
+              <Input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <Button
+              type="submit"
+              disabled={!username || !password || login.isPending || register.isPending}
+            >
+              {isSetup ? "Create Account" : "Sign In"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}