jonas/Hoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modernize frontend: new design system, redesign all pages

Browse Source 
- Convert codexInfo.md to CLAUDE.md as the central project context.
- Rewrite GUI/style.md with a modernized, file-first direction (layered
  surfaces, refined typography, motion budget, ambient gradients).
- Refresh global tokens in global.css, page-layouts.css and
  surface-patterns.css: extended palette (primary 050/800, surface
  elevated, border subtle), four-tier shadow system, dark-mode parity,
  new utilities (hoard-chip, hoard-icon-tile, hoard-spotlight,
  hoard-section-head, hoard-divider-soft, status pulse dot).
- Rebuild Layout.vue: premium app shell with brand halo, animated
  active-indicator, account pill with avatar/initials, drawer footer
  card, refined banner stack and footer.
- Redesign every route while preserving routing and API contracts:
  Home, Login, ChangePassword, Dashboard, AdminUsers, AdminUserDetail,
  Impressum, 404, Forbidden. Adds search/admin stats, password hint
  list, dashboard greeting with avatar, modernized hero/spotlight
  treatments and consistent mobile layouts (safe-areas, 44/48px tap
  targets).
- Drop @fontsource/roboto import in vuetify.ts and load Inter via the
  rsms.me CSS in index.html; update Vuetify defaults and palette to
  match the new tokens.
