feat: UI 3 volets (Hermes stub, dashboard tuiles, terminal xterm.js)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-05 04:20:13 +02:00
parent 46d27768f3
commit 17134ed1a6
6 changed files with 183 additions and 0 deletions
@@ -0,0 +1,42 @@
+// client/src/features/machines/AddMachineModal.tsx
+import { useState } from "react";
+
+interface Props { onClose: () => void; onCreated: () => void; }
+
+export function AddMachineModal({ onClose, onCreated }: Props) {
+  const [form, setForm] = useState({ name: "", hostname: "", port: 22, username: "", password: "", sudoPassword: "" });
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const set = (k: string, v: string | number) => setForm({ ...form, [k]: v });
+
+  async function submit() {
+    setBusy(true); setError(null);
+    try {
+      const res = await fetch("/api/machines", {
+        method: "POST", headers: { "content-type": "application/json" },
+        body: JSON.stringify({ ...form, port: Number(form.port), sudoPassword: form.sudoPassword || null }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error ?? "Échec");
+      onCreated(); onClose();
+    } catch (e) { setError((e as Error).message); } finally { setBusy(false); }
+  }
+
+  return (
+    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.5)", display: "grid", placeItems: "center" }}>
+      <div className="glass-strong" style={{ padding: 20, borderRadius: 12, width: 380, display: "grid", gap: 10 }}>
+        <div className="label">AJOUTER UNE MACHINE</div>
+        {(["name", "hostname", "username"] as const).map((k) => (
+          <input key={k} placeholder={k} value={form[k]} onChange={(e) => set(k, e.target.value)} />
+        ))}
+        <input placeholder="port" type="number" value={form.port} onChange={(e) => set("port", e.target.value)} />
+        <input placeholder="password" type="password" value={form.password} onChange={(e) => set("password", e.target.value)} />
+        <input placeholder="sudo password (optionnel)" type="password" value={form.sudoPassword} onChange={(e) => set("sudoPassword", e.target.value)} />
+        {error && <div style={{ color: "var(--err)", fontSize: 12 }}>{error}</div>}
+        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+          <button onClick={onClose}>Annuler</button>
+          <button className="interactive" disabled={busy} onClick={submit}>{busy ? "Test…" : "Ajouter"}</button>
+        </div>
+      </div>
+    </div>
+  );
+}