wood/Q58Connect
1
0
Fork 0
mirror of https://github.com/woodchen-ink/Q58Connect.git synced 2025-07-18 05:51:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Simplify Authorizing component state and rendering logic

Browse Source
This commit is contained in:
wood chen 2025-02-21 22:12:18 +08:00
parent 96804d59f8
commit 01ce107b70
1 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/auth/authorizing.tsx
View File

@ -10,7 +10,6 @@ export function Authorizing() {
const router = useRouter();
const searchParams = useSearchParams();
const [error, setError] = useState<unknown | null>(null);
const [isLoading, setIsLoading] = useState(true);
const signInCallback = useCallback(async () => {
try {
@ -18,9 +17,8 @@ export function Authorizing() {
router.push(url);
} catch (error) {
setError(error);
setIsLoading(false);
}
}, [router, searchParams]);
}, []);
useEffect(() => {
// Delay 3s get sso url go to ...
@ -28,43 +26,41 @@ export function Authorizing() {
return () => {
clearTimeout(timer);
};
}, [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>
<>
{error ? (
<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">授权异常，登录失败!</p>
</CardContent>
</Card>
) : (
<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">
请稍候，我们正在处理您的授权请求
</p>
</CardContent>
</Card>
)}
</>
);
}