Распаковал архив Proxmox-VPS-Panel.rar и добавил содержимое в репозиторий
This commit is contained in:
root
@@ -0,0 +1,74 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { api } from "../api.js";
|
||||
|
||||
const empty = { name: "", description: "", guest_type: "vm", source_vmid: "", source_template: "", cores: 1, memory_mb: 1024, disk_gb: 10 };
|
||||
|
||||
export default function AdminTemplates() {
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [proxmoxTemplates, setProxmoxTemplates] = useState(null);
|
||||
const [form, setForm] = useState(empty);
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function refresh() { setTemplates(await api.listTemplates()); }
|
||||
async function fetchProxmox() { setBusy(true); try { setProxmoxTemplates(await api.fetchProxmoxTemplates()); } catch (err) { setError(err.message); } finally { setBusy(false); } }
|
||||
async function importVm(vm) { await api.createTemplate({ name: vm.name || "VM-"+vm.vmid, guest_type: "vm", source_vmid: vm.vmid, cores: vm.cores, memory_mb: vm.memory_mb, disk_gb: vm.disk_gb || 10 }); await refresh(); }
|
||||
async function importLxc(lxc) { await api.createTemplate({ name: lxc.name, guest_type: "lxc", source_template: lxc.volid, cores: 1, memory_mb: 1024, disk_gb: 8 }); await refresh(); }
|
||||
async function deleteTemplate(id) { if (!confirm("Удалить шаблон?")) return; await api.deleteTemplate(id); await refresh(); }
|
||||
|
||||
useEffect(() => { refresh(); }, []);
|
||||
function set(f, v) { setForm(fr => ({ ...fr, [f]: v })); }
|
||||
|
||||
async function onSubmit(e) { e.preventDefault(); setError(""); setBusy(true); try { await api.createTemplate({ ...form, cores: Number(form.cores), memory_mb: Number(form.memory_mb), disk_gb: Number(form.disk_gb), source_vmid: form.source_vmid ? Number(form.source_vmid) : null, source_template: form.source_template || null }); setForm(empty); await refresh(); } catch (err) { setError(err.message); } finally { setBusy(false); } }
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1 className="page-title">Шаблоны VPS</h1>
|
||||
{error && <div className="error-box">{error}</div>}
|
||||
|
||||
<div className="card" style={{ marginBottom: 24 }}>
|
||||
<h3>🔍 Найти шаблоны на Proxmox</h3>
|
||||
<button className="btn btn-primary" onClick={fetchProxmox} disabled={busy}>{busy ? "Ищем…" : "Найти шаблоны"}</button>
|
||||
{proxmoxTemplates && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
{proxmoxTemplates.vm_templates?.length > 0 && (
|
||||
<div style={{ marginBottom: 16 }}><h4>🖥 VM-шаблоны</h4>
|
||||
<table className="data-table"><thead><tr><th>VMID</th><th>Имя</th><th>vCPU</th><th>RAM</th><th></th></tr></thead>
|
||||
<tbody>{proxmoxTemplates.vm_templates.map(vm => (
|
||||
<tr key={vm.vmid}><td>{vm.vmid}</td><td>{vm.name}</td><td>{vm.cores}</td><td>{vm.memory_mb} МБ</td>
|
||||
<td><button className="btn btn-primary" onClick={() => importVm(vm)}>Импорт</button></td></tr>))}
|
||||
</tbody></table></div>)}
|
||||
{proxmoxTemplates.lxc_templates?.length > 0 && (
|
||||
<div><h4>📦 LXC-шаблоны</h4>
|
||||
<table className="data-table"><thead><tr><th>Имя</th><th>Хранилище</th><th>Размер</th><th></th></tr></thead>
|
||||
<tbody>{proxmoxTemplates.lxc_templates.map((lxc,i) => (
|
||||
<tr key={i}><td>{lxc.name}</td><td>{lxc.storage}</td><td>{lxc.size_mb} МБ</td>
|
||||
<td><button className="btn btn-primary" onClick={() => importLxc(lxc)}>Импорт</button></td></tr>))}
|
||||
</tbody></table></div>)}
|
||||
{(!proxmoxTemplates.vm_templates?.length && !proxmoxTemplates.lxc_templates?.length) && <p>Шаблоны не найдены.</p>}
|
||||
</div>)}
|
||||
</div>
|
||||
|
||||
<form onSubmit={onSubmit} className="card" style={{ marginBottom: 32 }}>
|
||||
<h3>➕ Добавить вручную</h3>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
|
||||
<div className="field"><label>Название</label><input value={form.name} onChange={e => set("name", e.target.value)} required /></div>
|
||||
<div className="field"><label>Тип</label><select value={form.guest_type} onChange={e => set("guest_type", e.target.value)}><option value="vm">VM</option><option value="lxc">LXC</option></select></div>
|
||||
{form.guest_type === "vm" ? <div className="field"><label>VMID шаблона</label><input type="number" value={form.source_vmid} onChange={e => set("source_vmid", e.target.value)} placeholder="999" required /></div>
|
||||
: <div className="field"><label>CT-шаблон (volid)</label><input value={form.source_template} onChange={e => set("source_template", e.target.value)} placeholder="local:vztmpl/..." required /></div>}
|
||||
<div className="field"><label>Описание</label><input value={form.description} onChange={e => set("description", e.target.value)} /></div>
|
||||
<div className="field"><label>vCPU</label><input type="number" min={1} value={form.cores} onChange={e => set("cores", e.target.value)} /></div>
|
||||
<div className="field"><label>RAM, МБ</label><input type="number" min={256} step={256} value={form.memory_mb} onChange={e => set("memory_mb", e.target.value)} /></div>
|
||||
<div className="field"><label>Диск, ГБ</label><input type="number" min={1} value={form.disk_gb} onChange={e => set("disk_gb", e.target.value)} /></div>
|
||||
</div>
|
||||
<button className="btn btn-primary" disabled={busy} type="submit">Добавить шаблон</button>
|
||||
</form>
|
||||
|
||||
<h3>📋 Активные шаблоны</h3>
|
||||
<table className="data-table"><thead><tr><th>Название</th><th>Тип</th><th>vCPU</th><th>RAM</th><th>Диск</th><th></th></tr></thead>
|
||||
<tbody>{templates.map(t => (
|
||||
<tr key={t.id}><td>{t.name}</td><td>{t.guest_type==="vm"?"VM":"LXC"}</td><td>{t.cores}</td><td>{t.memory_mb} МБ</td><td>{t.disk_gb} ГБ</td>
|
||||
<td><button className="btn btn-danger" onClick={() => deleteTemplate(t.id)}>Удалить</button></td></tr>))}
|
||||
</tbody></table>
|
||||
</div>);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { api } from "../api.js";
|
||||
|
||||
export default function AdminUsers() {
|
||||
const [users, setUsers] = useState([]);
|
||||
|
||||
async function refresh() {
|
||||
setUsers(await api.listUsers());
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, []);
|
||||
|
||||
async function toggle(id) {
|
||||
await api.toggleUser(id);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1 className="page-title">Пользователи</h1>
|
||||
<p className="page-sub">Управление доступом клиентов к панели</p>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th>Роль</th>
|
||||
<th>Статус</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id}>
|
||||
<td>{u.email}</td>
|
||||
<td>{u.role === "admin" ? "Администратор" : "Клиент"}</td>
|
||||
<td>{u.is_active ? "Активен" : "Заблокирован"}</td>
|
||||
<td>
|
||||
<button className="btn btn-sm" onClick={() => toggle(u.id)}>
|
||||
{u.is_active ? "Заблокировать" : "Разблокировать"}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import { api } from "../api.js";
|
||||
import InstanceCard from "../components/InstanceCard.jsx";
|
||||
|
||||
const WHITE = "#fff", LIGHT = "#bbb", GREEN = "#69f0ae", DIM = "#777", BG = "#1e1e1e", BG2 = "#2a2a2a", BORDER = "#444";
|
||||
|
||||
const UbuntuLogo = () => (<svg viewBox="0 0 64 64" width="28" height="28"><circle cx="32" cy="32" r="28" fill="#E95420"/><circle cx="32" cy="32" r="22" fill="#fff"/><circle cx="32" cy="32" r="14" fill="#E95420"/><g stroke="#fff" strokeWidth="3" fill="none"><line x1="32" y1="10" x2="32" y2="18"/><line x1="32" y1="46" x2="32" y2="54"/><line x1="10" y1="32" x2="18" y2="32"/><line x1="46" y1="32" x2="54" y2="32"/></g></svg>);
|
||||
const DebianLogo = () => (<svg viewBox="0 0 64 64" width="28" height="28"><circle cx="32" cy="32" r="28" fill="#A81D33"/><path d="M32 8c-5 0-10 2-14 6l6 10c2-2 5-3 8-3 7 0 13 6 13 13 0 7-6 13-13 13-3 0-6-1-8-3l-6 10c4 4 9 6 14 6 13 0 24-11 24-24S45 8 32 8z" fill="#fff" opacity="0.9"/></svg>);
|
||||
const CentOSLogo = () => (<svg viewBox="0 0 64 64" width="28" height="28"><circle cx="32" cy="32" r="28" fill="#932279"/><path d="M32 12l-12 8v16l12 8 12-8V20L32 12zm0 6l7 5v10l-7 5-7-5V23l7-5z" fill="#fff" opacity="0.9"/></svg>);
|
||||
|
||||
const OS_OPTIONS = [
|
||||
{ key: "ubuntu", label: "Ubuntu", desc: "Универсальный", logo: UbuntuLogo },
|
||||
{ key: "debian", label: "Debian", desc: "Стабильный", logo: DebianLogo },
|
||||
{ key: "centos", label: "CentOS", desc: "Корпоративный", logo: CentOSLogo },
|
||||
];
|
||||
const PRESETS = [
|
||||
{ key: "small", label: "S", cpu: 1, ram: 1024, disk: 10 },
|
||||
{ key: "medium", label: "M", cpu: 2, ram: 2048, disk: 20 },
|
||||
{ key: "large", label: "L", cpu: 4, ram: 8192, disk: 50 },
|
||||
{ key: "xlarge", label: "XL", cpu: 8, ram: 16384, disk: 100 },
|
||||
];
|
||||
|
||||
function filterByOS(tpl, os) { if (!os) return tpl; return tpl.filter(t => t.name.toLowerCase().includes(os)); }
|
||||
function matchPreset(tpl, p) {
|
||||
const exact = tpl.find(t => t.cores===p.cpu && t.memory_mb===p.ram && t.disk_gb===p.disk);
|
||||
if (exact) return exact;
|
||||
return tpl.filter(t => t.cores>=p.cpu && t.memory_mb>=p.ram && t.disk_gb>=p.disk)
|
||||
.sort((a,b)=>(a.cores+a.memory_mb/1024+a.disk_gb)-(b.cores+b.memory_mb/1024+b.disk_gb))[0]||null;
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [instances, setInstances] = useState([]);
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [ciuser, setCiuser] = useState("ubuntu");
|
||||
const [cipassword, setCipassword] = useState("");
|
||||
const [templateId, setTemplateId] = useState("");
|
||||
const [selectedOS, setSelectedOS] = useState("ubuntu");
|
||||
const [selectedPreset, setSelectedPreset] = useState(null);
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const [inst, tpl] = await Promise.all([api.listInstances(), api.listTemplates()]);
|
||||
setInstances(inst); setTemplates(tpl);
|
||||
}, []);
|
||||
useEffect(() => { refresh().finally(() => setLoading(false)); const i = setInterval(refresh, 8000); return () => clearInterval(i); }, [refresh]);
|
||||
const osT = filterByOS(templates, selectedOS);
|
||||
useEffect(() => {
|
||||
if (selectedPreset) { const p = PRESETS.find(x => x.key===selectedPreset); const m = matchPreset(osT, p); if (m) setTemplateId(String(m.id)); }
|
||||
else if (osT.length > 0) setTemplateId(String(osT[0].id));
|
||||
}, [selectedOS, selectedPreset, templates]);
|
||||
|
||||
async function onCreate(e) {
|
||||
e.preventDefault(); setError(""); setBusy(true);
|
||||
try { await api.createInstance({ name, template_id: Number(templateId), ciuser: ciuser||"", cipassword: cipassword||"" });
|
||||
setName(""); setCipassword(""); setShowForm(false); setSelectedPreset(null); await refresh(); }
|
||||
catch (err) { setError(err.message); } finally { setBusy(false); }
|
||||
}
|
||||
async function onAction(id, action) { try { await api.instanceAction(id, action); await refresh(); } catch (err) { setError(err.message); } }
|
||||
async function onDelete(id) { if (!confirm("Удалить VPS?")) return; try { await api.deleteInstance(id); await refresh(); } catch (err) { setError(err.message); } }
|
||||
|
||||
const running = instances.filter(i => i.status==="running").length;
|
||||
const total = instances.length;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 960, margin: "0 auto", padding: "24px 16px" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, flexWrap: "wrap", gap: 12 }}>
|
||||
<div><h1 style={{ color: WHITE, fontSize: 24, margin: 0 }}>Мои VPS</h1>
|
||||
<p style={{ color: LIGHT, fontSize: 13, margin: "4px 0 0" }}>{total===0?"Нет активных серверов":`${running} из ${total} запущено`}</p></div>
|
||||
<button onClick={() => setShowForm(!showForm)}
|
||||
style={{ padding: "10px 20px", borderRadius: 10, border: "none", cursor: "pointer", background: showForm?"#c62828":"#4caf50", color:"#fff", fontSize:14, fontWeight:600 }}>
|
||||
{showForm?"✕ Отмена":"+ Новый VPS"}</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<form onSubmit={onCreate} style={{ background: BG, borderRadius: 16, padding: 24, marginBottom: 24, border: `1px solid ${BORDER}` }}>
|
||||
{error && <div className="error-box" style={{ marginBottom: 16 }}>{error}</div>}
|
||||
<label style={{ color: LIGHT, fontSize: 12, textTransform: "uppercase", letterSpacing: 1, marginBottom: 10, display: "block" }}>Система</label>
|
||||
<div style={{ display: "flex", gap: 10, marginBottom: 20, flexWrap: "wrap" }}>
|
||||
{OS_OPTIONS.map(os => { const active=selectedOS===os.key; const has=filterByOS(templates,os.key).length>0; return (
|
||||
<button key={os.key} type="button" disabled={!has} onClick={()=>{setSelectedOS(os.key);setSelectedPreset(null);}}
|
||||
style={{ display:"flex", alignItems:"center", gap:8, padding:"8px 14px", borderRadius:8, border:active?`2px solid ${GREEN}`:`1px solid ${BORDER}`, background:active?"#1b5e20":has?BG2:"#111", cursor:has?"pointer":"not-allowed", opacity:has?1:0.4 }}>
|
||||
<os.logo /><span style={{ color:WHITE, fontWeight:600, fontSize:13 }}>{os.label}</span><span style={{ color:DIM, fontSize:11 }}>{os.desc}</span></button>);})}
|
||||
</div>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 12, marginBottom: 16 }}>
|
||||
<div><label style={{ color: LIGHT, fontSize: 11, display: "block", marginBottom: 4 }}>Имя сервера</label>
|
||||
<input value={name} onChange={e=>setName(e.target.value)} placeholder="my-server" required style={{ width:"100%", padding:"9px 12px", borderRadius:8, border:`1px solid ${BORDER}`, background:BG2, color:WHITE, fontSize:14, boxSizing:"border-box" }}/></div>
|
||||
<div><label style={{ color: LIGHT, fontSize: 11, display: "block", marginBottom: 4 }}>👤 Пользователь</label>
|
||||
<input value={ciuser} onChange={e=>setCiuser(e.target.value)} placeholder="ubuntu" style={{ width:"100%", padding:"9px 12px", borderRadius:8, border:`1px solid ${BORDER}`, background:BG2, color:WHITE, fontSize:14, boxSizing:"border-box" }}/></div>
|
||||
<div><label style={{ color: LIGHT, fontSize: 11, display: "block", marginBottom: 4 }}>🔑 Пароль</label>
|
||||
<input type="password" value={cipassword} onChange={e=>setCipassword(e.target.value)} placeholder="••••••" style={{ width:"100%", padding:"9px 12px", borderRadius:8, border:`1px solid ${BORDER}`, background:BG2, color:WHITE, fontSize:14, boxSizing:"border-box" }}/></div>
|
||||
</div>
|
||||
<label style={{ color: LIGHT, fontSize: 11, display: "block", marginBottom: 6 }}>📦 Тариф</label>
|
||||
<div style={{ display: "flex", gap: 10, marginBottom: 16, alignItems: "stretch", flexWrap: "wrap" }}>
|
||||
<select value={templateId} onChange={e=>setTemplateId(e.target.value)} style={{ flex:1, padding:"9px 12px", borderRadius:8, border:`1px solid ${BORDER}`, background:BG2, color:WHITE, fontSize:13, minWidth:200 }}>
|
||||
{osT.map(t=>(<option key={t.id} value={t.id}>{t.name} · {t.cores} vCPU · {t.memory_mb} MB · {t.disk_gb} GB</option>))}</select>
|
||||
{PRESETS.map(p=>{const match=matchPreset(osT,p); const avail=!!match; const active=selectedPreset===p.key; return(
|
||||
<button key={p.key} type="button" disabled={!avail} onClick={()=>{setSelectedPreset(p.key);const m=matchPreset(osT,p);if(m)setTemplateId(String(m.id));}}
|
||||
style={{ padding:"8px 14px", borderRadius:8, border:active?`2px solid ${GREEN}`:`1px solid ${BORDER}`, background:active?"#1b5e20":avail?BG2:"#111", cursor:avail?"pointer":"not-allowed", opacity:avail?1:0.35, textAlign:"center" }}>
|
||||
<div style={{ fontWeight:700, color:WHITE, fontSize:16 }}>{p.label}</div><div style={{ fontSize:10, color:avail?GREEN:DIM }}>{avail?"✅":"—"}</div></button>);})}
|
||||
</div>
|
||||
<button type="submit" disabled={busy||!templateId||!name} style={{ width:"100%", padding:"12px", borderRadius:10, border:"none", background:busy?"#555":"#4caf50", color:"#fff", fontSize:15, fontWeight:700, cursor:busy?"wait":"pointer" }}>
|
||||
{busy?"⏳ Создаём...":"🚀 Развернуть VPS"}</button>
|
||||
</form>)}
|
||||
|
||||
{loading ? <div style={{ textAlign:"center", padding:40, color:DIM }}>Загрузка...</div>
|
||||
: instances.length===0 ? <div style={{ textAlign:"center", padding:60, color:DIM }}><div style={{ fontSize:56, marginBottom:16 }}>☁️</div><div style={{ fontSize:16, color:LIGHT }}>Нет активных VPS</div><div style={{ fontSize:13, marginTop:4 }}>Нажмите «+ Новый VPS» чтобы создать</div></div>
|
||||
: <div style={{ display:"grid", gap:14 }}>{instances.map(inst=>(<InstanceCard key={inst.id} instance={inst} onAction={onAction} onDelete={onDelete} />))}</div>}
|
||||
</div>);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { api } from "../api.js";
|
||||
import ConsoleViewer from "../components/ConsoleViewer.jsx";
|
||||
|
||||
export default function InstanceDetail() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [instance, setInstance] = useState(null);
|
||||
const [showConsole, setShowConsole] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const data = await api.getInstance(id);
|
||||
setInstance(data);
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
const interval = setInterval(refresh, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, [refresh]);
|
||||
|
||||
async function doAction(action) {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
await api.instanceAction(id, action);
|
||||
await refresh();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function doDelete() {
|
||||
if (!confirm("Удалить этот VPS безвозвратно?")) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.deleteInstance(id);
|
||||
navigate("/");
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!instance) return <div className="container">Загрузка…</div>;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1 className="page-title">{instance.name}</h1>
|
||||
<p className="page-sub">
|
||||
vmid {instance.vmid} · node {instance.node} · {instance.guest_type === "vm" ? "VM (QEMU)" : "LXC"}
|
||||
</p>
|
||||
|
||||
{error && <div className="error-box">{error}</div>}
|
||||
|
||||
<div className="card" style={{ marginBottom: 24 }}>
|
||||
<div className="status-row" style={{ marginBottom: 16 }}>
|
||||
<span className={`dot ${instance.status}`} /> {instance.status}
|
||||
</div>
|
||||
<div className="instance-actions">
|
||||
<button className="btn" disabled={busy || instance.status !== "stopped"} onClick={() => doAction("start")}>
|
||||
Старт
|
||||
</button>
|
||||
<button className="btn" disabled={busy || instance.status !== "running"} onClick={() => doAction("reboot")}>
|
||||
Перезагрузить
|
||||
</button>
|
||||
<button className="btn" disabled={busy || instance.status !== "running"} onClick={() => doAction("shutdown")}>
|
||||
Выключить
|
||||
</button>
|
||||
<button className="btn" disabled={busy || instance.status !== "running"} onClick={() => doAction("stop")}>
|
||||
Стоп (force)
|
||||
</button>
|
||||
<button className="btn" onClick={() => setShowConsole((v) => !v)}>
|
||||
{showConsole ? "Скрыть консоль" : "Открыть консоль"}
|
||||
</button>
|
||||
<button className="btn btn-danger" disabled={busy} onClick={doDelete}>
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showConsole && (
|
||||
<div className="card">
|
||||
<ConsoleViewer instanceId={instance.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { api } from "../api.js";
|
||||
import { useAuth } from "../App.jsx";
|
||||
|
||||
export default function Login() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const { setUser } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.login(email, password);
|
||||
const me = await api.me();
|
||||
setUser(me);
|
||||
navigate("/");
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-wrap">
|
||||
<h1 className="page-title">Вход</h1>
|
||||
<p className="page-sub">Личный кабинет управления VPS</p>
|
||||
{error && <div className="error-box">{error}</div>}
|
||||
<form onSubmit={onSubmit} className="card">
|
||||
<div className="field">
|
||||
<label>Email</label>
|
||||
<input value={email} onChange={(e) => setEmail(e.target.value)} type="email" required />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Пароль</label>
|
||||
<input
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-primary" type="submit" disabled={busy} style={{ width: "100%" }}>
|
||||
{busy ? "Входим…" : "Войти"}
|
||||
</button>
|
||||
</form>
|
||||
<p className="page-sub" style={{ marginTop: 16 }}>
|
||||
Нет аккаунта? <Link to="/register">Зарегистрироваться</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { api } from "../api.js";
|
||||
|
||||
export default function Register() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [done, setDone] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.register(email, password);
|
||||
setDone(true);
|
||||
setTimeout(() => navigate("/login"), 1200);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-wrap">
|
||||
<h1 className="page-title">Регистрация</h1>
|
||||
<p className="page-sub">Первый зарегистрированный пользователь получает права администратора</p>
|
||||
{error && <div className="error-box">{error}</div>}
|
||||
{done ? (
|
||||
<div className="card">Готово, переходим на страницу входа…</div>
|
||||
) : (
|
||||
<form onSubmit={onSubmit} className="card">
|
||||
<div className="field">
|
||||
<label>Email</label>
|
||||
<input value={email} onChange={(e) => setEmail(e.target.value)} type="email" required />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Пароль</label>
|
||||
<input
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
minLength={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-primary" type="submit" disabled={busy} style={{ width: "100%" }}>
|
||||
{busy ? "Создаём…" : "Создать аккаунт"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<p className="page-sub" style={{ marginTop: 16 }}>
|
||||
Уже есть аккаунт? <Link to="/login">Войти</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user