Initial YakPanel commit
This commit is contained in:
Niranjan
697
YakPanel-server/frontend/src/pages/SitePage.tsx
Normal file
697
YakPanel-server/frontend/src/pages/SitePage.tsx
Normal file
@@ -0,0 +1,697 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
apiRequest,
|
||||
createSite,
|
||||
getSite,
|
||||
updateSite,
|
||||
setSiteStatus,
|
||||
deleteSite,
|
||||
createSiteBackup,
|
||||
listSiteBackups,
|
||||
restoreSiteBackup,
|
||||
downloadSiteBackup,
|
||||
listSiteRedirects,
|
||||
addSiteRedirect,
|
||||
deleteSiteRedirect,
|
||||
siteGitClone,
|
||||
siteGitPull,
|
||||
} from '../api/client'
|
||||
import { Plus, Trash2, Download, Archive, RotateCcw, Pencil, Play, Square, Redirect, GitBranch } from 'lucide-react'
|
||||
|
||||
interface Site {
|
||||
id: number
|
||||
name: string
|
||||
path: string
|
||||
status: number
|
||||
ps: string
|
||||
project_type: string
|
||||
domain_count: number
|
||||
addtime: string | null
|
||||
}
|
||||
|
||||
export function SitePage() {
|
||||
const [sites, setSites] = useState<Site[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [creatingError, setCreatingError] = useState('')
|
||||
const [backupSiteId, setBackupSiteId] = useState<number | null>(null)
|
||||
const [backups, setBackups] = useState<{ filename: string; size: number }[]>([])
|
||||
const [backupLoading, setBackupLoading] = useState(false)
|
||||
const [editSiteId, setEditSiteId] = useState<number | null>(null)
|
||||
const [editForm, setEditForm] = useState<{ domains: string; path: string; ps: string; php_version: string; force_https: boolean } | null>(null)
|
||||
const [editLoading, setEditLoading] = useState(false)
|
||||
const [editError, setEditError] = useState('')
|
||||
const [statusLoading, setStatusLoading] = useState<number | null>(null)
|
||||
const [redirectSiteId, setRedirectSiteId] = useState<number | null>(null)
|
||||
const [redirects, setRedirects] = useState<{ id: number; source: string; target: string; code: number }[]>([])
|
||||
const [redirectSource, setRedirectSource] = useState('')
|
||||
const [redirectTarget, setRedirectTarget] = useState('')
|
||||
const [redirectCode, setRedirectCode] = useState(301)
|
||||
const [redirectAdding, setRedirectAdding] = useState(false)
|
||||
const [gitSiteId, setGitSiteId] = useState<number | null>(null)
|
||||
const [gitUrl, setGitUrl] = useState('')
|
||||
const [gitBranch, setGitBranch] = useState('main')
|
||||
const [gitAction, setGitAction] = useState<'clone' | 'pull' | null>(null)
|
||||
const [gitLoading, setGitLoading] = useState(false)
|
||||
|
||||
const loadSites = () => {
|
||||
setLoading(true)
|
||||
apiRequest<Site[]>('/site/list')
|
||||
.then(setSites)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadSites()
|
||||
}, [])
|
||||
|
||||
const handleCreate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
const form = e.currentTarget
|
||||
const name = (form.elements.namedItem('name') as HTMLInputElement).value.trim()
|
||||
const domainsStr = (form.elements.namedItem('domains') as HTMLInputElement).value.trim()
|
||||
const path = (form.elements.namedItem('path') as HTMLInputElement).value.trim()
|
||||
const ps = (form.elements.namedItem('ps') as HTMLInputElement).value.trim()
|
||||
|
||||
if (!name || !domainsStr) {
|
||||
setCreatingError('Name and domain(s) are required')
|
||||
return
|
||||
}
|
||||
const domains = domainsStr.split(/[\s,]+/).filter(Boolean)
|
||||
const php_version = (form.elements.namedItem('php_version') as HTMLSelectElement)?.value || '74'
|
||||
const force_https = (form.elements.namedItem('force_https') as HTMLInputElement)?.checked || false
|
||||
setCreating(true)
|
||||
setCreatingError('')
|
||||
createSite({ name, domains, path: path || undefined, ps: ps || undefined, php_version, force_https })
|
||||
.then(() => {
|
||||
setShowCreate(false)
|
||||
form.reset()
|
||||
loadSites()
|
||||
})
|
||||
.catch((err) => setCreatingError(err.message))
|
||||
.finally(() => setCreating(false))
|
||||
}
|
||||
|
||||
const handleDelete = (id: number, name: string) => {
|
||||
if (!confirm(`Delete site "${name}"? This cannot be undone.`)) return
|
||||
deleteSite(id)
|
||||
.then(loadSites)
|
||||
.catch((err) => setError(err.message))
|
||||
}
|
||||
|
||||
const openBackupModal = (siteId: number) => {
|
||||
setBackupSiteId(siteId)
|
||||
setBackups([])
|
||||
listSiteBackups(siteId)
|
||||
.then((data) => setBackups(data.backups))
|
||||
.catch((err) => setError(err.message))
|
||||
}
|
||||
|
||||
const handleCreateBackup = () => {
|
||||
if (!backupSiteId) return
|
||||
setBackupLoading(true)
|
||||
createSiteBackup(backupSiteId)
|
||||
.then(() => listSiteBackups(backupSiteId).then((d) => setBackups(d.backups)))
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setBackupLoading(false))
|
||||
}
|
||||
|
||||
const handleRestore = (filename: string) => {
|
||||
if (!backupSiteId || !confirm(`Restore from ${filename}? This will overwrite existing files.`)) return
|
||||
setBackupLoading(true)
|
||||
restoreSiteBackup(backupSiteId, filename)
|
||||
.then(() => setBackupSiteId(null))
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setBackupLoading(false))
|
||||
}
|
||||
|
||||
const handleDownloadBackup = (filename: string) => {
|
||||
if (!backupSiteId) return
|
||||
downloadSiteBackup(backupSiteId, filename).catch((err) => setError(err.message))
|
||||
}
|
||||
|
||||
const openEditModal = (siteId: number) => {
|
||||
setEditSiteId(siteId)
|
||||
setEditError('')
|
||||
getSite(siteId)
|
||||
.then((s) => setEditForm({
|
||||
domains: (s.domains || []).join(', '),
|
||||
path: s.path || '',
|
||||
ps: s.ps || '',
|
||||
php_version: s.php_version || '74',
|
||||
force_https: !!(s.force_https && s.force_https !== 0),
|
||||
}))
|
||||
.catch((err) => setEditError(err.message))
|
||||
}
|
||||
|
||||
const handleEdit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
if (!editSiteId || !editForm) return
|
||||
const domains = editForm.domains.split(/[\s,]+/).filter(Boolean)
|
||||
if (domains.length === 0) {
|
||||
setEditError('At least one domain is required')
|
||||
return
|
||||
}
|
||||
setEditLoading(true)
|
||||
setEditError('')
|
||||
updateSite(editSiteId, {
|
||||
domains,
|
||||
path: editForm.path || undefined,
|
||||
ps: editForm.ps || undefined,
|
||||
php_version: editForm.php_version,
|
||||
force_https: editForm.force_https,
|
||||
})
|
||||
.then(() => {
|
||||
setEditSiteId(null)
|
||||
setEditForm(null)
|
||||
loadSites()
|
||||
})
|
||||
.catch((err) => setEditError(err.message))
|
||||
.finally(() => setEditLoading(false))
|
||||
}
|
||||
|
||||
const handleSetStatus = (siteId: number, enable: boolean) => {
|
||||
setStatusLoading(siteId)
|
||||
setSiteStatus(siteId, enable)
|
||||
.then(loadSites)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setStatusLoading(null))
|
||||
}
|
||||
|
||||
const openRedirectModal = (siteId: number) => {
|
||||
setRedirectSiteId(siteId)
|
||||
setRedirectSource('')
|
||||
setRedirectTarget('')
|
||||
setRedirectCode(301)
|
||||
listSiteRedirects(siteId)
|
||||
.then(setRedirects)
|
||||
.catch((err) => setError(err.message))
|
||||
}
|
||||
|
||||
const handleAddRedirect = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!redirectSiteId || !redirectSource.trim() || !redirectTarget.trim()) return
|
||||
setRedirectAdding(true)
|
||||
addSiteRedirect(redirectSiteId, redirectSource.trim(), redirectTarget.trim(), redirectCode)
|
||||
.then(() => listSiteRedirects(redirectSiteId).then(setRedirects))
|
||||
.then(() => { setRedirectSource(''); setRedirectTarget('') })
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setRedirectAdding(false))
|
||||
}
|
||||
|
||||
const handleDeleteRedirect = (redirectId: number) => {
|
||||
if (!redirectSiteId) return
|
||||
deleteSiteRedirect(redirectSiteId, redirectId)
|
||||
.then(() => listSiteRedirects(redirectSiteId).then(setRedirects))
|
||||
.catch((err) => setError(err.message))
|
||||
}
|
||||
|
||||
const formatSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
return (bytes / 1024 / 1024).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
if (loading) return <div className="text-gray-500">Loading...</div>
|
||||
if (error) return <div className="p-4 rounded bg-red-100 text-red-700">{error}</div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-2xl font-bold text-gray-800 dark:text-white">Website</h1>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Site
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showCreate && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">Create Site</h2>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
{creatingError && (
|
||||
<div className="p-2 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-sm">
|
||||
{creatingError}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Site Name
|
||||
</label>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="example.com"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Domain(s) <span className="text-gray-500">(comma or space separated)</span>
|
||||
</label>
|
||||
<input
|
||||
name="domains"
|
||||
type="text"
|
||||
placeholder="example.com www.example.com"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Path <span className="text-gray-500">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
name="path"
|
||||
type="text"
|
||||
placeholder="/www/wwwroot/example.com"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
PHP Version
|
||||
</label>
|
||||
<select
|
||||
name="php_version"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value="74">7.4</option>
|
||||
<option value="80">8.0</option>
|
||||
<option value="81">8.1</option>
|
||||
<option value="82">8.2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input name="force_https" type="checkbox" id="create_force_https" className="rounded" />
|
||||
<label htmlFor="create_force_https" className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Force HTTPS (redirect HTTP to HTTPS)
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Note <span className="text-gray-500">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
name="ps"
|
||||
type="text"
|
||||
placeholder="My website"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCreate(false)}
|
||||
className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creating}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-lg font-medium"
|
||||
>
|
||||
{creating ? 'Creating...' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Name</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Path</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Domains</th>
|
||||
<th className="px-4 py-2 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
|
||||
<th className="px-4 py-2 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{sites.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-8 text-center text-gray-500">
|
||||
No sites yet. Click "Add Site" to create one.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
sites.map((s) => (
|
||||
<tr key={s.id}>
|
||||
<td className="px-4 py-2 text-gray-900 dark:text-white">{s.name}</td>
|
||||
<td className="px-4 py-2 text-gray-600 dark:text-gray-400">{s.path}</td>
|
||||
<td className="px-4 py-2 text-gray-600 dark:text-gray-400">{s.domain_count}</td>
|
||||
<td className="px-4 py-2 text-gray-600 dark:text-gray-400">{s.project_type}</td>
|
||||
<td className="px-4 py-2 text-right">
|
||||
<span className="flex gap-1 justify-end">
|
||||
{s.status === 1 ? (
|
||||
<button
|
||||
onClick={() => handleSetStatus(s.id, false)}
|
||||
disabled={statusLoading === s.id}
|
||||
className="p-2 text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded disabled:opacity-50"
|
||||
title="Stop"
|
||||
>
|
||||
<Square className="w-4 h-4" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleSetStatus(s.id, true)}
|
||||
disabled={statusLoading === s.id}
|
||||
className="p-2 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded disabled:opacity-50"
|
||||
title="Start"
|
||||
>
|
||||
<Play className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => { setGitSiteId(s.id); setGitAction('clone'); setGitUrl(''); setGitBranch('main') }}
|
||||
className="p-2 text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded"
|
||||
title="Git Deploy"
|
||||
>
|
||||
<GitBranch className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openRedirectModal(s.id)}
|
||||
className="p-2 text-purple-600 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded"
|
||||
title="Redirects"
|
||||
>
|
||||
<Redirect className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openEditModal(s.id)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded"
|
||||
title="Edit"
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openBackupModal(s.id)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded"
|
||||
title="Backup"
|
||||
>
|
||||
<Archive className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(s.id, s.name)}
|
||||
className="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{gitSiteId && gitAction && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">Git Deploy</h2>
|
||||
<div className="flex gap-2 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGitAction('clone')}
|
||||
className={`px-3 py-1.5 rounded text-sm ${gitAction === 'clone' ? 'bg-emerald-600 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}
|
||||
>
|
||||
Clone
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGitAction('pull')}
|
||||
className={`px-3 py-1.5 rounded text-sm ${gitAction === 'pull' ? 'bg-emerald-600 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}
|
||||
>
|
||||
Pull
|
||||
</button>
|
||||
</div>
|
||||
{gitAction === 'clone' ? (
|
||||
<form onSubmit={handleGitClone} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Repository URL</label>
|
||||
<input
|
||||
value={gitUrl}
|
||||
onChange={(e) => setGitUrl(e.target.value)}
|
||||
placeholder="https://github.com/user/repo.git"
|
||||
className="w-full px-4 py-2 border rounded-lg bg-white dark:bg-gray-700"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Branch</label>
|
||||
<input
|
||||
value={gitBranch}
|
||||
onChange={(e) => setGitBranch(e.target.value)}
|
||||
placeholder="main"
|
||||
className="w-full px-4 py-2 border rounded-lg bg-white dark:bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Site path must be empty. This will clone the repo into the site directory.</p>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => { setGitSiteId(null); setGitAction(null) }} className="px-4 py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">Cancel</button>
|
||||
<button type="submit" disabled={gitLoading} className="px-4 py-2 bg-emerald-600 text-white rounded-lg disabled:opacity-50">
|
||||
{gitLoading ? 'Cloning...' : 'Clone'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Pull latest changes from the remote repository.</p>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button type="button" onClick={() => { setGitSiteId(null); setGitAction(null) }} className="px-4 py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">Cancel</button>
|
||||
<button onClick={handleGitPull} disabled={gitLoading} className="px-4 py-2 bg-emerald-600 text-white rounded-lg disabled:opacity-50">
|
||||
{gitLoading ? 'Pulling...' : 'Pull'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{redirectSiteId && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-lg">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">Redirects</h2>
|
||||
<form onSubmit={handleAddRedirect} className="space-y-2 mb-4">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input
|
||||
value={redirectSource}
|
||||
onChange={(e) => setRedirectSource(e.target.value)}
|
||||
placeholder="/old-path"
|
||||
className="flex-1 min-w-[100px] px-3 py-2 border rounded-lg bg-white dark:bg-gray-700"
|
||||
/>
|
||||
<span className="self-center text-gray-500">→</span>
|
||||
<input
|
||||
value={redirectTarget}
|
||||
onChange={(e) => setRedirectTarget(e.target.value)}
|
||||
placeholder="/new-path or https://..."
|
||||
className="flex-1 min-w-[100px] px-3 py-2 border rounded-lg bg-white dark:bg-gray-700"
|
||||
/>
|
||||
<select
|
||||
value={redirectCode}
|
||||
onChange={(e) => setRedirectCode(Number(e.target.value))}
|
||||
className="px-3 py-2 border rounded-lg bg-white dark:bg-gray-700"
|
||||
>
|
||||
<option value={301}>301</option>
|
||||
<option value={302}>302</option>
|
||||
</select>
|
||||
<button type="submit" disabled={redirectAdding} className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{redirects.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">No redirects</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{redirects.map((r) => (
|
||||
<li key={r.id} className="flex items-center justify-between gap-2 text-sm py-1 border-b dark:border-gray-700">
|
||||
<span className="font-mono truncate">{r.source}</span>
|
||||
<span className="text-gray-500">→</span>
|
||||
<span className="font-mono truncate flex-1">{r.target}</span>
|
||||
<span className="text-gray-400">{r.code}</span>
|
||||
<button onClick={() => handleDeleteRedirect(r.id)} className="p-1 text-red-600 hover:bg-red-50 rounded">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button onClick={() => setRedirectSiteId(null)} className="px-4 py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editSiteId && editForm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">Edit Site</h2>
|
||||
<form onSubmit={handleEdit} className="space-y-4">
|
||||
{editError && (
|
||||
<div className="p-2 rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-sm">
|
||||
{editError}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Domain(s) <span className="text-gray-500">(comma or space separated)</span>
|
||||
</label>
|
||||
<input
|
||||
value={editForm.domains}
|
||||
onChange={(e) => setEditForm({ ...editForm, domains: e.target.value })}
|
||||
type="text"
|
||||
placeholder="example.com www.example.com"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Path <span className="text-gray-500">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
value={editForm.path}
|
||||
onChange={(e) => setEditForm({ ...editForm, path: e.target.value })}
|
||||
type="text"
|
||||
placeholder="/www/wwwroot/example.com"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">PHP Version</label>
|
||||
<select
|
||||
value={editForm.php_version}
|
||||
onChange={(e) => setEditForm({ ...editForm, php_version: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value="74">7.4</option>
|
||||
<option value="80">8.0</option>
|
||||
<option value="81">8.1</option>
|
||||
<option value="82">8.2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="edit_force_https"
|
||||
checked={editForm.force_https}
|
||||
onChange={(e) => setEditForm({ ...editForm, force_https: e.target.checked })}
|
||||
className="rounded"
|
||||
/>
|
||||
<label htmlFor="edit_force_https" className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Force HTTPS
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Note <span className="text-gray-500">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
value={editForm.ps}
|
||||
onChange={(e) => setEditForm({ ...editForm, ps: e.target.value })}
|
||||
type="text"
|
||||
placeholder="My website"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setEditSiteId(null); setEditForm(null) }}
|
||||
className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={editLoading}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-lg font-medium"
|
||||
>
|
||||
{editLoading ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{backupSiteId && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-lg">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">Site Backup</h2>
|
||||
<div className="mb-4">
|
||||
<button
|
||||
onClick={handleCreateBackup}
|
||||
disabled={backupLoading}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg disabled:opacity-50"
|
||||
>
|
||||
<Archive className="w-4 h-4" />
|
||||
{backupLoading ? 'Creating...' : 'Create Backup'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Existing backups</h3>
|
||||
{backups.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">No backups yet</p>
|
||||
) : (
|
||||
<ul className="space-y-2 max-h-48 overflow-y-auto">
|
||||
{backups.map((b) => (
|
||||
<li key={b.filename} className="flex items-center justify-between gap-2 text-sm">
|
||||
<span className="truncate font-mono text-gray-700 dark:text-gray-300 flex-1">{b.filename}</span>
|
||||
<span className="text-gray-500 text-xs flex-shrink-0">{formatSize(b.size)}</span>
|
||||
<span className="flex gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleDownloadBackup(b.filename)}
|
||||
className="p-1.5 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded"
|
||||
title="Download"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRestore(b.filename)}
|
||||
disabled={backupLoading}
|
||||
className="p-1.5 text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded disabled:opacity-50"
|
||||
title="Restore"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => setBackupSiteId(null)}
|
||||
className="px-4 py-2 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user