NixReaper
d235d27fe3
- Add /api/nixclient/ssl (GET) — returns certs for authenticated user only - Add /api/nixclient/ssl/:id/renew (POST) — validates cert belongs to user - Register sslRoutes in nixclient index.ts - nixclient SSL.tsx was calling /nixserver/ssl (requireAdminOrReseller) which would always 401 for regular users — fixed to /nixclient/ssl
79 lines
3.7 KiB
TypeScript
79 lines
3.7 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { Lock, RefreshCw, RotateCcw } from 'lucide-react'
|
|
import { api } from '../api/client'
|
|
|
|
interface Cert { id: number; domain: string; status: string; issuedAt: string | null; expiresAt: string | null }
|
|
|
|
export default function SSL() {
|
|
const [certs, setCerts] = useState<Cert[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const fetch = async () => {
|
|
setLoading(true)
|
|
try { const r = await api.get('/nixclient/ssl'); setCerts(r.data.data) }
|
|
finally { setLoading(false) }
|
|
}
|
|
|
|
useEffect(() => { fetch() }, [])
|
|
|
|
const renew = async (id: number) => {
|
|
try { await api.post(`/nixclient/ssl/${id}/renew`); fetch() }
|
|
catch (err: unknown) { alert((err as { response?: { data?: { error?: string } } })?.response?.data?.error ?? 'Renewal failed') }
|
|
}
|
|
|
|
const days = (d: string | null) => {
|
|
if (!d) return null
|
|
return Math.ceil((new Date(d).getTime() - Date.now()) / 86400000)
|
|
}
|
|
|
|
const statusColor: Record<string, string> = {
|
|
active: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
|
|
pending: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
|
|
expired: 'bg-red-500/10 text-red-400 border-red-500/20',
|
|
revoked: 'bg-[#1a2235] text-[#64748b] border-[#1e2d45]',
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div><h1 className="text-white text-xl font-semibold">SSL Certificates</h1><p className="text-[#64748b] text-sm">Let's Encrypt certificates for your domains</p></div>
|
|
<button onClick={fetch} className="p-2 text-[#64748b] hover:text-white border border-[#1e2d45] rounded-lg"><RefreshCw size={16} className={loading ? 'animate-spin' : ''} /></button>
|
|
</div>
|
|
|
|
<div className="bg-[#111827] border border-[#1e2d45] rounded-xl overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead><tr className="border-b border-[#1e2d45]">
|
|
{['Domain', 'Status', 'Expires', ''].map(h => <th key={h} className="text-left text-[#64748b] font-medium px-4 py-3 text-xs">{h}</th>)}
|
|
</tr></thead>
|
|
<tbody>
|
|
{certs.map(c => {
|
|
const d = days(c.expiresAt)
|
|
return (
|
|
<tr key={c.id} className="border-b border-[#1e2d45] last:border-0 hover:bg-[#1a2235]">
|
|
<td className="px-4 py-3 text-white flex items-center gap-2"><Lock size={12} className="text-emerald-400" />{c.domain}</td>
|
|
<td className="px-4 py-3"><span className={`text-xs px-2 py-0.5 rounded-full border ${statusColor[c.status] ?? ''}`}>{c.status}</span></td>
|
|
<td className="px-4 py-3 text-xs">
|
|
{c.expiresAt
|
|
? <span className={d !== null && d < 14 ? 'text-red-400' : d !== null && d < 30 ? 'text-amber-400' : 'text-[#64748b]'}>
|
|
{d !== null && d > 0 ? `${d} days` : 'Expired'} ({new Date(c.expiresAt).toLocaleDateString()})
|
|
</span>
|
|
: '—'}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{c.status === 'active' && (
|
|
<button onClick={() => renew(c.id)} className="flex items-center gap-1 px-2 py-1 text-xs text-sky-400 border border-sky-500/30 rounded hover:bg-sky-500/10">
|
|
<RotateCcw size={11} /> Renew
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
{!loading && certs.length === 0 && <tr><td colSpan={4} className="text-center text-[#64748b] py-8">No certificates. Contact your host to issue SSL.</td></tr>}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|