bao/vtuber-awards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine admin workflows and team access

Browse Source
This commit is contained in:
AzuTear
2026-06-26 18:09:29 +02:00
parent b7804e10ea
commit 8b69dfbafb
71 changed files with 5066 additions and 751 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/admin/AdminTeamView.vue
+172 -97
View File
@@ -1,11 +1,13 @@
<script setup lang="ts">
import { KeyRound, LockKeyhole, RotateCcw, Save, ShieldCheck, Trash2, UserPlus, Users } from '@lucide/vue'
import { Check, KeyRound, LockKeyhole, Minus, Pencil, RefreshCw, RotateCcw, Save, ShieldCheck, Trash2, UserPlus, Users } from '@lucide/vue'
import { computed, reactive, ref } from 'vue'
import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import { useAdminTeamManager } from '../../components/admin/useAdminTeamManager'
import { watchAdminToast } from '../../composables/useAdminToast'
import Button from '../../components/ui/Button.vue'
import Card from '../../components/ui/Card.vue'
import NativeSelect from '../../components/ui/NativeSelect.vue'
import PasswordField from '../../components/ui/PasswordField.vue'
import { useAuthStore } from '../../stores/auth'
import type { AdminTeamMember } from '../../types/awards'
@@ -18,6 +20,7 @@ const canChangeOwnPassword = computed(() => authStore.isOwnerOrCreator && authSt
const passwordModalOpen = ref(false)
const createMemberModalOpen = ref(false)
const editMemberModalOpen = ref(false)
const rolePermissionsModalOpen = ref(false)
const profileError = ref('')
const profileSuccess = ref('')
const ownPasswordForm = reactive({
@@ -29,6 +32,8 @@ const ownPasswordForm = reactive({
const {
loading,
saving,
refreshingPresence,
lastPresenceRefreshAt,
errorMessage,
successMessage,
generatedPassword,
@@ -39,10 +44,10 @@ const {
permissions,
memberForm,
selectedMember,
activeMembers,
pendingPasswordChanges,
assignableRoleOptions,
hasRoleChanges,
loadTeam,
startCreateMember,
startEditMember,
saveMember,
@@ -55,12 +60,16 @@ const {
saveRolePermissions,
} = useAdminTeamManager()
watchAdminToast(successMessage, errorMessage)
watchAdminToast(profileSuccess, profileError)
const memberPendingDeletion = computed(() =>
members.value.find((member) => member.id === confirmDeleteMemberId.value) ?? null,
)
const onlineMembers = computed(() => members.value.filter((member) => member.isOnline).length)
const summaryItems = computed(() => [
{ label: 'Mitglieder', value: members.value.length, note: `${activeMembers.value} aktiv` },
{ label: 'Mitglieder', value: members.value.length, note: `${onlineMembers.value} online` },
{ label: 'Rollen', value: roles.value.length, note: 'Owner, Creator und Team' },
{ label: 'PW-Wechsel', value: pendingPasswordChanges.value, note: 'temporäre Passwörter offen' },
])
@@ -77,11 +86,30 @@ function formatDate(value: string | null) {
}).format(new Date(value))
}
function memberStatus(member: AdminTeamMember) {
function formatRefreshTime(value: Date | null) {
if (!value) return 'noch nicht aktualisiert'
return new Intl.DateTimeFormat('de-DE', {
timeStyle: 'short',
}).format(value)
}
function memberAccountStatus(member: AdminTeamMember) {
if (!member.isActive) return 'Inaktiv'
return member.mustChangePassword ? 'PW-Wechsel offen' : 'Aktiv'
}
function memberOnlineStatus(member: AdminTeamMember) {
return member.isOnline ? 'Online' : 'Offline'
}
function rolePermissionLocked(roleKey: string) {
return roleKey === 'owner' || roleKey === 'creator'
}
function rolePermissionCount(roleKey: string) {
return permissions.value.filter((permission) => roleHasPermission(roleKey, permission.key)).length
}
function isOwnTeamAccount(member: AdminTeamMember) {
const teamLogin = authStore.session?.teamLogin?.toLowerCase()
const boundTwitchUserId = authStore.session?.boundTwitchUserId?.toLowerCase()
@@ -100,10 +128,6 @@ function canDeleteMember(member: AdminTeamMember) {
return true
}
function handlePermissionChange(roleKey: string, permissionKey: string, event: Event) {
setRolePermission(roleKey, permissionKey, event.target instanceof HTMLInputElement && event.target.checked)
}
function openCreateMemberModal() {
startCreateMember()
createMemberModalOpen.value = true
@@ -218,22 +242,8 @@ async function changeOwnPassword() {
Passwort ändern
</Button>
</div>
<div v-if="profileError" class="mt-3 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">
{{ profileError }}
</div>
<div v-if="profileSuccess" class="mt-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700">
{{ profileSuccess }}
</div>
</Card>
<div v-if="errorMessage" class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">
{{ errorMessage }}
</div>
<div v-if="successMessage" class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700">
{{ successMessage }}
</div>
<Card v-if="generatedPassword" class="border-amber-200 bg-amber-50/80 p-4">
<div class="flex flex-wrap items-start justify-between gap-3">
<div>
@@ -251,11 +261,37 @@ async function changeOwnPassword() {
<div>
<p class="text-[10px] font-bold uppercase tracking-[0.18em] text-violet-500">Mitglieder</p>
<h2 class="mt-1 text-xl font-bold text-slate-900">Logins und Status</h2>
<p class="mt-1 text-xs font-semibold text-slate-500">
Online = aktive Admin-Session in den letzten 5 Minuten. Auto-Refresh alle 30 Sekunden.
<span class="text-slate-400">Zuletzt geprüft: {{ formatRefreshTime(lastPresenceRefreshAt) }}</span>
</p>
</div>
<div class="flex flex-wrap items-center gap-2">
<Button
size="sm"
type="button"
variant="ghost"
:disabled="loading || refreshingPresence"
@click="loadTeam({ silent: true })"
>
<RefreshCw class="mr-2 h-4 w-4" :class="refreshingPresence ? 'animate-spin' : ''" />
Aktualisieren
</Button>
<Button
size="sm"
type="button"
variant="ghost"
class="border border-violet-200 bg-violet-50 text-violet-700 shadow-sm shadow-violet-200/40 hover:-translate-y-0.5 hover:border-violet-300 hover:bg-violet-100 hover:text-violet-800 hover:shadow-lg hover:shadow-violet-200/60"
@click="rolePermissionsModalOpen = true"
>
<ShieldCheck class="mr-2 h-4 w-4" />
Rollenrechte
</Button>
<Button size="sm" type="button" @click="openCreateMemberModal">
<UserPlus class="mr-2 h-4 w-4" />
Neuer Login
</Button>
</div>
<Button size="sm" type="button" @click="openCreateMemberModal">
<UserPlus class="mr-2 h-4 w-4" />
Neuer Login
</Button>
</div>
<div v-if="loading" class="mt-5 rounded-xl border border-dashed border-violet-200 p-4 text-sm text-slate-500">
@@ -268,8 +304,8 @@ async function changeOwnPassword() {
<tr>
<th class="px-5 py-3">Login</th>
<th class="px-5 py-3">Rolle</th>
<th class="px-5 py-3">Status</th>
<th class="px-5 py-3">Letzter Login</th>
<th class="px-5 py-3">Online</th>
<th class="px-5 py-3">Zuletzt online</th>
<th class="px-5 py-3 text-right">Aktion</th>
</tr>
</thead>
@@ -288,19 +324,26 @@ async function changeOwnPassword() {
</td>
<td class="px-5 py-4 font-semibold text-slate-600">{{ roleLabel(member.role) }}</td>
<td class="px-5 py-4">
<span class="rounded-full border px-3 py-1 text-xs font-bold" :class="member.isActive ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-slate-200 bg-slate-50 text-slate-500'">
{{ memberStatus(member) }}
</span>
<div class="flex flex-col items-start gap-1.5">
<span class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-bold" :class="member.isOnline ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-slate-200 bg-slate-50 text-slate-500'">
<span class="h-2 w-2 rounded-full" :class="member.isOnline ? 'bg-emerald-500' : 'bg-slate-300'" />
{{ memberOnlineStatus(member) }}
</span>
<span v-if="memberAccountStatus(member) !== 'Aktiv'" class="text-xs font-semibold text-amber-600">
{{ memberAccountStatus(member) }}
</span>
</div>
</td>
<td class="px-5 py-4 text-sm font-semibold text-slate-500">{{ formatDate(member.lastLoginAt) }}</td>
<td class="px-5 py-4 text-sm font-semibold text-slate-500">{{ formatDate(member.lastOnlineAt) }}</td>
<td class="px-5 py-4 text-right">
<div class="flex flex-wrap items-center justify-end gap-5">
<button
type="button"
class="text-sm font-bold text-slate-700 transition hover:text-violet-700 disabled:cursor-not-allowed disabled:text-slate-300"
class="inline-flex h-9 items-center gap-2 rounded-xl border border-violet-200 bg-white px-4 text-sm font-bold text-violet-700 shadow-sm shadow-violet-100/60 transition hover:-translate-y-0.5 hover:border-violet-300 hover:bg-violet-50 hover:text-violet-800 hover:shadow-lg hover:shadow-violet-200/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-300 disabled:shadow-none disabled:hover:translate-y-0"
:disabled="saving"
@click="openEditMemberModal(member)"
>
<Pencil class="h-4 w-4" />
Bearbeiten
</button>
<Button
@@ -315,7 +358,7 @@ async function changeOwnPassword() {
</Button>
<button
type="button"
class="inline-flex items-center gap-2 text-sm font-bold text-slate-700 transition hover:text-rose-600 disabled:cursor-not-allowed disabled:text-slate-300"
class="inline-flex h-9 items-center gap-2 rounded-xl border border-rose-200 bg-rose-50 px-4 text-sm font-bold text-rose-700 shadow-sm shadow-rose-100/60 transition-all duration-200 hover:-translate-y-0.5 hover:border-rose-300 hover:bg-rose-100 hover:text-rose-800 hover:shadow-lg hover:shadow-rose-200/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-300 disabled:shadow-none disabled:hover:translate-y-0"
:disabled="saving || !canDeleteMember(member)"
@click="openDeleteMemberModal(member)"
>
@@ -330,54 +373,86 @@ async function changeOwnPassword() {
</div>
</Card>
<Card class="p-4">
<div class="flex flex-wrap items-start justify-between gap-3">
<div class="flex items-start gap-3">
<span class="grid h-9 w-9 place-items-center rounded-xl bg-violet-50 text-violet-600">
<ShieldCheck class="h-4 w-4" />
</span>
<div>
<p class="text-[10px] font-bold uppercase tracking-[0.18em] text-violet-500">Rollenrechte</p>
<h2 class="mt-1 text-lg font-bold text-slate-900">Berechtigungen einstellen</h2>
<Teleport to="body">
<div
v-if="rolePermissionsModalOpen"
class="fixed inset-0 z-[305] flex items-center justify-center bg-slate-950/50 p-3 backdrop-blur-sm md:p-6"
@click.self="rolePermissionsModalOpen = false"
>
<Card class="flex max-h-[88vh] w-full max-w-6xl flex-col overflow-hidden rounded-[30px] bg-white p-0 shadow-[0_34px_100px_rgba(39,28,72,0.28)]">
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-violet-100 bg-white px-5 py-4 md:px-6">
<div class="flex min-w-0 items-center gap-3">
<span class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-violet-50 text-violet-600 ring-1 ring-violet-100">
<ShieldCheck class="h-5 w-5" />
</span>
<div class="min-w-0">
<p class="text-[10px] font-bold uppercase tracking-[0.18em] text-violet-500">Rollenrechte</p>
<h2 class="mt-1 text-xl font-bold leading-tight text-slate-950">Berechtigungen einstellen</h2>
</div>
</div>
<div class="flex flex-wrap items-center justify-end gap-2">
<Button type="button" variant="ghost" @click="rolePermissionsModalOpen = false">Schließen</Button>
<Button type="button" :disabled="saving || !hasRoleChanges" @click="saveRolePermissions">
<Save class="mr-2 h-4 w-4" />
Speichern
</Button>
</div>
</div>
</div>
<Button type="button" :disabled="saving || !hasRoleChanges" @click="saveRolePermissions">
<Save class="mr-2 h-4 w-4" />
Speichern
</Button>
</div>
<div class="mt-4 overflow-x-auto rounded-xl border border-violet-100">
<table class="min-w-[920px] divide-y divide-violet-100 text-sm">
<thead class="bg-violet-50/70 text-left text-[10px] font-bold uppercase tracking-[0.16em] text-violet-500">
<tr>
<th class="sticky left-0 z-10 bg-violet-50/95 px-3 py-2">Menüpunkt</th>
<th v-for="role in roles" :key="role.key" class="px-3 py-2 text-center">
{{ role.label }}
</th>
</tr>
</thead>
<tbody class="divide-y divide-violet-100 bg-white/70">
<tr v-for="permission in permissions" :key="permission.key">
<td class="sticky left-0 z-10 max-w-[260px] bg-white px-3 py-3">
<span class="block font-bold text-slate-900">{{ permission.label }}</span>
<span class="block text-xs leading-5 text-slate-500">{{ permission.description }}</span>
</td>
<td v-for="role in roles" :key="`${role.key}-${permission.key}`" class="px-3 py-3 text-center">
<input
class="h-4 w-4 accent-violet-600 disabled:opacity-60"
type="checkbox"
:checked="roleHasPermission(role.key, permission.key)"
:disabled="role.key === 'owner' || role.key === 'creator'"
:aria-label="`${role.label}: ${permission.label}`"
@change="handlePermissionChange(role.key, permission.key, $event)"
>
</td>
</tr>
</tbody>
</table>
<div class="min-h-0 flex-1 overflow-auto bg-slate-50/70 p-3 md:p-5">
<table class="w-full min-w-[1040px] overflow-hidden rounded-2xl border border-violet-100 bg-white text-sm shadow-sm">
<thead class="sticky top-0 z-20 bg-violet-50 text-left text-[10px] font-bold uppercase tracking-[0.16em] text-violet-500 shadow-[0_1px_0_rgba(221,214,254,0.85)]">
<tr>
<th class="sticky left-0 z-30 w-[340px] bg-violet-50 px-5 py-4">Bereich</th>
<th v-for="role in roles" :key="role.key" class="min-w-[112px] px-3 py-4 text-center">
<span class="block text-[11px] leading-4 text-violet-600">{{ role.label }}</span>
<span class="mt-1 block text-[10px] font-extrabold tracking-normal text-slate-400">
{{ rolePermissionCount(role.key) }}/{{ permissions.length }}
</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-violet-100 bg-white">
<tr v-for="permission in permissions" :key="permission.key" class="transition hover:bg-violet-50/35">
<td class="sticky left-0 z-10 w-[340px] bg-white px-5 py-4 shadow-[1px_0_0_rgba(237,233,254,0.95)]">
<span class="block text-base font-bold leading-5 text-slate-950">{{ permission.label }}</span>
<span class="mt-1 block max-w-[300px] text-xs font-semibold leading-5 text-slate-500">{{ permission.description }}</span>
</td>
<td v-for="role in roles" :key="`${role.key}-${permission.key}`" class="px-3 py-4 text-center">
<button
type="button"
class="relative mx-auto grid h-9 w-9 place-items-center rounded-xl ring-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed"
:class="[
roleHasPermission(role.key, permission.key)
? rolePermissionLocked(role.key)
? 'bg-slate-100 text-slate-400 ring-slate-200'
: 'bg-violet-600 text-white shadow-lg shadow-violet-500/20 ring-violet-500 hover:bg-violet-500'
: rolePermissionLocked(role.key)
? 'bg-slate-50 text-slate-300 ring-slate-200'
: 'bg-white text-slate-300 ring-slate-300 hover:text-violet-500 hover:ring-violet-300',
]"
:disabled="rolePermissionLocked(role.key)"
:aria-label="`${role.label}: ${permission.label}`"
:aria-pressed="roleHasPermission(role.key, permission.key)"
@click="setRolePermission(role.key, permission.key, !roleHasPermission(role.key, permission.key))"
>
<Check v-if="roleHasPermission(role.key, permission.key)" class="h-5 w-5" :stroke-width="3" />
<Minus v-else class="h-4 w-4" :stroke-width="3" />
<span
v-if="rolePermissionLocked(role.key) && roleHasPermission(role.key, permission.key)"
class="absolute -right-1 -top-1 grid h-4 w-4 place-items-center rounded-full bg-white text-slate-400 ring-1 ring-slate-200"
>
<LockKeyhole class="h-2.5 w-2.5" />
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</Card>
</div>
</Card>
</Teleport>
<Teleport to="body">
<div
@@ -429,25 +504,28 @@ async function changeOwnPassword() {
<label class="grid gap-2 text-base font-bold text-slate-600">
Rolle
<select
<NativeSelect
v-model="memberForm.role"
class="h-12 rounded-2xl border border-violet-100 bg-white px-4 text-base font-bold text-slate-900 outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
:options="assignableRoleOptions"
/>
</label>
<label
v-if="editMemberModalOpen"
class="flex h-14 cursor-pointer items-center justify-between gap-3 rounded-2xl border px-4 text-base font-bold shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="memberForm.isActive ? 'border-violet-200 bg-violet-50 text-violet-800 shadow-violet-100/60 hover:border-violet-300 hover:bg-violet-100' : 'border-slate-200 bg-white text-slate-600 shadow-slate-100 hover:border-slate-300 hover:bg-slate-50'"
>
<span>Account aktiv</span>
<span
class="grid h-9 w-9 place-items-center rounded-xl border transition"
:class="memberForm.isActive ? 'border-violet-500 bg-violet-600 text-white shadow-lg shadow-violet-500/20' : 'border-slate-300 bg-white text-slate-300'"
>
<option v-for="role in assignableRoleOptions" :key="role.value" :value="role.value">
{{ role.label }}
</option>
</select>
<Check v-if="memberForm.isActive" class="h-5 w-5" :stroke-width="3" />
<Minus v-else class="h-4 w-4" :stroke-width="3" />
</span>
<input v-model="memberForm.isActive" type="checkbox" class="sr-only">
</label>
<label v-if="editMemberModalOpen" class="flex h-14 items-center justify-between gap-3 rounded-2xl border border-violet-100 bg-violet-50/60 px-4 text-base font-bold text-slate-700">
Account aktiv
<input v-model="memberForm.isActive" type="checkbox" class="h-5 w-5 accent-violet-600">
</label>
<div v-if="errorMessage" class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">
{{ errorMessage }}
</div>
<Button type="submit" :disabled="saving" class="h-14 text-base">
<Save class="mr-2 h-5 w-5" />
{{ saving ? 'Speichert...' : createMemberModalOpen ? 'Login erstellen' : 'Speichern' }}
@@ -520,9 +598,6 @@ async function changeOwnPassword() {
Passwort wiederholen
<PasswordField v-model="ownPasswordForm.confirmPassword" autocomplete="new-password" required minlength="10" input-class="rounded-xl border border-violet-100 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-violet-300 focus:ring-2 focus:ring-violet-100" />
</label>
<div v-if="profileError" class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">
{{ profileError }}
</div>
<Button type="submit" :disabled="authStore.loading">
<Save class="mr-2 h-4 w-4" />
{{ authStore.loading ? 'Speichert...' : 'Passwort speichern' }}