Lars
9afcd762d0
- Added role and tier fields to the ProfileUpdate model, allowing for better user role management. - Implemented new API endpoint for listing admin users, accessible only to portal admins. - Updated profile retrieval and update logic to handle role and tier changes, enforcing permissions for modifications. - Enhanced frontend navigation and routing to include the new admin users page, improving admin interface usability. - Bumped application version to 0.8.19 and updated changelog to reflect these changes.
449 lines
16 KiB
JavaScript
449 lines
16 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { Navigate } from 'react-router-dom'
|
|
import { useAuth } from '../context/AuthContext'
|
|
import api from '../utils/api'
|
|
import AdminPageNav from '../components/AdminPageNav'
|
|
|
|
const CLUB_ROLE_OPTIONS = [
|
|
{ code: 'club_admin', label: 'Vereinsadmin' },
|
|
{ code: 'trainer', label: 'Trainer' },
|
|
{ code: 'division_lead', label: 'Spartenleitung' },
|
|
{ code: 'content_editor', label: 'Inhalte bearbeiten' },
|
|
]
|
|
|
|
const TIER_OPTIONS = ['free', 'premium', 'pro', 'enterprise']
|
|
|
|
const ROLE_LABEL = {
|
|
user: 'Nutzer',
|
|
trainer: 'Trainer',
|
|
admin: 'Portal-Admin',
|
|
superadmin: 'Super-Admin',
|
|
}
|
|
|
|
function AdminUsersPage() {
|
|
const { user } = useAuth()
|
|
const isSuper = user?.role === 'superadmin'
|
|
const isPlatformAdmin = user?.role === 'admin' || user?.role === 'superadmin'
|
|
const portalRoleChoices = isSuper
|
|
? ['user', 'trainer', 'admin', 'superadmin']
|
|
: ['user', 'trainer', 'admin']
|
|
|
|
const [users, setUsers] = useState([])
|
|
const [clubs, setClubs] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState('')
|
|
const [portalDraft, setPortalDraft] = useState({})
|
|
const [assignModal, setAssignModal] = useState(null)
|
|
const [assignRoles, setAssignRoles] = useState(['trainer'])
|
|
const [clubEditModal, setClubEditModal] = useState(null)
|
|
|
|
const load = async () => {
|
|
setError('')
|
|
try {
|
|
const [u, c] = await Promise.all([api.listAdminUsers(), api.listClubs()])
|
|
setUsers(u)
|
|
setClubs(c)
|
|
const d = {}
|
|
for (const row of u) {
|
|
d[row.id] = {
|
|
role: (row.role || 'user').toLowerCase(),
|
|
tier: row.tier || 'free',
|
|
}
|
|
}
|
|
setPortalDraft(d)
|
|
} catch (e) {
|
|
setError(e.message || String(e))
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!isPlatformAdmin) return
|
|
load()
|
|
}, [isPlatformAdmin])
|
|
|
|
if (!isPlatformAdmin) {
|
|
return <Navigate to="/" replace />
|
|
}
|
|
|
|
const savePortal = async (profileId) => {
|
|
const dr = portalDraft[profileId]
|
|
if (!dr) return
|
|
try {
|
|
await api.updateProfile(profileId, { role: dr.role, tier: dr.tier })
|
|
await load()
|
|
} catch (e) {
|
|
alert(e.message || String(e))
|
|
}
|
|
}
|
|
|
|
const submitAssignClub = async () => {
|
|
if (!assignModal) return
|
|
const clubId = assignModal.clubId
|
|
const profileId = assignModal.profileId
|
|
if (!clubId || !assignRoles.length) {
|
|
alert('Verein und mindestens eine Rolle wählen.')
|
|
return
|
|
}
|
|
try {
|
|
await api.addClubMember(clubId, { profile_id: profileId, roles: assignRoles })
|
|
setAssignModal(null)
|
|
setAssignRoles(['trainer'])
|
|
await load()
|
|
} catch (e) {
|
|
alert(e.message || String(e))
|
|
}
|
|
}
|
|
|
|
const saveClubMembership = async () => {
|
|
if (!clubEditModal) return
|
|
const { clubId, profileId, roles, status } = clubEditModal
|
|
try {
|
|
await api.updateClubMember(clubId, profileId, { roles, status })
|
|
setClubEditModal(null)
|
|
await load()
|
|
} catch (e) {
|
|
alert(e.message || String(e))
|
|
}
|
|
}
|
|
|
|
const removeClubMembership = async () => {
|
|
if (!clubEditModal) return
|
|
if (!confirm('Mitgliedschaft in diesem Verein wirklich entfernen?')) return
|
|
try {
|
|
await api.removeClubMember(clubEditModal.clubId, clubEditModal.profileId)
|
|
setClubEditModal(null)
|
|
await load()
|
|
} catch (e) {
|
|
alert(e.message || String(e))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="app-page">
|
|
<AdminPageNav />
|
|
<h1 style={{ marginTop: 0 }}>Portal-Nutzer & Vereine</h1>
|
|
<p style={{ color: 'var(--text2)', maxWidth: '52rem', lineHeight: 1.55, marginBottom: '1.25rem' }}>
|
|
Alle Konten mit Vereinszuordnungen. Hier kannst du die <strong>Portal-Rolle</strong> (Zugriff auf
|
|
Admin-Funktionen) und das <strong>Tier</strong> setzen sowie Nutzer explizit einem Verein mit Rollen
|
|
zuordnen.
|
|
</p>
|
|
|
|
{loading ? (
|
|
<p style={{ color: 'var(--text2)' }}>Laden…</p>
|
|
) : error ? (
|
|
<div className="card" style={{ borderColor: 'var(--danger)', color: 'var(--danger)' }}>
|
|
{error}
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'grid', gap: '1rem' }}>
|
|
{users.map((row) => {
|
|
const tierValue = portalDraft[row.id]?.tier ?? row.tier ?? 'free'
|
|
const tierChoices = [...TIER_OPTIONS]
|
|
if (tierValue && !tierChoices.includes(tierValue)) tierChoices.unshift(tierValue)
|
|
return (
|
|
<div key={row.id} className="card">
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.75rem' }}>
|
|
<div>
|
|
<strong style={{ fontSize: '1.05rem' }}>
|
|
{row.name || '—'} <span style={{ color: 'var(--text2)', fontWeight: 400 }}>#{row.id}</span>
|
|
</strong>
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text2)' }}>{row.email || '—'}</div>
|
|
<div style={{ fontSize: '0.78rem', color: 'var(--text3)', marginTop: '0.35rem' }}>
|
|
Verifiziert: {row.email_verified ? 'ja' : 'nein'}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'flex-end' }}>
|
|
<div>
|
|
<label className="form-label" style={{ fontSize: '0.75rem' }}>
|
|
Portal-Rolle
|
|
</label>
|
|
<select
|
|
className="form-input"
|
|
style={{ minWidth: '140px' }}
|
|
value={(portalDraft[row.id]?.role || row.role || 'user').toLowerCase()}
|
|
onChange={(e) =>
|
|
setPortalDraft((prev) => ({
|
|
...prev,
|
|
[row.id]: { ...prev[row.id], role: e.target.value, tier: prev[row.id]?.tier ?? row.tier },
|
|
}))
|
|
}
|
|
>
|
|
{portalRoleChoices.map((r) => (
|
|
<option key={r} value={r}>
|
|
{ROLE_LABEL[r] || r}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="form-label" style={{ fontSize: '0.75rem' }}>
|
|
Tier
|
|
</label>
|
|
<select
|
|
className="form-input"
|
|
style={{ minWidth: '120px' }}
|
|
value={tierValue}
|
|
onChange={(e) =>
|
|
setPortalDraft((prev) => ({
|
|
...prev,
|
|
[row.id]: {
|
|
...prev[row.id],
|
|
tier: e.target.value,
|
|
role: prev[row.id]?.role ?? row.role,
|
|
},
|
|
}))
|
|
}
|
|
>
|
|
{tierChoices.map((t) => (
|
|
<option key={t} value={t}>
|
|
{t}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button type="button" className="btn btn-secondary" onClick={() => savePortal(row.id)}>
|
|
Portal speichern
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
disabled={!clubs.length}
|
|
title={!clubs.length ? 'Zuerst einen Verein anlegen' : undefined}
|
|
onClick={() => {
|
|
if (!clubs.length) return
|
|
setAssignRoles(['trainer'])
|
|
setAssignModal({
|
|
profileId: row.id,
|
|
profileLabel: row.name || row.email || `#${row.id}`,
|
|
clubId: clubs[0]?.id ?? '',
|
|
})
|
|
}}
|
|
>
|
|
Verein zuweisen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginTop: '1rem', paddingTop: '0.75rem', borderTop: '1px solid var(--border)' }}>
|
|
<strong style={{ fontSize: '0.85rem' }}>Vereinsmitgliedschaften</strong>
|
|
{!row.clubs?.length ? (
|
|
<p style={{ color: 'var(--text2)', fontSize: '0.875rem', margin: '0.35rem 0 0' }}>
|
|
Keine Zuordnung.
|
|
</p>
|
|
) : (
|
|
<ul style={{ margin: '0.5rem 0 0', paddingLeft: '1.2rem', fontSize: '0.9rem' }}>
|
|
{row.clubs.map((c) => (
|
|
<li key={c.id} style={{ marginBottom: '0.35rem' }}>
|
|
<strong>{c.name}</strong>
|
|
{c.abbreviation ? ` (${c.abbreviation})` : ''} —{' '}
|
|
{(c.roles || []).join(', ') || '—'}
|
|
{c.membership_status === 'inactive' ? (
|
|
<span style={{ color: 'var(--text3)', fontSize: '0.8rem' }}> (inaktiv)</span>
|
|
) : null}{' '}
|
|
<button
|
|
type="button"
|
|
style={{
|
|
marginLeft: '0.35rem',
|
|
fontSize: '0.75rem',
|
|
padding: '0.12rem 0.45rem',
|
|
borderRadius: '6px',
|
|
border: '1px solid var(--border)',
|
|
background: 'var(--surface2)',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() =>
|
|
setClubEditModal({
|
|
clubId: c.id,
|
|
clubName: c.name,
|
|
profileId: row.id,
|
|
profileLabel: row.name || row.email,
|
|
roles: [...(c.roles || [])],
|
|
status: (c.membership_status || 'active').toLowerCase(),
|
|
})
|
|
}
|
|
>
|
|
bearbeiten
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{assignModal && (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
background: 'rgba(0,0,0,0.5)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 1200,
|
|
padding: '1rem',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
background: 'var(--surface)',
|
|
borderRadius: '12px',
|
|
padding: '1.5rem',
|
|
maxWidth: '440px',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<h2 style={{ marginTop: 0 }}>Verein zuweisen</h2>
|
|
<p style={{ color: 'var(--text2)', fontSize: '0.9rem' }}>{assignModal.profileLabel}</p>
|
|
<div className="form-row">
|
|
<label className="form-label">Verein</label>
|
|
<select
|
|
className="form-input"
|
|
value={assignModal.clubId === '' ? '' : String(assignModal.clubId)}
|
|
onChange={(e) =>
|
|
setAssignModal((prev) =>
|
|
prev ? { ...prev, clubId: e.target.value ? parseInt(e.target.value, 10) : '' } : prev
|
|
)
|
|
}
|
|
>
|
|
{clubs.map((c) => (
|
|
<option key={c.id} value={String(c.id)}>
|
|
{c.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="form-row">
|
|
<span className="form-label">Rollen im Verein</span>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
|
|
{CLUB_ROLE_OPTIONS.map((opt) => (
|
|
<label key={opt.code} style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={assignRoles.includes(opt.code)}
|
|
onChange={() => {
|
|
setAssignRoles((prev) => {
|
|
const s = new Set(prev)
|
|
if (s.has(opt.code)) s.delete(opt.code)
|
|
else s.add(opt.code)
|
|
const out = Array.from(s)
|
|
return out.length ? out : ['trainer']
|
|
})
|
|
}}
|
|
/>
|
|
{opt.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
|
|
<button type="button" className="btn btn-primary" style={{ flex: 1 }} onClick={submitAssignClub}>
|
|
Zuweisen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
onClick={() => setAssignModal(null)}
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{clubEditModal && (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
background: 'rgba(0,0,0,0.5)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 1200,
|
|
padding: '1rem',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
background: 'var(--surface)',
|
|
borderRadius: '12px',
|
|
padding: '1.5rem',
|
|
maxWidth: '440px',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<h2 style={{ marginTop: 0 }}>Vereinsmitgliedschaft</h2>
|
|
<p style={{ color: 'var(--text2)', fontSize: '0.9rem' }}>
|
|
{clubEditModal.profileLabel} → {clubEditModal.clubName}
|
|
</p>
|
|
<div className="form-row">
|
|
<label className="form-label">Status</label>
|
|
<select
|
|
className="form-input"
|
|
value={clubEditModal.status}
|
|
onChange={(e) =>
|
|
setClubEditModal((prev) => (prev ? { ...prev, status: e.target.value } : prev))
|
|
}
|
|
>
|
|
<option value="active">aktiv</option>
|
|
<option value="inactive">inaktiv</option>
|
|
</select>
|
|
</div>
|
|
<div className="form-row">
|
|
<span className="form-label">Rollen</span>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
|
|
{CLUB_ROLE_OPTIONS.map((opt) => (
|
|
<label key={opt.code} style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={clubEditModal.roles.includes(opt.code)}
|
|
onChange={() => {
|
|
setClubEditModal((prev) => {
|
|
if (!prev) return prev
|
|
const s = new Set(prev.roles)
|
|
if (s.has(opt.code)) s.delete(opt.code)
|
|
else s.add(opt.code)
|
|
let roles = Array.from(s)
|
|
if (!roles.length) roles = ['trainer']
|
|
return { ...prev, roles }
|
|
})
|
|
}}
|
|
/>
|
|
{opt.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginTop: '1rem' }}>
|
|
<button type="button" className="btn btn-primary" onClick={saveClubMembership}>
|
|
Speichern
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn"
|
|
style={{ background: 'var(--danger)', color: '#fff', border: 'none' }}
|
|
onClick={removeClubMembership}
|
|
>
|
|
Aus Verein entfernen
|
|
</button>
|
|
<button type="button" className="btn btn-secondary" onClick={() => setClubEditModal(null)}>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AdminUsersPage
|