Adriano/InsanityLab-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Utenti: pannello password, ruolo come pillola e azioni a icona

Browse Source 
Le due azioni di riga diventano icone (chiave e cestino) con etichetta
accessibile: pesavano quanto il contenuto della tabella. Il ruolo smette
di essere il menu a tendina di sistema e prende la forma di una pillola
colorata per livello, restando un <select> che salva al cambio.

La chiave apre un pannello dove la password si può scrivere a mano oppure
far generare: l'endpoint accetta ora una password scelta, con lo stesso
minimo di otto caratteri della creazione, e continua a restituirla in
chiaro una volta sola perché nel database ne resta solo l'hash. Il valore
si copia con un pulsante invece che dal prompt del browser.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
AdrianoDev
2026-07-31 16:38:18 +02:00
parent 15924544b4
commit 59d6246c77
3 changed files with 167 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Admin.astro
+38
View File
@@ -133,6 +133,44 @@ const attiva = (v: { href: string; exact?: boolean }) =>
.abtn--ghost { background: none; color: var(--c-heading); border-color: #ddd6cb; }
.abtn--ghost:hover { background: none; border-color: var(--c-accent); color: var(--c-accent-dark); }
/* Ruolo: una pillola che resta un <select>, con la freccia disegnata a parte perché
quella di sistema non si può vestire. */
.arole {
appearance: none; -webkit-appearance: none; border: 1px solid #e0d9cd; background-color: #faf8f5;
padding: 6px 30px 6px 12px; font-family: var(--font-heading); font-size: .68rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--c-heading); cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8a8a' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 11px center; background-size: 9px;
}
.arole:hover { border-color: var(--c-accent); }
.arole:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.arole[data-role='admin'] { background-color: #efe7dc; border-color: #d9c7ab; color: #6b5334; }
.arole[data-role='superuser'] { background-color: #ece7dc; border-color: #d8cfbe; color: #6f6353; }
.arole[data-role='piattaforme'] { background-color: #e6ede4; border-color: #cbdcc6; color: #4d6a48; }
/* Riquadro della password appena generata */
.apw { background: #fff; border: 1px solid var(--c-accent); padding: 18px 20px; margin: 0 0 20px; }
.apw__label { margin: 0 0 10px; font-size: .85rem; color: var(--c-text-light); }
.apw__label strong { color: var(--c-heading); }
.apw__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apw__row code {
background: var(--c-bg-alt); border: 1px solid #e4dfd7; padding: 9px 14px;
font-size: 1rem; letter-spacing: .06em; color: var(--c-heading);
}
.apw__hint { margin: 10px 0 0; font-size: .78rem; color: var(--c-text-light); }
.apw__input { width: auto; min-width: 260px; margin-bottom: 0; }
/* Comandi di riga: icona sola, per non far pesare le azioni quanto il contenuto. */
.aicon {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
padding: 0; background: none; border: 1px solid #ddd6cb; cursor: pointer; color: var(--c-text);
}
.aicon + .aicon { margin-left: 6px; }
.aicon svg { width: 17px; height: 17px; fill: currentColor; }
.aicon:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }
.aicon--danger:hover { border-color: #a4544a; background: #a4544a; color: #fff; }
td.uactions, th.uactions { text-align: right; white-space: nowrap; }
.form-msg { font-size: .88rem; margin-top: 8px; }
.form-msg--ok { color: #5f7c5a; }
.form-msg--err { color: #a4544a; }