start implementing auth

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from "@/components/theme-provider"
 import LatestTemperature from "@/components/latest-temperature"
 import TemperatureHistory from "@/components/temperature-history"
 import TemperaturePlot from "@/components/temperature-plot"
+import RegisterForm from './components/register-form'
 // import { Button } from "@/components/ui/button"
 
 
@@ -12,6 +13,9 @@ function App() {
     return (
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
             <main className="min-h-screen bg-background p-6 w-full">
+                <div>
+                    <RegisterForm />
+                </div>
                 <div className="w-full mx-auto space-y-2">
                     <TemperaturePlot />
                     <div className="grid grid-cols-4 gap-6">
@@ -21,7 +25,7 @@ function App() {
                 </div>
             </main>
         </ThemeProvider>
-    )    
+    )
 }
 
 export default App

frontend/src/components/register-form.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+
+export default function RegisterForm() {
+    const [email, setEmail] = useState("")
+    const [password, setPassword] = useState("")
+    const [confirmPassword, setConfirmPassword] = useState("")
+    const [error, setError] = useState<string | null>(null)
+    const [success, setSuccess] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault()
+        setError(null)
+        setSuccess(false)
+
+        if (password !== confirmPassword) {
+            setError("Passwords do not match")
+            return
+        }
+
+        if (password.length < 8) {
+            setError("Passwords must be at least 8 characters")
+            return
+        }
+
+        setLoading(true)
+        try {
+            const res = await fetch("/api/register", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ email, password }),
+            })
+
+            if (!res.ok) {
+                const msg = await res.text()
+                setError(msg || "Registration failed")
+                return
+            }
+
+            setSuccess(true)
+            setEmail("")
+            setPassword("")
+            setConfirmPassword("")
+        }
+        catch {
+            setError("Network error")
+        }
+        finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="p-4 m-6 flex flex-col border rounded-lg bg-card">
+            <h2>Register</h2>
+            {error && <p>{error}</p>}
+            {success && <p>Account created</p>}
+            <input
+                type="email"
+                placeholder="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="p-2 border rounded bg-background"
+            />
+            <input
+                type="password"
+                placeholder="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                className="p-2 border rounded bg-background"
+            />
+            <input
+                type="password"
+                placeholder="Confirm password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                className="p-2 border rounded bg-background"
+            />
+            <Button type="submit" className="w-full">
+                {loading ? "Creating ..." : "Register"}
+            </Button>
+
+        </form>
+    )
+}

frontend/src/index.css

@@ -72,24 +72,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
   :root {
@@ -186,4 +168,4 @@ button:focus-visible {
   body {
     @apply bg-background text-foreground;
   }
-}
+}