210 lines
7.6 KiB
TypeScript
210 lines
7.6 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Shield, ShieldAlert, Globe, Save, RefreshCw } from "lucide-react"
|
||
import { toast } from "@/components/ui/use-toast"
|
||
|
||
interface IpInfo {
|
||
ip: string
|
||
isAllowed: boolean
|
||
enableIpWhitelist: boolean
|
||
allowedIps: string[]
|
||
timestamp: string
|
||
}
|
||
|
||
export default function IpWhitelistPage() {
|
||
const [ipInfo, setIpInfo] = useState<IpInfo | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [enableWhitelist, setEnableWhitelist] = useState(false)
|
||
const [allowedIps, setAllowedIps] = useState("")
|
||
|
||
useEffect(() => {
|
||
fetchIpInfo()
|
||
}, [])
|
||
|
||
const fetchIpInfo = async () => {
|
||
try {
|
||
setLoading(true)
|
||
const response = await fetch('/api/ip')
|
||
if (!response.ok) {
|
||
throw new Error('無法獲取IP信息')
|
||
}
|
||
const data = await response.json()
|
||
setIpInfo(data)
|
||
setEnableWhitelist(data.enableIpWhitelist)
|
||
setAllowedIps(data.allowedIps.join(', '))
|
||
} catch (error) {
|
||
console.error("無法獲取IP信息:", error)
|
||
toast({
|
||
title: "錯誤",
|
||
description: "無法獲取IP信息",
|
||
variant: "destructive",
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleSave = async () => {
|
||
try {
|
||
setSaving(true)
|
||
// 這裡應該調用API來保存設置
|
||
// 由於這是前端演示，我們只顯示成功消息
|
||
toast({
|
||
title: "成功",
|
||
description: "IP白名單設置已保存",
|
||
})
|
||
} catch (error) {
|
||
console.error("保存失敗:", error)
|
||
toast({
|
||
title: "錯誤",
|
||
description: "保存設置失敗",
|
||
variant: "destructive",
|
||
})
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
|
||
<div className="text-white text-center">
|
||
<RefreshCw className="w-8 h-8 animate-spin mx-auto mb-4" />
|
||
<p>載入中...</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 p-4">
|
||
<div className="container mx-auto max-w-4xl">
|
||
<div className="mb-8">
|
||
<h1 className="text-3xl font-bold text-white mb-2">IP 白名單管理</h1>
|
||
<p className="text-blue-200">管理允許訪問系統的IP地址</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
{/* 當前IP狀態 */}
|
||
<Card className="bg-slate-800/50 border-blue-800/30">
|
||
<CardHeader>
|
||
<CardTitle className="text-white flex items-center gap-2">
|
||
<Globe className="w-5 h-5" />
|
||
當前IP狀態
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{ipInfo && (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-blue-200">IP地址:</span>
|
||
<span className="text-white font-mono">{ipInfo.ip}</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-blue-200">白名單狀態:</span>
|
||
<div className="flex items-center gap-2">
|
||
{ipInfo.enableIpWhitelist && !ipInfo.isAllowed ? (
|
||
<ShieldAlert className="w-4 h-4 text-red-400" />
|
||
) : (
|
||
<Shield className="w-4 h-4 text-green-400" />
|
||
)}
|
||
<span className={ipInfo.enableIpWhitelist && !ipInfo.isAllowed ? "text-red-400" : "text-green-400"}>
|
||
{ipInfo.enableIpWhitelist && !ipInfo.isAllowed ? "拒絕" : "允許"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-blue-200">檢查時間:</span>
|
||
<span className="text-white text-sm">
|
||
{new Date(ipInfo.timestamp).toLocaleString('zh-TW')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 白名單設置 */}
|
||
<Card className="bg-slate-800/50 border-blue-800/30">
|
||
<CardHeader>
|
||
<CardTitle className="text-white flex items-center gap-2">
|
||
<Shield className="w-5 h-5" />
|
||
白名單設置
|
||
</CardTitle>
|
||
<CardDescription className="text-blue-200">
|
||
配置允許訪問的IP地址
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<Label htmlFor="enable-whitelist" className="text-blue-200">
|
||
啟用IP白名單
|
||
</Label>
|
||
<Switch
|
||
id="enable-whitelist"
|
||
checked={enableWhitelist}
|
||
onCheckedChange={setEnableWhitelist}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="allowed-ips" className="text-blue-200">
|
||
允許的IP地址
|
||
</Label>
|
||
<Input
|
||
id="allowed-ips"
|
||
value={allowedIps}
|
||
onChange={(e) => setAllowedIps(e.target.value)}
|
||
placeholder="192.168.1.0/24, 10.0.0.50, 172.16.0.0/16"
|
||
className="bg-slate-700 border-blue-600 text-white"
|
||
/>
|
||
<p className="text-xs text-blue-300">
|
||
支援格式：單一IP (192.168.1.100)、IP範圍 (192.168.1.0/24)、多個IP用逗號分隔
|
||
</p>
|
||
</div>
|
||
|
||
<Button
|
||
onClick={handleSave}
|
||
disabled={saving}
|
||
className="w-full bg-blue-600 hover:bg-blue-700"
|
||
>
|
||
{saving ? (
|
||
<RefreshCw className="w-4 h-4 animate-spin mr-2" />
|
||
) : (
|
||
<Save className="w-4 h-4 mr-2" />
|
||
)}
|
||
保存設置
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 使用說明 */}
|
||
<Card className="mt-6 bg-slate-800/50 border-blue-800/30">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">使用說明</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-blue-200 space-y-2 text-sm">
|
||
<p>• <strong>啟用IP白名單：</strong>開啟後，只有白名單內的IP才能訪問系統</p>
|
||
<p>• <strong>IP格式支援：</strong></p>
|
||
<ul className="ml-6 space-y-1">
|
||
<li>• 單一IP：192.168.1.100</li>
|
||
<li>• IP範圍：192.168.1.0/24 (CIDR格式)</li>
|
||
<li>• 多個IP：用逗號分隔，如 192.168.1.100, 10.0.0.50</li>
|
||
</ul>
|
||
<p>• <strong>注意：</strong>設置更改後需要重新啟動應用程式才能生效</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|