626 lines
33 KiB
JavaScript
626 lines
33 KiB
JavaScript
import { Suspense, lazy, useEffect, useRef, useState } from 'react'
|
||
import { BrowserRouter, Link, Route, Routes, useLocation } from 'react-router-dom'
|
||
import { Button, Container, Modal, NavDropdown } from 'react-bootstrap'
|
||
import { AuthProvider, useAuth } from './context/AuthContext'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { fetchPing, fetchSettings, fetchVersion, getForum, getThread } from './api/client'
|
||
|
||
const Home = lazy(() => import('./pages/Home'))
|
||
const ForumView = lazy(() => import('./pages/ForumView'))
|
||
const ThreadView = lazy(() => import('./pages/ThreadView'))
|
||
const Login = lazy(() => import('./pages/Login'))
|
||
const Register = lazy(() => import('./pages/Register'))
|
||
const ResetPassword = lazy(() => import('./pages/ResetPassword'))
|
||
const Acp = lazy(() => import('./pages/Acp').then((module) => ({ default: module.Acp ?? module.default })))
|
||
const BoardIndex = lazy(() => import('./pages/BoardIndex'))
|
||
const Ucp = lazy(() => import('./pages/Ucp'))
|
||
const Profile = lazy(() => import('./pages/Profile'))
|
||
|
||
function PortalHeader({
|
||
userMenu,
|
||
isAuthenticated,
|
||
forumName,
|
||
logoUrl,
|
||
showHeaderName,
|
||
canAccessAcp,
|
||
canAccessMcp,
|
||
}) {
|
||
const { t } = useTranslation()
|
||
const location = useLocation()
|
||
const [crumbs, setCrumbs] = useState([])
|
||
|
||
useEffect(() => {
|
||
let active = true
|
||
|
||
const parseForumId = (parent) => {
|
||
if (!parent) return null
|
||
if (typeof parent === 'string') {
|
||
const parts = parent.split('/')
|
||
return parts[parts.length - 1] || null
|
||
}
|
||
if (typeof parent === 'object' && parent.id) {
|
||
return parent.id
|
||
}
|
||
return null
|
||
}
|
||
|
||
const buildForumChain = async (forum) => {
|
||
const chain = []
|
||
let cursor = forum
|
||
|
||
while (cursor) {
|
||
chain.unshift({ label: cursor.name, to: `/forum/${cursor.id}` })
|
||
const parentId = parseForumId(cursor.parent)
|
||
if (!parentId) break
|
||
cursor = await getForum(parentId)
|
||
}
|
||
|
||
return chain
|
||
}
|
||
|
||
const buildCrumbs = async () => {
|
||
const base = [
|
||
{ label: t('portal.portal'), to: '/' },
|
||
{ label: t('portal.board_index'), to: '/forums' },
|
||
]
|
||
|
||
if (location.pathname === '/') {
|
||
setCrumbs([{ ...base[0], current: true }, { ...base[1] }])
|
||
return
|
||
}
|
||
|
||
if (location.pathname === '/forums') {
|
||
setCrumbs([{ ...base[0] }, { ...base[1], current: true }])
|
||
return
|
||
}
|
||
|
||
if (location.pathname.startsWith('/forum/')) {
|
||
const forumId = location.pathname.split('/')[2]
|
||
if (forumId) {
|
||
const forum = await getForum(forumId)
|
||
const chain = await buildForumChain(forum)
|
||
if (!active) return
|
||
setCrumbs([...base, ...chain.map((crumb, idx) => ({
|
||
...crumb,
|
||
current: idx === chain.length - 1,
|
||
}))])
|
||
return
|
||
}
|
||
}
|
||
|
||
if (location.pathname.startsWith('/thread/')) {
|
||
const threadId = location.pathname.split('/')[2]
|
||
if (threadId) {
|
||
const thread = await getThread(threadId)
|
||
const forumId = thread?.forum?.split('/').pop()
|
||
if (forumId) {
|
||
const forum = await getForum(forumId)
|
||
const chain = await buildForumChain(forum)
|
||
if (!active) return
|
||
const chainWithCurrent = chain.map((crumb, index) => ({
|
||
...crumb,
|
||
current: index === chain.length - 1,
|
||
}))
|
||
setCrumbs([...base, ...chainWithCurrent])
|
||
return
|
||
}
|
||
}
|
||
}
|
||
|
||
if (location.pathname.startsWith('/acp')) {
|
||
setCrumbs([
|
||
{ ...base[0] },
|
||
{ ...base[1] },
|
||
{ label: t('portal.link_acp'), to: '/acp', current: true },
|
||
])
|
||
return
|
||
}
|
||
|
||
if (location.pathname.startsWith('/ucp')) {
|
||
setCrumbs([
|
||
{ ...base[0] },
|
||
{ ...base[1] },
|
||
{ label: t('portal.user_control_panel'), to: '/ucp', current: true },
|
||
])
|
||
return
|
||
}
|
||
|
||
if (location.pathname.startsWith('/profile/')) {
|
||
setCrumbs([
|
||
{ ...base[0] },
|
||
{ ...base[1] },
|
||
{ label: t('portal.user_profile'), to: location.pathname, current: true },
|
||
])
|
||
return
|
||
}
|
||
|
||
setCrumbs([{ ...base[0] }, { ...base[1], current: true }])
|
||
}
|
||
|
||
buildCrumbs()
|
||
|
||
return () => {
|
||
active = false
|
||
}
|
||
}, [location.pathname, t])
|
||
|
||
return (
|
||
<Container fluid className="pt-2 pb-2 bb-portal-shell">
|
||
<div className="bb-portal-banner">
|
||
<div className="bb-portal-brand">
|
||
<Link to="/" className="bb-portal-logo-link" aria-label={forumName || '24unix.net'}>
|
||
{logoUrl && (
|
||
<img src={logoUrl} alt={forumName || 'Forum'} className="bb-portal-logo-image" />
|
||
)}
|
||
{(showHeaderName || !logoUrl) && (
|
||
<div className="bb-portal-logo">{forumName || '24unix.net'}</div>
|
||
)}
|
||
</Link>
|
||
</div>
|
||
<div className="bb-portal-search">
|
||
<input type="text" placeholder={t('portal.search_placeholder')} disabled />
|
||
<span className="bb-portal-search-icon">
|
||
<i className="bi bi-search" aria-hidden="true" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bb-portal-bars">
|
||
<div className="bb-portal-bar bb-portal-bar--top">
|
||
<div className="bb-portal-bar-left">
|
||
<span className="bb-portal-bar-title">
|
||
<i className="bi bi-list" aria-hidden="true" /> {t('portal.quick_links')}
|
||
</span>
|
||
<div className="bb-portal-bar-links">
|
||
<span>
|
||
<i className="bi bi-question-circle-fill" aria-hidden="true" /> {t('portal.link_faq')}
|
||
</span>
|
||
{isAuthenticated && canAccessAcp && (
|
||
<>
|
||
<Link to="/acp" className="bb-portal-link">
|
||
<i className="bi bi-gear-fill" aria-hidden="true" /> {t('portal.link_acp')}
|
||
</Link>
|
||
</>
|
||
)}
|
||
{isAuthenticated && canAccessMcp && (
|
||
<span>
|
||
<i className="bi bi-hammer" aria-hidden="true" /> {t('portal.link_mcp')}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={`bb-portal-user-links${isAuthenticated ? '' : ' bb-portal-user-links--guest'}`}
|
||
>
|
||
{isAuthenticated ? (
|
||
<>
|
||
<span>
|
||
<i className="bi bi-bell-fill" aria-hidden="true" /> {t('portal.notifications')}
|
||
</span>
|
||
<span>
|
||
<i className="bi bi-envelope-fill" aria-hidden="true" /> {t('portal.messages')}
|
||
</span>
|
||
{userMenu}
|
||
</>
|
||
) : (
|
||
<>
|
||
<Link to="/register" className="bb-portal-user-link">
|
||
<i className="bi bi-pencil-square" aria-hidden="true" /> {t('nav.register')}
|
||
</Link>
|
||
<Link to="/login" className="bb-portal-user-link">
|
||
<i className="bi bi-power" aria-hidden="true" /> {t('nav.login')}
|
||
</Link>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="bb-portal-bar bb-portal-bar--bottom">
|
||
<div className="bb-portal-breadcrumb">
|
||
{crumbs.map((crumb, index) => (
|
||
<span key={`${crumb.to}-${index}`} className="bb-portal-crumb">
|
||
{index > 0 && <span className="bb-portal-sep">›</span>}
|
||
{crumb.current ? (
|
||
<Link to={crumb.to} className="bb-portal-current bb-portal-link">
|
||
{index === 0 && <i className="bi bi-house-door-fill" aria-hidden="true" />}
|
||
{index === 1 && <i className="bi bi-chat-left-text" aria-hidden="true" />}
|
||
{crumb.label}
|
||
</Link>
|
||
) : (
|
||
<Link to={crumb.to} className="bb-portal-link">
|
||
{index === 0 && <i className="bi bi-house-door-fill" aria-hidden="true" />}
|
||
{index === 1 && <i className="bi bi-chat-left-text" aria-hidden="true" />}
|
||
{crumb.label}
|
||
</Link>
|
||
)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
function AppShell() {
|
||
const PING_INTERVAL_MS = 15000
|
||
const PING_INTERVAL_HIDDEN_MS = 60000
|
||
const { t } = useTranslation()
|
||
const { token, email, userId, logout, isAdmin, isModerator } = useAuth()
|
||
const [versionInfo, setVersionInfo] = useState(null)
|
||
const [availableBuild, setAvailableBuild] = useState(null)
|
||
const [pingBuild, setPingBuild] = useState(null)
|
||
const [showUpdateModal, setShowUpdateModal] = useState(false)
|
||
const currentBuildRef = useRef(null)
|
||
const promptedBuildRef = useRef(null)
|
||
const [theme, setTheme] = useState('auto')
|
||
const [resolvedTheme, setResolvedTheme] = useState('light')
|
||
const [accentOverride, setAccentOverride] = useState(
|
||
() => localStorage.getItem('speedbb_accent') || ''
|
||
)
|
||
const [settings, setSettings] = useState({
|
||
forumName: '',
|
||
defaultTheme: 'auto',
|
||
accentDark: '',
|
||
accentLight: '',
|
||
logoDark: '',
|
||
logoLight: '',
|
||
showHeaderName: true,
|
||
faviconIco: '',
|
||
favicon16: '',
|
||
favicon32: '',
|
||
favicon48: '',
|
||
favicon64: '',
|
||
favicon128: '',
|
||
favicon256: '',
|
||
})
|
||
|
||
const routeFallback = (
|
||
<Container fluid className="py-5">
|
||
<p className="bb-muted mb-0">{t('acp.loading')}</p>
|
||
</Container>
|
||
)
|
||
|
||
useEffect(() => {
|
||
fetchVersion()
|
||
.then((data) => setVersionInfo(data))
|
||
.catch(() => setVersionInfo(null))
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
currentBuildRef.current =
|
||
typeof versionInfo?.build === 'number' ? versionInfo.build : null
|
||
}, [versionInfo?.build])
|
||
|
||
useEffect(() => {
|
||
const currentBuild =
|
||
typeof versionInfo?.build === 'number' ? versionInfo.build : null
|
||
if (currentBuild !== null && pingBuild !== null && pingBuild > currentBuild) {
|
||
setAvailableBuild(pingBuild)
|
||
return
|
||
}
|
||
setAvailableBuild(null)
|
||
}, [versionInfo?.build, pingBuild])
|
||
|
||
useEffect(() => {
|
||
if (availableBuild === null) return
|
||
if (promptedBuildRef.current === availableBuild) return
|
||
promptedBuildRef.current = availableBuild
|
||
setShowUpdateModal(true)
|
||
}, [availableBuild])
|
||
|
||
useEffect(() => {
|
||
let active = true
|
||
let timeoutId = null
|
||
|
||
const scheduleNext = () => {
|
||
const delay = document.hidden ? PING_INTERVAL_HIDDEN_MS : PING_INTERVAL_MS
|
||
timeoutId = window.setTimeout(runPing, delay)
|
||
}
|
||
|
||
const runPing = async () => {
|
||
try {
|
||
const data = await fetchPing()
|
||
const currentBuild = currentBuildRef.current
|
||
const remoteBuild =
|
||
typeof data?.version_status?.build === 'number'
|
||
? data.version_status.build
|
||
: null
|
||
console.log('speedBB ping', {
|
||
...data,
|
||
current_version: currentBuild,
|
||
})
|
||
if (!active) return
|
||
if (remoteBuild !== null) {
|
||
setPingBuild(remoteBuild)
|
||
}
|
||
window.dispatchEvent(new CustomEvent('speedbb-ping', { detail: data }))
|
||
} catch {
|
||
// ignore transient ping failures
|
||
} finally {
|
||
if (active) {
|
||
scheduleNext()
|
||
}
|
||
}
|
||
}
|
||
|
||
runPing()
|
||
|
||
return () => {
|
||
active = false
|
||
if (timeoutId) {
|
||
window.clearTimeout(timeoutId)
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
let active = true
|
||
const loadSettings = async () => {
|
||
try {
|
||
const allSettings = await fetchSettings()
|
||
const settingsMap = new Map(allSettings.map((setting) => [setting.key, setting.value]))
|
||
if (!active) return
|
||
const next = {
|
||
forumName: settingsMap.get('forum_name') || '',
|
||
defaultTheme: settingsMap.get('default_theme') || 'auto',
|
||
accentDark: settingsMap.get('accent_color_dark') || '',
|
||
accentLight: settingsMap.get('accent_color_light') || '',
|
||
logoDark: settingsMap.get('logo_dark') || '',
|
||
logoLight: settingsMap.get('logo_light') || '',
|
||
showHeaderName: settingsMap.get('show_header_name') !== 'false',
|
||
faviconIco: settingsMap.get('favicon_ico') || '',
|
||
favicon16: settingsMap.get('favicon_16') || '',
|
||
favicon32: settingsMap.get('favicon_32') || '',
|
||
favicon48: settingsMap.get('favicon_48') || '',
|
||
favicon64: settingsMap.get('favicon_64') || '',
|
||
favicon128: settingsMap.get('favicon_128') || '',
|
||
favicon256: settingsMap.get('favicon_256') || '',
|
||
}
|
||
setSettings(next)
|
||
} catch {
|
||
// keep defaults
|
||
}
|
||
}
|
||
loadSettings()
|
||
return () => {
|
||
active = false
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
const stored = token ? localStorage.getItem('speedbb_theme') : null
|
||
const nextTheme = stored || settings.defaultTheme || 'auto'
|
||
setTheme(nextTheme)
|
||
}, [token, settings.defaultTheme])
|
||
|
||
useEffect(() => {
|
||
const handleSettingsUpdate = (event) => {
|
||
const next = event.detail
|
||
if (!next) return
|
||
setSettings((prev) => ({ ...prev, ...next }))
|
||
}
|
||
|
||
window.addEventListener('speedbb-settings-updated', handleSettingsUpdate)
|
||
return () => {
|
||
window.removeEventListener('speedbb-settings-updated', handleSettingsUpdate)
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (accentOverride) {
|
||
localStorage.setItem('speedbb_accent', accentOverride)
|
||
} else {
|
||
localStorage.removeItem('speedbb_accent')
|
||
}
|
||
}, [accentOverride])
|
||
|
||
useEffect(() => {
|
||
const root = document.documentElement
|
||
const media = window.matchMedia('(prefers-color-scheme: dark)')
|
||
|
||
const applyTheme = (mode) => {
|
||
if (mode === 'auto') {
|
||
const next = media.matches ? 'dark' : 'light'
|
||
root.setAttribute('data-bs-theme', next)
|
||
setResolvedTheme(next)
|
||
} else {
|
||
root.setAttribute('data-bs-theme', mode)
|
||
setResolvedTheme(mode)
|
||
}
|
||
}
|
||
|
||
applyTheme(theme)
|
||
|
||
const handleChange = () => {
|
||
if (theme === 'auto') {
|
||
applyTheme('auto')
|
||
}
|
||
}
|
||
|
||
media.addEventListener('change', handleChange)
|
||
|
||
return () => {
|
||
media.removeEventListener('change', handleChange)
|
||
}
|
||
}, [theme])
|
||
|
||
useEffect(() => {
|
||
const accent =
|
||
accentOverride ||
|
||
(resolvedTheme === 'dark' ? settings.accentDark : settings.accentLight) ||
|
||
settings.accentDark ||
|
||
settings.accentLight
|
||
if (accent) {
|
||
document.documentElement.style.setProperty('--bb-accent', accent)
|
||
}
|
||
}, [accentOverride, resolvedTheme, settings])
|
||
|
||
useEffect(() => {
|
||
if (settings.forumName) {
|
||
document.title = settings.forumName
|
||
}
|
||
}, [settings.forumName])
|
||
|
||
useEffect(() => {
|
||
const upsertIcon = (id, rel, href, sizes, type) => {
|
||
if (!href) {
|
||
const existing = document.getElementById(id)
|
||
if (existing) {
|
||
existing.remove()
|
||
}
|
||
return
|
||
}
|
||
let link = document.getElementById(id)
|
||
if (!link) {
|
||
link = document.createElement('link')
|
||
link.id = id
|
||
document.head.appendChild(link)
|
||
}
|
||
link.setAttribute('rel', rel)
|
||
link.setAttribute('href', href)
|
||
if (sizes) {
|
||
link.setAttribute('sizes', sizes)
|
||
} else {
|
||
link.removeAttribute('sizes')
|
||
}
|
||
if (type) {
|
||
link.setAttribute('type', type)
|
||
} else {
|
||
link.removeAttribute('type')
|
||
}
|
||
}
|
||
|
||
upsertIcon('favicon-ico', 'icon', settings.faviconIco, null, 'image/x-icon')
|
||
upsertIcon('favicon-16', 'icon', settings.favicon16, '16x16', 'image/png')
|
||
upsertIcon('favicon-32', 'icon', settings.favicon32, '32x32', 'image/png')
|
||
upsertIcon('favicon-48', 'icon', settings.favicon48, '48x48', 'image/png')
|
||
upsertIcon('favicon-64', 'icon', settings.favicon64, '64x64', 'image/png')
|
||
upsertIcon('favicon-128', 'icon', settings.favicon128, '128x128', 'image/png')
|
||
upsertIcon('favicon-256', 'icon', settings.favicon256, '256x256', 'image/png')
|
||
}, [
|
||
settings.faviconIco,
|
||
settings.favicon16,
|
||
settings.favicon32,
|
||
settings.favicon48,
|
||
settings.favicon64,
|
||
settings.favicon128,
|
||
settings.favicon256,
|
||
])
|
||
|
||
return (
|
||
<div className="bb-shell" id="top">
|
||
<PortalHeader
|
||
isAuthenticated={!!token}
|
||
forumName={settings.forumName}
|
||
logoUrl={resolvedTheme === 'dark' ? settings.logoDark : settings.logoLight}
|
||
showHeaderName={settings.showHeaderName}
|
||
userMenu={
|
||
token ? (
|
||
<NavDropdown
|
||
title={
|
||
<span className="bb-user-menu">
|
||
<span className="bb-user-menu__name">{email}</span>
|
||
<i className="bi bi-caret-down-fill" aria-hidden="true" />
|
||
</span>
|
||
}
|
||
align="end"
|
||
className="bb-user-menu__dropdown"
|
||
>
|
||
<NavDropdown.Item as={Link} to="/ucp">
|
||
<i className="bi bi-sliders" aria-hidden="true" /> {t('portal.user_control_panel')}
|
||
</NavDropdown.Item>
|
||
<NavDropdown.Item as={Link} to={`/profile/${userId ?? ''}`}>
|
||
<i className="bi bi-person" aria-hidden="true" /> {t('portal.user_profile')}
|
||
</NavDropdown.Item>
|
||
<NavDropdown.Divider />
|
||
<NavDropdown.Item onClick={logout}>
|
||
<i className="bi bi-power" aria-hidden="true" /> {t('portal.user_logout')}
|
||
</NavDropdown.Item>
|
||
</NavDropdown>
|
||
) : null
|
||
}
|
||
canAccessAcp={isAdmin}
|
||
canAccessMcp={isModerator}
|
||
/>
|
||
<Suspense fallback={routeFallback}>
|
||
<Routes>
|
||
<Route path="/" element={<Home />} />
|
||
<Route path="/forums" element={<BoardIndex />} />
|
||
<Route path="/forum/:id" element={<ForumView />} />
|
||
<Route path="/thread/:id" element={<ThreadView />} />
|
||
<Route path="/login" element={<Login />} />
|
||
<Route path="/reset-password" element={<ResetPassword />} />
|
||
<Route path="/register" element={<Register />} />
|
||
<Route path="/profile/:id" element={<Profile />} />
|
||
<Route path="/acp/*" element={<Acp isAdmin={isAdmin} />} />
|
||
<Route
|
||
path="/ucp"
|
||
element={
|
||
<Ucp
|
||
theme={theme}
|
||
setTheme={setTheme}
|
||
accentOverride={accentOverride}
|
||
setAccentOverride={setAccentOverride}
|
||
/>
|
||
}
|
||
/>
|
||
</Routes>
|
||
</Suspense>
|
||
<footer className="bb-footer">
|
||
<div className="ms-3 d-flex align-items-center gap-3">
|
||
<span>{t('footer.copy')}</span>
|
||
{versionInfo?.version && (
|
||
<span className="bb-version">
|
||
<span className="bb-version-label">Version:</span>{' '}
|
||
<span className="bb-version-value">{versionInfo.version}</span>{' '}
|
||
<span className="bb-version-label">(build:</span>{' '}
|
||
<span className="bb-version-value">{versionInfo.build}</span>
|
||
<span className="bb-version-label">)</span>
|
||
</span>
|
||
)}
|
||
{availableBuild !== null && (
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
className="bb-accent-button"
|
||
onClick={() => window.location.reload()}
|
||
>
|
||
<i className="bi bi-arrow-clockwise me-2" aria-hidden="true" />
|
||
{t('version.update_available_short')} (build {availableBuild}) ·{' '}
|
||
{t('version.update_now')}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</footer>
|
||
<Modal show={showUpdateModal} onHide={() => setShowUpdateModal(false)} centered>
|
||
<Modal.Header closeButton>
|
||
<Modal.Title>{t('version.refresh_prompt_title')}</Modal.Title>
|
||
</Modal.Header>
|
||
<Modal.Body>
|
||
{t('version.refresh_prompt_body', { build: availableBuild ?? '-' })}
|
||
</Modal.Body>
|
||
<Modal.Footer className="justify-content-between">
|
||
<Button variant="outline-secondary" onClick={() => setShowUpdateModal(false)}>
|
||
<i className="bi bi-clock me-2" aria-hidden="true" />
|
||
{t('version.remind_later')}
|
||
</Button>
|
||
<Button className="bb-accent-button" onClick={() => window.location.reload()}>
|
||
<i className="bi bi-arrow-repeat me-2" aria-hidden="true" />
|
||
{t('version.update_now')}
|
||
</Button>
|
||
</Modal.Footer>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function App() {
|
||
return (
|
||
<AuthProvider>
|
||
<BrowserRouter>
|
||
<AppShell />
|
||
</BrowserRouter>
|
||
</AuthProvider>
|
||
)
|
||
}
|