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 router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [error, setError] = useState<unknown | null>(null); const [error, setError] = useState<unknown | null>(null);
const [isLoading, setIsLoading] = useState(true);
const signInCallback = useCallback(async () => { const signInCallback = useCallback(async () => {
try { try {
@ -18,9 +17,8 @@ export function Authorizing() {
router.push(url); router.push(url);
} catch (error) { } catch (error) {
setError(error); setError(error);
setIsLoading(false);
} }
}, [router, searchParams]); }, []);
useEffect(() => { useEffect(() => {
// Delay 3s get sso url go to ... // Delay 3s get sso url go to ...
@ -28,43 +26,41 @@ export function Authorizing() {
return () => { return () => {
clearTimeout(timer); 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 ( return (
<Card className="w-full"> <>
<CardHeader className="space-y-4 text-center"> {error ? (
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100"> <Card className="w-full">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div> <CardHeader className="space-y-4 text-center">
</div> <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
<CardTitle className="text-2xl font-semibold">正在处理授权</CardTitle> <div className="h-8 w-8 text-red-600">❌</div>
</CardHeader> </div>
<CardContent> <CardTitle className="text-2xl font-semibold text-red-600">
<p className="text-center text-gray-500"> 授权失败
{isLoading ? "请稍候，我们正在处理您的授权请求" : "正在跳转..."} </CardTitle>
</p> </CardHeader>
</CardContent> <CardContent>
</Card> <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>
)}
</>
); );
} }