feat: system tools and admin enhancements
This commit is contained in:
@@ -7,7 +7,7 @@ import ForumView from './pages/ForumView'
|
||||
import ThreadView from './pages/ThreadView'
|
||||
import Login from './pages/Login'
|
||||
import Register from './pages/Register'
|
||||
import Acp from './pages/Acp'
|
||||
import { Acp } from './pages/Acp'
|
||||
import BoardIndex from './pages/BoardIndex'
|
||||
import Ucp from './pages/Ucp'
|
||||
import Profile from './pages/Profile'
|
||||
|
||||
@@ -62,6 +62,12 @@ export async function registerUser({ email, username, plainPassword }) {
|
||||
})
|
||||
}
|
||||
|
||||
export async function logoutUser() {
|
||||
return apiFetch('/logout', {
|
||||
method: 'POST',
|
||||
})
|
||||
}
|
||||
|
||||
export async function listRootForums() {
|
||||
return getCollection('/forums?parent[exists]=false')
|
||||
}
|
||||
@@ -109,6 +115,20 @@ export async function fetchVersion() {
|
||||
return apiFetch('/version')
|
||||
}
|
||||
|
||||
export async function fetchVersionCheck() {
|
||||
return apiFetch('/version/check')
|
||||
}
|
||||
|
||||
export async function runSystemUpdate() {
|
||||
return apiFetch('/system/update', {
|
||||
method: 'POST',
|
||||
})
|
||||
}
|
||||
|
||||
export async function fetchSystemStatus() {
|
||||
return apiFetch('/system/status')
|
||||
}
|
||||
|
||||
export async function fetchStats() {
|
||||
return apiFetch('/stats')
|
||||
}
|
||||
@@ -253,6 +273,23 @@ export async function getThread(id) {
|
||||
return apiFetch(`/threads/${id}`)
|
||||
}
|
||||
|
||||
export async function deleteThread(id, payload = null) {
|
||||
return apiFetch(`/threads/${id}`, {
|
||||
method: 'DELETE',
|
||||
...(payload ? { body: JSON.stringify(payload) } : {}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateThread(id, payload) {
|
||||
return apiFetch(`/threads/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/merge-patch+json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateThreadSolved(threadId, solved) {
|
||||
return apiFetch(`/threads/${threadId}/solved`, {
|
||||
method: 'PATCH',
|
||||
@@ -351,10 +388,32 @@ export async function listPostsByThread(threadId) {
|
||||
return getCollection(`/posts?thread=/api/threads/${threadId}`)
|
||||
}
|
||||
|
||||
export async function updatePost(id, payload) {
|
||||
return apiFetch(`/posts/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/merge-patch+json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
}
|
||||
|
||||
export async function deletePost(id, payload = null) {
|
||||
return apiFetch(`/posts/${id}`, {
|
||||
method: 'DELETE',
|
||||
...(payload ? { body: JSON.stringify(payload) } : {}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function listUsers() {
|
||||
return getCollection('/users')
|
||||
}
|
||||
|
||||
export async function listAuditLogs(limit = 200) {
|
||||
const query = Number.isFinite(limit) ? `?limit=${limit}` : ''
|
||||
return getCollection(`/audit-logs${query}`)
|
||||
}
|
||||
|
||||
export async function listRanks() {
|
||||
return getCollection('/ranks')
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createContext, useContext, useMemo, useState, useEffect } from 'react'
|
||||
import { login as apiLogin } from '../api/client'
|
||||
import { login as apiLogin, logoutUser } from '../api/client'
|
||||
|
||||
const AuthContext = createContext(null)
|
||||
|
||||
@@ -46,7 +46,12 @@ export function AuthProvider({ children }) {
|
||||
setToken(data.token)
|
||||
setEmail(data.email || loginInput)
|
||||
},
|
||||
logout() {
|
||||
async logout() {
|
||||
try {
|
||||
await logoutUser()
|
||||
} catch {
|
||||
// Ignore logout failures; client state is cleared regardless.
|
||||
}
|
||||
localStorage.removeItem('speedbb_token')
|
||||
localStorage.removeItem('speedbb_email')
|
||||
localStorage.removeItem('speedbb_user_id')
|
||||
|
||||
@@ -216,6 +216,39 @@ a {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bb-lightbox-modal {
|
||||
max-width: min(96vw, 1200px);
|
||||
}
|
||||
|
||||
.bb-lightbox-modal .modal-content {
|
||||
background: rgba(12, 16, 24, 0.98);
|
||||
}
|
||||
|
||||
.bb-lightbox-body {
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.bb-lightbox-controls {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.75rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bb-lightbox-btn {
|
||||
pointer-events: auto;
|
||||
border-radius: 999px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bb-attachment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -740,6 +773,27 @@ a {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bb-post-body blockquote {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border-left: 3px solid var(--bb-accent, #f29b3f);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--bb-ink-muted);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bb-post-body blockquote > cite {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
color: var(--bb-ink);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.bb-post-body blockquote > div {
|
||||
color: var(--bb-ink);
|
||||
}
|
||||
|
||||
.bb-post-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -2229,6 +2283,166 @@ a {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.bb-acp-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.bb-acp-stats-table {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(12, 16, 24, 0.6);
|
||||
overflow: hidden;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.bb-acp-stats-table th {
|
||||
text-align: left;
|
||||
padding: 0.55rem 0.75rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--bb-ink-muted);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.bb-acp-stats-table td {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
color: var(--bb-ink);
|
||||
}
|
||||
|
||||
.bb-acp-stats-table tbody tr:nth-child(even) {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.bb-acp-stats-value {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bb-acp-version-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bb-acp-version-link {
|
||||
color: var(--bb-accent, #f29b3f);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bb-acp-version-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bb-acp-version-meta {
|
||||
color: var(--bb-ink-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bb-acp-update-log {
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
background: rgba(12, 16, 24, 0.7);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: var(--bb-ink);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bb-status-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.bb-status-icon.is-ok {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.bb-status-icon.is-bad {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.bb-status-icon.is-warn {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-stats-table {
|
||||
background: #ffffff;
|
||||
border-color: rgba(14, 18, 27, 0.12);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-stats-table th {
|
||||
background: rgba(14, 18, 27, 0.04);
|
||||
color: #5b6678;
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-stats-table td {
|
||||
border-top-color: rgba(14, 18, 27, 0.06);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-stats-table tbody tr:nth-child(even) {
|
||||
background: rgba(14, 18, 27, 0.02);
|
||||
}
|
||||
|
||||
.bb-acp-admin-log__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(12, 16, 24, 0.6);
|
||||
}
|
||||
|
||||
.bb-acp-admin-log__table th {
|
||||
text-align: left;
|
||||
padding: 0.55rem 0.75rem;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--bb-ink-muted);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.bb-acp-admin-log__table td {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
color: var(--bb-ink);
|
||||
}
|
||||
|
||||
.bb-acp-admin-log__table tbody tr:nth-child(even) {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.bb-acp-admin-log__table tfoot td {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-admin-log__table {
|
||||
background: #ffffff;
|
||||
border-color: rgba(14, 18, 27, 0.12);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-admin-log__table th {
|
||||
background: rgba(14, 18, 27, 0.04);
|
||||
color: #5b6678;
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-admin-log__table td {
|
||||
border-top-color: rgba(14, 18, 27, 0.06);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-acp-admin-log__table tbody tr:nth-child(even) {
|
||||
background: rgba(14, 18, 27, 0.02);
|
||||
}
|
||||
.bb-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
@@ -2587,6 +2801,10 @@ a {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.bb-audit-limit {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.bb-sort-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Accordion, Button, ButtonGroup, Col, Container, Form, Modal, Row, Tab, Tabs } from 'react-bootstrap'
|
||||
import { useEffect, useMemo, useRef, useState, useId } from 'react'
|
||||
import { Accordion, Button, ButtonGroup, Col, Container, Form, Modal, Row, Tab, Tabs, OverlayTrigger, Tooltip } from 'react-bootstrap'
|
||||
import DataTable, { createTheme } from 'react-data-table-component'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
@@ -8,10 +8,15 @@ import {
|
||||
createForum,
|
||||
deleteForum,
|
||||
fetchSettings,
|
||||
fetchStats,
|
||||
fetchVersionCheck,
|
||||
runSystemUpdate,
|
||||
fetchSystemStatus,
|
||||
listAllForums,
|
||||
listRanks,
|
||||
listRoles,
|
||||
listUsers,
|
||||
listAuditLogs,
|
||||
reorderForums,
|
||||
saveSetting,
|
||||
saveSettings,
|
||||
@@ -38,7 +43,26 @@ import {
|
||||
deleteAttachmentExtension,
|
||||
} from '../api/client'
|
||||
|
||||
export default function Acp({ isAdmin }) {
|
||||
const StatusIcon = ({ status = 'bad', tooltip }) => {
|
||||
const id = useId()
|
||||
const iconClass =
|
||||
status === 'ok' ? 'bi-check-circle-fill' : status === 'warn' ? 'bi-question-circle-fill' : 'bi-x-circle-fill'
|
||||
const content = (
|
||||
<span className={`bb-status-icon is-${status}`}>
|
||||
<i className={`bi ${iconClass}`} aria-hidden="true" />
|
||||
</span>
|
||||
)
|
||||
if (!tooltip) {
|
||||
return content
|
||||
}
|
||||
return (
|
||||
<OverlayTrigger placement="top" overlay={<Tooltip id={id}>{tooltip}</Tooltip>}>
|
||||
<span>{content}</span>
|
||||
</OverlayTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function Acp({ isAdmin }) {
|
||||
const { t } = useTranslation()
|
||||
const { roles: authRoles } = useAuth()
|
||||
const canManageFounder = authRoles.includes('ROLE_FOUNDER')
|
||||
@@ -54,6 +78,24 @@ export default function Acp({ isAdmin }) {
|
||||
const [userSearch, setUserSearch] = useState('')
|
||||
const [usersLoading, setUsersLoading] = useState(false)
|
||||
const [usersError, setUsersError] = useState('')
|
||||
const [auditLogs, setAuditLogs] = useState([])
|
||||
const [auditSearch, setAuditSearch] = useState('')
|
||||
const [auditLoading, setAuditLoading] = useState(false)
|
||||
const [auditError, setAuditError] = useState('')
|
||||
const [auditLimit, setAuditLimit] = useState(200)
|
||||
const [boardStats, setBoardStats] = useState(null)
|
||||
const [boardStatsLoading, setBoardStatsLoading] = useState(false)
|
||||
const [boardStatsError, setBoardStatsError] = useState('')
|
||||
const [versionCheck, setVersionCheck] = useState(null)
|
||||
const [versionChecking, setVersionChecking] = useState(false)
|
||||
const [versionCheckError, setVersionCheckError] = useState('')
|
||||
const [updateModalOpen, setUpdateModalOpen] = useState(false)
|
||||
const [updateLog, setUpdateLog] = useState([])
|
||||
const [updateRunning, setUpdateRunning] = useState(false)
|
||||
const [updateError, setUpdateError] = useState('')
|
||||
const [systemStatus, setSystemStatus] = useState(null)
|
||||
const [systemLoading, setSystemLoading] = useState(false)
|
||||
const [systemError, setSystemError] = useState('')
|
||||
const [usersPage, setUsersPage] = useState(1)
|
||||
const [usersPerPage, setUsersPerPage] = useState(10)
|
||||
const [userSort, setUserSort] = useState({ columnId: 'name', direction: 'asc' })
|
||||
@@ -656,6 +698,249 @@ export default function Acp({ isAdmin }) {
|
||||
[themeMode]
|
||||
)
|
||||
|
||||
const formatAuditAction = (action) => {
|
||||
if (!action) return ''
|
||||
return action
|
||||
.replace(/[._]/g, ' ')
|
||||
.replace(/\b\w/g, (match) => match.toUpperCase())
|
||||
}
|
||||
|
||||
const formatAuditSubject = (entry) => {
|
||||
if (!entry) return '-'
|
||||
const meta = entry.metadata || {}
|
||||
if (meta.title) return meta.title
|
||||
if (meta.original_name) return meta.original_name
|
||||
if (meta.name) return meta.name
|
||||
if (entry.subject_type) {
|
||||
const base = entry.subject_type.split('\\').pop()
|
||||
return entry.subject_id ? `${base} #${entry.subject_id}` : base
|
||||
}
|
||||
return '-'
|
||||
}
|
||||
|
||||
const filteredAuditLogs = useMemo(() => {
|
||||
const term = auditSearch.trim().toLowerCase()
|
||||
if (!term) return auditLogs
|
||||
return auditLogs.filter((entry) => {
|
||||
const metaValues = []
|
||||
if (entry.metadata && typeof entry.metadata === 'object') {
|
||||
Object.values(entry.metadata).forEach((value) => {
|
||||
if (value !== null && value !== undefined) {
|
||||
metaValues.push(String(value))
|
||||
}
|
||||
})
|
||||
}
|
||||
const haystack = [
|
||||
formatAuditAction(entry.action),
|
||||
formatAuditSubject(entry),
|
||||
entry.user?.name || '',
|
||||
entry.user?.email || '',
|
||||
entry.ip_address || '',
|
||||
...metaValues,
|
||||
]
|
||||
return haystack.some((value) => value.toLowerCase().includes(term))
|
||||
})
|
||||
}, [auditLogs, auditSearch])
|
||||
|
||||
const adminAuditLogs = useMemo(() => {
|
||||
return auditLogs.filter((entry) =>
|
||||
Array.isArray(entry.user?.roles) && entry.user.roles.includes('ROLE_ADMIN')
|
||||
)
|
||||
}, [auditLogs])
|
||||
|
||||
const recentAdminLogs = useMemo(() => adminAuditLogs.slice(0, 5), [adminAuditLogs])
|
||||
|
||||
const formatNumber = (value) => {
|
||||
if (value === null || value === undefined) return '—'
|
||||
return new Intl.NumberFormat().format(value)
|
||||
}
|
||||
|
||||
const formatDecimal = (value) => {
|
||||
if (value === null || value === undefined) return '—'
|
||||
return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value)
|
||||
}
|
||||
|
||||
const formatBytes = (bytes) => {
|
||||
if (bytes === null || bytes === undefined) return '—'
|
||||
if (bytes === 0) return '0 B'
|
||||
const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
|
||||
const idx = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)))
|
||||
const value = bytes / 1024 ** idx
|
||||
return `${value.toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)} ${units[idx]}`
|
||||
}
|
||||
|
||||
const formatDateTime = (value) => {
|
||||
if (!value) return '—'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return '—'
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
const formatBool = (value) => {
|
||||
if (value === null || value === undefined) return '—'
|
||||
return value ? t('stats.on') : t('stats.off')
|
||||
}
|
||||
|
||||
const handleVersionCheck = async () => {
|
||||
setVersionChecking(true)
|
||||
setVersionCheckError('')
|
||||
try {
|
||||
const data = await fetchVersionCheck()
|
||||
setVersionCheck(data)
|
||||
} catch (err) {
|
||||
setVersionCheckError(err.message)
|
||||
} finally {
|
||||
setVersionChecking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRunUpdate = async () => {
|
||||
setUpdateRunning(true)
|
||||
setUpdateError('')
|
||||
setUpdateLog([])
|
||||
try {
|
||||
const data = await runSystemUpdate()
|
||||
setUpdateLog(data.log || [])
|
||||
} catch (err) {
|
||||
setUpdateError(err.message)
|
||||
} finally {
|
||||
setUpdateRunning(false)
|
||||
handleVersionCheck()
|
||||
}
|
||||
}
|
||||
|
||||
const loadSystemStatus = async () => {
|
||||
setSystemLoading(true)
|
||||
setSystemError('')
|
||||
try {
|
||||
const data = await fetchSystemStatus()
|
||||
setSystemStatus(data)
|
||||
} catch (err) {
|
||||
setSystemError(err.message)
|
||||
} finally {
|
||||
setSystemLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
handleVersionCheck()
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
loadSystemStatus()
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
const statsLeft = useMemo(() => {
|
||||
const versionMeta = (() => {
|
||||
if (versionChecking) return t('version.checking')
|
||||
if (versionCheckError) return t('version.unknown')
|
||||
if (!versionCheck) return t('version.unknown')
|
||||
if (versionCheck.is_latest === true) return t('version.up_to_date')
|
||||
if (versionCheck.is_latest === false) {
|
||||
return versionCheck.latest_version
|
||||
? t('version.update_available', { version: versionCheck.latest_version })
|
||||
: t('version.update_available_short')
|
||||
}
|
||||
return t('version.unknown')
|
||||
})()
|
||||
const showUpdate = versionCheck?.is_latest === false
|
||||
|
||||
return [
|
||||
{ label: t('stats.board_started'), value: formatDateTime(boardStats?.board_started_at) },
|
||||
{ label: t('stats.avatar_directory_size'), value: formatBytes(boardStats?.avatar_directory_size_bytes) },
|
||||
{ label: t('stats.database_size'), value: formatBytes(boardStats?.database_size_bytes) },
|
||||
{ label: t('stats.attachments_size'), value: formatBytes(boardStats?.attachments_size_bytes) },
|
||||
{ label: t('stats.database_server'), value: boardStats?.database_server || '—' },
|
||||
{ label: t('stats.gzip_compression'), value: formatBool(boardStats?.gzip_compression) },
|
||||
{ label: t('stats.php_version'), value: boardStats?.php_version || '—' },
|
||||
{ label: t('stats.orphan_attachments'), value: formatNumber(boardStats?.orphan_attachments) },
|
||||
{
|
||||
label: t('stats.board_version'),
|
||||
value: (
|
||||
<div className="bb-acp-version-inline">
|
||||
<span>{boardStats?.board_version || '—'}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0 bb-acp-version-link"
|
||||
onClick={handleVersionCheck}
|
||||
disabled={versionChecking}
|
||||
>
|
||||
{t('version.recheck')}
|
||||
</button>
|
||||
{showUpdate && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0 bb-acp-version-link"
|
||||
onClick={() => setUpdateModalOpen(true)}
|
||||
disabled={updateRunning}
|
||||
>
|
||||
{t('version.update_now')}
|
||||
</button>
|
||||
)}
|
||||
<span className="bb-acp-version-meta">{versionMeta}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
}, [t, boardStats, formatBool, versionCheck, versionChecking, versionCheckError, updateRunning])
|
||||
|
||||
const statsRight = useMemo(() => {
|
||||
return [
|
||||
{ label: t('stats.posts'), value: formatNumber(boardStats?.posts) },
|
||||
{ label: t('stats.posts_per_day'), value: formatDecimal(boardStats?.posts_per_day) },
|
||||
{ label: t('stats.topics'), value: formatNumber(boardStats?.threads) },
|
||||
{ label: t('stats.topics_per_day'), value: formatDecimal(boardStats?.topics_per_day) },
|
||||
{ label: t('stats.users'), value: formatNumber(boardStats?.users) },
|
||||
{ label: t('stats.users_per_day'), value: formatDecimal(boardStats?.users_per_day) },
|
||||
{ label: t('stats.attachments'), value: formatNumber(boardStats?.attachments) },
|
||||
{ label: t('stats.attachments_per_day'), value: formatDecimal(boardStats?.attachments_per_day) },
|
||||
]
|
||||
}, [t, boardStats])
|
||||
|
||||
const auditColumns = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: t('audit.created_at'),
|
||||
selector: (row) => row.created_at,
|
||||
sortable: true,
|
||||
width: '190px',
|
||||
cell: (row) =>
|
||||
row.created_at ? new Date(row.created_at).toLocaleString() : '-',
|
||||
},
|
||||
{
|
||||
name: t('audit.user'),
|
||||
selector: (row) => row.user?.name || '',
|
||||
sortable: true,
|
||||
cell: (row) => row.user?.name || row.user?.email || '-',
|
||||
},
|
||||
{
|
||||
name: t('audit.action'),
|
||||
selector: (row) => row.action || '',
|
||||
sortable: true,
|
||||
cell: (row) => formatAuditAction(row.action),
|
||||
},
|
||||
{
|
||||
name: t('audit.subject'),
|
||||
selector: (row) => formatAuditSubject(row),
|
||||
sortable: true,
|
||||
grow: 2,
|
||||
cell: (row) => formatAuditSubject(row),
|
||||
},
|
||||
{
|
||||
name: t('audit.ip'),
|
||||
selector: (row) => row.ip_address || '',
|
||||
sortable: true,
|
||||
width: '160px',
|
||||
cell: (row) => row.ip_address || '-',
|
||||
},
|
||||
],
|
||||
[t]
|
||||
)
|
||||
|
||||
const UsersPagination = ({ rowsPerPage, rowCount, onChangePage }) => {
|
||||
const totalPages = Math.max(1, Math.ceil(rowCount / rowsPerPage))
|
||||
const current = Math.min(usersPage, totalPages)
|
||||
@@ -763,6 +1048,44 @@ export default function Acp({ isAdmin }) {
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
const refreshBoardStats = async () => {
|
||||
setBoardStatsLoading(true)
|
||||
setBoardStatsError('')
|
||||
try {
|
||||
const data = await fetchStats()
|
||||
setBoardStats(data)
|
||||
} catch (err) {
|
||||
setBoardStatsError(err.message)
|
||||
} finally {
|
||||
setBoardStatsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
refreshBoardStats()
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
const refreshAuditLogs = async () => {
|
||||
setAuditLoading(true)
|
||||
setAuditError('')
|
||||
try {
|
||||
const data = await listAuditLogs(auditLimit)
|
||||
setAuditLogs(data)
|
||||
} catch (err) {
|
||||
setAuditError(err.message)
|
||||
} finally {
|
||||
setAuditLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
refreshAuditLogs()
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
useEffect(() => {
|
||||
if (!roleMenuOpen) return
|
||||
const handleClick = (event) => {
|
||||
@@ -2260,6 +2583,62 @@ export default function Acp({ isAdmin }) {
|
||||
<p className="bb-muted mb-0">{t('acp.general_hint')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bb-acp-panel mb-4">
|
||||
<div className="bb-acp-panel-header">
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<h5 className="mb-0">{t('acp.statistics')}</h5>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={refreshBoardStats}
|
||||
disabled={boardStatsLoading}
|
||||
>
|
||||
{t('acp.refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bb-acp-panel-body">
|
||||
{boardStatsError && <p className="text-danger mb-2">{boardStatsError}</p>}
|
||||
{boardStatsLoading && <p className="bb-muted mb-0">{t('acp.loading')}</p>}
|
||||
{!boardStatsLoading && (
|
||||
<div className="bb-acp-stats-grid">
|
||||
<table className="bb-acp-stats-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('stats.statistic')}</th>
|
||||
<th>{t('stats.value')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{statsLeft.map((stat) => (
|
||||
<tr key={stat.label}>
|
||||
<td>{stat.label}</td>
|
||||
<td className="bb-acp-stats-value">{stat.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<table className="bb-acp-stats-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('stats.statistic')}</th>
|
||||
<th>{t('stats.value')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{statsRight.map((stat) => (
|
||||
<tr key={stat.label}>
|
||||
<td>{stat.label}</td>
|
||||
<td className="bb-acp-stats-value">{stat.value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{generalError && <p className="text-danger">{generalError}</p>}
|
||||
<div className="bb-acp-panel">
|
||||
<div className="bb-acp-panel-header">
|
||||
@@ -2560,6 +2939,71 @@ export default function Acp({ isAdmin }) {
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bb-acp-panel mt-4">
|
||||
<div className="bb-acp-panel-header">
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h5 className="mb-1">{t('acp.admin_log_title')}</h5>
|
||||
<p className="bb-muted mb-0">{t('acp.admin_log_hint')}</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={refreshAuditLogs}
|
||||
disabled={auditLoading}
|
||||
>
|
||||
{t('acp.refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bb-acp-panel-body">
|
||||
{auditLoading && <p className="bb-muted mb-0">{t('acp.loading')}</p>}
|
||||
{!auditLoading && recentAdminLogs.length === 0 && (
|
||||
<p className="bb-muted mb-0">{t('admin_log.empty')}</p>
|
||||
)}
|
||||
{!auditLoading && recentAdminLogs.length > 0 && (
|
||||
<div className="bb-acp-admin-log">
|
||||
<table className="bb-acp-admin-log__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('admin_log.username')}</th>
|
||||
<th>{t('admin_log.user_ip')}</th>
|
||||
<th>{t('admin_log.time')}</th>
|
||||
<th>{t('admin_log.action')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recentAdminLogs.map((entry) => (
|
||||
<tr key={entry.id}>
|
||||
<td>{entry.user?.name || entry.user?.email || '—'}</td>
|
||||
<td>{entry.ip_address || '—'}</td>
|
||||
<td>{formatDateTime(entry.created_at)}</td>
|
||||
<td>{formatAuditAction(entry.action)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan={4}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0"
|
||||
onClick={() => {
|
||||
const target = document.querySelector('[data-rb-event-key="audit"]')
|
||||
if (target) target.click()
|
||||
}}
|
||||
>
|
||||
{t('acp.view_admin_log')}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Tab>
|
||||
@@ -3011,6 +3455,308 @@ export default function Acp({ isAdmin }) {
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey="audit" title={t('acp.audit_logs')}>
|
||||
{auditError && <p className="text-danger">{auditError}</p>}
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
|
||||
<Form.Control
|
||||
className="bb-user-search"
|
||||
value={auditSearch}
|
||||
onChange={(event) => setAuditSearch(event.target.value)}
|
||||
placeholder={t('audit.search')}
|
||||
/>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<Form.Control
|
||||
type="number"
|
||||
min="50"
|
||||
max="500"
|
||||
value={auditLimit}
|
||||
onChange={(event) => setAuditLimit(Number(event.target.value) || 200)}
|
||||
className="bb-audit-limit"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="dark"
|
||||
onClick={refreshAuditLogs}
|
||||
disabled={auditLoading}
|
||||
>
|
||||
{t('acp.refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{auditLoading && <p className="bb-muted">{t('acp.loading')}</p>}
|
||||
{!auditLoading && filteredAuditLogs.length === 0 && (
|
||||
<p className="bb-muted">{t('audit.empty')}</p>
|
||||
)}
|
||||
{!auditLoading && filteredAuditLogs.length > 0 && (
|
||||
<DataTable
|
||||
columns={auditColumns}
|
||||
data={filteredAuditLogs}
|
||||
pagination
|
||||
striped
|
||||
highlightOnHover={themeMode !== 'dark'}
|
||||
dense
|
||||
theme={themeMode === 'dark' ? 'speedbb-dark' : 'speedbb-light'}
|
||||
customStyles={userTableStyles}
|
||||
paginationComponentOptions={{
|
||||
rowsPerPageText: t('table.rows_per_page'),
|
||||
rangeSeparatorText: t('table.range_separator'),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab eventKey="system" title={t('acp.system')}>
|
||||
{systemError && <p className="text-danger">{systemError}</p>}
|
||||
{systemLoading && <p className="bb-muted">{t('acp.loading')}</p>}
|
||||
{!systemLoading && systemStatus && (
|
||||
<div className="bb-acp-panel">
|
||||
<div className="bb-acp-panel-header">
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<h5 className="mb-0">{t('system.requirements')}</h5>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('acp.refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bb-acp-panel-body">
|
||||
<table className="bb-acp-stats-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('system.check')}</th>
|
||||
<th>{t('system.path')}</th>
|
||||
<th>{t('system.min_version')}</th>
|
||||
<th>{t('system.current_version')}</th>
|
||||
<th>{t('system.status')}</th>
|
||||
<th>{t('system.recheck')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PHP</td>
|
||||
<td className="bb-acp-stats-value">{systemStatus.php_selected_path || '—'}</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.min_versions?.php || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.php_selected_version || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon
|
||||
status={systemStatus.php_selected_ok ? 'ok' : 'bad'}
|
||||
/>
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Composer</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.composer || t('system.not_found')}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.min_versions?.composer || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.composer_version || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon status={systemStatus.composer ? 'ok' : 'bad'} />
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Node</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.node || t('system.not_found')}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.min_versions?.node || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.node_version || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon status={systemStatus.node ? 'ok' : 'bad'} />
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>npm</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.npm || t('system.not_found')}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.min_versions?.npm || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.npm_version || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon status={systemStatus.npm ? 'ok' : 'bad'} />
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tar</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.tar || t('system.not_found')}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">—</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.tar_version || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon status={systemStatus.tar ? 'ok' : 'bad'} />
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rsync</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.rsync || t('system.not_found')}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">—</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
{systemStatus.rsync_version || '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon status={systemStatus.rsync ? 'ok' : 'bad'} />
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>proc_* functions</td>
|
||||
<td className="bb-acp-stats-value" colSpan={3}>
|
||||
{systemStatus.proc_functions
|
||||
? Object.entries(systemStatus.proc_functions)
|
||||
.filter(([, ok]) => !ok)
|
||||
.map(([name]) => name)
|
||||
.join(', ')
|
||||
: '—'}
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon
|
||||
status={
|
||||
Boolean(systemStatus.proc_functions) &&
|
||||
Object.values(systemStatus.proc_functions).every(Boolean)
|
||||
? 'ok'
|
||||
: 'bad'
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t('system.storage_writable')}</td>
|
||||
<td className="bb-acp-stats-value">storage/</td>
|
||||
<td className="bb-acp-stats-value">—</td>
|
||||
<td className="bb-acp-stats-value">—</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon status={systemStatus.storage_writable ? 'ok' : 'bad'} />
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t('system.updates_writable')}</td>
|
||||
<td className="bb-acp-stats-value">storage/app/updates</td>
|
||||
<td className="bb-acp-stats-value">—</td>
|
||||
<td className="bb-acp-stats-value">—</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<StatusIcon status={systemStatus.updates_writable ? 'ok' : 'bad'} />
|
||||
</td>
|
||||
<td className="bb-acp-stats-value">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="dark"
|
||||
onClick={loadSystemStatus}
|
||||
disabled={systemLoading}
|
||||
>
|
||||
{t('system.recheck')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<Modal show={showModal} onHide={handleReset} centered size="lg">
|
||||
<Modal.Header closeButton closeVariant="white">
|
||||
@@ -3625,6 +4371,36 @@ export default function Acp({ isAdmin }) {
|
||||
</Form>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<Modal show={updateModalOpen} onHide={() => setUpdateModalOpen(false)} centered>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{t('version.update_title')}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<p className="bb-muted mb-3">{t('version.update_hint')}</p>
|
||||
{updateError && <p className="text-danger">{updateError}</p>}
|
||||
{updateLog.length > 0 && (
|
||||
<pre className="bb-acp-update-log">
|
||||
{updateLog.join('\n')}
|
||||
</pre>
|
||||
)}
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="justify-content-between">
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
onClick={() => setUpdateModalOpen(false)}
|
||||
disabled={updateRunning}
|
||||
>
|
||||
{t('acp.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
className="bb-accent-button"
|
||||
onClick={handleRunUpdate}
|
||||
disabled={updateRunning}
|
||||
>
|
||||
{updateRunning ? t('version.updating') : t('version.update_now')}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<Modal
|
||||
show={showRankCreate}
|
||||
onHide={() => setShowRankCreate(false)}
|
||||
@@ -3961,3 +4737,6 @@ export default function Acp({ isAdmin }) {
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export { Acp }
|
||||
export default Acp
|
||||
|
||||
@@ -3,9 +3,13 @@ import { Button, Container, Form, Modal } from 'react-bootstrap'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import {
|
||||
createPost,
|
||||
deleteThread,
|
||||
getThread,
|
||||
listPostsByThread,
|
||||
updateThreadSolved,
|
||||
updateThread,
|
||||
updatePost,
|
||||
deletePost,
|
||||
uploadAttachment,
|
||||
listAttachmentExtensionsPublic,
|
||||
previewBbcode,
|
||||
@@ -34,7 +38,16 @@ export default function ThreadView() {
|
||||
const [previewHtml, setPreviewHtml] = useState('')
|
||||
const [previewLoading, setPreviewLoading] = useState(false)
|
||||
const [previewUrls, setPreviewUrls] = useState([])
|
||||
const [lightboxImage, setLightboxImage] = useState('')
|
||||
const [lightboxIndex, setLightboxIndex] = useState(null)
|
||||
const [lightboxOverride, setLightboxOverride] = useState(null)
|
||||
const [editPost, setEditPost] = useState(null)
|
||||
const [editBody, setEditBody] = useState('')
|
||||
const [editTitle, setEditTitle] = useState('')
|
||||
const [editSaving, setEditSaving] = useState(false)
|
||||
const [deleteTarget, setDeleteTarget] = useState(null)
|
||||
const [deleteLoading, setDeleteLoading] = useState(false)
|
||||
const [deleteReason, setDeleteReason] = useState('obsolete')
|
||||
const [deleteReasonText, setDeleteReasonText] = useState('')
|
||||
const [replyAttachmentTab, setReplyAttachmentTab] = useState('options')
|
||||
const [replyAttachmentOptions, setReplyAttachmentOptions] = useState({
|
||||
disableBbcode: false,
|
||||
@@ -458,7 +471,32 @@ export default function ThreadView() {
|
||||
key={attachment.id}
|
||||
type="button"
|
||||
className="bb-attachment-item border-0 text-start"
|
||||
onClick={() => setLightboxImage(attachment.download_url)}
|
||||
onClick={() => {
|
||||
const idKey = attachment.id !== undefined && attachment.id !== null
|
||||
? String(attachment.id)
|
||||
: null
|
||||
let index = idKey ? lightboxIndexById.get(idKey) : undefined
|
||||
if (index === undefined) {
|
||||
const target = attachment.download_url
|
||||
index = lightboxImages.findIndex((entry) =>
|
||||
matchesLightboxEntry(target, entry)
|
||||
)
|
||||
}
|
||||
if (index !== undefined && index >= 0) {
|
||||
setLightboxOverride(null)
|
||||
setLightboxIndex(index)
|
||||
return
|
||||
}
|
||||
setLightboxOverride([
|
||||
{
|
||||
id: attachment.id,
|
||||
url: attachment.download_url,
|
||||
thumb: attachment.thumbnail_url,
|
||||
name: attachment.original_name,
|
||||
},
|
||||
])
|
||||
setLightboxIndex(0)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={attachment.thumbnail_url || attachment.download_url}
|
||||
@@ -516,6 +554,145 @@ export default function ThreadView() {
|
||||
return [rootPost, ...posts]
|
||||
}, [posts, thread])
|
||||
|
||||
const lightboxImages = useMemo(() => {
|
||||
return allPosts
|
||||
.flatMap((post) => post.attachments || [])
|
||||
.filter((attachment) => attachment?.is_image)
|
||||
.map((attachment) => ({
|
||||
id: attachment.id,
|
||||
url: attachment.download_url,
|
||||
thumb: attachment.thumbnail_url,
|
||||
name: attachment.original_name,
|
||||
}))
|
||||
}, [allPosts])
|
||||
|
||||
const lightboxItems = lightboxOverride || lightboxImages
|
||||
|
||||
const matchesLightboxEntry = (src, entry) => {
|
||||
if (!src || !entry) return false
|
||||
return src.endsWith(entry.url) || (entry.thumb && src.endsWith(entry.thumb))
|
||||
}
|
||||
|
||||
const canEditPost = (post) => {
|
||||
if (!token || !post) return false
|
||||
return isAdmin || Number(post.user_id) === Number(userId)
|
||||
}
|
||||
|
||||
const replaceAttachmentTags = (body, attachments) => {
|
||||
if (!body || !attachments || attachments.length === 0) return body
|
||||
const map = new Map()
|
||||
attachments.forEach((attachment) => {
|
||||
if (!attachment?.original_name) return
|
||||
map.set(String(attachment.original_name).toLowerCase(), attachment)
|
||||
})
|
||||
if (map.size === 0) return body
|
||||
return body.replace(/\[attachment\](.+?)\[\/attachment\]/gi, (match, name) => {
|
||||
const key = String(name).trim().toLowerCase()
|
||||
const attachment = map.get(key)
|
||||
if (!attachment) return match
|
||||
const url = attachment.download_url
|
||||
if (attachment.is_image) {
|
||||
if (attachment.thumbnail_url) {
|
||||
return `[url=${url}][img]${attachment.thumbnail_url}[/img][/url]`
|
||||
}
|
||||
return `[img]${url}[/img]`
|
||||
}
|
||||
return `[url=${url}]${attachment.original_name}[/url]`
|
||||
})
|
||||
}
|
||||
|
||||
const buildQuoteBody = (post) => {
|
||||
if (!post) return ''
|
||||
const author = post.user_name || t('thread.anonymous')
|
||||
const content = replaceAttachmentTags(post.body || '', post.attachments || [])
|
||||
return `[quote=${author}]${content}[/quote]\n`
|
||||
}
|
||||
|
||||
const handleQuote = (post) => {
|
||||
const snippet = buildQuoteBody(post)
|
||||
setBody((prev) => (prev ? `${prev}\n${snippet}` : snippet))
|
||||
replyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
|
||||
const handleEditStart = (post) => {
|
||||
if (!post) return
|
||||
if (post.isRoot) {
|
||||
setEditTitle(thread?.title || '')
|
||||
} else {
|
||||
setEditTitle('')
|
||||
}
|
||||
setEditBody(post.body || '')
|
||||
setEditPost(post)
|
||||
}
|
||||
|
||||
const handleEditSave = async () => {
|
||||
if (!editPost || editSaving) return
|
||||
setEditSaving(true)
|
||||
setError('')
|
||||
try {
|
||||
if (editPost.isRoot) {
|
||||
const payload = {
|
||||
title: editTitle.trim(),
|
||||
body: editBody,
|
||||
}
|
||||
const updated = await updateThread(thread.id, payload)
|
||||
setThread(updated)
|
||||
} else {
|
||||
const updated = await updatePost(editPost.id, { body: editBody })
|
||||
setPosts((prev) => prev.map((post) => (post.id === updated.id ? updated : post)))
|
||||
}
|
||||
setEditPost(null)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setEditSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeletePost = (post) => {
|
||||
if (!post) return
|
||||
setDeleteReason('obsolete')
|
||||
setDeleteReasonText('')
|
||||
setDeleteTarget({
|
||||
post,
|
||||
isThread: Boolean(post.isRoot),
|
||||
})
|
||||
}
|
||||
|
||||
const handleDeleteConfirm = async () => {
|
||||
if (!deleteTarget || deleteLoading) return
|
||||
setDeleteLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const payload = {
|
||||
reason: deleteReason,
|
||||
reason_text: deleteReason === 'other' ? deleteReasonText.trim() : '',
|
||||
}
|
||||
if (deleteTarget.isThread) {
|
||||
await deleteThread(thread.id, payload)
|
||||
window.location.href = '/forums'
|
||||
} else {
|
||||
await deletePost(deleteTarget.post.id, payload)
|
||||
setPosts((prev) => prev.filter((item) => item.id !== deleteTarget.post.id))
|
||||
}
|
||||
setDeleteTarget(null)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setDeleteLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const lightboxIndexById = useMemo(() => {
|
||||
const map = new Map()
|
||||
lightboxImages.forEach((entry, index) => {
|
||||
if (entry.id !== undefined && entry.id !== null) {
|
||||
map.set(String(entry.id), index)
|
||||
}
|
||||
})
|
||||
return map
|
||||
}, [lightboxImages])
|
||||
|
||||
const handleJumpToReply = () => {
|
||||
replyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
@@ -725,10 +902,24 @@ export default function ThreadView() {
|
||||
)}
|
||||
</div>
|
||||
<div className="bb-post-actions">
|
||||
<button type="button" className="bb-post-action" aria-label="Edit post">
|
||||
<button
|
||||
type="button"
|
||||
className="bb-post-action"
|
||||
aria-label={t('thread.edit')}
|
||||
title={t('thread.edit')}
|
||||
onClick={() => handleEditStart(post)}
|
||||
disabled={!canEditPost(post)}
|
||||
>
|
||||
<i className="bi bi-pencil" aria-hidden="true" />
|
||||
</button>
|
||||
<button type="button" className="bb-post-action" aria-label="Delete post">
|
||||
<button
|
||||
type="button"
|
||||
className="bb-post-action"
|
||||
aria-label={t('thread.delete')}
|
||||
title={t('thread.delete')}
|
||||
onClick={() => handleDeletePost(post)}
|
||||
disabled={!canEditPost(post)}
|
||||
>
|
||||
<i className="bi bi-x-lg" aria-hidden="true" />
|
||||
</button>
|
||||
<button type="button" className="bb-post-action" aria-label="Report post">
|
||||
@@ -737,7 +928,13 @@ export default function ThreadView() {
|
||||
<button type="button" className="bb-post-action" aria-label="Post info">
|
||||
<i className="bi bi-info-lg" aria-hidden="true" />
|
||||
</button>
|
||||
<button type="button" className="bb-post-action" aria-label="Quote post">
|
||||
<button
|
||||
type="button"
|
||||
className="bb-post-action"
|
||||
aria-label={t('thread.quote')}
|
||||
title={t('thread.quote')}
|
||||
onClick={() => handleQuote(post)}
|
||||
>
|
||||
<i className="bi bi-quote" aria-hidden="true" />
|
||||
</button>
|
||||
{canThank && (
|
||||
@@ -752,7 +949,17 @@ export default function ThreadView() {
|
||||
onClick={(event) => {
|
||||
if (event.target?.tagName === 'IMG') {
|
||||
event.preventDefault()
|
||||
setLightboxImage(event.target.src)
|
||||
const src = event.target.src
|
||||
const index = lightboxImages.findIndex((entry) =>
|
||||
matchesLightboxEntry(src, entry)
|
||||
)
|
||||
if (index >= 0) {
|
||||
setLightboxOverride(null)
|
||||
setLightboxIndex(index)
|
||||
return
|
||||
}
|
||||
setLightboxOverride([{ id: null, url: src, thumb: src, name: '' }])
|
||||
setLightboxIndex(0)
|
||||
}
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: post.body_html || post.body }}
|
||||
@@ -881,15 +1088,176 @@ export default function ThreadView() {
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<Modal
|
||||
show={Boolean(lightboxImage)}
|
||||
onHide={() => setLightboxImage('')}
|
||||
show={Boolean(editPost)}
|
||||
onHide={() => setEditPost(null)}
|
||||
centered
|
||||
size="lg"
|
||||
>
|
||||
<Modal.Body className="text-center">
|
||||
{lightboxImage && (
|
||||
<img src={lightboxImage} alt="" className="img-fluid rounded" />
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{t('thread.edit')}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
{editPost?.isRoot && (
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('thread.title')}</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={editTitle}
|
||||
onChange={(event) => setEditTitle(event.target.value)}
|
||||
/>
|
||||
</Form.Group>
|
||||
)}
|
||||
<Form.Group>
|
||||
<Form.Label>{t('form.message')}</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={8}
|
||||
value={editBody}
|
||||
onChange={(event) => setEditBody(event.target.value)}
|
||||
/>
|
||||
</Form.Group>
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="justify-content-between">
|
||||
<Button variant="outline-secondary" onClick={() => setEditPost(null)}>
|
||||
{t('acp.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
className="bb-accent-button"
|
||||
onClick={handleEditSave}
|
||||
disabled={editSaving || !editBody.trim() || (editPost?.isRoot && !editTitle.trim())}
|
||||
>
|
||||
{editSaving ? t('form.saving') : t('acp.save')}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<Modal
|
||||
show={Boolean(deleteTarget)}
|
||||
onHide={() => {
|
||||
if (deleteLoading) return
|
||||
setDeleteTarget(null)
|
||||
}}
|
||||
centered
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
{deleteTarget?.isThread ? t('thread.delete_confirm') : t('thread.delete_post_confirm')}
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<p className="mb-3">
|
||||
{deleteTarget?.isThread
|
||||
? t('thread.delete_confirm')
|
||||
: t('thread.delete_post_confirm')}
|
||||
</p>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('thread.delete_reason')}</Form.Label>
|
||||
<Form.Select
|
||||
value={deleteReason}
|
||||
onChange={(event) => setDeleteReason(event.target.value)}
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
<option value="obsolete">{t('thread.delete_reason_obsolete')}</option>
|
||||
<option value="double">{t('thread.delete_reason_double')}</option>
|
||||
<option value="other">{t('thread.delete_reason_other')}</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
{deleteReason === 'other' && (
|
||||
<Form.Group>
|
||||
<Form.Label>{t('thread.delete_reason_other_label')}</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={deleteReasonText}
|
||||
onChange={(event) => setDeleteReasonText(event.target.value)}
|
||||
placeholder={t('thread.delete_reason_other_placeholder')}
|
||||
disabled={deleteLoading}
|
||||
/>
|
||||
</Form.Group>
|
||||
)}
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="justify-content-between">
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
onClick={() => setDeleteTarget(null)}
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
{t('acp.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleDeleteConfirm}
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
{deleteLoading ? t('form.saving') : t('acp.delete')}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
<Modal
|
||||
show={lightboxIndex !== null && lightboxItems.length > 0}
|
||||
onHide={() => {
|
||||
setLightboxIndex(null)
|
||||
setLightboxOverride(null)
|
||||
}}
|
||||
centered
|
||||
size="lg"
|
||||
dialogClassName="bb-lightbox-modal"
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
{lightboxIndex !== null
|
||||
? `${(lightboxIndex ?? 0) + 1} / ${lightboxItems.length}`
|
||||
: ''}
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="text-center bb-lightbox-body">
|
||||
{lightboxIndex !== null && lightboxItems[lightboxIndex] && (
|
||||
<img
|
||||
src={lightboxItems[lightboxIndex].url}
|
||||
alt={lightboxItems[lightboxIndex].name || ''}
|
||||
className="img-fluid rounded"
|
||||
/>
|
||||
)}
|
||||
<div className="bb-lightbox-controls">
|
||||
<Button
|
||||
type="button"
|
||||
variant="dark"
|
||||
className="bb-lightbox-btn"
|
||||
onClick={() =>
|
||||
setLightboxIndex((prev) => (prev === null ? prev : Math.max(0, prev - 1)))
|
||||
}
|
||||
disabled={lightboxIndex === null || lightboxIndex <= 0}
|
||||
style={{
|
||||
visibility:
|
||||
lightboxIndex === null || lightboxIndex <= 0 ? 'hidden' : 'visible',
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-chevron-left" aria-hidden="true" />
|
||||
<span className="visually-hidden">{t('lightbox.prev')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="dark"
|
||||
className="bb-lightbox-btn"
|
||||
onClick={() =>
|
||||
setLightboxIndex((prev) =>
|
||||
prev === null
|
||||
? prev
|
||||
: Math.min(lightboxItems.length - 1, prev + 1)
|
||||
)
|
||||
}
|
||||
disabled={
|
||||
lightboxIndex === null || lightboxIndex >= lightboxItems.length - 1
|
||||
}
|
||||
style={{
|
||||
visibility:
|
||||
lightboxIndex === null || lightboxIndex >= lightboxItems.length - 1
|
||||
? 'hidden'
|
||||
: 'visible',
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-chevron-right" aria-hidden="true" />
|
||||
<span className="visually-hidden">{t('lightbox.next')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user