release: 2901262036
This commit is contained in:
@@ -1084,6 +1084,118 @@ button span {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.user-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.user-grid-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.user-grid-card:hover {
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.user-grid-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.user-grid-meta {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.user-grid-pill {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
color: var(--ink);
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.user-grid-pill.is-blocked {
|
||||
border-color: rgba(255, 82, 82, 0.5);
|
||||
background: rgba(255, 82, 82, 0.2);
|
||||
}
|
||||
|
||||
.user-grid-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-grid-stats .label {
|
||||
font-size: 12px;
|
||||
color: var(--ink-muted);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-grid-stats .value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-grid-footer {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.user-detail-card {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.user-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.user-detail-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.user-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-detail-grid .label {
|
||||
font-size: 12px;
|
||||
color: var(--ink-muted);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-detail-grid .value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.label-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -312,11 +312,12 @@ export default function HomePage() {
|
||||
<h2>{role === 'admin' ? 'All requests' : 'My recent requests'}</h2>
|
||||
{authReady && (
|
||||
<label className="recent-filter">
|
||||
<span>Show last</span>
|
||||
<span>Show</span>
|
||||
<select
|
||||
value={recentDays}
|
||||
onChange={(event) => setRecentDays(Number(event.target.value))}
|
||||
>
|
||||
<option value={0}>All</option>
|
||||
<option value={30}>30 days</option>
|
||||
<option value={60}>60 days</option>
|
||||
<option value={90}>90 days</option>
|
||||
|
||||
234
frontend/app/users/[id]/page.tsx
Normal file
234
frontend/app/users/[id]/page.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
|
||||
import AdminShell from '../../ui/AdminShell'
|
||||
|
||||
type UserStats = {
|
||||
total: number
|
||||
ready: number
|
||||
pending: number
|
||||
approved: number
|
||||
working: number
|
||||
partial: number
|
||||
declined: number
|
||||
in_progress: number
|
||||
last_request_at?: string | null
|
||||
}
|
||||
|
||||
type AdminUser = {
|
||||
id?: number
|
||||
username: string
|
||||
role: string
|
||||
auth_provider?: string | null
|
||||
last_login_at?: string | null
|
||||
is_blocked?: boolean
|
||||
jellyseerr_user_id?: number | null
|
||||
}
|
||||
|
||||
const formatDateTime = (value?: string | null) => {
|
||||
if (!value) return 'Never'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.valueOf())) return value
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
const normalizeStats = (stats: any): UserStats => ({
|
||||
total: Number(stats?.total ?? 0),
|
||||
ready: Number(stats?.ready ?? 0),
|
||||
pending: Number(stats?.pending ?? 0),
|
||||
approved: Number(stats?.approved ?? 0),
|
||||
working: Number(stats?.working ?? 0),
|
||||
partial: Number(stats?.partial ?? 0),
|
||||
declined: Number(stats?.declined ?? 0),
|
||||
in_progress: Number(stats?.in_progress ?? 0),
|
||||
last_request_at: stats?.last_request_at ?? null,
|
||||
})
|
||||
|
||||
export default function UserDetailPage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const idParam = Array.isArray(params?.id) ? params.id[0] : params?.id
|
||||
const [user, setUser] = useState<AdminUser | null>(null)
|
||||
const [stats, setStats] = useState<UserStats | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const loadUser = async () => {
|
||||
if (!idParam) return
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(
|
||||
`${baseUrl}/admin/users/id/${encodeURIComponent(idParam)}`
|
||||
)
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
clearToken()
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
if (response.status === 403) {
|
||||
router.push('/')
|
||||
return
|
||||
}
|
||||
if (response.status === 404) {
|
||||
setError('User not found.')
|
||||
return
|
||||
}
|
||||
throw new Error('Could not load user.')
|
||||
}
|
||||
const data = await response.json()
|
||||
setUser(data?.user ?? null)
|
||||
setStats(normalizeStats(data?.stats))
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Could not load user.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleUserBlock = async (blocked: boolean) => {
|
||||
if (!user) return
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(
|
||||
`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/${blocked ? 'block' : 'unblock'}`,
|
||||
{ method: 'POST' }
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error('Update failed')
|
||||
}
|
||||
await loadUser()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Could not update user access.')
|
||||
}
|
||||
}
|
||||
|
||||
const updateUserRole = async (role: string) => {
|
||||
if (!user) return
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(
|
||||
`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/role`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ role }),
|
||||
}
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error('Update failed')
|
||||
}
|
||||
await loadUser()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Could not update user role.')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!getToken()) {
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
void loadUser()
|
||||
}, [router, idParam])
|
||||
|
||||
if (loading) {
|
||||
return <main className="card">Loading user...</main>
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminShell
|
||||
title={user?.username || 'User'}
|
||||
subtitle="User overview and request stats."
|
||||
actions={
|
||||
<button type="button" onClick={() => router.push('/users')}>
|
||||
Back to users
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<section className="admin-section">
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{!user ? (
|
||||
<div className="status-banner">No user data found.</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="user-detail-card">
|
||||
<div className="user-detail-header">
|
||||
<div>
|
||||
<strong>{user.username}</strong>
|
||||
<div className="user-detail-meta">
|
||||
<span className="meta">Jellyseerr ID: {user.jellyseerr_user_id ?? user.id ?? 'Unknown'}</span>
|
||||
<span className="meta">Role: {user.role}</span>
|
||||
<span className="meta">Login type: {user.auth_provider || 'local'}</span>
|
||||
<span className="meta">Last login: {formatDateTime(user.last_login_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-actions">
|
||||
<label className="toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={user.role === 'admin'}
|
||||
onChange={(event) => updateUserRole(event.target.checked ? 'admin' : 'user')}
|
||||
/>
|
||||
<span>Make admin</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => toggleUserBlock(!user.is_blocked)}
|
||||
>
|
||||
{user.is_blocked ? 'Allow access' : 'Block access'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-detail-grid">
|
||||
<div>
|
||||
<span className="label">Total</span>
|
||||
<span className="value">{stats?.total ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Ready</span>
|
||||
<span className="value">{stats?.ready ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Pending</span>
|
||||
<span className="value">{stats?.pending ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Approved</span>
|
||||
<span className="value">{stats?.approved ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Working</span>
|
||||
<span className="value">{stats?.working ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Partial</span>
|
||||
<span className="value">{stats?.partial ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Declined</span>
|
||||
<span className="value">{stats?.declined ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">In progress</span>
|
||||
<span className="value">{stats?.in_progress ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Last request</span>
|
||||
<span className="value">{formatDateTime(stats?.last_request_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</AdminShell>
|
||||
)
|
||||
}
|
||||
@@ -2,15 +2,30 @@
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
|
||||
import AdminShell from '../ui/AdminShell'
|
||||
|
||||
type AdminUser = {
|
||||
id: number
|
||||
username: string
|
||||
role: string
|
||||
authProvider?: string | null
|
||||
lastLoginAt?: string | null
|
||||
isBlocked?: boolean
|
||||
stats?: UserStats
|
||||
}
|
||||
|
||||
type UserStats = {
|
||||
total: number
|
||||
ready: number
|
||||
pending: number
|
||||
approved: number
|
||||
working: number
|
||||
partial: number
|
||||
declined: number
|
||||
in_progress: number
|
||||
last_request_at?: string | null
|
||||
}
|
||||
|
||||
const formatLastLogin = (value?: string | null) => {
|
||||
@@ -20,18 +35,50 @@ const formatLastLogin = (value?: string | null) => {
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
const formatLastRequest = (value?: string | null) => {
|
||||
if (!value) return '—'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.valueOf())) return value
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
const emptyStats: UserStats = {
|
||||
total: 0,
|
||||
ready: 0,
|
||||
pending: 0,
|
||||
approved: 0,
|
||||
working: 0,
|
||||
partial: 0,
|
||||
declined: 0,
|
||||
in_progress: 0,
|
||||
last_request_at: null,
|
||||
}
|
||||
|
||||
const normalizeStats = (stats: any): UserStats => ({
|
||||
total: Number(stats?.total ?? 0),
|
||||
ready: Number(stats?.ready ?? 0),
|
||||
pending: Number(stats?.pending ?? 0),
|
||||
approved: Number(stats?.approved ?? 0),
|
||||
working: Number(stats?.working ?? 0),
|
||||
partial: Number(stats?.partial ?? 0),
|
||||
declined: Number(stats?.declined ?? 0),
|
||||
in_progress: Number(stats?.in_progress ?? 0),
|
||||
last_request_at: stats?.last_request_at ?? null,
|
||||
})
|
||||
|
||||
export default function UsersPage() {
|
||||
const router = useRouter()
|
||||
const [users, setUsers] = useState<AdminUser[]>([])
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [jellyfinSyncStatus, setJellyfinSyncStatus] = useState<string | null>(null)
|
||||
const [jellyfinSyncBusy, setJellyfinSyncBusy] = useState(false)
|
||||
const [jellyseerrSyncStatus, setJellyseerrSyncStatus] = useState<string | null>(null)
|
||||
const [jellyseerrSyncBusy, setJellyseerrSyncBusy] = useState(false)
|
||||
const [jellyseerrResyncBusy, setJellyseerrResyncBusy] = useState(false)
|
||||
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(`${baseUrl}/admin/users`)
|
||||
const response = await authFetch(`${baseUrl}/admin/users/summary`)
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
clearToken()
|
||||
@@ -53,6 +100,8 @@ export default function UsersPage() {
|
||||
authProvider: user.auth_provider ?? 'local',
|
||||
lastLoginAt: user.last_login_at ?? null,
|
||||
isBlocked: Boolean(user.is_blocked),
|
||||
id: Number(user.id ?? 0),
|
||||
stats: normalizeStats(user.stats ?? emptyStats),
|
||||
}))
|
||||
)
|
||||
} else {
|
||||
@@ -105,12 +154,12 @@ export default function UsersPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const syncJellyfinUsers = async () => {
|
||||
setJellyfinSyncStatus(null)
|
||||
setJellyfinSyncBusy(true)
|
||||
const syncJellyseerrUsers = async () => {
|
||||
setJellyseerrSyncStatus(null)
|
||||
setJellyseerrSyncBusy(true)
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(`${baseUrl}/admin/jellyfin/users/sync`, {
|
||||
const response = await authFetch(`${baseUrl}/admin/jellyseerr/users/sync`, {
|
||||
method: 'POST',
|
||||
})
|
||||
if (!response.ok) {
|
||||
@@ -118,13 +167,44 @@ export default function UsersPage() {
|
||||
throw new Error(text || 'Sync failed')
|
||||
}
|
||||
const data = await response.json()
|
||||
setJellyfinSyncStatus(`Synced ${data?.imported ?? 0} Jellyfin users.`)
|
||||
setJellyseerrSyncStatus(
|
||||
`Matched ${data?.matched ?? 0} users. Skipped ${data?.skipped ?? 0}.`
|
||||
)
|
||||
await loadUsers()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setJellyfinSyncStatus('Could not sync Jellyfin users.')
|
||||
setJellyseerrSyncStatus('Could not sync Jellyseerr users.')
|
||||
} finally {
|
||||
setJellyfinSyncBusy(false)
|
||||
setJellyseerrSyncBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const resyncJellyseerrUsers = async () => {
|
||||
const confirmed = window.confirm(
|
||||
'This will remove all non-admin users and re-import from Jellyseerr. Continue?'
|
||||
)
|
||||
if (!confirmed) return
|
||||
setJellyseerrSyncStatus(null)
|
||||
setJellyseerrResyncBusy(true)
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(`${baseUrl}/admin/jellyseerr/users/resync`, {
|
||||
method: 'POST',
|
||||
})
|
||||
if (!response.ok) {
|
||||
const text = await response.text()
|
||||
throw new Error(text || 'Resync failed')
|
||||
}
|
||||
const data = await response.json()
|
||||
setJellyseerrSyncStatus(
|
||||
`Re-imported ${data?.imported ?? 0} users. Cleared ${data?.cleared ?? 0}.`
|
||||
)
|
||||
await loadUsers()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setJellyseerrSyncStatus('Could not resync Jellyseerr users.')
|
||||
} finally {
|
||||
setJellyseerrResyncBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,49 +229,63 @@ export default function UsersPage() {
|
||||
<button type="button" onClick={loadUsers}>
|
||||
Reload list
|
||||
</button>
|
||||
<button type="button" onClick={syncJellyfinUsers} disabled={jellyfinSyncBusy}>
|
||||
{jellyfinSyncBusy ? 'Syncing Jellyfin users...' : 'Sync Jellyfin users'}
|
||||
<button type="button" onClick={syncJellyseerrUsers} disabled={jellyseerrSyncBusy}>
|
||||
{jellyseerrSyncBusy ? 'Syncing Jellyseerr users...' : 'Sync Jellyseerr users'}
|
||||
</button>
|
||||
<button type="button" onClick={resyncJellyseerrUsers} disabled={jellyseerrResyncBusy}>
|
||||
{jellyseerrResyncBusy ? 'Resyncing Jellyseerr users...' : 'Resync Jellyseerr users'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<section className="admin-section">
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{jellyfinSyncStatus && <div className="status-banner">{jellyfinSyncStatus}</div>}
|
||||
{jellyseerrSyncStatus && <div className="status-banner">{jellyseerrSyncStatus}</div>}
|
||||
{users.length === 0 ? (
|
||||
<div className="status-banner">No users found yet.</div>
|
||||
) : (
|
||||
<div className="admin-grid">
|
||||
<div className="user-grid">
|
||||
{users.map((user) => (
|
||||
<div key={user.username} className="summary-card user-card">
|
||||
<div>
|
||||
<strong>{user.username}</strong>
|
||||
<div className="user-meta">
|
||||
<span className="meta">Role: {user.role}</span>
|
||||
<span className="meta">Login type: {user.authProvider || 'local'}</span>
|
||||
<span className="meta">Last login: {formatLastLogin(user.lastLoginAt)}</span>
|
||||
<Link
|
||||
key={user.username}
|
||||
className="user-grid-card"
|
||||
href={`/users/${user.id}`}
|
||||
>
|
||||
<div className="user-grid-header">
|
||||
<div>
|
||||
<strong>{user.username}</strong>
|
||||
<span className="user-grid-meta">{user.role}</span>
|
||||
</div>
|
||||
<span className={`user-grid-pill ${user.isBlocked ? 'is-blocked' : ''}`}>
|
||||
{user.isBlocked ? 'Blocked' : 'Active'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="user-grid-stats">
|
||||
<div>
|
||||
<span className="label">Total</span>
|
||||
<span className="value">{user.stats?.total ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Ready</span>
|
||||
<span className="value">{user.stats?.ready ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Pending</span>
|
||||
<span className="value">{user.stats?.pending ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">In progress</span>
|
||||
<span className="value">{user.stats?.in_progress ?? 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-actions">
|
||||
<label className="toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={user.role === 'admin'}
|
||||
onChange={(event) =>
|
||||
updateUserRole(user.username, event.target.checked ? 'admin' : 'user')
|
||||
}
|
||||
/>
|
||||
<span>Make admin</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => toggleUserBlock(user.username, !user.isBlocked)}
|
||||
>
|
||||
{user.isBlocked ? 'Allow access' : 'Block access'}
|
||||
</button>
|
||||
<div className="user-grid-footer">
|
||||
<span className="meta">Login: {user.authProvider || 'local'}</span>
|
||||
<span className="meta">Last login: {formatLastLogin(user.lastLoginAt)}</span>
|
||||
<span className="meta">
|
||||
Last request: {formatLastRequest(user.stats?.last_request_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "magent-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"version": "2901262036",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
|
||||
Reference in New Issue
Block a user