111 lines
4.3 KiB
JavaScript
111 lines
4.3 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { X } from 'lucide-react'
|
|
import TagInput from './TagInput'
|
|
|
|
const FIELDS = [
|
|
{ key: 'name', label: 'Nom affiché', placeholder: 'Mon VPS 1', required: true, type: 'text' },
|
|
{ key: 'host', label: 'IP ou hostname', placeholder: '192.168.1.10', required: true, type: 'text' },
|
|
{ key: 'port', label: 'Port agent', placeholder: '8001', required: true, type: 'number' },
|
|
{ key: 'api_key', label: 'Clé API agent', placeholder: 'Laisser vide pour conserver la clé actuelle', required: false, type: 'password' },
|
|
{ key: 'description', label: 'Description', placeholder: 'Optionnel', required: false, type: 'text' },
|
|
]
|
|
|
|
export default function EditVpsModal({ vps, onSave, onClose }) {
|
|
const [form, setForm] = useState({
|
|
name: vps.name ?? '',
|
|
host: vps.host ?? '',
|
|
port: String(vps.port ?? 8001),
|
|
api_key: '',
|
|
description: vps.description ?? '',
|
|
tags: vps.tags ?? [],
|
|
})
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
useEffect(() => {
|
|
const handler = (e) => { if (e.key === 'Escape') onClose() }
|
|
window.addEventListener('keydown', handler)
|
|
return () => window.removeEventListener('keydown', handler)
|
|
}, [onClose])
|
|
|
|
const set = (key) => (e) => setForm(f => ({ ...f, [key]: e.target.value }))
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
setSaving(true)
|
|
setError('')
|
|
try {
|
|
await onSave(vps.id, { ...form, port: parseInt(form.port, 10) })
|
|
} catch (err) {
|
|
setError(err.message)
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm"
|
|
onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
|
|
>
|
|
<div className="w-full max-w-md bg-gray-900 border border-gray-700 rounded-xl shadow-2xl">
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-700">
|
|
<div>
|
|
<h3 className="font-semibold text-sm">Modifier le VPS</h3>
|
|
<p className="text-xs text-gray-500 mt-0.5 font-mono">{vps.id}</p>
|
|
</div>
|
|
<button onClick={onClose} className="p-1.5 rounded-lg hover:bg-gray-800 text-gray-500 hover:text-gray-200 transition-colors">
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-4 space-y-3">
|
|
{FIELDS.map(({ key, label, placeholder, required, type }) => (
|
|
<div key={key}>
|
|
<label className="block text-xs text-gray-400 mb-1">
|
|
{label} {required && <span className="text-red-400">*</span>}
|
|
</label>
|
|
<input
|
|
type={type}
|
|
value={form[key]}
|
|
onChange={set(key)}
|
|
placeholder={placeholder}
|
|
required={required}
|
|
className="w-full px-3 py-2 rounded-lg bg-gray-800 border border-gray-700 text-sm placeholder-gray-600 focus:outline-none focus:border-indigo-500 transition-colors"
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
{error && (
|
|
<p className="text-xs text-red-400 bg-red-950/30 border border-red-900/40 rounded-lg px-3 py-2">
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-xs text-gray-400 mb-1">Tags</label>
|
|
<TagInput tags={form.tags} onChange={tags => setForm(f => ({ ...f, tags }))} />
|
|
<p className="text-xs text-gray-600 mt-1">Entrée ou virgule pour valider</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2 pt-1">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 py-2 rounded-lg border border-gray-700 hover:bg-gray-800 text-sm transition-colors"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="flex-1 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-sm transition-colors font-medium"
|
|
>
|
|
{saving ? 'Enregistrement…' : 'Enregistrer'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|