proxmoxPanel/core
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: sessions management, web manifest, square icon-only buttons, remove lang select

Browse source 
- Backend: migration 002 adds user_agent/ip/last_used_at to refresh_tokens
- Backend: GET /api/auth/sessions + DELETE /api/auth/sessions/{id} endpoints
- Frontend: profile page — sessions section (browser, IP, datetime, revoke)
- Frontend: web manifest + SVG icon for PWA support
- Frontend: remove language selector from all navbars (moved to profile page)
- Frontend: neu-btn--icon-sm class for square icon-only buttons (theme/logout/edit)
- Frontend: manifest link added to all 9 HTML pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
enzo 2026-03-21 20:14:11 +01:00
parent b851dc61af
commit 97212b7ffa
18 changed files with 280 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/build.mjs
View file

@ -93,4 +93,19 @@ for (const f of fs.readdirSync('.')) {
}
}
// 8. Copy manifest.json
if (fs.existsSync('manifest.json')) {
fs.copyFileSync('manifest.json', `${dist}/manifest.json`)
console.log('Copied manifest.json')
}
// 9. Copy icons/
if (fs.existsSync('icons')) {
fs.mkdirSync(`${dist}/icons`, { recursive: true })
for (const f of fs.readdirSync('icons')) {
fs.copyFileSync(`icons/${f}`, `${dist}/icons/${f}`)
}
console.log('Copied icons/')
}
console.log('✓ Build complete → dist/')

5
frontend/css/neu.css
View file

