From 9802fb4481ddb307cb79e6b8084c42cc18dc736b Mon Sep 17 00:00:00 2001 From: cialloo Date: Wed, 8 Oct 2025 13:03:16 +0800 Subject: [PATCH] Add AuthCallback component for handling authentication status and redirection --- src/locales/en.json | 14 +++ src/locales/zh.json | 14 +++ src/main.tsx | 2 + src/pages/AuthCallback.tsx | 239 +++++++++++++++++++++++++++++++++++++ 4 files changed, 269 insertions(+) create mode 100644 src/pages/AuthCallback.tsx diff --git a/src/locales/en.json b/src/locales/en.json index b00523e..9898faf 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -140,5 +140,19 @@ "wantToJoin": "Want to Join Our Friend Links?", "joinDescription": "If you have a gaming-related website or community, we'd love to add you to our friend links network!", "contactUs": "Contact Us" + }, + "auth": { + "success": "Login Successful!", + "failed": "Login Failed", + "error": "Authentication Error", + "processing": "Processing...", + "successMessage": "You have successfully logged in with your Steam account.", + "failedMessage": "Steam authentication was not successful. Please try again.", + "errorMessage": "An error occurred during authentication. Please try again later.", + "processingMessage": "Processing your authentication...", + "steamId": "Steam ID", + "redirecting": "Redirecting you to the home page in 5 seconds...", + "backToHome": "Back to Home", + "tryAgain": "Try Again" } } \ No newline at end of file diff --git a/src/locales/zh.json b/src/locales/zh.json index c58b964..fd2291b 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -139,5 +139,19 @@ "wantToJoin": "想加入我们的友情链接吗？", "joinDescription": "如果您有游戏相关的网站或社区，我们很乐意将您添加到我们的友情链接网络中！", "contactUs": "联系我们" + }, + "auth": { + "success": "登录成功！", + "failed": "登录失败", + "error": "认证错误", + "processing": "处理中...", + "successMessage": "您已成功使用 Steam 账户登录。", + "failedMessage": "Steam 认证未成功，请重试。", + "errorMessage": "认证过程中发生错误，请稍后重试。", + "processingMessage": "正在处理您的认证...", + "steamId": "Steam ID", + "redirecting": "5 秒后将跳转到首页...", + "backToHome": "返回首页", + "tryAgain": "重试" } } \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 54da5fe..f21aea5 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -12,6 +12,7 @@ import Friends from './pages/Friends.tsx' import Blog from './pages/Blog.tsx' import Servers from './pages/Servers.tsx' import Forum from './pages/Forum.tsx' +import AuthCallback from './pages/AuthCallback.tsx' createRoot(document.getElementById('root')!).render( @@ -26,6 +27,7 @@ createRoot(document.getElementById('root')!).render( } /> } /> } /> + } /> diff --git a/src/pages/AuthCallback.tsx b/src/pages/AuthCallback.tsx new file mode 100644 index 0000000..e20a9e8 --- /dev/null +++ b/src/pages/AuthCallback.tsx @@ -0,0 +1,239 @@ +import { useEffect, useState } from 'react' +import { useNavigate, useSearchParams } from 'react-router-dom' +import { useTranslation } from 'react-i18next' +import '../App.css' + +interface AuthStatus { + status: 'success' | 'failed' | 'error' | null + steamId?: string + message?: string +} + +function AuthCallback() { + const { t } = useTranslation() + const navigate = useNavigate() + const [searchParams] = useSearchParams() + const [authStatus, setAuthStatus] = useState({ status: null }) + + useEffect(() => { + // Parse query parameters + const status = searchParams.get('status') as 'success' | 'failed' | 'error' | null + const steamId = searchParams.get('steamId') || undefined + const message = searchParams.get('message') || undefined + + setAuthStatus({ status, steamId, message }) + + // Auto-redirect to home after 5 seconds on success + if (status === 'success') { + const timer = setTimeout(() => { + navigate('/') + }, 5000) + return () => clearTimeout(timer) + } + }, [searchParams, navigate]) + + const getStatusIcon = () => { + switch (authStatus.status) { + case 'success': + return '✅' + case 'failed': + return '❌' + case 'error': + return '⚠️' + default: + return '🔄' + } + } + + const getStatusTitle = () => { + switch (authStatus.status) { + case 'success': + return t('auth.success') + case 'failed': + return t('auth.failed') + case 'error': + return t('auth.error') + default: + return t('auth.processing') + } + } + + const getStatusMessage = () => { + if (authStatus.message) { + return authStatus.message + } + + switch (authStatus.status) { + case 'success': + return t('auth.successMessage') + case 'failed': + return t('auth.failedMessage') + case 'error': + return t('auth.errorMessage') + default: + return t('auth.processingMessage') + } + } + + return ( +
+
+
{getStatusIcon()}
+

{getStatusTitle()}

+

{getStatusMessage()}

+ + {authStatus.steamId && ( +
+

+ {t('auth.steamId')}: {authStatus.steamId} +

+
+ )} + + {authStatus.status === 'success' && ( +

{t('auth.redirecting')}

+ )} + +
+ + + {authStatus.status !== 'success' && ( + + )} +
+
+ + +
+ ) +} + +export default AuthCallback