225 lines
7.7 KiB
TypeScript
225 lines
7.7 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import { RefreshCw, Shield, AlertTriangle, CheckCircle, Lock } from "lucide-react"
|
||
|
||
interface IpInfo {
|
||
ip: string
|
||
isAllowed: boolean
|
||
enableIpWhitelist: boolean
|
||
allowedIps: string[]
|
||
timestamp: string
|
||
}
|
||
|
||
export default function IpBlockingTestPage() {
|
||
const [ipInfo, setIpInfo] = useState<IpInfo | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
const fetchIpInfo = async () => {
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
const response = await fetch('/api/ip')
|
||
if (!response.ok) {
|
||
throw new Error('無法獲取IP信息')
|
||
}
|
||
const data = await response.json()
|
||
setIpInfo(data)
|
||
} catch (error) {
|
||
console.error("無法獲取IP信息:", error)
|
||
setError("無法獲取IP信息")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
fetchIpInfo()
|
||
}, [])
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="container mx-auto p-6">
|
||
<div className="flex items-center justify-center min-h-[400px]">
|
||
<div className="flex items-center gap-2">
|
||
<RefreshCw className="w-4 h-4 animate-spin" />
|
||
<span>載入中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error || !ipInfo) {
|
||
return (
|
||
<div className="container mx-auto p-6">
|
||
<Card className="border-red-200 bg-red-50">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||
<AlertTriangle className="w-5 h-5" />
|
||
錯誤
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-red-600">{error}</p>
|
||
<Button onClick={fetchIpInfo} className="mt-4">
|
||
<RefreshCw className="w-4 h-4 mr-2" />
|
||
重試
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-3xl font-bold">IP 阻擋測試</h1>
|
||
<Button onClick={fetchIpInfo} variant="outline">
|
||
<RefreshCw className="w-4 h-4 mr-2" />
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
|
||
{/* IP狀態卡片 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
{ipInfo.enableIpWhitelist && !ipInfo.isAllowed ? (
|
||
<>
|
||
<Lock className="w-5 h-5 text-red-500" />
|
||
IP 被阻擋
|
||
</>
|
||
) : (
|
||
<>
|
||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||
IP 允許訪問
|
||
</>
|
||
)}
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-500">檢測到的IP</label>
|
||
<p className="text-lg font-mono bg-gray-100 p-2 rounded">
|
||
{ipInfo.ip}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-500">訪問狀態</label>
|
||
<div className="mt-1">
|
||
<Badge variant={ipInfo.isAllowed ? "default" : "destructive"}>
|
||
{ipInfo.isAllowed ? "允許" : "阻擋"}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-500">白名單狀態</label>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<Shield className="w-4 h-4 text-blue-500" />
|
||
<span className="text-sm">
|
||
{ipInfo.enableIpWhitelist ? "已啟用" : "未啟用"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 允許的IP列表 */}
|
||
{ipInfo.enableIpWhitelist && ipInfo.allowedIps.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>允許的IP列表</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
||
{ipInfo.allowedIps.map((ip, index) => (
|
||
<div key={index} className="flex items-center gap-2">
|
||
<Badge variant={ip === ipInfo.ip ? "default" : "outline"}>
|
||
{ip === ipInfo.ip ? "當前" : ""}
|
||
</Badge>
|
||
<span className="text-sm font-mono">{ip}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 阻擋測試說明 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>IP 阻擋測試說明</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||
<h3 className="font-medium text-blue-900 mb-2">✅ 如果你能看到這個頁面</h3>
|
||
<p className="text-sm text-blue-800">
|
||
說明你的IP ({ipInfo.ip}) 在白名單中，可以正常訪問網站。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||
<h3 className="font-medium text-yellow-900 mb-2">⚠️ 測試阻擋功能</h3>
|
||
<p className="text-sm text-yellow-800">
|
||
要測試IP阻擋功能，可以：
|
||
</p>
|
||
<ul className="text-sm text-yellow-800 mt-2 ml-4 list-disc">
|
||
<li>暫時從 .env.local 的 ALLOWED_IPS 中移除你的IP</li>
|
||
<li>重啟應用後訪問網站</li>
|
||
<li>應該會看到403禁止訪問頁面</li>
|
||
<li>記得測試完成後將IP加回白名單</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 bg-red-50 border border-red-200 rounded-lg">
|
||
<h3 className="font-medium text-red-900 mb-2">🚫 被阻擋的訪問</h3>
|
||
<p className="text-sm text-red-800">
|
||
如果IP不在白名單中，訪問者會看到：
|
||
</p>
|
||
<ul className="text-sm text-red-800 mt-2 ml-4 list-disc">
|
||
<li>403 Forbidden 錯誤頁面</li>
|
||
<li>顯示被阻擋的IP地址</li>
|
||
<li>無法訪問任何網頁內容</li>
|
||
<li>只有IP檢測API可以訪問</li>
|
||
</ul>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 當前配置 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>當前配置</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-sm font-medium text-gray-500">白名單狀態:</span>
|
||
<Badge variant={ipInfo.enableIpWhitelist ? "default" : "secondary"}>
|
||
{ipInfo.enableIpWhitelist ? "已啟用" : "未啟用"}
|
||
</Badge>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm font-medium text-gray-500">當前IP:</span>
|
||
<span className="text-sm font-mono">{ipInfo.ip}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm font-medium text-gray-500">訪問權限:</span>
|
||
<Badge variant={ipInfo.isAllowed ? "default" : "destructive"}>
|
||
{ipInfo.isAllowed ? "允許" : "阻擋"}
|
||
</Badge>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|