@ -215,9 +215,8 @@ input, select, textarea { font-family: inherit; font-size: inherit; }
border-radius: var(--neu-radius-md);
}
/* Bouton icône carré taille sm — se déclenche automatiquement si le bouton
ne contient qu'un <i> (ex: theme, logout, edit mode) */
.neu-btn--sm:has(> i:only-child) {
/* Bouton icône carré (taille sm) */
.neu-btn.neu-btn--icon-sm {
width: 2rem;
height: 2rem;
padding: 0;

32
frontend/css/pages.css
View file

@ -693,6 +693,38 @@
flex-wrap: wrap;
}
/* ── Sessions ───────────────────────────────────────────────────────────────── */
.session-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .6rem 0;
border-bottom: 1px solid var(--neu-border);
}
.session-row:last-child { border-bottom: none; }
.session-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.session-browser {
display: flex;
align-items: center;
gap: .4rem;
font-size: .9rem;
color: var(--neu-text);
font-weight: 500;
}
.session-meta {
display: flex;
align-items: center;
gap: .3rem;
font-size: .75rem;
color: var(--neu-text-muted);
flex-wrap: wrap;
}
.session-sep { opacity: .4; }
.session-id { font-family: monospace; opacity: .6; }
/* ── Logo auth LineIcons ─────────────────────────────────────────────────────── */
.logo-icon {
font-size: 2.5rem;

10
frontend/dashboard.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>
@ -42,14 +43,11 @@
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.dashboard')"></h2>
<div class="navbar-actions">
<select class="neu-input neu-input--sm" x-model="lang" @change="setLang($event.target.value)">
<option value="fr">FR</option><option value="en">EN</option>
</select>
<button class="neu-btn neu-btn--sm" @click="toggleTheme()"
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()"
:title="theme==='dark' ? t('navbar.lightMode') : t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm" @click="logout()" :title="t('navbar.logout')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>
@ -59,7 +57,7 @@
<div class="page-header">
<h2 class="page-title" x-text="t('dashboard.welcome').replace('{name}', $store.auth.user?.username || '')"></h2>
<button class="neu-btn neu-btn--sm" :class="{ 'neu-btn--primary': editMode }"
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" :class="{ 'neu-btn--primary': editMode }"
@click="toggleEdit()" title="Mode édition">
<i class="lnid-pencil-1"></i>
</button>

24
frontend/icons/icon.svg Normal file
View file

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a1a2e"/>
<stop offset="100%" style="stop-color:#16213e"/>
</linearGradient>
<linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6c8ef4"/>
<stop offset="100%" style="stop-color:#a78bfa"/>
</linearGradient>
</defs>
<!-- Background rounded square -->
<rect width="512" height="512" rx="96" fill="url(#bg)"/>
<!-- Server rack lines -->
<rect x="96" y="140" width="320" height="64" rx="12" fill="none" stroke="url(#accent)" stroke-width="10" opacity="0.4"/>
<rect x="96" y="224" width="320" height="64" rx="12" fill="none" stroke="url(#accent)" stroke-width="10" opacity="0.6"/>
<rect x="96" y="308" width="320" height="64" rx="12" fill="none" stroke="url(#accent)" stroke-width="10" opacity="0.4"/>
<!-- Status dots -->
<circle cx="142" cy="172" r="8" fill="#22c55e"/>
<circle cx="142" cy="256" r="8" fill="url(#accent)"/>
<circle cx="142" cy="340" r="8" fill="#22c55e"/>
<!-- P letter -->
<text x="256" y="300" text-anchor="middle" font-family="system-ui, sans-serif" font-weight="800" font-size="200" fill="url(#accent)" opacity="0.12">P</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
frontend/install.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>

40
frontend/js/app.js
View file

@ -526,11 +526,15 @@ document.addEventListener('alpine:init', () => {
theme: '',
sidebarPosition: '',
lang: '',
sessions: [],
sessionsLoading: true,
revoking: {},
init() {
async init() {
this.theme = Alpine.store('ui').theme
this.sidebarPosition = Alpine.store('ui').sidebarPosition
this.lang = Alpine.store('i18n').lang
await this.loadSessions()
},
setTheme(t) {
@ -550,6 +554,40 @@ document.addEventListener('alpine:init', () => {
await Alpine.store('i18n').setLang(lang)
},
async loadSessions() {
this.sessionsLoading = true
try {
const res = await apiFetch('/api/auth/sessions')
if (res.ok) this.sessions = await res.json()
} catch (e) { /* ignore */ }
this.sessionsLoading = false
},
async revokeSession(id) {
this.revoking = { ...this.revoking, [id]: true }
try {
const res = await apiFetch(`/api/auth/sessions/${id}`, { method: 'DELETE' })
if (res.ok) this.sessions = this.sessions.filter(s => s.id !== id)
} catch (e) { /* ignore */ }
this.revoking = { ...this.revoking, [id]: false }
},
formatDate(iso) {
if (!iso) return '—'
const d = new Date(iso)
return d.toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
},
parseUA(ua) {
if (!ua) return 'Navigateur inconnu'
if (/Firefox\/(\d+)/i.test(ua)) return `Firefox ${RegExp.$1}`
if (/Chrome\/(\d+)/i.test(ua) && !/Chromium|Edge|OPR/i.test(ua)) return `Chrome ${RegExp.$1}`
if (/Edg\/(\d+)/i.test(ua)) return `Edge ${RegExp.$1}`
if (/Safari\//i.test(ua) && !/Chrome/i.test(ua)) return 'Safari'
if (/OPR\/(\d+)/i.test(ua)) return `Opera ${RegExp.$1}`
return ua.slice(0, 40)
},
get user() { return Alpine.store('auth').user },
t(key) { return Alpine.store('i18n').t(key) },
}))

1
frontend/login.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>

17
frontend/manifest.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "ProxmoxPanel",
"short_name": "PxPanel",
"description": "Interface de gestion Proxmox",
"start_url": "/dashboard.html",
"display": "standalone",
"background_color": "#1a1a2e",
"theme_color": "#6c8ef4",
"icons": [
{
"src": "/icons/icon.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any maskable"
}
]
}

8
frontend/modules.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>
@ -42,13 +43,10 @@
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.modules')"></h2>
<div class="navbar-actions">
<select class="neu-input neu-input--sm" x-model="lang" @change="setLang($event.target.value)">
<option value="fr">FR</option><option value="en">EN</option>
</select>
<button class="neu-btn neu-btn--sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm" @click="logout()" :title="t('navbar.logout')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>

49
frontend/profile.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>
@ -42,13 +43,10 @@
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.profile')"></h2>
<div class="navbar-actions">
<select class="neu-input neu-input--sm" x-model="lang" @change="setLang($event.target.value)">
<option value="fr">FR</option><option value="en">EN</option>
</select>
<button class="neu-btn neu-btn--sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm" @click="logout()" :title="t('navbar.logout')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>
@ -141,6 +139,47 @@
</div>
</div>
<!-- Sessions actives -->
<div class="neu-card settings-section">
<h3 class="section-title">
<i class="lnid-key-1"></i>
Sessions actives
</h3>
<div class="loading-state" x-show="sessionsLoading">
<div class="spinner-lg"></div>
</div>
<div x-show="!sessionsLoading">
<template x-if="sessions.length === 0">
<p class="empty-state">Aucune session active</p>
</template>
<template x-for="s in sessions" :key="s.id">
<div class="session-row">
<div class="session-info">
<div class="session-browser">
<i class="lnid-laptop-1"></i>
<span x-text="parseUA(s.user_agent)"></span>
</div>
<div class="session-meta">
<span class="session-ip" x-text="s.ip"></span>
<span class="session-sep">·</span>
<span class="session-date" x-text="formatDate(s.last_used_at || s.created_at)"></span>
<span class="session-sep">·</span>
<span class="session-id" x-text="'#' + s.id"></span>
</div>
</div>
<button class="neu-btn neu-btn--sm neu-btn--danger neu-btn--icon-sm"
@click="revokeSession(s.id)"
:disabled="revoking[s.id]"
title="Révoquer cette session">
<i class="lnid-cross"></i>
</button>
</div>
</template>
</div>
</div>
<!-- Déconnexion -->
<div class="neu-card settings-section">
<button class="neu-btn neu-btn--danger" @click="$store.auth.logout()">

8
frontend/proxmox.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>
@ -42,13 +43,10 @@
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.proxmox')"></h2>
<div class="navbar-actions">
<select class="neu-input neu-input--sm" x-model="lang" @change="setLang($event.target.value)">
<option value="fr">FR</option><option value="en">EN</option>
</select>
<button class="neu-btn neu-btn--sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm" @click="logout()" :title="t('navbar.logout')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>

8
frontend/settings.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>
@ -42,13 +43,10 @@
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.settings')"></h2>
<div class="navbar-actions">
<select class="neu-input neu-input--sm" x-model="lang" @change="setLang($event.target.value)">
<option value="fr">FR</option><option value="en">EN</option>
</select>
<button class="neu-btn neu-btn--sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm" @click="logout()" :title="t('navbar.logout')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>

8
frontend/terminal.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/css/xterm.css" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
@ -45,13 +46,10 @@
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.terminal')"></h2>
<div class="navbar-actions">
<select class="neu-input neu-input--sm" x-model="lang" @change="setLang($event.target.value)">
<option value="fr">FR</option><option value="en">EN</option>
</select>
<button class="neu-btn neu-btn--sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm" @click="logout()" :title="t('navbar.logout')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>

8
frontend/updates.html
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>
@ -42,13 +43,10 @@
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.updates')"></h2>
<div class="navbar-actions">
<select class="neu-input neu-input--sm" x-model="lang" @change="setLang($event.target.value)">
<option value="fr">FR</option><option value="en">EN</option>
</select>
<button class="neu-btn neu-btn--sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm" @click="logout()" :title="t('navbar.logout')">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>