MyMidas/frontend/src/pages/auth/Login.tsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { login, loginTotp, getMe } from "@/api/auth";
import { useAuthStore } from "@/store/authStore";
import { DollarSign, Eye, EyeOff, Loader2, ShieldCheck } from "lucide-react";

export default function LoginPage() {
  const navigate = useNavigate();
  const { setToken, setTotpEnabled } = useAuthStore();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [totpCode, setTotpCode] = useState("");
  const [challengeToken, setChallengeToken] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault();
    if (!email || !password) {
      setError("Please enter your email and password.");
      return;
    }
    setError(null);
    setLoading(true);
    try {
      const res = await login(email, password);
      if (res.totp_required && res.challenge_token) {
        setChallengeToken(res.challenge_token);
        return;
      }
      if (res.access_token) {
        // Set token first so getMe() has the Authorization header
        setToken(res.access_token, "", "");
        const me = await getMe();
        setToken(res.access_token, me.id, me.display_name ?? me.email);
        setTotpEnabled(me.totp_enabled);
        navigate("/");
      }
    } catch (e: unknown) {
      const detail = (e as { response?: { data?: { detail?: unknown } } }).response?.data?.detail;
      if (typeof detail === "string") {
        setError(detail);
      } else if (Array.isArray(detail)) {
        setError((detail[0] as { msg?: string })?.msg ?? "Login failed");
      } else {
        setError("Login failed. Check your credentials and try again.");
      }
    } finally {
      setLoading(false);
    }
  }

  async function handleTotp(e: React.FormEvent) {
    e.preventDefault();
    if (!challengeToken) return;
    setError(null);
    setLoading(true);
    try {
      const res = await loginTotp(challengeToken, totpCode);
      if (res.access_token) {
        setToken(res.access_token, "", "");
        const me = await getMe();
        setToken(res.access_token, me.id, me.display_name ?? me.email);
        setTotpEnabled(me.totp_enabled);
        navigate("/");
      }
    } catch {
      setError("Invalid TOTP code. Try again.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <div className="w-full max-w-md">
        <div className="flex items-center justify-center gap-2 mb-8">
          <div className="p-2 rounded-xl bg-primary/20">
            <DollarSign className="w-8 h-8 text-primary" />
          </div>
          <span className="text-2xl font-bold">Finance Tracker</span>
        </div>

        <div className="bg-card border border-border rounded-xl p-8 shadow-xl">
          {!challengeToken ? (
            <>
              <h1 className="text-xl font-semibold mb-6">Sign in</h1>
              <form onSubmit={handleLogin} className="space-y-4" noValidate>
                <div>
                  <label className="text-sm font-medium text-foreground block mb-1.5">Email</label>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    autoComplete="email"
                    autoFocus
                    className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                    placeholder="you@example.com"
                  />
                </div>

                <div>
                  <label className="text-sm font-medium text-foreground block mb-1.5">Password</label>
                  <div className="relative">
                    <input
                      type={showPassword ? "text" : "password"}
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      autoComplete="current-password"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </button>
                  </div>
                </div>

                {error && (
                  <p className="text-destructive text-sm bg-destructive/10 rounded-md px-3 py-2 font-medium">
                    {error}
                  </p>
                )}

                <button
                  type="submit"
                  disabled={loading}
                  className="w-full flex items-center justify-center gap-2 bg-primary text-primary-foreground rounded-md py-2.5 text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
                >
                  {loading && <Loader2 className="w-4 h-4 animate-spin" />}
                  {loading ? "Signing in…" : "Sign in"}
                </button>
              </form>
            </>
          ) : (
            <>
              <div className="flex items-center gap-2 mb-4">
                <ShieldCheck className="w-5 h-5 text-primary" />
                <h1 className="text-xl font-semibold">Two-factor authentication</h1>
              </div>
              <p className="text-sm text-muted-foreground mb-6">
                Enter the 6-digit code from your authenticator app.
              </p>
              <form onSubmit={handleTotp} className="space-y-4" noValidate>
                <input
                  type="text"
                  inputMode="numeric"
                  maxLength={6}
                  value={totpCode}
                  onChange={(e) => setTotpCode(e.target.value)}
                  autoComplete="one-time-code"
                  autoFocus
                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-center tracking-widest text-lg font-mono focus:outline-none focus:ring-2 focus:ring-ring"
                  placeholder="000000"
                />
                {error && (
                  <p className="text-destructive text-sm bg-destructive/10 rounded-md px-3 py-2 font-medium">
                    {error}
                  </p>
                )}
                <button
                  type="submit"
                  disabled={loading}
                  className="w-full flex items-center justify-center gap-2 bg-primary text-primary-foreground rounded-md py-2.5 text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
                >
                  {loading && <Loader2 className="w-4 h-4 animate-spin" />}
                  {loading ? "Verifying…" : "Verify"}
                </button>
                <button
                  type="button"
                  onClick={() => setChallengeToken(null)}
                  className="w-full text-sm text-muted-foreground hover:text-foreground transition-colors"
                >
                  Back to login
                </button>
              </form>
            </>
          )}
        </div>
      </div>
    </div>
  );
}