Q58Connect/src/components/auth/user-authorize.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { signIn } from "@/actions/user-authorize";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface UserAuthorizeProps extends React.HTMLAttributes<HTMLDivElement> {
  data: Record<string, any>;
}

export function UserAuthorize({
  className,
  data,
  ...props
}: UserAuthorizeProps) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | unknown>(null);
  const router = useRouter();

  const signInCallback = useCallback(async () => {
    if (isLoading) {
      return;
    }
    setIsLoading(true);
    try {
      // 从 URL 中获取 sso 和 sig 参数
      const url = new URL(window.location.href);
      const sso = url.searchParams.get("sso");
      const sig = url.searchParams.get("sig");

      if (!sso || !sig) {
        throw new Error("缺少必要的认证参数");
      }

      // 传递 SSO 参数
      await signIn({
        sso,
        sig,
      });

      // 登录成功后刷新路由状态
      router.refresh();
      setIsLoading(false);
    } catch (error) {
      console.error("登录过程出错:", error);
      setError(error);
      setIsLoading(false);
    }
  }, [isLoading, router]);

  useEffect(() => {
    signInCallback();
  }, [signInCallback]);

  if (error) {
    return (
      <Card className="w-full">
        <CardHeader className="space-y-4 text-center">
          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
            <div className="h-8 w-8 text-red-600">❌</div>
          </div>
          <CardTitle className="text-2xl font-semibold text-red-600">
            授权失败
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-center text-gray-500">
            {error instanceof Error
              ? error.message
              : "登录异常，授权失败！请稍后重试。"}
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="w-full">
      <CardHeader className="space-y-4 text-center">
        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
        </div>
        <CardTitle className="text-2xl font-semibold">正在处理授权</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-center text-gray-500">
          {isLoading ? "请稍候，我们正在处理您的授权请求" : "正在跳转..."}
        </p>
      </CardContent>
    </Card>
  );
}