hyb-oa/client/src/pages/LoginPage.tsx

import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useNavigate, useSearchParams } from "react-router-dom";
import { fetchSsoProviders } from "../api/auth";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";

function resolveRedirect(searchParams: URLSearchParams) {
  const redirect = searchParams.get("redirect");
  if (!redirect) {
    return "/portal";
  }

  if (!redirect.startsWith("/")) {
    return "/portal";
  }

  return redirect;
}

export function LoginPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { login } = useAuth();

  const [identifier, setIdentifier] = useState("[email protected]");
  const [password, setPassword] = useState("EmployeePassword1234");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  const redirectTo = resolveRedirect(searchParams);
  const ssoProvidersQuery = useQuery({
    queryKey: ["auth", "sso-providers"],
    queryFn: () => fetchSsoProviders(),
    staleTime: 60_000,
  });
  const oidcProvider = (ssoProvidersQuery.data ?? []).find((item) => item.id === "oidc" && item.enabled);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitting(true);
    setError("");

    try {
      const result = await login(identifier.trim(), password);
      if (result.mustChangePassword) {
        navigate("/change-password", { replace: true });
      } else {
        navigate(redirectTo, { replace: true });
      }
    } catch (err) {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else if (err instanceof TypeError) {
        setError("无法连接后端服务，请确认 server 已启动（http://127.0.0.1:3000）。");
      } else {
        setError("登录失败，请稍后重试");
      }
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="card-std space-y-6 border-primary-100 p-6">
      <div className="mb-6">
        <p className="text-xs font-semibold uppercase tracking-wide text-primary">hyb-oa</p>
        <h1 className="mt-2 text-2xl font-bold text-zinc-900">登录工作台</h1>
        <p className="mt-2 text-sm text-secondary">使用邮箱/手机号与密码登录。</p>
        <p className="mt-1 text-xs text-zinc-500">忘记密码：请联系管理员重置。</p>
      </div>

      <form className="space-y-4" onSubmit={handleSubmit}>
        <div className="space-y-1">
          <Label htmlFor="identifier">账号</Label>
          <Input
            autoComplete="username"
            data-testid="login-identifier"
            id="identifier"
            onChange={(event) => setIdentifier(event.target.value)}
            placeholder="邮箱或手机号"
            value={identifier}
          />
        </div>

        <div className="space-y-1">
          <Label htmlFor="password">密码</Label>
          <Input
            autoComplete="current-password"
            data-testid="login-password"
            id="password"
            onChange={(event) => setPassword(event.target.value)}
            placeholder="请输入密码"
            type="password"
            value={password}
          />
        </div>

        {error ? (
          <p
            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
            data-testid="login-error"
          >
            {error}
          </p>
        ) : null}

        <Button data-testid="login-submit" className="w-full" disabled={submitting} type="submit">
          {submitting ? "登录中..." : "登录"}
        </Button>
      </form>

      {oidcProvider ? (
        <div className="space-y-3 border-t border-zinc-200 pt-4">
          <p className="text-xs uppercase tracking-wide text-zinc-500">企业统一入口</p>
          <Button
            className="w-full"
            type="button"
            variant="secondary"
            onClick={() => {
              window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
            }}
          >
            使用{oidcProvider.label}
          </Button>
        </div>
      ) : null}
    </div>
  );
}