final touches for beta skymoney (at least i think)

2026-01-18 00:00:44 -06:00
parent 4eae966f96
commit f4f0ae5df2
161 changed files with 26016 additions and 1966 deletions
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -0,0 +1,136 @@
+import { type FormEvent, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { http } from "../api/http";
+import { useAuthSession } from "../hooks/useAuthSession";
+
+function useNextPath() {
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  return params.get("next") || "/";
+}
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const next = useNextPath();
+  const qc = useQueryClient();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const [touched, setTouched] = useState({ email: false, password: false });
+  const [submitted, setSubmitted] = useState(false);
+  const session = useAuthSession({ retry: false });
+
+  const isEmailValid = (value: string) => /\S+@\S+\.\S+/.test(value);
+  const emailError =
+    (touched.email || submitted) && !email.trim()
+      ? "Email is required."
+      : (touched.email || submitted) && !isEmailValid(email)
+      ? "Enter a valid email address."
+      : "";
+  const passwordError =
+    (touched.password || submitted) && !password
+      ? "Password is required."
+      : (touched.password || submitted) && password.length < 8
+      ? "Password must be at least 8 characters."
+      : "";
+
+  useEffect(() => {
+    if (session.data?.userId) {
+      navigate(next || "/", { replace: true });
+    }
+  }, [session.data, navigate, next]);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setPending(true);
+    setSubmitted(true);
+    if (emailError || passwordError) {
+      setPending(false);
+      return;
+    }
+    try {
+      await http<{ ok: true }>("/auth/login", {
+        method: "POST",
+        body: { email, password },
+        skipAuthRedirect: true,
+      });
+      qc.clear();
+      navigate(next || "/", { replace: true });
+    } catch (err) {
+      const status = (err as { status?: number })?.status;
+      const message =
+        status === 401
+          ? "Email or password is incorrect."
+          : status === 400
+          ? "Enter a valid email and password."
+          : err instanceof Error
+          ? err.message
+          : "Unable to login. Try again.";
+      setError(message);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="flex justify-center py-16 px-4">
+      <div className="card w-full max-w-md">
+        <h1 className="section-title mb-2">Login</h1>
+        <p className="muted mb-6">Sign in to continue budgeting.</p>
+        {error && <div className="alert alert-error mb-4">{error}</div>}
+        {/* Session errors are expected on login page, so don't show them */}
+        <form className="stack gap-4" onSubmit={handleSubmit}>
+          <label className="stack gap-1">
+            <span className="text-sm font-medium">Email</span>
+            <input
+              className={`input ${emailError ? "border-red-500/60 ring-1 ring-red-500/40" : ""}`}
+              type="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                setError(null);
+              }}
+              onBlur={() => setTouched((prev) => ({ ...prev, email: true }))}
+              autoComplete="email"
+              required
+            />
+            {emailError && <span className="text-xs text-red-400">{emailError}</span>}
+          </label>
+          <label className="stack gap-1">
+            <span className="text-sm font-medium">Password</span>
+            <input
+              className={`input ${passwordError ? "border-red-500/60 ring-1 ring-red-500/40" : ""}`}
+              type="password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                setError(null);
+              }}
+              onBlur={() => setTouched((prev) => ({ ...prev, password: true }))}
+              autoComplete="current-password"
+              required
+            />
+            {passwordError && (
+              <span className="text-xs text-red-400">{passwordError}</span>
+            )}
+          </label>
+          <button className="btn primary" type="submit" disabled={pending}>
+            {pending ? "Signing in..." : "Sign in"}
+          </button>
+        </form>
+        <p className="muted text-sm mt-6 text-center">
+          Need an account?{" "}
+          <Link
+            className="link"
+            to={next && next !== "/" ? `/register?next=${encodeURIComponent(next)}` : "/register"}
+          >
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}