vibe coded v1

src/pages/UserRegister.tsx

@@ -1,9 +1,10 @@
-import { SubmitEvent, useState } from "react";
-import { useNavigate } from "react-router";
+import { useState } from "react";
+import type { SubmitEvent } from "react";
+import { Link, useNavigate } from "react-router";
 
 import { API_URL } from "../config/api.ts";
-
 import { useAuth } from "../hooks/useAuth.ts";
+import { PageShell } from "../components/PageShell.tsx";
 
 type UserRegisterState =
   | { status: "idle" }
@@ -32,9 +33,7 @@ export function UserRegister() {
         body: JSON.stringify({ username, password }),
       });
 
-      if (!res.ok) {
-        throw new Error(`HTTP ${res.status}`);
-      }
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
       const apiResponse = await res.json();
 
@@ -42,10 +41,7 @@ export function UserRegister() {
         login(apiResponse.data);
         navigate("/");
       } else {
-        setState({
-          status: "error",
-          error: apiResponse.error.message,
-        });
+        setState({ status: "error", error: apiResponse.error.message });
       }
     } catch (err) {
       setState({
@@ -56,33 +52,39 @@ export function UserRegister() {
   };
 
   return (
-    <div className="registration-container">
-      {state.status === "error" && (
-        <div className="error-banner">{state.error}</div>
-      )}
+    <PageShell centered>
+      <div className="auth-card">
+        <h1 className="auth-card-title">Register</h1>
 
-      <form onSubmit={handleSubmit} className="registration-form">
-        <input
-          name="username"
-          type="text"
-          placeholder="Username"
-          required
-          disabled={state.status === "submitting"}
-        />
-        <input
-          name="password"
-          type="password"
-          placeholder="Password"
-          required
-          disabled={state.status === "submitting"}
-        />
-        <button
-          type="submit"
-          disabled={state.status === "submitting"}
-        >
-          {state.status === "submitting" ? "Registering..." : "Register"}
-        </button>
-      </form>
-    </div>
+        {state.status === "error" && (
+          <div className="error-banner">{state.error}</div>
+        )}
+
+        <form onSubmit={handleSubmit} className="auth-form">
+          <input
+            name="username"
+            type="text"
+            placeholder="Username"
+            required
+            disabled={state.status === "submitting"}
+            autoFocus
+          />
+          <input
+            name="password"
+            type="password"
+            placeholder="Password"
+            required
+            disabled={state.status === "submitting"}
+          />
+          <button type="submit" className="btn-primary" disabled={state.status === "submitting"}>
+            {state.status === "submitting" ? "Registering…" : "Register"}
+          </button>
+        </form>
+
+        <p className="auth-card-footer">
+          Already have an account? <Link to="/login">Log in</Link>
+        </p>
+      </div>
+    </PageShell>
   );
 }