feat: add one pull plug and play feature
This commit is contained in:
@ -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}
|
||||
|
||||
Reference in New Issue
Block a user