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

feat: add first page with auth and containers list and agents

Browse Source
This commit is contained in:
Blomios
2026-05-18 08:24:02 +02:00
parent 446087ae01
commit 3b4a841bf5
56 changed files with 16267 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
web/src/routes/admin/+page.svelte Normal file
View File

@ -0,0 +1,206 @@
<script lang="ts">
import { onMount } from "svelte";
import { fetchAgents, updateAgent, type Agent } from "$lib/api";
import { getToken } from "$lib/auth";
let agents = $state<Agent[]>([]);
let loadError = $state<string | null>(null);
let saving = $state<string | null>(null);
let toast = $state<{ msg: string; ok: boolean } | null>(null);
let editing = $state<Record<string, string>>({});
onMount(async () => {
try {
agents = await fetchAgents();
for (const a of agents) editing[a.id] = a.alias;
} catch (e: any) {
loadError = e.message;
}
});
async function saveAlias(agent: Agent) {
saving = agent.id;
try {
const updated = await updateAgent(agent.id, editing[agent.id] ?? "");
agents = agents.map(a => a.id === updated.id ? { ...a, alias: updated.alias } : a);
showToast("Alias sauvegardé", true);
} catch (e: any) {
showToast(e.message, false);
} finally {
saving = null;
}
}
function showToast(msg: string, ok: boolean) {
toast = { msg, ok };
setTimeout(() => (toast = null), 3000);
}
// ── Password change ──────────────────────────────────────────────────────
let pwCurrent = $state("");
let pwNew = $state("");
let pwConfirm = $state("");
let pwSaving = $state(false);
let pwError = $state<string | null>(null);
async function changePassword(e: SubmitEvent) {
e.preventDefault();
pwError = null;
if (pwNew !== pwConfirm) { pwError = "Les mots de passe ne correspondent pas."; return; }
if (pwNew.length < 8) { pwError = "Minimum 8 caractères requis."; return; }
pwSaving = true;
try {
const r = await fetch("/api/v1/auth/change-password", {
method: "POST",
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getToken()}` },
body: JSON.stringify({ current_password: pwCurrent, new_password: pwNew }),
});
if (!r.ok) throw new Error((await r.text()).trim() || `Erreur ${r.status}`);
pwCurrent = pwNew = pwConfirm = "";
showToast("Mot de passe modifié", true);
} catch (err: any) {
pwError = err.message;
} finally {
pwSaving = false;
}
}
</script>
<svelte:head>
<title>Admin — Containarr</title>
</svelte:head>
{#if toast}
<div class="fixed top-4 right-4 z-50 flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm
font-medium shadow-2xl border
{toast.ok
? 'bg-abyss-800 border-signal-green/30 text-signal-green'
: 'bg-abyss-800 border-signal-red/30 text-signal-red'}">
<span class="w-1.5 h-1.5 rounded-full {toast.ok ? 'bg-signal-green' : 'bg-signal-red'}"></span>
{toast.msg}
</div>
{/if}
<div class="min-h-screen bg-abyss-900 bg-grid-faint bg-grid text-slate-200">
<!-- Header -->
<header class="glass sticky top-0 z-40 px-5 py-3 flex items-center gap-3">
<div class="flex items-center gap-2.5">
<img src="/icon-192.png" alt="Containarr" class="w-6 h-6 rounded-md" />
<span class="font-semibold text-slate-100 tracking-tight">Containarr</span>
<span class="text-slate-700">/</span>
<span class="text-sm text-slate-400">Administration</span>
</div>
<a href="/" class="ml-auto nav-btn flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-200 px-3">
<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="1.75" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
Retour
</a>
</header>
<main class="p-4 md:p-6 max-w-4xl mx-auto space-y-10">
<!-- Password section -->
<section>
<h2 class="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-4">Sécurité</h2>
<div class="card p-5 max-w-sm">
<h3 class="text-sm font-semibold text-slate-200 mb-4">Changer le mot de passe</h3>
<form onsubmit={changePassword} class="space-y-3">
{#if pwError}
<p class="text-xs text-signal-red bg-signal-red/10 border border-signal-red/20
rounded-lg px-3 py-2">{pwError}</p>
{/if}
{#each [
{ id: "pw-c", label: "Mot de passe actuel", bind: "pwCurrent", val: pwCurrent, ac: "current-password" },
{ id: "pw-n", label: "Nouveau mot de passe", bind: "pwNew", val: pwNew, ac: "new-password" },
{ id: "pw-cf", label: "Confirmer", bind: "pwConfirm", val: pwConfirm, ac: "new-password" },
] as field}
<div>
<label class="block text-xs text-slate-500 mb-1" for={field.id}>{field.label}</label>
<input id={field.id} type="password" required
value={field.id === "pw-c" ? pwCurrent : field.id === "pw-n" ? pwNew : pwConfirm}
oninput={(e) => {
const v = (e.target as HTMLInputElement).value;
if (field.id === "pw-c") pwCurrent = v;
else if (field.id === "pw-n") pwNew = v;
else pwConfirm = v;
}}
class="w-full bg-abyss-700 border border-white/[0.08] rounded-lg px-3 py-2 text-sm
text-slate-100 outline-none focus:border-emerald/60 focus:ring-1 focus:ring-emerald/30
transition-all" />
</div>
{/each}
<button type="submit" disabled={pwSaving}
class="w-full mt-1 bg-emerald hover:bg-emerald-bright disabled:opacity-50 text-white
text-sm font-medium py-2 rounded-lg transition-colors">
{pwSaving ? "Sauvegarde…" : "Mettre à jour"}
</button>
</form>
</div>
</section>
<!-- Agents section -->
<section>
<h2 class="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-4">Agents</h2>
{#if loadError}
<p class="text-signal-red text-sm">{loadError}</p>
{:else if agents.length === 0}
<p class="text-slate-600 text-sm">Aucun agent enregistré.</p>
{:else}
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-white/[0.06] text-xs uppercase tracking-wider text-slate-600">
<th class="px-4 py-3 text-left font-medium">Statut</th>
<th class="px-4 py-3 text-left font-medium">Hostname</th>
<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>
</tr>
</thead>
<tbody>
{#each agents as agent (agent.id)}
<tr class="border-b border-white/[0.04] last:border-0 hover:bg-white/[0.025] transition-colors">
<td class="px-4 py-3">
<div class="flex items-center gap-2">
<span class={agent.online ? "dot-online" : "dot-offline"}></span>
<span class="text-xs {agent.online ? 'text-signal-green' : 'text-slate-600'}">
{agent.online ? "En ligne" : "Hors ligne"}
</span>
</div>
</td>
<td class="px-4 py-3 font-mono text-xs text-slate-400">{agent.hostname}</td>
<td class="px-4 py-3 font-mono text-xs text-slate-500">{agent.ip_address || "—"}</td>
<td class="px-4 py-3 text-xs text-slate-600 font-mono">{agent.arch || "—"} / {agent.os || "—"}</td>
<td class="px-4 py-3">
<input
type="text"
bind:value={editing[agent.id]}
placeholder={agent.hostname}
class="bg-abyss-700 border border-white/[0.08] rounded-lg px-2.5 py-1.5
text-xs text-slate-100 placeholder-slate-700 outline-none w-36
focus:border-emerald/60 focus:ring-1 focus:ring-emerald/30 transition-all"
/>
</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>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
</section>
</main>
</div>