blomios/Containarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add one pull plug and play feature

Browse Source
This commit is contained in:
Blomios
2026-05-18 11:28:38 +02:00
parent ad64766cd6
commit fc498379f6
11 changed files with 290 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/lib/api.ts
View File

@ -58,6 +58,21 @@ async function apiFetch(input: string, init: RequestInit = {}): Promise<Response
return r;
}
export async function createAgentToken(hostname: string): Promise<{ agent_id: string; token: string }> {
const r = await apiFetch(`${BASE}/agents/token`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ hostname }),
});
if (!r.ok) throw new Error(`create token: ${r.status}`);
return r.json();
}
export async function deleteAgent(id: string): Promise<void> {
const r = await apiFetch(`${BASE}/agents/${id}`, { method: "DELETE" });
if (!r.ok) throw new Error(`delete agent: ${r.status}`);
}
export async function fetchAgents(): Promise<Agent[]> {
const r = await apiFetch(`${BASE}/agents`);
if (!r.ok) throw new Error(`agents: ${r.status}`);

144
web/src/routes/admin/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from "svelte";
import { fetchAgents, updateAgent, type Agent } from "$lib/api";
import { fetchAgents, updateAgent, createAgentToken, deleteAgent, type Agent } from "$lib/api";
import { getToken } from "$lib/auth";
let agents = $state<Agent[]>([]);
@ -36,6 +36,52 @@
setTimeout(() => (toast = null), 3000);
}
// ── Agent token creation ─────────────────────────────────────────────────
let tokenHostname = $state("");
let tokenResult = $state<{ agent_id: string; token: string } | null>(null);
let tokenCreating = $state(false);
let tokenError = $state<string | null>(null);
let tokenCopied = $state(false);
async function generateToken(e: SubmitEvent) {
e.preventDefault();
tokenError = null;
tokenResult = null;
tokenCreating = true;
try {
tokenResult = await createAgentToken(tokenHostname.trim());
tokenHostname = "";
} catch (err: any) {
tokenError = err.message;
} finally {
tokenCreating = false;
}
}
async function copyToken() {
if (!tokenResult) return;
await navigator.clipboard.writeText(tokenResult.token);
tokenCopied = true;
setTimeout(() => (tokenCopied = false), 2000);
}
// ── Agent deletion ────────────────────────────────────────────────────────
let deleting = $state<string | null>(null);
async function removeAgent(agent: Agent) {
if (!confirm(`Supprimer l'agent "${agent.alias || agent.hostname}" ? Cette action est irréversible.`)) return;
deleting = agent.id;
try {
await deleteAgent(agent.id);
agents = agents.filter(a => a.id !== agent.id);
showToast("Agent supprimé", true);
} catch (err: any) {
showToast(err.message, false);
} finally {
deleting = null;
}
}
// ── Password change ──────────────────────────────────────────────────────
let pwCurrent = $state("");
let pwNew = $state("");
@ -144,6 +190,77 @@
<section>
<h2 class="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-4">Agents</h2>
<!-- Créer un token d'agent -->
<div class="card p-5 max-w-sm mb-6">
<h3 class="text-sm font-semibold text-slate-200 mb-1">Créer un token d'agent</h3>
<p class="text-xs text-slate-500 mb-4">
Génère un token d'authentification pour enregistrer un nouvel agent.
</p>
<form onsubmit={generateToken} class="space-y-3">
{#if tokenError}
<p class="text-xs text-signal-red bg-signal-red/10 border border-signal-red/20
rounded-lg px-3 py-2">{tokenError}</p>
{/if}
<div>
<label class="block text-xs text-slate-500 mb-1" for="token-hostname">Hostname de l'agent</label>
<input
id="token-hostname"
type="text"
required
bind:value={tokenHostname}
placeholder="ex: server-01"
class="w-full bg-abyss-700 border border-white/[0.08] rounded-lg px-3 py-2 text-sm
text-slate-100 placeholder-slate-600 outline-none focus:border-emerald/60
focus:ring-1 focus:ring-emerald/30 transition-all"
/>
</div>
<button
type="submit"
disabled={tokenCreating}
class="w-full bg-emerald hover:bg-emerald-bright disabled:opacity-50 text-white
text-sm font-medium py-2 rounded-lg transition-colors">
{tokenCreating ? "Génération…" : "Générer"}
</button>
</form>
{#if tokenResult}
<div class="mt-4 p-3 rounded-lg bg-signal-green/5 border border-signal-green/20 space-y-2">
<div class="flex items-center gap-1.5 text-xs font-semibold text-signal-green">
<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
</svg>
Token généré — notez-le, il ne sera plus affiché !
</div>
<p class="text-xs text-slate-500 font-mono break-all select-all bg-abyss-800 rounded px-2 py-1.5 border border-white/[0.06]">
{tokenResult.token}
</p>
<button
onclick={copyToken}
class="w-full flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs
font-medium transition-all
{tokenCopied
? 'bg-signal-green/20 text-signal-green border border-signal-green/30'
: 'bg-abyss-700 hover:bg-abyss-600 text-slate-300 border border-white/[0.08]'}">
{#if tokenCopied}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
Copié !
{:else}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
Copier le token
{/if}
</button>
</div>
{/if}
</div>
<!-- Liste des agents -->
<h3 class="text-xs font-semibold text-slate-600 uppercase tracking-wider mb-3">Agents enregistrés</h3>
{#if loadError}
<p class="text-signal-red text-sm">{loadError}</p>
{:else if agents.length === 0}
@ -158,7 +275,7 @@
<th class="px-4 py-3 text-left font-medium">IP</th>
<th class="px-4 py-3 text-left font-medium">Arch / OS</th>
<th class="px-4 py-3 text-left font-medium">Alias</th>
<th class="px-4 py-3 text-right font-medium"></th>
<th class="px-4 py-3 text-right font-medium">Actions</th>
</tr>
</thead>
<tbody>
@ -186,13 +303,22 @@
/>
</td>
<td class="px-4 py-3 text-right">
<button
onclick={() => saveAlias(agent)}
disabled={saving === agent.id || editing[agent.id] === agent.alias}
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all disabled:opacity-30
bg-emerald/10 hover:bg-emerald/20 text-emerald border border-emerald/20">
{saving === agent.id ? "…" : "Sauvegarder"}
</button>
<div class="flex items-center justify-end gap-2">
<button
onclick={() => saveAlias(agent)}
disabled={saving === agent.id || editing[agent.id] === agent.alias}
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all disabled:opacity-30
bg-emerald/10 hover:bg-emerald/20 text-emerald border border-emerald/20">
{saving === agent.id ? "…" : "Sauvegarder"}
</button>
<button
onclick={() => removeAgent(agent)}
disabled={deleting === agent.id}
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all disabled:opacity-30
bg-signal-red/10 hover:bg-signal-red/20 text-signal-red border border-signal-red/20">
{deleting === agent.id ? "…" : "Supprimer"}
</button>
</div>
</td>
</tr>
{/each}