This commit is contained in:
Claude
2026-04-26 15:24:52 +00:00
parent 10bf4b94ad
commit 6740038e9a
18 changed files with 3478 additions and 1881 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GUI/src/routes/admin/AdminUsers.vue
+440 -199
View File
@@ -11,12 +11,59 @@ const appBannersStore = useAppBannersStore()
const isLoading = ref(true)
const errorMessage = ref('')
const users = ref<AdminUser[]>([])
const searchQuery = ref('')
const hasUsers = computed(() => users.value.length > 0)
const activeUserCount = computed(() => users.value.filter((user) => user.isActive).length)
const passwordChangeCount = computed(
() => users.value.filter((user) => user.mustChangePassword).length,
)
const adminCount = computed(
() =>
users.value.filter((user) =>
user.roles.some((role) => role.toLowerCase() === 'admin'),
).length,
)
const filteredUsers = computed(() => {
const query = searchQuery.value.trim().toLowerCase()
if (query.length === 0) {
return users.value
}
return users.value.filter((user) => {
if (user.userName.toLowerCase().includes(query)) {
return true
}
if (user.id.toLowerCase().includes(query)) {
return true
}
return user.roles.some((role) => role.toLowerCase().includes(query))
})
})
function userInitials(user: AdminUser) {
const name = user.userName?.trim() ?? ''
if (name.length === 0) {
return '·'
}
const parts = name.split(/[\s._-]+/).filter((part) => part.length > 0)
if (parts.length === 0) {
return name.slice(0, 2).toUpperCase()
}
if (parts.length === 1) {
const first = parts[0] as string
return first.slice(0, 2).toUpperCase()
}
const first = parts[0] as string
const second = parts[1] as string
return `${first.charAt(0)}${second.charAt(0)}`.toUpperCase()
}
function formatRoles(roles: string[]): string {
return roles.length > 0 ? roles.join(', ') : 'Keine Rolle'
@@ -65,155 +112,26 @@ onMounted(() => {
<template>
<v-container fluid class="admin-users-page hoard-page">
<section class="admin-users-shell hoard-panel">
<header class="admin-users-head">
<p class="hoard-kicker">Adminbereich</p>
<header class="admin-users-header hoard-panel hoard-panel-gradient">
<div class="admin-users-header__copy">
<p class="hoard-kicker hoard-kicker--wide">Adminbereich</p>
<h1>Benutzerverwaltung</h1>
<p>Alle App-Konten mit Rollen, Status und Passwortwechselpflicht.</p>
</header>
<section v-if="!isLoading && !errorMessage" class="admin-users-stats" aria-label="Benutzerübersicht">
<article class="admin-users-stat">
<p class="admin-users-stat-label">Konten</p>
<p class="admin-users-stat-value">{{ users.length }}</p>
</article>
<article class="admin-users-stat">
<p class="admin-users-stat-label">Aktiv</p>
<p class="admin-users-stat-value">{{ activeUserCount }}</p>
</article>
<article class="admin-users-stat">
<p class="admin-users-stat-label">Passwortwechsel</p>
<p class="admin-users-stat-value">{{ passwordChangeCount }}</p>
</article>
</section>
<v-alert
v-if="errorMessage"
type="error"
variant="tonal"
border="start"
>
{{ errorMessage }}
</v-alert>
<p v-else-if="isLoading" class="admin-users-loading">Benutzer werden geladen...</p>
<section v-else-if="!hasUsers" class="hoard-empty-state">
<h2>Keine Benutzer gefunden</h2>
<p>Aktuell sind keine Konten vorhanden.</p>
</section>
<div v-else class="admin-users-list-region">
<div class="admin-users-table-wrap">
<v-table class="admin-users-table">
<thead>
<tr>
<th>Benutzername</th>
<th>Rollen</th>
<th>Aktiv</th>
<th>Passwortwechsel</th>
<th class="admin-users-col-actions">Aktion</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td class="admin-users-cell-user">{{ user.userName || '(ohne Benutzername)' }}</td>
<td>{{ formatRoles(user.roles) }}</td>
<td>
<span
:class="[
'hoard-status',
user.isActive ? 'hoard-status--success' : 'hoard-status--danger',
]"
>
{{ user.isActive ? 'Aktiv' : 'Inaktiv' }}
</span>
</td>
<td>
<span
:class="[
'hoard-status',
user.mustChangePassword ? 'hoard-status--warning' : 'hoard-status--info',
]"
>
{{ user.mustChangePassword ? 'Erforderlich' : 'Nein' }}
</span>
</td>
<td class="admin-users-col-actions">
<v-btn
size="small"
variant="outlined"
prepend-icon="mdi-account-details-outline"
@click="openUserDetail(user.id)"
>
Details
</v-btn>
</td>
</tr>
</tbody>
</v-table>
</div>
<div class="admin-users-mobile-list" aria-label="Benutzerliste">
<article v-for="user in users" :key="user.id" class="admin-users-mobile-card">
<header class="admin-users-mobile-head">
<span class="admin-users-mobile-avatar">
<v-icon icon="mdi-account-outline" size="20" />
</span>
<div>
<p class="admin-users-mobile-label">Benutzer</p>
<h2>{{ user.userName || '(ohne Benutzername)' }}</h2>
</div>
</header>
<dl class="admin-users-mobile-details">
<div>
<dt>Rollen</dt>
<dd>{{ formatRoles(user.roles) }}</dd>
</div>
<div>
<dt>Aktiv</dt>
<dd>
<span
:class="[
'hoard-status',
user.isActive ? 'hoard-status--success' : 'hoard-status--danger',
]"
>
{{ user.isActive ? 'Aktiv' : 'Inaktiv' }}
</span>
</dd>
</div>
<div>
<dt>Passwortwechsel</dt>
<dd>
<span
:class="[
'hoard-status',
user.mustChangePassword ? 'hoard-status--warning' : 'hoard-status--info',
]"
>
{{ user.mustChangePassword ? 'Erforderlich' : 'Nein' }}
</span>
</dd>
</div>
</dl>
<v-btn
variant="outlined"
prepend-icon="mdi-account-details-outline"
block
@click="openUserDetail(user.id)"
>
Details
</v-btn>
</article>
</div>
<p>Alle Hoard-Konten mit Rollen, Status und Passwortwechselpflicht – read-only.</p>
</div>
<div class="admin-users-actions hoard-action-row">
<v-btn
<div class="admin-users-header__actions hoard-action-row">
<v-text-field
v-model="searchQuery"
variant="outlined"
density="comfortable"
prepend-inner-icon="mdi-magnify"
placeholder="Benutzer, Rollen oder ID suchen"
hide-details
clearable
class="admin-users-search"
/>
<v-btn
variant="elevated"
prepend-icon="mdi-refresh"
:loading="isLoading"
:disabled="isLoading"
@@ -222,76 +140,315 @@ onMounted(() => {
Neu laden
</v-btn>
</div>
</header>
<section v-if="!isLoading && !errorMessage" class="admin-users-stats" aria-label="Benutzerübersicht">
<article class="admin-users-stat">
<span class="hoard-icon-tile">
<v-icon icon="mdi-account-group-outline" size="20" />
</span>
<div>
<p class="admin-users-stat__label">Konten</p>
<p class="admin-users-stat__value">{{ users.length }}</p>
</div>
</article>
<article class="admin-users-stat">
<span class="hoard-icon-tile">
<v-icon icon="mdi-account-check-outline" size="20" />
</span>
<div>
<p class="admin-users-stat__label">Aktiv</p>
<p class="admin-users-stat__value">{{ activeUserCount }}</p>
</div>
</article>
<article class="admin-users-stat">
<span class="hoard-icon-tile">
<v-icon icon="mdi-shield-account-outline" size="20" />
</span>
<div>
<p class="admin-users-stat__label">Admins</p>
<p class="admin-users-stat__value">{{ adminCount }}</p>
</div>
</article>
<article class="admin-users-stat">
<span class="hoard-icon-tile">
<v-icon icon="mdi-lock-reset" size="20" />
</span>
<div>
<p class="admin-users-stat__label">Passwortwechsel</p>
<p class="admin-users-stat__value">{{ passwordChangeCount }}</p>
</div>
</article>
</section>
<v-alert v-if="errorMessage" type="error">
{{ errorMessage }}
</v-alert>
<p v-else-if="isLoading" class="admin-users-loading">Benutzer werden geladen …</p>
<section v-else-if="!hasUsers" class="hoard-panel hoard-empty-state">
<span class="hoard-icon-tile hoard-icon-tile--lg">
<v-icon icon="mdi-account-question-outline" size="22" />
</span>
<h2>Keine Benutzer gefunden</h2>
<p>Aktuell sind keine Konten vorhanden. Ein neuer Account muss vom Admin manuell angelegt werden.</p>
</section>
<section v-else class="admin-users-listing hoard-panel">
<header class="admin-users-listing__head hoard-toolbar">
<div>
<p class="admin-users-listing__title">Benutzer</p>
<p class="admin-users-listing__meta">{{ filteredUsers.length }} von {{ users.length }} angezeigt</p>
</div>
</header>
<p v-if="filteredUsers.length === 0" class="admin-users-empty-search">
Keine Treffer für „{{ searchQuery }}".
</p>
<div v-else class="admin-users-table-wrap">
<v-table class="admin-users-table">
<thead>
<tr>
<th>Benutzer</th>
<th>Rollen</th>
<th>Aktiv</th>
<th>Passwort</th>
<th class="admin-users-col-actions">Aktion</th>
</tr>
</thead>
<tbody>
<tr v-for="user in filteredUsers" :key="user.id">
<td>
<div class="admin-users-cell-user">
<span class="admin-users-cell-user__avatar">{{ userInitials(user) }}</span>
<div>
<p class="admin-users-cell-user__name">{{ user.userName || '(ohne Benutzername)' }}</p>
<p class="admin-users-cell-user__id">{{ user.id }}</p>
</div>
</div>
</td>
<td>{{ formatRoles(user.roles) }}</td>
<td>
<span
:class="[
'hoard-status',
user.isActive ? 'hoard-status--success' : 'hoard-status--danger',
]"
>
{{ user.isActive ? 'Aktiv' : 'Inaktiv' }}
</span>
</td>
<td>
<span
:class="[
'hoard-status',
user.mustChangePassword ? 'hoard-status--warning' : 'hoard-status--info',
]"
>
{{ user.mustChangePassword ? 'Erforderlich' : 'Aktuell' }}
</span>
</td>
<td class="admin-users-col-actions">
<v-btn
size="small"
variant="outlined"
prepend-icon="mdi-arrow-right"
@click="openUserDetail(user.id)"
>
Details
</v-btn>
</td>
</tr>
</tbody>
</v-table>
</div>
<div v-if="filteredUsers.length > 0" class="admin-users-mobile-list" aria-label="Benutzerliste">
<article v-for="user in filteredUsers" :key="user.id" class="admin-users-mobile-card">
<header class="admin-users-mobile-head">
<span class="admin-users-mobile-avatar">{{ userInitials(user) }}</span>
<div>
<p class="admin-users-mobile-label">Benutzer</p>
<h2>{{ user.userName || '(ohne Benutzername)' }}</h2>
<p class="admin-users-mobile-id">{{ user.id }}</p>
</div>
</header>
<dl class="admin-users-mobile-details">
<div>
<dt>Rollen</dt>
<dd>{{ formatRoles(user.roles) }}</dd>
</div>
<div>
<dt>Aktiv</dt>
<dd>
<span
:class="[
'hoard-status',
user.isActive ? 'hoard-status--success' : 'hoard-status--danger',
]"
>
{{ user.isActive ? 'Aktiv' : 'Inaktiv' }}
</span>
</dd>
</div>
<div>
<dt>Passwortwechsel</dt>
<dd>
<span
:class="[
'hoard-status',
user.mustChangePassword ? 'hoard-status--warning' : 'hoard-status--info',
]"
>
{{ user.mustChangePassword ? 'Erforderlich' : 'Nein' }}
</span>
</dd>
</div>
</dl>
<v-btn
variant="outlined"
prepend-icon="mdi-arrow-right"
block
@click="openUserDetail(user.id)"
>
Details öffnen
</v-btn>
</article>
</div>
</section>
</v-container>
</template>
<style scoped>
.admin-users-page {
--hoard-page-width: 1120px;
--hoard-page-width: 1200px;
}
.admin-users-shell {
/* ---------- Header ---------- */
.admin-users-header {
--hoard-gradient-angle: 120deg;
--hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 55%, var(--color-surface) 45%);
--hoard-gradient-end: var(--color-surface);
--hoard-gradient-end-stop: 65%;
display: grid;
gap: var(--space-4);
padding: var(--space-6);
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: end;
padding: var(--space-7) var(--space-8);
border-radius: var(--radius-xl);
}
.admin-users-head h1,
.admin-users-head p,
.admin-users-loading {
.admin-users-header__copy h1 {
margin: 0 0 var(--space-2);
font-size: var(--font-size-2xl);
letter-spacing: -0.015em;
}
.admin-users-header__copy p {
margin: 0;
}
.admin-users-head h1 {
margin-top: var(--space-2);
margin-bottom: var(--space-2);
}
.admin-users-head p {
color: var(--color-text-secondary);
}
.admin-users-loading {
color: var(--color-text-secondary);
.admin-users-header__actions {
justify-content: flex-end;
align-items: center;
}
.admin-users-search {
flex: 1 1 280px;
min-width: 220px;
max-width: 380px;
}
/* ---------- Stats ---------- */
.admin-users-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
}
.admin-users-stat {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: center;
padding: var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-surface) 18%);
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--color-surface-alt) 58%, var(--color-surface) 42%);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 95%, var(--color-surface-alt) 5%),
var(--color-surface)
);
box-shadow: var(--shadow-xs);
}
.admin-users-stat-label,
.admin-users-stat-value {
.admin-users-stat__label,
.admin-users-stat__value {
margin: 0;
}
.admin-users-stat-label {
.admin-users-stat__label {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-size: var(--font-size-2xs);
font-weight: 600;
letter-spacing: 0.04em;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-users-stat-value {
.admin-users-stat__value {
color: var(--color-text);
font-size: 1.75rem;
font-size: var(--font-size-2xl);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
line-height: 1.1;
}
/* ---------- Listing ---------- */
.admin-users-listing {
padding: 0;
overflow: hidden;
}
.admin-users-listing__head {
display: flex;
align-items: center;
justify-content: space-between;
}
.admin-users-listing__title {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-md);
font-weight: 600;
}
.admin-users-listing__meta {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.admin-users-empty-search {
margin: 0;
padding: var(--space-6);
color: var(--color-text-secondary);
text-align: center;
}
.admin-users-loading {
margin: 0;
color: var(--color-text-secondary);
}
.admin-users-table-wrap {
overflow-x: auto;
border-radius: var(--radius-md);
}
.admin-users-mobile-list {
@@ -299,12 +456,48 @@ onMounted(() => {
}
.admin-users-table {
min-width: 900px;
min-width: 920px;
border: 0;
border-radius: 0;
}
.admin-users-cell-user {
font-weight: 600;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: center;
min-width: 0;
}
.admin-users-cell-user__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-800));
color: var(--color-text-on-primary);
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0.02em;
}
.admin-users-cell-user__name,
.admin-users-cell-user__id {
margin: 0;
}
.admin-users-cell-user__name {
color: var(--color-text);
font-weight: 600;
}
.admin-users-cell-user__id {
color: var(--color-text-muted);
font-family: var(--font-family-mono);
font-size: var(--font-size-2xs);
overflow-wrap: anywhere;
}
.admin-users-col-actions {
@@ -312,26 +505,65 @@ onMounted(() => {
white-space: nowrap;
}
.admin-users-actions {
justify-content: flex-end;
.hoard-empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
@media (prefers-reduced-motion: no-preference) {
.admin-users-shell {
animation: hoard-soft-enter 260ms both;
.admin-users-header,
.admin-users-stat,
.admin-users-listing {
animation: hoard-soft-enter 280ms both;
}
.admin-users-stat:nth-child(2) { animation-delay: 60ms; }
.admin-users-stat:nth-child(3) { animation-delay: 120ms; }
.admin-users-stat:nth-child(4) { animation-delay: 180ms; }
.admin-users-listing { animation-delay: 220ms; }
}
@media (width <= 1100px) {
.admin-users-header {
grid-template-columns: 1fr;
align-items: flex-start;
}
.admin-users-header__actions {
justify-content: flex-start;
}
.admin-users-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (width <= 960px) {
.admin-users-header {
padding: var(--space-6);
}
}
@media (width <= 600px) {
.admin-users-shell {
padding: var(--space-4);
overflow: hidden;
.admin-users-header {
padding: var(--space-5);
}
.admin-users-search {
flex: 1 1 100%;
max-width: none;
}
.admin-users-stats {
grid-template-columns: 1fr;
}
.admin-users-listing {
overflow: hidden;
}
.admin-users-table-wrap {
display: none;
}
@@ -339,6 +571,7 @@ onMounted(() => {
.admin-users-mobile-list {
display: grid;
gap: var(--space-3);
padding: var(--space-4);
}
.admin-users-mobile-card {
@@ -346,9 +579,10 @@ onMounted(() => {
gap: var(--space-4);
min-width: 0;
padding: var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-surface) 20%);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--color-surface-alt) 58%, var(--color-surface) 42%);
background-color: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.admin-users-mobile-head {
@@ -363,30 +597,41 @@ onMounted(() => {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
color: var(--color-primary-700);
background-color: color-mix(in srgb, var(--color-primary-100) 82%, var(--color-surface) 18%);
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-800));
color: var(--color-text-on-primary);
font-size: var(--font-size-sm);
font-weight: 700;
}
.admin-users-mobile-label,
.admin-users-mobile-head h2,
.admin-users-mobile-id,
.admin-users-mobile-details {
margin: 0;
}
.admin-users-mobile-label {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-size: var(--font-size-2xs);
font-weight: 600;
letter-spacing: 0.04em;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.admin-users-mobile-head h2 {
color: var(--color-text);
font-size: 1.1rem;
font-size: var(--font-size-lg);
font-weight: 600;
overflow-wrap: anywhere;
}
.admin-users-mobile-id {
color: var(--color-text-muted);
font-family: var(--font-family-mono);
font-size: var(--font-size-2xs);
overflow-wrap: anywhere;
}
@@ -399,7 +644,7 @@ onMounted(() => {
display: grid;
gap: var(--space-1);
padding-bottom: var(--space-3);
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 78%, var(--color-surface) 22%);
border-bottom: 1px solid var(--color-border-subtle);
}
.admin-users-mobile-details div:last-child {
@@ -420,9 +665,5 @@ onMounted(() => {
color: var(--color-text);
overflow-wrap: anywhere;
}
.admin-users-actions {
justify-content: stretch;
}
}
</style>