SkyMoney/web/src/pages/RegisterPage.tsx

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 RegisterPage() {
  const navigate = useNavigate();
  const next = useNextPath();
  const qc = useQueryClient();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState(false);
  const [touched, setTouched] = useState({
    email: false,
    password: false,
    confirmPassword: 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."
      : "";
  const confirmError =
    (touched.confirmPassword || submitted) && !confirmPassword
      ? "Please confirm your password."
      : (touched.confirmPassword || submitted) &&
        password &&
        confirmPassword !== password
      ? "Passwords do not match."
      : "";

  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 || confirmError) {
      setPending(false);
      return;
    }
    try {
      await http<{ ok: true }>("/auth/register", {
        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 === 409
          ? "That email is already registered. Try signing in."
          : status === 400
          ? "Enter a valid email and password."
          : err instanceof Error
          ? err.message
          : "Unable to register. 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">Register</h1>
        <p className="muted mb-6">Create an account to track your money buckets.</p>
        {error && <div className="alert alert-error mb-4">{error}</div>}
        {/* Session errors are expected on registration 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="new-password"
              required
              minLength={8}
            />
            {passwordError && (
              <span className="text-xs text-red-400">{passwordError}</span>
            )}
          </label>
          <label className="stack gap-1">
            <span className="text-sm font-medium">Confirm password</span>
            <input
              className={`input ${confirmError ? "border-red-500/60 ring-1 ring-red-500/40" : ""}`}
              type="password"
              value={confirmPassword}
              onChange={(e) => {
                setConfirmPassword(e.target.value);
                setError(null);
              }}
              onBlur={() =>
                setTouched((prev) => ({ ...prev, confirmPassword: true }))
              }
              autoComplete="new-password"
              required
            />
            {confirmError && (
              <span className="text-xs text-red-400">{confirmError}</span>
            )}
          </label>
          <button className="btn primary" type="submit" disabled={pending}>
            {pending ? "Creating account..." : "Create account"}
          </button>
        </form>
        <p className="muted text-sm mt-6 text-center">
          Already have an account?{" "}
          <Link
            className="link"
            to={next && next !== "/" ? `/login?next=${encodeURIComponent(next)}` : "/login"}
          >
            Sign in
          </Link>
        </p>
      </div>
    </div>
  );
}