291 lines
12 KiB
TypeScript
291 lines
12 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import IconRefresh from "@/components/icon/icon-refresh";
|
|
import IconPlus from "@/components/icon/icon-plus";
|
|
import IconTrashLines from "@/components/icon/icon-trash-lines";
|
|
import IconServer from "@/components/icon/icon-server";
|
|
import IconLoader from "@/components/icon/icon-loader";
|
|
|
|
const API_BASE_URL = "/api/hestia";
|
|
|
|
const SSLChecker = () => {
|
|
const [domains, setDomains] = useState<any[]>([]);
|
|
const [filteredDomains, setFilteredDomains] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [actionLoading, setActionLoading] = useState<{ [key: string]: string | null }>({});
|
|
const [globalLoading, setGlobalLoading] = useState(false);
|
|
const [checkingExpiry, setCheckingExpiry] = useState(false);
|
|
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
|
|
|
|
// Filter states
|
|
const [search, setSearch] = useState("");
|
|
const [filterStatus, setFilterStatus] = useState<'all' | 'secured' | 'unsecured' | 'expiring'>('all');
|
|
|
|
const fetchDomains = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.get(`${API_BASE_URL}/dns/domains`);
|
|
const rawParsed = res.data.rawParsed || [];
|
|
// If rawParsed is empty but domains exists (simple list), mapped it to objects for consistency
|
|
// but user provided rawParsed structure, so we prioritize that.
|
|
setDomains(rawParsed);
|
|
setFilteredDomains(rawParsed);
|
|
} catch (error) {
|
|
console.error("Error fetching domains:", error);
|
|
setMessage({ type: 'error', text: "Failed to fetch domains." });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchDomains();
|
|
}, []);
|
|
|
|
// Filter Logic
|
|
useEffect(() => {
|
|
let result = domains;
|
|
|
|
// Search
|
|
if (search) {
|
|
result = result.filter(d => d.domain.toLowerCase().includes(search.toLowerCase()));
|
|
}
|
|
|
|
// Status Filter
|
|
if (filterStatus === 'secured') {
|
|
result = result.filter(d => d.ssl && d.ssl.success);
|
|
} else if (filterStatus === 'unsecured') {
|
|
result = result.filter(d => !d.ssl || !d.ssl.success);
|
|
} else if (filterStatus === 'expiring') {
|
|
const today = new Date();
|
|
const oneDayMs = 24 * 60 * 60 * 1000;
|
|
result = result.filter(d => {
|
|
if (!d.ssl || !d.ssl.success || !d.ssl.notAfter) return false;
|
|
const expiryDate = new Date(d.ssl.notAfter);
|
|
const diffTime = expiryDate.getTime() - today.getTime();
|
|
const diffDays = Math.ceil(diffTime / oneDayMs);
|
|
return diffDays <= 7; // Show warning for 7 days in UI, though email is 1 day
|
|
});
|
|
}
|
|
|
|
setFilteredDomains(result);
|
|
}, [search, filterStatus, domains]);
|
|
|
|
|
|
const handleAction = async (domain: string, action: 'add' | 'remove' | 'refresh') => {
|
|
setActionLoading(prev => ({ ...prev, [domain]: action }));
|
|
setMessage(null);
|
|
try {
|
|
const endpoint = action === 'add' ? '/ssl/add'
|
|
: action === 'remove' ? '/ssl/remove'
|
|
: '/ssl/refresh';
|
|
|
|
// Note: The API likely expects just { domain: "example.com" }
|
|
await axios.post(`${API_BASE_URL}${endpoint}`, { domain });
|
|
setMessage({ type: 'success', text: `Successfully ${action}ed SSL for ${domain}` });
|
|
|
|
// Refresh list to update status
|
|
fetchDomains();
|
|
} catch (error: any) {
|
|
console.error(`Error during ${action} SSL:`, error);
|
|
setMessage({ type: 'error', text: `Failed to ${action} SSL for ${domain}: ${error.response?.data?.message || error.message}` });
|
|
} finally {
|
|
setActionLoading(prev => ({ ...prev, [domain]: null }));
|
|
}
|
|
};
|
|
|
|
const handleRefreshAll = async () => {
|
|
setGlobalLoading(true);
|
|
setMessage(null);
|
|
try {
|
|
await axios.post(`${API_BASE_URL}/ssl/refresh-all`);
|
|
setMessage({ type: 'success', text: "Initiated SSL refresh for all domains." });
|
|
setTimeout(fetchDomains, 2000); // Wait a bit then refresh list
|
|
} catch (error: any) {
|
|
console.error("Error refreshing all SSL:", error);
|
|
setMessage({ type: 'error', text: `Failed to refresh all SSL: ${error.response?.data?.message || error.message}` });
|
|
} finally {
|
|
setGlobalLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCheckExpiryAndNotify = async () => {
|
|
setCheckingExpiry(true);
|
|
setMessage(null);
|
|
try {
|
|
const res = await axios.post('/api/send-expiry-alert', { domains });
|
|
if (res.data.success) {
|
|
setMessage({ type: 'success', text: res.data.message });
|
|
} else {
|
|
setMessage({ type: 'error', text: "Failed to process expiry check." });
|
|
}
|
|
} catch (error: any) {
|
|
console.error("Error checking expiry:", error);
|
|
setMessage({ type: 'error', text: "Error checking expiry: " + error.message });
|
|
} finally {
|
|
setCheckingExpiry(false);
|
|
}
|
|
};
|
|
|
|
const getDaysRemaining = (dateStr?: string) => {
|
|
if (!dateStr) return null;
|
|
const today = new Date();
|
|
const expiryDate = new Date(dateStr);
|
|
const diffTime = expiryDate.getTime() - today.getTime();
|
|
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
};
|
|
|
|
return (
|
|
<div className="panel">
|
|
<div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<h5 className="text-lg font-semibold dark:text-white-light">SSL Management</h5>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={handleCheckExpiryAndNotify}
|
|
disabled={checkingExpiry}
|
|
className="btn btn-warning flex items-center gap-2"
|
|
title="Check for expiring certs and send email alert"
|
|
>
|
|
{checkingExpiry ? <IconLoader className="animate-spin" /> : null}
|
|
Check & Notify Expiry
|
|
</button>
|
|
<button
|
|
onClick={handleRefreshAll}
|
|
disabled={globalLoading}
|
|
className="btn btn-primary flex items-center gap-2"
|
|
>
|
|
{globalLoading ? <IconLoader className="animate-spin" /> : <IconRefresh />}
|
|
Refresh All SSL
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{message && (
|
|
<div className={`mb-4 rounded p-4 text-white ${message.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
|
|
{message.text}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-5 flex flex-col gap-4 md:flex-row md:items-center">
|
|
<div className="flex-1">
|
|
<input
|
|
type="text"
|
|
className="form-input"
|
|
placeholder="Search domains..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button type="button" className={`btn ${filterStatus === 'all' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => setFilterStatus('all')}>All</button>
|
|
<button type="button" className={`btn ${filterStatus === 'secured' ? 'btn-success' : 'btn-outline-success'}`} onClick={() => setFilterStatus('secured')}>Secured</button>
|
|
<button type="button" className={`btn ${filterStatus === 'unsecured' ? 'btn-danger' : 'btn-outline-danger'}`} onClick={() => setFilterStatus('unsecured')}>No SSL</button>
|
|
<button type="button" className={`btn ${filterStatus === 'expiring' ? 'btn-warning' : 'btn-outline-warning'}`} onClick={() => setFilterStatus('expiring')}>Expiring Soon</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="table-responsive">
|
|
<table className="table-hover table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Domain</th>
|
|
<th>IP Address</th>
|
|
<th>SSL Status</th>
|
|
<th>Expiry</th>
|
|
<th className="text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr>
|
|
<td colSpan={5} className="text-center py-5">
|
|
<div className="flex justify-center items-center">
|
|
<IconLoader className="animate-spin w-8 h-8 text-primary" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : filteredDomains.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="text-center py-5">No domains found matching criteria.</td>
|
|
</tr>
|
|
) : (
|
|
filteredDomains.map((item: any, index: number) => {
|
|
const hasSSL = item.ssl && item.ssl.success;
|
|
const daysLeft = getDaysRemaining(item.ssl?.notAfter);
|
|
const isExpiring = daysLeft !== null && daysLeft <= 30; // Visible warning for 30 days
|
|
const isCritical = daysLeft !== null && daysLeft <= 3; // Critical warning
|
|
|
|
return (
|
|
<tr key={index} className={isCritical ? "bg-red-50 dark:bg-red-900/20" : ""}>
|
|
<td className="font-medium">{item.domain}</td>
|
|
<td>{item.ip}</td>
|
|
<td>
|
|
{hasSSL ? (
|
|
<span className="badge badge-outline-success">Secured</span>
|
|
) : (
|
|
<span className="badge badge-outline-danger">Not Secured</span>
|
|
)}
|
|
</td>
|
|
<td>
|
|
{hasSSL && item.ssl.notAfter ? (
|
|
<div className="flex flex-col">
|
|
<span className={`text-xs ${isExpiring ? 'text-red-500 font-bold' : ''}`}>
|
|
{new Date(item.ssl.notAfter).toLocaleDateString()}
|
|
</span>
|
|
<span className="text-[10px] text-gray-500">
|
|
{daysLeft} days left
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-gray-400">-</span>
|
|
)}
|
|
</td>
|
|
<td>
|
|
<div className="flex items-center justify-center gap-2">
|
|
{!hasSSL && (
|
|
<button
|
|
onClick={() => handleAction(item.domain, 'add')}
|
|
disabled={!!actionLoading[item.domain]}
|
|
className="btn btn-sm btn-outline-success flex items-center gap-1"
|
|
title="Add SSL"
|
|
>
|
|
{actionLoading[item.domain] === 'add' ? <IconLoader className="animate-spin w-4 h-4" /> : <IconPlus className="w-4 h-4" />}
|
|
Add
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => handleAction(item.domain, 'refresh')}
|
|
disabled={!!actionLoading[item.domain]}
|
|
className="btn btn-sm btn-outline-primary flex items-center gap-1"
|
|
title="Refresh SSL"
|
|
>
|
|
{actionLoading[item.domain] === 'refresh' ? <IconLoader className="animate-spin w-4 h-4" /> : <IconRefresh className="w-4 h-4" />}
|
|
Renew
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleAction(item.domain, 'remove')}
|
|
disabled={!!actionLoading[item.domain]}
|
|
className="btn btn-sm btn-outline-danger flex items-center gap-1"
|
|
title="Remove SSL"
|
|
>
|
|
{actionLoading[item.domain] === 'remove' ? <IconLoader className="animate-spin w-4 h-4" /> : <IconTrashLines className="w-4 h-4" />}
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SSLChecker;
|