finished laravel migration
This commit is contained in:
12
resources/css/app.css
Normal file
12
resources/css/app.css
Normal file
@@ -0,0 +1,12 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../storage/framework/views/*.php';
|
||||
@source '../**/*.blade.php';
|
||||
@source '../**/*.js';
|
||||
@source '../**/*.jsx';
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
}
|
||||
42
resources/js/App.css
Normal file
42
resources/js/App.css
Normal file
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
188
resources/js/App.jsx
Normal file
188
resources/js/App.jsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
|
||||
import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap'
|
||||
import { AuthProvider, useAuth } from './context/AuthContext'
|
||||
import Home from './pages/Home'
|
||||
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 { useTranslation } from 'react-i18next'
|
||||
import { fetchSetting, fetchVersion } from './api/client'
|
||||
|
||||
function Navigation({ theme, onThemeChange }) {
|
||||
const { token, email, logout, isAdmin } = useAuth()
|
||||
const { t, i18n } = useTranslation()
|
||||
|
||||
const handleLanguageChange = (locale) => {
|
||||
i18n.changeLanguage(locale)
|
||||
localStorage.setItem('speedbb_lang', locale)
|
||||
}
|
||||
|
||||
const handleThemeChange = (value) => {
|
||||
onThemeChange(value)
|
||||
localStorage.setItem('speedbb_theme', value)
|
||||
}
|
||||
|
||||
return (
|
||||
<Navbar expand="lg" className="bb-nav">
|
||||
<Container>
|
||||
<Navbar.Brand as={Link} to="/" className="fw-semibold">
|
||||
{t('app.brand')}
|
||||
</Navbar.Brand>
|
||||
{isAdmin && (
|
||||
<Nav className="me-auto">
|
||||
<Nav.Link as={Link} to="/acp">
|
||||
{t('nav.acp')}
|
||||
</Nav.Link>
|
||||
</Nav>
|
||||
)}
|
||||
<Navbar.Toggle aria-controls="bb-nav" />
|
||||
<Navbar.Collapse id="bb-nav">
|
||||
<Nav className="ms-auto align-items-lg-center gap-2">
|
||||
{!token && (
|
||||
<>
|
||||
<Nav.Link as={Link} to="/login">
|
||||
{t('nav.login')}
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/register">
|
||||
{t('nav.register')}
|
||||
</Nav.Link>
|
||||
</>
|
||||
)}
|
||||
{token && (
|
||||
<>
|
||||
<span className="bb-chip">{email}</span>
|
||||
<Nav.Link onClick={logout}>{t('nav.logout')}</Nav.Link>
|
||||
</>
|
||||
)}
|
||||
<NavDropdown title={t('nav.language')} align="end">
|
||||
<NavDropdown.Item onClick={() => handleLanguageChange('en')}>
|
||||
English
|
||||
</NavDropdown.Item>
|
||||
<NavDropdown.Item onClick={() => handleLanguageChange('de')}>
|
||||
Deutsch
|
||||
</NavDropdown.Item>
|
||||
</NavDropdown>
|
||||
<NavDropdown title={t('nav.theme')} align="end">
|
||||
<NavDropdown.Item onClick={() => handleThemeChange('auto')} active={theme === 'auto'}>
|
||||
{t('nav.theme_auto')}
|
||||
</NavDropdown.Item>
|
||||
<NavDropdown.Item onClick={() => handleThemeChange('light')} active={theme === 'light'}>
|
||||
{t('nav.theme_light')}
|
||||
</NavDropdown.Item>
|
||||
<NavDropdown.Item onClick={() => handleThemeChange('dark')} active={theme === 'dark'}>
|
||||
{t('nav.theme_dark')}
|
||||
</NavDropdown.Item>
|
||||
</NavDropdown>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
)
|
||||
}
|
||||
|
||||
function AppShell() {
|
||||
const { t } = useTranslation()
|
||||
const { isAdmin } = useAuth()
|
||||
const [loadMs, setLoadMs] = useState(null)
|
||||
const [versionInfo, setVersionInfo] = useState(null)
|
||||
const [theme, setTheme] = useState(() => localStorage.getItem('speedbb_theme') || 'auto')
|
||||
|
||||
useEffect(() => {
|
||||
const [entry] = performance.getEntriesByType('navigation')
|
||||
if (entry?.duration) {
|
||||
setLoadMs(Math.round(entry.duration))
|
||||
return
|
||||
}
|
||||
setLoadMs(Math.round(performance.now()))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchVersion()
|
||||
.then((data) => setVersionInfo(data))
|
||||
.catch(() => setVersionInfo(null))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchSetting('accent_color')
|
||||
.then((setting) => {
|
||||
if (setting?.value) {
|
||||
document.documentElement.style.setProperty('--bb-accent', setting.value)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement
|
||||
const media = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
|
||||
const applyTheme = (mode) => {
|
||||
if (mode === 'auto') {
|
||||
root.setAttribute('data-bs-theme', media.matches ? 'dark' : 'light')
|
||||
} else {
|
||||
root.setAttribute('data-bs-theme', mode)
|
||||
}
|
||||
}
|
||||
|
||||
applyTheme(theme)
|
||||
|
||||
const handleChange = () => {
|
||||
if (theme === 'auto') {
|
||||
applyTheme('auto')
|
||||
}
|
||||
}
|
||||
|
||||
media.addEventListener('change', handleChange)
|
||||
|
||||
return () => {
|
||||
media.removeEventListener('change', handleChange)
|
||||
}
|
||||
}, [theme])
|
||||
|
||||
return (
|
||||
<div className="bb-shell">
|
||||
<Navigation theme={theme} onThemeChange={setTheme} />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/forum/:id" element={<ForumView />} />
|
||||
<Route path="/thread/:id" element={<ThreadView />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/register" element={<Register />} />
|
||||
<Route path="/acp/*" element={<Acp isAdmin={isAdmin} />} />
|
||||
</Routes>
|
||||
<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>
|
||||
)}
|
||||
{loadMs !== null && (
|
||||
<span className="bb-load-time">
|
||||
<span className="bb-load-label">Page load time</span>{' '}
|
||||
<span className="bb-load-value">{loadMs}ms</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<BrowserRouter>
|
||||
<AppShell />
|
||||
</BrowserRouter>
|
||||
</AuthProvider>
|
||||
)
|
||||
}
|
||||
168
resources/js/api/client.js
Normal file
168
resources/js/api/client.js
Normal file
@@ -0,0 +1,168 @@
|
||||
const API_BASE = '/api'
|
||||
|
||||
async function parseResponse(response) {
|
||||
if (response.status === 204) {
|
||||
return null
|
||||
}
|
||||
const data = await response.json().catch(() => null)
|
||||
if (!response.ok) {
|
||||
const message = data?.message || data?.['hydra:description'] || response.statusText
|
||||
throw new Error(message)
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
export async function apiFetch(path, options = {}) {
|
||||
const token = localStorage.getItem('speedbb_token')
|
||||
const headers = {
|
||||
Accept: 'application/json',
|
||||
...(options.headers || {}),
|
||||
}
|
||||
if (!(options.body instanceof FormData)) {
|
||||
if (!headers['Content-Type']) {
|
||||
headers['Content-Type'] = 'application/json'
|
||||
}
|
||||
}
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
const response = await fetch(`${API_BASE}${path}`, {
|
||||
...options,
|
||||
headers,
|
||||
})
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('speedbb_token')
|
||||
localStorage.removeItem('speedbb_email')
|
||||
localStorage.removeItem('speedbb_user_id')
|
||||
localStorage.removeItem('speedbb_roles')
|
||||
window.dispatchEvent(new Event('speedbb-unauthorized'))
|
||||
}
|
||||
return parseResponse(response)
|
||||
}
|
||||
|
||||
export async function getCollection(path) {
|
||||
const data = await apiFetch(path)
|
||||
if (Array.isArray(data)) {
|
||||
return data
|
||||
}
|
||||
return data?.['hydra:member'] || []
|
||||
}
|
||||
|
||||
export async function login(email, password) {
|
||||
return apiFetch('/login', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ email, password }),
|
||||
})
|
||||
}
|
||||
|
||||
export async function registerUser({ email, username, plainPassword }) {
|
||||
return apiFetch('/register', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ email, username, plainPassword }),
|
||||
})
|
||||
}
|
||||
|
||||
export async function listRootForums() {
|
||||
return getCollection('/forums?parent[exists]=false')
|
||||
}
|
||||
|
||||
export async function listAllForums() {
|
||||
return getCollection('/forums?pagination=false')
|
||||
}
|
||||
|
||||
export async function fetchVersion() {
|
||||
return apiFetch('/version')
|
||||
}
|
||||
|
||||
export async function fetchSetting(key) {
|
||||
const data = await getCollection(`/settings?key=${encodeURIComponent(key)}&pagination=false`)
|
||||
return data[0] || null
|
||||
}
|
||||
|
||||
export async function listForumsByParent(parentId) {
|
||||
return getCollection(`/forums?parent=/api/forums/${parentId}`)
|
||||
}
|
||||
|
||||
export async function getForum(id) {
|
||||
return apiFetch(`/forums/${id}`)
|
||||
}
|
||||
|
||||
export async function createForum({ name, description, type, parentId }) {
|
||||
return apiFetch('/forums', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
description,
|
||||
type,
|
||||
parent: parentId ? `/api/forums/${parentId}` : null,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateForum(id, { name, description, type, parentId }) {
|
||||
return apiFetch(`/forums/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/merge-patch+json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
description,
|
||||
type,
|
||||
parent: parentId ? `/api/forums/${parentId}` : null,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function deleteForum(id) {
|
||||
return apiFetch(`/forums/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
export async function reorderForums(parentId, orderedIds) {
|
||||
return apiFetch('/forums/reorder', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
parentId,
|
||||
orderedIds,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function listThreadsByForum(forumId) {
|
||||
return getCollection(`/threads?forum=/api/forums/${forumId}`)
|
||||
}
|
||||
|
||||
export async function getThread(id) {
|
||||
return apiFetch(`/threads/${id}`)
|
||||
}
|
||||
|
||||
export async function listPostsByThread(threadId) {
|
||||
return getCollection(`/posts?thread=/api/threads/${threadId}`)
|
||||
}
|
||||
|
||||
export async function listUsers() {
|
||||
return getCollection('/users')
|
||||
}
|
||||
|
||||
export async function createThread({ title, body, forumId }) {
|
||||
return apiFetch('/threads', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
body,
|
||||
forum: `/api/forums/${forumId}`,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
export async function createPost({ body, threadId }) {
|
||||
return apiFetch('/posts', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
body,
|
||||
thread: `/api/threads/${threadId}`,
|
||||
}),
|
||||
})
|
||||
}
|
||||
1
resources/js/assets/react.svg
Normal file
1
resources/js/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
93
resources/js/context/AuthContext.jsx
Normal file
93
resources/js/context/AuthContext.jsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { createContext, useContext, useMemo, useState, useEffect } from 'react'
|
||||
import { login as apiLogin } from '../api/client'
|
||||
|
||||
const AuthContext = createContext(null)
|
||||
|
||||
export function AuthProvider({ children }) {
|
||||
const [token, setToken] = useState(() => localStorage.getItem('speedbb_token'))
|
||||
const [email, setEmail] = useState(() => localStorage.getItem('speedbb_email'))
|
||||
const [userId, setUserId] = useState(() => {
|
||||
const stored = localStorage.getItem('speedbb_user_id')
|
||||
if (stored) return stored
|
||||
return null
|
||||
})
|
||||
const [roles, setRoles] = useState(() => {
|
||||
const stored = localStorage.getItem('speedbb_roles')
|
||||
if (stored) return JSON.parse(stored)
|
||||
return []
|
||||
})
|
||||
|
||||
const effectiveRoles = token ? roles : []
|
||||
const effectiveUserId = token ? userId : null
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
token,
|
||||
email,
|
||||
userId: effectiveUserId,
|
||||
roles: effectiveRoles,
|
||||
isAdmin: effectiveRoles.includes('ROLE_ADMIN'),
|
||||
async login(emailInput, password) {
|
||||
const data = await apiLogin(emailInput, password)
|
||||
localStorage.setItem('speedbb_token', data.token)
|
||||
localStorage.setItem('speedbb_email', data.email || emailInput)
|
||||
if (data.user_id) {
|
||||
localStorage.setItem('speedbb_user_id', String(data.user_id))
|
||||
setUserId(String(data.user_id))
|
||||
}
|
||||
if (Array.isArray(data.roles)) {
|
||||
localStorage.setItem('speedbb_roles', JSON.stringify(data.roles))
|
||||
setRoles(data.roles)
|
||||
} else {
|
||||
localStorage.removeItem('speedbb_roles')
|
||||
setRoles([])
|
||||
}
|
||||
setToken(data.token)
|
||||
setEmail(data.email || emailInput)
|
||||
},
|
||||
logout() {
|
||||
localStorage.removeItem('speedbb_token')
|
||||
localStorage.removeItem('speedbb_email')
|
||||
localStorage.removeItem('speedbb_user_id')
|
||||
localStorage.removeItem('speedbb_roles')
|
||||
setToken(null)
|
||||
setEmail(null)
|
||||
setUserId(null)
|
||||
setRoles([])
|
||||
},
|
||||
}),
|
||||
[token, email, effectiveUserId, effectiveRoles]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const handleUnauthorized = () => {
|
||||
setToken(null)
|
||||
setEmail(null)
|
||||
setUserId(null)
|
||||
setRoles([])
|
||||
}
|
||||
|
||||
window.addEventListener('speedbb-unauthorized', handleUnauthorized)
|
||||
return () => window.removeEventListener('speedbb-unauthorized', handleUnauthorized)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('speedBB auth', {
|
||||
email,
|
||||
userId: effectiveUserId,
|
||||
roles: effectiveRoles,
|
||||
isAdmin: effectiveRoles.includes('ROLE_ADMIN'),
|
||||
hasToken: Boolean(token),
|
||||
})
|
||||
}, [email, effectiveUserId, effectiveRoles, token])
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const ctx = useContext(AuthContext)
|
||||
if (!ctx) {
|
||||
throw new Error('useAuth must be used within AuthProvider')
|
||||
}
|
||||
return ctx
|
||||
}
|
||||
25
resources/js/i18n.js
Normal file
25
resources/js/i18n.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import i18n from 'i18next'
|
||||
import HttpBackend from 'i18next-http-backend'
|
||||
import { initReactI18next } from 'react-i18next'
|
||||
|
||||
const storedLanguage = localStorage.getItem('speedbb_lang') || 'en'
|
||||
|
||||
i18n
|
||||
.use(HttpBackend)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
lng: storedLanguage,
|
||||
fallbackLng: 'en',
|
||||
supportedLngs: ['en', 'de'],
|
||||
backend: {
|
||||
loadPath: '/api/i18n/{{lng}}',
|
||||
},
|
||||
react: {
|
||||
useSuspense: false,
|
||||
},
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
})
|
||||
|
||||
export default i18n
|
||||
419
resources/js/index.css
Normal file
419
resources/js/index.css
Normal file
@@ -0,0 +1,419 @@
|
||||
:root {
|
||||
--bb-ink: #0e121b;
|
||||
--bb-ink-muted: #5b6678;
|
||||
--bb-cream: #f7f2ea;
|
||||
--bb-sand: #f0e6d6;
|
||||
--bb-teal: #157a6e;
|
||||
--bb-gold: #e4a634;
|
||||
--bb-peach: #f4c7a3;
|
||||
--bb-border: #e0d7c7;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
color: var(--bb-ink);
|
||||
background: var(--bb-page-bg, radial-gradient(circle at 10% 20%, #fff6e9 0%, #f4e7d5 40%, #e8d9c5 100%));
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bb-shell {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bb-nav {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(247, 242, 234, 0.9);
|
||||
border-bottom: 1px solid var(--bb-border);
|
||||
}
|
||||
|
||||
.bb-hero {
|
||||
background: linear-gradient(135deg, rgba(21, 122, 110, 0.08), rgba(228, 166, 52, 0.1));
|
||||
border: 1px solid var(--bb-border);
|
||||
border-radius: 18px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 18px 40px rgba(14, 18, 27, 0.08);
|
||||
}
|
||||
|
||||
.bb-card {
|
||||
border: 1px solid var(--bb-border);
|
||||
border-radius: 16px;
|
||||
background: #fffaf4;
|
||||
box-shadow: 0 12px 24px rgba(14, 18, 27, 0.06);
|
||||
}
|
||||
|
||||
.bb-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: var(--bb-sand);
|
||||
font-size: 0.85rem;
|
||||
color: var(--bb-ink-muted);
|
||||
}
|
||||
|
||||
.bb-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.bb-section-title::before {
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
background: var(--bb-teal);
|
||||
}
|
||||
|
||||
.bb-muted {
|
||||
color: var(--bb-ink-muted);
|
||||
}
|
||||
|
||||
.bb-form {
|
||||
background: #fff;
|
||||
border: 1px dashed var(--bb-border);
|
||||
border-radius: 16px;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
.bb-forum-row {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.bb-forum-row:hover {
|
||||
border-color: var(--bb-accent, #f29b3f);
|
||||
box-shadow: 0 10px 24px rgba(14, 18, 27, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.bb-forum-link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.bb-footer {
|
||||
margin-top: auto;
|
||||
padding: 2rem 0;
|
||||
color: var(--bb-ink-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--bb-ink: #e6e8eb;
|
||||
--bb-ink-muted: #9aa4b2;
|
||||
--bb-border: #2a2f3a;
|
||||
--bb-page-bg: radial-gradient(circle at 10% 20%, #141823 0%, #10131a 45%, #0b0e14 100%);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bb-nav {
|
||||
background: rgba(15, 18, 26, 0.9);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bb-hero {
|
||||
background: linear-gradient(135deg, rgba(21, 122, 110, 0.12), rgba(228, 166, 52, 0.08));
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bb-card,
|
||||
[data-bs-theme="dark"] .bb-form {
|
||||
background: #171b22;
|
||||
border-color: #2a2f3a;
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] .bb-forum-row {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bb-chip {
|
||||
background: #20252f;
|
||||
color: #c7cdd7;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bb-icon {
|
||||
background: rgba(21, 122, 110, 0.24);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bb-icon--forum {
|
||||
background: rgba(228, 166, 52, 0.25);
|
||||
color: #e0b26b;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bb-collapse-toggle {
|
||||
background: #0f1218;
|
||||
color: var(--bb-accent, #f29b3f);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.bb-collapse-toggle {
|
||||
color: var(--bb-accent, #f29b3f);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-outline-dark {
|
||||
color: #e6e8eb;
|
||||
border-color: #3a4150;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-outline-dark:hover,
|
||||
[data-bs-theme="dark"] .btn-outline-dark:focus {
|
||||
color: #0f1218;
|
||||
background-color: #e6e8eb;
|
||||
border-color: #e6e8eb;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link {
|
||||
color: var(--bb-accent, #f29b3f);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.bb-version {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bb-version-label {
|
||||
color: var(--bb-accent, #f29b3f);
|
||||
}
|
||||
|
||||
.bb-version-value {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bb-load-time {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bb-load-label {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.bb-load-value {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bb-user-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 0.35rem;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .rdt_Pagination {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bb-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid var(--bb-border);
|
||||
background: transparent;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bb-pagination-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.bb-pagination-actions button {
|
||||
border: 1px solid var(--bb-accent, #f29b3f);
|
||||
background: transparent;
|
||||
color: var(--bb-accent, #f29b3f);
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: 8px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.bb-pagination-actions button.is-active {
|
||||
background: var(--bb-accent, #f29b3f);
|
||||
color: #0e121b;
|
||||
}
|
||||
|
||||
.bb-pagination-actions button:disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.bb-accent-button {
|
||||
background: var(--bb-accent, #f29b3f);
|
||||
border-color: var(--bb-accent, #f29b3f);
|
||||
color: #0e121b;
|
||||
}
|
||||
|
||||
.bb-accent-button:hover,
|
||||
.bb-accent-button:focus {
|
||||
background: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
|
||||
border-color: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
|
||||
color: #0e121b;
|
||||
}
|
||||
|
||||
.modal-content .modal-header {
|
||||
background: #0f1218;
|
||||
color: #e6e8eb;
|
||||
border-bottom: 0;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content .modal-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-content .modal-header .btn-close {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
background: #ff5f57;
|
||||
border-radius: 999px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
order: -1;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.modal-content .modal-header .btn-close::before,
|
||||
.modal-content .modal-header .btn-close::after {
|
||||
display: none;
|
||||
}
|
||||
[data-bs-theme="dark"] .rdt_Pagination button,
|
||||
[data-bs-theme="dark"] .rdt_Pagination button svg {
|
||||
color: var(--bb-accent, #f29b3f);
|
||||
fill: var(--bb-accent, #f29b3f);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .rdt_Pagination button:disabled,
|
||||
[data-bs-theme="dark"] .rdt_Pagination button:disabled svg {
|
||||
color: color-mix(in srgb, var(--bb-accent, #f29b3f) 55%, #000);
|
||||
fill: color-mix(in srgb, var(--bb-accent, #f29b3f) 55%, #000);
|
||||
}
|
||||
|
||||
.bb-acp {
|
||||
max-width: 1880px;
|
||||
}
|
||||
|
||||
.bb-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(21, 122, 110, 0.14);
|
||||
color: var(--bb-teal);
|
||||
font-size: 1.35rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bb-icon--forum {
|
||||
background: rgba(228, 166, 52, 0.18);
|
||||
color: #a0601c;
|
||||
}
|
||||
|
||||
.bb-action-group .btn {
|
||||
background: var(--bb-accent, #f29b3f);
|
||||
border-color: var(--bb-accent, #f29b3f);
|
||||
color: #0e121b;
|
||||
padding: 0.55rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.bb-action-group .btn:disabled {
|
||||
opacity: 1;
|
||||
color: #0e121b;
|
||||
}
|
||||
|
||||
.bb-action-group .btn:hover,
|
||||
.bb-action-group .btn:focus {
|
||||
background: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
|
||||
border-color: color-mix(in srgb, var(--bb-accent, #f29b3f) 85%, #000);
|
||||
}
|
||||
|
||||
.bb-drag-handle {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bb-drag-item {
|
||||
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.bb-dragging {
|
||||
box-shadow: 0 12px 24px rgba(14, 18, 27, 0.22);
|
||||
transform: translateY(-2px);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.bb-drop-target {
|
||||
border: 2px dashed rgba(21, 122, 110, 0.75);
|
||||
background-color: rgba(21, 122, 110, 0.08);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(21, 122, 110, 0.25) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(21, 122, 110, 0.25) 50%,
|
||||
rgba(21, 122, 110, 0.25) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 18px 18px;
|
||||
animation: bb-marching-ants 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bb-marching-ants {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 18px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.bb-collapse-toggle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--bb-ink-muted);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(14, 18, 27, 0.12);
|
||||
}
|
||||
|
||||
.bb-collapse-toggle:hover {
|
||||
color: var(--bb-ink);
|
||||
}
|
||||
13
resources/js/main.jsx
Normal file
13
resources/js/main.jsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
import './index.css'
|
||||
import './i18n'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
786
resources/js/pages/Acp.jsx
Normal file
786
resources/js/pages/Acp.jsx
Normal file
@@ -0,0 +1,786 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Button, ButtonGroup, Col, Container, Form, Modal, Row, Tab, Tabs } from 'react-bootstrap'
|
||||
import DataTable, { createTheme } from 'react-data-table-component'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { createForum, deleteForum, listAllForums, listUsers, reorderForums, updateForum } from '../api/client'
|
||||
|
||||
export default function Acp({ isAdmin }) {
|
||||
const { t } = useTranslation()
|
||||
const [forums, setForums] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
const [draggingId, setDraggingId] = useState(null)
|
||||
const [overId, setOverId] = useState(null)
|
||||
const [createType, setCreateType] = useState(null)
|
||||
const [users, setUsers] = useState([])
|
||||
const [usersLoading, setUsersLoading] = useState(false)
|
||||
const [usersError, setUsersError] = useState('')
|
||||
const [usersPage, setUsersPage] = useState(1)
|
||||
const [usersPerPage, setUsersPerPage] = useState(10)
|
||||
const [themeMode, setThemeMode] = useState(
|
||||
document.documentElement.getAttribute('data-bs-theme') || 'light'
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
createTheme('speedbb-dark', {
|
||||
text: {
|
||||
primary: '#e6e8eb',
|
||||
secondary: '#9aa4b2',
|
||||
},
|
||||
background: {
|
||||
default: 'transparent',
|
||||
},
|
||||
context: {
|
||||
background: '#1a1f29',
|
||||
text: '#ffffff',
|
||||
},
|
||||
divider: {
|
||||
default: '#2a2f3a',
|
||||
},
|
||||
action: {
|
||||
button: 'rgba(230, 232, 235, 0.12)',
|
||||
hover: 'rgba(230, 232, 235, 0.08)',
|
||||
disabled: 'rgba(230, 232, 235, 0.35)',
|
||||
},
|
||||
})
|
||||
|
||||
createTheme('speedbb-light', {
|
||||
text: {
|
||||
primary: '#0e121b',
|
||||
secondary: '#5b6678',
|
||||
},
|
||||
background: {
|
||||
default: '#ffffff',
|
||||
},
|
||||
context: {
|
||||
background: '#f7f2ea',
|
||||
text: '#0e121b',
|
||||
},
|
||||
divider: {
|
||||
default: '#e0d7c7',
|
||||
},
|
||||
action: {
|
||||
button: 'rgba(14, 18, 27, 0.12)',
|
||||
hover: 'rgba(14, 18, 27, 0.06)',
|
||||
disabled: 'rgba(14, 18, 27, 0.35)',
|
||||
},
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new MutationObserver(() => {
|
||||
setThemeMode(document.documentElement.getAttribute('data-bs-theme') || 'light')
|
||||
})
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-bs-theme'],
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
const userColumns = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: t('user.name'),
|
||||
selector: (row) => row.name,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: t('user.email'),
|
||||
selector: (row) => row.email,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
width: '180px',
|
||||
right: true,
|
||||
cell: (row) => (
|
||||
<div className="bb-user-actions">
|
||||
<ButtonGroup className="bb-action-group">
|
||||
<Button
|
||||
variant="dark"
|
||||
title={t('user.impersonate')}
|
||||
onClick={() => console.log('impersonate', row)}
|
||||
>
|
||||
<i className="bi bi-person-badge" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="dark"
|
||||
title={t('user.edit')}
|
||||
onClick={() => console.log('edit user', row)}
|
||||
>
|
||||
<i className="bi bi-pencil" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="dark"
|
||||
title={t('user.delete')}
|
||||
onClick={() => console.log('delete user', row)}
|
||||
>
|
||||
<i className="bi bi-trash" aria-hidden="true" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[t]
|
||||
)
|
||||
const userTableStyles = useMemo(
|
||||
() => ({
|
||||
table: {
|
||||
style: {
|
||||
backgroundColor: themeMode === 'dark' ? 'transparent' : '#ffffff',
|
||||
},
|
||||
},
|
||||
headRow: {
|
||||
style: {
|
||||
backgroundColor: themeMode === 'dark' ? '#1a1f29' : '#f7f2ea',
|
||||
borderBottomColor: themeMode === 'dark' ? '#2a2f3a' : '#e0d7c7',
|
||||
color: themeMode === 'dark' ? '#e6e8eb' : '#0e121b',
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
rows: {
|
||||
style: {
|
||||
backgroundColor: themeMode === 'dark' ? 'rgba(255, 255, 255, 0.02)' : '#ffffff',
|
||||
color: themeMode === 'dark' ? '#e6e8eb' : '#0e121b',
|
||||
},
|
||||
stripedStyle: {
|
||||
backgroundColor: themeMode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : '#f7f2ea',
|
||||
color: themeMode === 'dark' ? '#e6e8eb' : '#0e121b',
|
||||
},
|
||||
highlightOnHoverStyle: {
|
||||
backgroundColor: themeMode === 'dark'
|
||||
? 'transparent'
|
||||
: 'rgba(0, 0, 0, 0.04)',
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
style: {
|
||||
backgroundColor: themeMode === 'dark' ? '#1a1f29' : '#ffffff',
|
||||
color: themeMode === 'dark' ? '#cfd6df' : '#5b6678',
|
||||
borderTopColor: themeMode === 'dark' ? '#2a2f3a' : '#e0d7c7',
|
||||
},
|
||||
},
|
||||
}),
|
||||
[themeMode]
|
||||
)
|
||||
|
||||
const UsersPagination = ({ rowsPerPage, rowCount, onChangePage }) => {
|
||||
const totalPages = Math.max(1, Math.ceil(rowCount / rowsPerPage))
|
||||
const current = Math.min(usersPage, totalPages)
|
||||
|
||||
const pages = []
|
||||
for (let page = Math.max(1, current - 2); page <= Math.min(totalPages, current + 2); page += 1) {
|
||||
pages.push(page)
|
||||
}
|
||||
|
||||
const goTo = (page) => {
|
||||
if (page < 1 || page > totalPages) return
|
||||
onChangePage(page, rowCount)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bb-pagination">
|
||||
<div className="bb-pagination-range">
|
||||
{t('table.rows_per_page')} {rowsPerPage}{' '}
|
||||
<span className="bb-muted">
|
||||
{((current - 1) * rowsPerPage) + 1}-{Math.min(current * rowsPerPage, rowCount)} {t('table.range_separator')} {rowCount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bb-pagination-actions">
|
||||
<button type="button" onClick={() => goTo(1)} disabled={current === 1}>
|
||||
«
|
||||
</button>
|
||||
<button type="button" onClick={() => goTo(current - 1)} disabled={current === 1}>
|
||||
‹
|
||||
</button>
|
||||
{pages.map((page) => (
|
||||
<button
|
||||
key={page}
|
||||
type="button"
|
||||
className={page === current ? 'is-active' : ''}
|
||||
onClick={() => goTo(page)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
<button type="button" onClick={() => goTo(current + 1)} disabled={current === totalPages}>
|
||||
›
|
||||
</button>
|
||||
<button type="button" onClick={() => goTo(totalPages)} disabled={current === totalPages}>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const [collapsed, setCollapsed] = useState(() => new Set())
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
type: 'category',
|
||||
parentId: '',
|
||||
})
|
||||
|
||||
const refreshForums = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const data = await listAllForums()
|
||||
setForums(data)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
refreshForums()
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
const refreshUsers = async () => {
|
||||
setUsersLoading(true)
|
||||
setUsersError('')
|
||||
try {
|
||||
const data = await listUsers()
|
||||
setUsers(data)
|
||||
} catch (err) {
|
||||
setUsersError(err.message)
|
||||
} finally {
|
||||
setUsersLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
refreshUsers()
|
||||
}
|
||||
}, [isAdmin])
|
||||
|
||||
const getParentId = (forum) => {
|
||||
if (!forum.parent) return null
|
||||
if (typeof forum.parent === 'string') {
|
||||
return forum.parent.split('/').pop()
|
||||
}
|
||||
return forum.parent.id ?? null
|
||||
}
|
||||
|
||||
const forumTree = useMemo(() => {
|
||||
const map = new Map()
|
||||
const roots = []
|
||||
|
||||
forums.forEach((forum) => {
|
||||
map.set(String(forum.id), { ...forum, children: [] })
|
||||
})
|
||||
|
||||
forums.forEach((forum) => {
|
||||
const parentId = getParentId(forum)
|
||||
const node = map.get(String(forum.id))
|
||||
if (parentId && map.has(String(parentId))) {
|
||||
map.get(String(parentId)).children.push(node)
|
||||
} else {
|
||||
roots.push(node)
|
||||
}
|
||||
})
|
||||
|
||||
const sortNodes = (nodes) => {
|
||||
nodes.sort((a, b) => {
|
||||
if (a.position !== b.position) return a.position - b.position
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
nodes.forEach((node) => sortNodes(node.children))
|
||||
}
|
||||
|
||||
sortNodes(roots)
|
||||
|
||||
return { roots, map }
|
||||
}, [forums])
|
||||
|
||||
const categoryOptions = useMemo(
|
||||
() => forums.filter((forum) => forum.type === 'category'),
|
||||
[forums]
|
||||
)
|
||||
|
||||
const handleSelectForum = (forum) => {
|
||||
const parentId =
|
||||
typeof forum.parent === 'string'
|
||||
? forum.parent.split('/').pop()
|
||||
: forum.parent?.id ?? ''
|
||||
setSelectedId(String(forum.id))
|
||||
setShowModal(true)
|
||||
setCreateType(null)
|
||||
setForm({
|
||||
name: forum.name || '',
|
||||
description: forum.description || '',
|
||||
type: forum.type || 'category',
|
||||
parentId: parentId ? String(parentId) : '',
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setSelectedId(null)
|
||||
setShowModal(false)
|
||||
setCreateType(null)
|
||||
setForm({
|
||||
name: '',
|
||||
description: '',
|
||||
type: 'category',
|
||||
parentId: '',
|
||||
})
|
||||
}
|
||||
|
||||
const isExpanded = (forumId) => {
|
||||
const key = String(forumId)
|
||||
return !collapsed.has(key)
|
||||
}
|
||||
|
||||
const toggleExpanded = (forumId) => {
|
||||
const key = String(forumId)
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(key)) {
|
||||
next.delete(key)
|
||||
} else {
|
||||
next.add(key)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const handleCollapseAll = () => {
|
||||
const ids = forums
|
||||
.filter((forum) => forum.type === 'category')
|
||||
.map((forum) => String(forum.id))
|
||||
setCollapsed(new Set(ids))
|
||||
}
|
||||
|
||||
const handleExpandAll = () => {
|
||||
setCollapsed(new Set())
|
||||
}
|
||||
|
||||
const handleStartCreate = (type) => {
|
||||
const current = selectedId
|
||||
setSelectedId(null)
|
||||
setShowModal(true)
|
||||
setCreateType(type)
|
||||
const parentFromSelection = current
|
||||
? forums.find((forum) => String(forum.id) === String(current))
|
||||
: null
|
||||
const parentId =
|
||||
parentFromSelection?.type === 'category' ? String(parentFromSelection.id) : ''
|
||||
setForm({
|
||||
name: '',
|
||||
description: '',
|
||||
type,
|
||||
parentId,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
setError('')
|
||||
const trimmedName = form.name.trim()
|
||||
if (!trimmedName) {
|
||||
setError(t('acp.forums_name_required'))
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (selectedId) {
|
||||
await updateForum(selectedId, {
|
||||
name: trimmedName,
|
||||
description: form.description,
|
||||
type: form.type,
|
||||
parentId: form.parentId || null,
|
||||
})
|
||||
} else {
|
||||
await createForum({
|
||||
name: trimmedName,
|
||||
description: form.description,
|
||||
type: form.type,
|
||||
parentId: form.parentId || null,
|
||||
})
|
||||
}
|
||||
handleReset()
|
||||
refreshForums()
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (forumId) => {
|
||||
setError('')
|
||||
if (!confirm(t('acp.forums_confirm_delete'))) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await deleteForum(forumId)
|
||||
if (selectedId === String(forumId)) {
|
||||
handleReset()
|
||||
}
|
||||
refreshForums()
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragStart = (event, forumId) => {
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
event.dataTransfer.setData('text/plain', String(forumId))
|
||||
setDraggingId(String(forumId))
|
||||
}
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggingId(null)
|
||||
setOverId(null)
|
||||
}
|
||||
|
||||
const applyLocalOrder = (parentId, orderedIds) => {
|
||||
setForums((prev) =>
|
||||
prev.map((forum) => {
|
||||
const pid = getParentId(forum)
|
||||
if (String(pid ?? '') !== String(parentId ?? '')) {
|
||||
return forum
|
||||
}
|
||||
const newIndex = orderedIds.indexOf(String(forum.id))
|
||||
return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
const handleDragOver = (event, targetId, parentId) => {
|
||||
event.preventDefault()
|
||||
event.dataTransfer.dropEffect = 'move'
|
||||
if (!draggingId || String(draggingId) === String(targetId)) {
|
||||
return
|
||||
}
|
||||
|
||||
const draggedForum = forums.find((forum) => String(forum.id) === String(draggingId))
|
||||
if (!draggedForum) {
|
||||
return
|
||||
}
|
||||
|
||||
const draggedParentId = getParentId(draggedForum)
|
||||
if (String(draggedParentId ?? '') !== String(parentId ?? '')) {
|
||||
return
|
||||
}
|
||||
|
||||
const siblings = forums.filter((forum) => {
|
||||
const pid = getParentId(forum)
|
||||
return String(pid ?? '') === String(parentId ?? '')
|
||||
})
|
||||
|
||||
const ordered = siblings
|
||||
.slice()
|
||||
.sort((a, b) => {
|
||||
if (a.position !== b.position) return a.position - b.position
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
.map((forum) => String(forum.id))
|
||||
|
||||
const fromIndex = ordered.indexOf(String(draggingId))
|
||||
const toIndex = ordered.indexOf(String(targetId))
|
||||
if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
|
||||
return
|
||||
}
|
||||
|
||||
ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])
|
||||
setOverId(String(targetId))
|
||||
applyLocalOrder(parentId, ordered)
|
||||
}
|
||||
|
||||
const handleDragEnter = (forumId) => {
|
||||
if (draggingId && String(forumId) !== String(draggingId)) {
|
||||
setOverId(String(forumId))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragLeave = (event, forumId) => {
|
||||
if (event.currentTarget.contains(event.relatedTarget)) {
|
||||
return
|
||||
}
|
||||
if (overId === String(forumId)) {
|
||||
setOverId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDrop = async (event, targetId, parentId) => {
|
||||
event.preventDefault()
|
||||
const draggedId = event.dataTransfer.getData('text/plain')
|
||||
if (!draggedId || String(draggedId) === String(targetId)) {
|
||||
setDraggingId(null)
|
||||
setOverId(null)
|
||||
return
|
||||
}
|
||||
|
||||
const siblings = forums.filter((forum) => {
|
||||
const pid = getParentId(forum)
|
||||
return String(pid ?? '') === String(parentId ?? '')
|
||||
})
|
||||
|
||||
const ordered = siblings
|
||||
.slice()
|
||||
.sort((a, b) => {
|
||||
if (a.position !== b.position) return a.position - b.position
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
.map((forum) => String(forum.id))
|
||||
|
||||
const fromIndex = ordered.indexOf(String(draggedId))
|
||||
const toIndex = ordered.indexOf(String(targetId))
|
||||
if (fromIndex === -1 || toIndex === -1) {
|
||||
return
|
||||
}
|
||||
|
||||
ordered.splice(toIndex, 0, ordered.splice(fromIndex, 1)[0])
|
||||
|
||||
try {
|
||||
await reorderForums(parentId, ordered)
|
||||
const updated = forums.map((forum) => {
|
||||
const pid = getParentId(forum)
|
||||
if (String(pid ?? '') !== String(parentId ?? '')) {
|
||||
return forum
|
||||
}
|
||||
const newIndex = ordered.indexOf(String(forum.id))
|
||||
return newIndex === -1 ? forum : { ...forum, position: newIndex + 1 }
|
||||
})
|
||||
setForums(updated)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setDraggingId(null)
|
||||
setOverId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const renderTree = (nodes, depth = 0) =>
|
||||
nodes.map((node) => (
|
||||
<div key={node.id}>
|
||||
<div
|
||||
className={`bb-drag-item d-flex align-items-center justify-content-between border rounded p-2 mb-2 ${
|
||||
overId === String(node.id) ? 'bb-drop-target' : ''
|
||||
} ${draggingId === String(node.id) ? 'bb-dragging' : ''}`}
|
||||
style={{ marginLeft: depth * 16 }}
|
||||
draggable
|
||||
onDragStart={(event) => handleDragStart(event, node.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragOver={(event) => handleDragOver(event, node.id, getParentId(node))}
|
||||
onDragEnter={() => handleDragEnter(node.id)}
|
||||
onDragLeave={(event) => handleDragLeave(event, node.id)}
|
||||
onDrop={(event) => handleDrop(event, node.id, getParentId(node))}
|
||||
>
|
||||
<div className="d-flex align-items-start gap-3">
|
||||
<span className={`bb-icon ${node.type === 'forum' ? 'bb-icon--forum' : ''}`}>
|
||||
<i className={`bi ${node.type === 'category' ? 'bi-folder2' : 'bi-chat-left-text'}`} />
|
||||
{node.type === 'category' && node.children?.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="bb-collapse-toggle"
|
||||
onClick={() => toggleExpanded(node.id)}
|
||||
aria-label={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
|
||||
title={isExpanded(node.id) ? t('acp.collapse') : t('acp.expand')}
|
||||
>
|
||||
<i
|
||||
className={`bi ${
|
||||
isExpanded(node.id) ? 'bi-caret-down-fill' : 'bi-caret-right-fill'
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
<div>
|
||||
<div className="fw-semibold d-flex align-items-center gap-2">
|
||||
<span>{node.name}</span>
|
||||
</div>
|
||||
<div className="bb-muted">{node.description || t('forum.no_description')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<span
|
||||
className="bb-drag-handle text-muted"
|
||||
style={{ cursor: 'grab', display: 'inline-flex' }}
|
||||
title={t('acp.drag_handle')}
|
||||
>
|
||||
<i className="bi bi-arrow-down-up" aria-hidden="true" />
|
||||
</span>
|
||||
<ButtonGroup size="sm" className="bb-action-group">
|
||||
<Button variant="dark" onClick={() => handleSelectForum(node)} title={t('acp.edit')}>
|
||||
<i className="bi bi-pencil" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button variant="dark" onClick={() => handleDelete(node.id)} title={t('acp.delete')}>
|
||||
<i className="bi bi-trash" aria-hidden="true" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
{node.children?.length > 0 &&
|
||||
(!node.type || node.type !== 'category' || isExpanded(node.id)) && (
|
||||
<div className="mb-2">{renderTree(node.children, depth + 1)}</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<Container className="py-5">
|
||||
<h2 className="mb-3">{t('acp.title')}</h2>
|
||||
<p className="bb-muted">{t('acp.no_access')}</p>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Container fluid className="bb-acp py-4">
|
||||
<h2 className="mb-4">{t('acp.title')}</h2>
|
||||
<Tabs defaultActiveKey="general" className="mb-3">
|
||||
<Tab eventKey="general" title={t('acp.general')}>
|
||||
<p className="bb-muted">{t('acp.general_hint')}</p>
|
||||
</Tab>
|
||||
<Tab eventKey="forums" title={t('acp.forums')}>
|
||||
<p className="bb-muted">{t('acp.forums_hint')}</p>
|
||||
{error && <p className="text-danger">{error}</p>}
|
||||
<Row className="g-4">
|
||||
<Col lg={12}>
|
||||
<div className="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<h5 className="mb-0">{t('acp.forums_tree')}</h5>
|
||||
<Button size="sm" variant="outline-dark" onClick={handleExpandAll}>
|
||||
<i className="bi bi-arrows-expand me-1" aria-hidden="true" />
|
||||
{t('acp.expand_all')}
|
||||
</Button>
|
||||
<Button size="sm" variant="outline-dark" onClick={handleCollapseAll}>
|
||||
<i className="bi bi-arrows-collapse me-1" aria-hidden="true" />
|
||||
{t('acp.collapse_all')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={createType === 'category' ? 'dark' : 'outline-dark'}
|
||||
onClick={() => handleStartCreate('category')}
|
||||
>
|
||||
<i className="bi bi-folder2 me-1" aria-hidden="true" />
|
||||
{t('acp.new_category')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={createType === 'forum' ? 'dark' : 'outline-dark'}
|
||||
onClick={() => handleStartCreate('forum')}
|
||||
>
|
||||
<i className="bi bi-chat-left-text me-1" aria-hidden="true" />
|
||||
{t('acp.new_forum')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{loading && <p className="bb-muted">{t('acp.loading')}</p>}
|
||||
{!loading && forumTree.roots.length === 0 && (
|
||||
<p className="bb-muted">{t('acp.forums_empty')}</p>
|
||||
)}
|
||||
{forumTree.roots.length > 0 && (
|
||||
<div className="mt-2">{renderTree(forumTree.roots)}</div>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Tab>
|
||||
<Tab eventKey="users" title={t('acp.users')}>
|
||||
{usersError && <p className="text-danger">{usersError}</p>}
|
||||
{usersLoading && <p className="bb-muted">{t('acp.loading')}</p>}
|
||||
{!usersLoading && (
|
||||
<DataTable
|
||||
columns={userColumns}
|
||||
data={users}
|
||||
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'),
|
||||
}}
|
||||
paginationPerPage={usersPerPage}
|
||||
onChangePage={(page) => setUsersPage(page)}
|
||||
onChangeRowsPerPage={(perPage) => {
|
||||
setUsersPerPage(perPage)
|
||||
setUsersPage(1)
|
||||
}}
|
||||
paginationComponent={UsersPagination}
|
||||
/>
|
||||
)}
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<Modal show={showModal} onHide={handleReset} centered size="lg">
|
||||
<Modal.Header closeButton closeVariant="white">
|
||||
<Modal.Title>
|
||||
{selectedId ? t('acp.forums_edit_title') : t('acp.forums_create_title')}
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<p className="bb-muted">{t('acp.forums_form_hint')}</p>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.title')}</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(event) => setForm({ ...form, name: event.target.value })}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.description')}</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={3}
|
||||
value={form.description}
|
||||
onChange={(event) => setForm({ ...form, description: event.target.value })}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('acp.forums_type')}</Form.Label>
|
||||
<Form.Select
|
||||
value={form.type}
|
||||
onChange={(event) => setForm({ ...form, type: event.target.value })}
|
||||
>
|
||||
<option value="category">{t('forum.type_category')}</option>
|
||||
<option value="forum">{t('forum.type_forum')}</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('acp.forums_parent')}</Form.Label>
|
||||
<Form.Select
|
||||
value={form.parentId}
|
||||
onChange={(event) => setForm({ ...form, parentId: event.target.value })}
|
||||
>
|
||||
<option value="">{t('acp.forums_parent_root')}</option>
|
||||
{categoryOptions
|
||||
.filter((option) => String(option.id) !== String(selectedId))
|
||||
.map((option) => (
|
||||
<option key={option.id} value={option.id}>
|
||||
{option.name}
|
||||
</option>
|
||||
))}
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<div className="d-flex gap-2 justify-content-between">
|
||||
<Button type="button" variant="outline-secondary" onClick={handleReset}>
|
||||
{t('acp.cancel')}
|
||||
</Button>
|
||||
<Button type="submit" className="bb-accent-button">
|
||||
{selectedId ? t('acp.save') : t('acp.create')}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
180
resources/js/pages/ForumView.jsx
Normal file
180
resources/js/pages/ForumView.jsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { createThread, getForum, listForumsByParent, listThreadsByForum } from '../api/client'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function ForumView() {
|
||||
const { id } = useParams()
|
||||
const { token } = useAuth()
|
||||
const [forum, setForum] = useState(null)
|
||||
const [children, setChildren] = useState([])
|
||||
const [threads, setThreads] = useState([])
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [title, setTitle] = useState('')
|
||||
const [body, setBody] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const forumData = await getForum(id)
|
||||
if (!active) return
|
||||
setForum(forumData)
|
||||
const childData = await listForumsByParent(id)
|
||||
if (!active) return
|
||||
setChildren(childData)
|
||||
if (forumData.type === 'forum') {
|
||||
const threadData = await listThreadsByForum(id)
|
||||
if (!active) return
|
||||
setThreads(threadData)
|
||||
} else {
|
||||
setThreads([])
|
||||
}
|
||||
} catch (err) {
|
||||
if (active) setError(err.message)
|
||||
} finally {
|
||||
if (active) setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
loadData()
|
||||
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
setSaving(true)
|
||||
setError('')
|
||||
try {
|
||||
await createThread({ title, body, forumId: id })
|
||||
setTitle('')
|
||||
setBody('')
|
||||
const updated = await listThreadsByForum(id)
|
||||
setThreads(updated)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container className="py-5">
|
||||
{loading && <p className="bb-muted">{t('forum.loading')}</p>}
|
||||
{error && <p className="text-danger">{error}</p>}
|
||||
{forum && (
|
||||
<>
|
||||
<div className="bb-hero mb-4">
|
||||
<p className="bb-chip">
|
||||
{forum.type === 'forum' ? t('forum.type_forum') : t('forum.type_category')}
|
||||
</p>
|
||||
<h2 className="mt-3">{forum.name}</h2>
|
||||
<p className="bb-muted mb-0">
|
||||
{forum.description || t('forum.no_description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Row className="g-4">
|
||||
<Col lg={7}>
|
||||
<h4 className="bb-section-title mb-3">{t('forum.children')}</h4>
|
||||
{children.length === 0 && (
|
||||
<p className="bb-muted">{t('forum.empty_children')}</p>
|
||||
)}
|
||||
{children.map((child) => (
|
||||
<Card className="bb-card mb-3" key={child.id}>
|
||||
<Card.Body>
|
||||
<Card.Title>{child.name}</Card.Title>
|
||||
<Card.Text className="bb-muted">
|
||||
{child.description || t('forum.no_description')}
|
||||
</Card.Text>
|
||||
<Link to={`/forum/${child.id}`} className="stretched-link">
|
||||
{t('forum.open')}
|
||||
</Link>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{forum.type === 'forum' && (
|
||||
<>
|
||||
<h4 className="bb-section-title mb-3 mt-4">{t('forum.threads')}</h4>
|
||||
{threads.length === 0 && (
|
||||
<p className="bb-muted">{t('forum.empty_threads')}</p>
|
||||
)}
|
||||
{threads.map((thread) => (
|
||||
<Card className="bb-card mb-3" key={thread.id}>
|
||||
<Card.Body>
|
||||
<Card.Title>{thread.title}</Card.Title>
|
||||
<Card.Text className="bb-muted">
|
||||
{thread.body.length > 160
|
||||
? `${thread.body.slice(0, 160)}...`
|
||||
: thread.body}
|
||||
</Card.Text>
|
||||
<Link to={`/thread/${thread.id}`} className="stretched-link">
|
||||
{t('thread.view')}
|
||||
</Link>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
<Col lg={5}>
|
||||
<h4 className="bb-section-title mb-3">{t('forum.start_thread')}</h4>
|
||||
<div className="bb-form">
|
||||
{forum.type !== 'forum' && (
|
||||
<p className="bb-muted mb-3">{t('forum.only_forums')}</p>
|
||||
)}
|
||||
{forum.type === 'forum' && !token && (
|
||||
<p className="bb-muted mb-3">{t('forum.login_hint')}</p>
|
||||
)}
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.title')}</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder={t('form.thread_title_placeholder')}
|
||||
value={title}
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
disabled={!token || saving || forum.type !== 'forum'}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.body')}</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={5}
|
||||
placeholder={t('form.thread_body_placeholder')}
|
||||
value={body}
|
||||
onChange={(event) => setBody(event.target.value)}
|
||||
disabled={!token || saving || forum.type !== 'forum'}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="dark"
|
||||
disabled={!token || saving || forum.type !== 'forum'}
|
||||
>
|
||||
{saving ? t('form.posting') : t('form.create_thread')}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
103
resources/js/pages/Home.jsx
Normal file
103
resources/js/pages/Home.jsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Container } from 'react-bootstrap'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { listAllForums } from '../api/client'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function Home() {
|
||||
const [forums, setForums] = useState([])
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const { t } = useTranslation()
|
||||
|
||||
useEffect(() => {
|
||||
listAllForums()
|
||||
.then(setForums)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
const getParentId = (forum) => {
|
||||
if (!forum.parent) return null
|
||||
if (typeof forum.parent === 'string') {
|
||||
return forum.parent.split('/').pop()
|
||||
}
|
||||
return forum.parent.id ?? null
|
||||
}
|
||||
|
||||
const forumTree = useMemo(() => {
|
||||
const map = new Map()
|
||||
const roots = []
|
||||
|
||||
forums.forEach((forum) => {
|
||||
map.set(String(forum.id), { ...forum, children: [] })
|
||||
})
|
||||
|
||||
forums.forEach((forum) => {
|
||||
const parentId = getParentId(forum)
|
||||
const node = map.get(String(forum.id))
|
||||
if (parentId && map.has(String(parentId))) {
|
||||
map.get(String(parentId)).children.push(node)
|
||||
} else {
|
||||
roots.push(node)
|
||||
}
|
||||
})
|
||||
|
||||
const sortNodes = (nodes) => {
|
||||
nodes.sort((a, b) => {
|
||||
if (a.position !== b.position) return a.position - b.position
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
nodes.forEach((node) => sortNodes(node.children))
|
||||
}
|
||||
|
||||
sortNodes(roots)
|
||||
|
||||
return roots
|
||||
}, [forums])
|
||||
|
||||
const renderTree = (nodes, depth = 0) =>
|
||||
nodes.map((node) => (
|
||||
<div key={node.id}>
|
||||
<div
|
||||
className="bb-forum-row border rounded p-3 mb-2 d-flex align-items-center justify-content-between"
|
||||
style={{ marginLeft: depth * 16 }}
|
||||
>
|
||||
<div className="d-flex align-items-start gap-3">
|
||||
<span className={`bb-icon ${node.type === 'forum' ? 'bb-icon--forum' : ''}`}>
|
||||
<i className={`bi ${node.type === 'category' ? 'bi-folder2' : 'bi-chat-left-text'}`} />
|
||||
</span>
|
||||
<div>
|
||||
<Link to={`/forum/${node.id}`} className="bb-forum-link fw-semibold">
|
||||
{node.name}
|
||||
</Link>
|
||||
<div className="bb-muted">{node.description || t('forum.no_description')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{node.children?.length > 0 && (
|
||||
<div className="mb-2">{renderTree(node.children, depth + 1)}</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
|
||||
return (
|
||||
<Container className="py-5">
|
||||
<div className="bb-hero mb-4">
|
||||
<p className="bb-chip">{t('app.brand')}</p>
|
||||
<h1 className="mt-3">{t('home.hero_title')}</h1>
|
||||
<p className="bb-muted mb-0">
|
||||
{t('home.hero_body')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 className="bb-section-title mb-3">{t('home.browse')}</h3>
|
||||
{loading && <p className="bb-muted">{t('home.loading')}</p>}
|
||||
{error && <p className="text-danger">{error}</p>}
|
||||
{!loading && forumTree.length === 0 && (
|
||||
<p className="bb-muted">{t('home.empty')}</p>
|
||||
)}
|
||||
{forumTree.length > 0 && <div className="mt-2">{renderTree(forumTree)}</div>}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
64
resources/js/pages/Login.jsx
Normal file
64
resources/js/pages/Login.jsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Container, Form } from 'react-bootstrap'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function Login() {
|
||||
const { login } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
try {
|
||||
await login(email, password)
|
||||
navigate('/')
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container className="py-5">
|
||||
<Card className="bb-card mx-auto" style={{ maxWidth: '480px' }}>
|
||||
<Card.Body>
|
||||
<Card.Title className="mb-3">{t('auth.login_title')}</Card.Title>
|
||||
<Card.Text className="bb-muted">{t('auth.login_hint')}</Card.Text>
|
||||
{error && <p className="text-danger">{error}</p>}
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.email')}</Form.Label>
|
||||
<Form.Control
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-4">
|
||||
<Form.Label>{t('form.password')}</Form.Label>
|
||||
<Form.Control
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button type="submit" variant="dark" disabled={loading}>
|
||||
{loading ? t('form.signing_in') : t('form.sign_in')}
|
||||
</Button>
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
80
resources/js/pages/Register.jsx
Normal file
80
resources/js/pages/Register.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Container, Form } from 'react-bootstrap'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { registerUser } from '../api/client'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function Register() {
|
||||
const navigate = useNavigate()
|
||||
const [email, setEmail] = useState('')
|
||||
const [username, setUsername] = useState('')
|
||||
const [plainPassword, setPlainPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [notice, setNotice] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
setError('')
|
||||
setNotice('')
|
||||
setLoading(true)
|
||||
try {
|
||||
await registerUser({ email, username, plainPassword })
|
||||
setNotice(t('auth.verify_notice'))
|
||||
setEmail('')
|
||||
setUsername('')
|
||||
setPlainPassword('')
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container className="py-5">
|
||||
<Card className="bb-card mx-auto" style={{ maxWidth: '520px' }}>
|
||||
<Card.Body>
|
||||
<Card.Title className="mb-3">{t('auth.register_title')}</Card.Title>
|
||||
<Card.Text className="bb-muted">{t('auth.register_hint')}</Card.Text>
|
||||
{error && <p className="text-danger">{error}</p>}
|
||||
{notice && <p className="text-success">{notice}</p>}
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.email')}</Form.Label>
|
||||
<Form.Control
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.username')}</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(event) => setUsername(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-4">
|
||||
<Form.Label>{t('form.password')}</Form.Label>
|
||||
<Form.Control
|
||||
type="password"
|
||||
value={plainPassword}
|
||||
onChange={(event) => setPlainPassword(event.target.value)}
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button type="submit" variant="dark" disabled={loading}>
|
||||
{loading ? t('form.registering') : t('form.create_account')}
|
||||
</Button>
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
113
resources/js/pages/ThreadView.jsx
Normal file
113
resources/js/pages/ThreadView.jsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { createPost, getThread, listPostsByThread } from '../api/client'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function ThreadView() {
|
||||
const { id } = useParams()
|
||||
const { token } = useAuth()
|
||||
const [thread, setThread] = useState(null)
|
||||
const [posts, setPosts] = useState([])
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [body, setBody] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
Promise.all([getThread(id), listPostsByThread(id)])
|
||||
.then(([threadData, postData]) => {
|
||||
setThread(threadData)
|
||||
setPosts(postData)
|
||||
})
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
setSaving(true)
|
||||
setError('')
|
||||
try {
|
||||
await createPost({ body, threadId: id })
|
||||
setBody('')
|
||||
const updated = await listPostsByThread(id)
|
||||
setPosts(updated)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container className="py-5">
|
||||
{loading && <p className="bb-muted">{t('thread.loading')}</p>}
|
||||
{error && <p className="text-danger">{error}</p>}
|
||||
{thread && (
|
||||
<>
|
||||
<div className="bb-hero mb-4">
|
||||
<p className="bb-chip">{t('thread.label')}</p>
|
||||
<h2 className="mt-3">{thread.title}</h2>
|
||||
<p className="bb-muted mb-2">{thread.body}</p>
|
||||
{thread.forum && (
|
||||
<p className="bb-muted mb-0">
|
||||
{t('thread.category')}{' '}
|
||||
<Link to={`/forum/${thread.forum.id || thread.forum.split('/').pop()}`}>
|
||||
{thread.forum.name || t('thread.back_to_category')}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Row className="g-4">
|
||||
<Col lg={7}>
|
||||
<h4 className="bb-section-title mb-3">{t('thread.replies')}</h4>
|
||||
{posts.length === 0 && (
|
||||
<p className="bb-muted">{t('thread.empty')}</p>
|
||||
)}
|
||||
{posts.map((post) => (
|
||||
<Card className="bb-card mb-3" key={post.id}>
|
||||
<Card.Body>
|
||||
<Card.Text>{post.body}</Card.Text>
|
||||
<small className="bb-muted">
|
||||
{post.author?.username || t('thread.anonymous')}
|
||||
</small>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
))}
|
||||
</Col>
|
||||
<Col lg={5}>
|
||||
<h4 className="bb-section-title mb-3">{t('thread.reply')}</h4>
|
||||
<div className="bb-form">
|
||||
{!token && (
|
||||
<p className="bb-muted mb-3">{t('thread.login_hint')}</p>
|
||||
)}
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>{t('form.message')}</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={5}
|
||||
placeholder={t('form.reply_placeholder')}
|
||||
value={body}
|
||||
onChange={(event) => setBody(event.target.value)}
|
||||
disabled={!token || saving}
|
||||
required
|
||||
/>
|
||||
</Form.Group>
|
||||
<Button type="submit" variant="dark" disabled={!token || saving}>
|
||||
{saving ? t('form.posting') : t('form.post_reply')}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
105
resources/lang/de.json
Normal file
105
resources/lang/de.json
Normal file
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"acp.cancel": "Abbrechen",
|
||||
"acp.collapse_all": "Alle einklappen",
|
||||
"acp.create": "Erstellen",
|
||||
"acp.delete": "Löschen",
|
||||
"acp.drag_handle": "Zum Sortieren ziehen",
|
||||
"acp.edit": "Bearbeiten",
|
||||
"acp.expand_all": "Alle ausklappen",
|
||||
"acp.forums": "Foren",
|
||||
"acp.forums_confirm_delete": "Dieses Forum löschen? Das kann nicht rückgängig gemacht werden.",
|
||||
"acp.forums_create_title": "Forum oder Kategorie erstellen",
|
||||
"acp.forums_edit_title": "Forum bearbeiten",
|
||||
"acp.forums_empty": "Noch keine Foren vorhanden. Lege rechts das erste an.",
|
||||
"acp.forums_form_empty_hint": "Wähle ein Forum zum Bearbeiten oder klicke auf Neue Kategorie / Neues Forum.",
|
||||
"acp.forums_form_empty_title": "Keine Auswahl",
|
||||
"acp.forums_form_hint": "Erstelle ein neues Forum oder bearbeite das ausgewählte. Kategorien können Foren und andere Kategorien enthalten.",
|
||||
"acp.forums_hint": "Kategorien und Foren in einer Baumansicht verwalten.",
|
||||
"acp.forums_name_required": "Bitte zuerst einen Namen eingeben.",
|
||||
"acp.forums_parent": "Ãbergeordnete Kategorie",
|
||||
"acp.forums_parent_root": "Wurzel (kein Parent)",
|
||||
"acp.forums_tree": "Forenbaum",
|
||||
"acp.forums_type": "Typ",
|
||||
"acp.general": "Allgemein",
|
||||
"acp.general_hint": "Globale Einstellungen und Board-Konfiguration erscheinen hier.",
|
||||
"acp.loading": "Laden...",
|
||||
"acp.new_category": "Neue Kategorie",
|
||||
"acp.new_forum": "Neues Forum",
|
||||
"acp.no_access": "Du hast keinen Zugriff auf diesen Bereich.",
|
||||
"acp.refresh": "Aktualisieren",
|
||||
"acp.reset": "Zurücksetzen",
|
||||
"acp.save": "Speichern",
|
||||
"acp.title": "Administrationsbereich",
|
||||
"acp.users": "Benutzer",
|
||||
"app.brand": "speedBB",
|
||||
"auth.login_hint": "Melde dich an, um neue Threads zu starten und zu antworten.",
|
||||
"auth.login_title": "Anmelden",
|
||||
"auth.register_hint": "Registriere dich mit E-Mail und einem eindeutigen Benutzernamen.",
|
||||
"auth.verify_notice": "Bitte bestätige deine E-Mail-Adresse, bevor du dich anmeldest.",
|
||||
"auth.register_title": "Konto erstellen",
|
||||
"footer.copy": "speedBB",
|
||||
"form.body": "Inhalt",
|
||||
"form.create_account": "Konto erstellen",
|
||||
"form.create_thread": "Thread erstellen",
|
||||
"form.description": "Beschreibung",
|
||||
"form.email": "E-Mail",
|
||||
"form.message": "Nachricht",
|
||||
"form.password": "Passwort",
|
||||
"form.post_reply": "Antwort posten",
|
||||
"form.posting": "Wird gesendet...",
|
||||
"form.registering": "Registrierung läuft...",
|
||||
"form.reply_placeholder": "Schreibe deine Antwort.",
|
||||
"form.sign_in": "Anmelden",
|
||||
"form.signing_in": "Anmeldung läuft...",
|
||||
"form.thread_body_placeholder": "Teile den Kontext und deine Frage.",
|
||||
"form.thread_title_placeholder": "Thema",
|
||||
"form.title": "Titel",
|
||||
"form.username": "Benutzername",
|
||||
"forum.children": "Unterforen",
|
||||
"forum.empty_children": "Noch keine Unterforen vorhanden.",
|
||||
"forum.empty_threads": "Noch keine Threads vorhanden. Starte unten einen.",
|
||||
"forum.loading": "Forum wird geladen...",
|
||||
"forum.login_hint": "Melde dich an, um einen neuen Thread zu erstellen.",
|
||||
"forum.no_description": "Noch keine Beschreibung vorhanden.",
|
||||
"forum.only_forums": "Threads können nur in Foren erstellt werden.",
|
||||
"forum.open": "Forum öffnen",
|
||||
"forum.start_thread": "Thread starten",
|
||||
"forum.threads": "Threads",
|
||||
"forum.type_category": "Kategorie",
|
||||
"forum.type_forum": "Forum",
|
||||
"user.id": "ID",
|
||||
"user.name": "Name",
|
||||
"user.email": "E-Mail",
|
||||
"user.roles": "Rollen",
|
||||
"user.actions": "Aktionen",
|
||||
"user.impersonate": "Imitieren",
|
||||
"user.edit": "Bearbeiten",
|
||||
"user.delete": "Löschen",
|
||||
"table.rows_per_page": "Zeilen pro Seite:",
|
||||
"table.range_separator": "von",
|
||||
"home.browse": "Foren durchsuchen",
|
||||
"home.empty": "Noch keine Foren vorhanden. Lege das erste Forum in der API an.",
|
||||
"home.hero_body": "Entdecke Diskussionen, stelle Fragen und teile Ideen in Kategorien und Foren.",
|
||||
"home.hero_title": "Foren",
|
||||
"home.loading": "Foren werden geladen...",
|
||||
"nav.acp": "ACP",
|
||||
"nav.forums": "Foren",
|
||||
"nav.language": "Sprache",
|
||||
"nav.login": "Anmelden",
|
||||
"nav.logout": "Abmelden",
|
||||
"nav.register": "Registrieren",
|
||||
"nav.theme": "Design",
|
||||
"nav.theme_auto": "Auto",
|
||||
"nav.theme_dark": "Dunkel",
|
||||
"nav.theme_light": "Hell",
|
||||
"thread.anonymous": "Anonym",
|
||||
"thread.back_to_category": "Zurück zum Forum",
|
||||
"thread.category": "Forum:",
|
||||
"thread.empty": "Sei die erste Person, die antwortet.",
|
||||
"thread.label": "Thread",
|
||||
"thread.loading": "Thread wird geladen...",
|
||||
"thread.login_hint": "Melde dich an, um auf diesen Thread zu antworten.",
|
||||
"thread.replies": "Antworten",
|
||||
"thread.reply": "Antworten",
|
||||
"thread.view": "Thread ansehen"
|
||||
}
|
||||
105
resources/lang/en.json
Normal file
105
resources/lang/en.json
Normal file
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"acp.cancel": "Cancel",
|
||||
"acp.collapse_all": "Collapse all",
|
||||
"acp.create": "Create",
|
||||
"acp.delete": "Delete",
|
||||
"acp.drag_handle": "Drag to reorder",
|
||||
"acp.edit": "Edit",
|
||||
"acp.expand_all": "Expand all",
|
||||
"acp.forums": "Forums",
|
||||
"acp.forums_confirm_delete": "Delete this forum? This cannot be undone.",
|
||||
"acp.forums_create_title": "Create forum or category",
|
||||
"acp.forums_edit_title": "Edit forum",
|
||||
"acp.forums_empty": "No forums yet. Create the first one on the right.",
|
||||
"acp.forums_form_empty_hint": "Choose a forum to edit or click New category / New forum to create one.",
|
||||
"acp.forums_form_empty_title": "No selection",
|
||||
"acp.forums_form_hint": "Create a new forum or edit the selected one. Categories can contain forums and other categories.",
|
||||
"acp.forums_hint": "Manage categories and forums from a tree view.",
|
||||
"acp.forums_name_required": "Please enter a name before saving.",
|
||||
"acp.forums_parent": "Parent category",
|
||||
"acp.forums_parent_root": "Root (no parent)",
|
||||
"acp.forums_tree": "Forum tree",
|
||||
"acp.forums_type": "Type",
|
||||
"acp.general": "General",
|
||||
"acp.general_hint": "Global settings and board configuration will appear here.",
|
||||
"acp.loading": "Loading...",
|
||||
"acp.new_category": "New category",
|
||||
"acp.new_forum": "New forum",
|
||||
"acp.no_access": "You do not have access to this area.",
|
||||
"acp.refresh": "Refresh",
|
||||
"acp.reset": "Reset",
|
||||
"acp.save": "Save",
|
||||
"acp.title": "Admin control panel",
|
||||
"acp.users": "Users",
|
||||
"app.brand": "speedBB",
|
||||
"auth.login_hint": "Access your account to start new threads and reply.",
|
||||
"auth.login_title": "Log in",
|
||||
"auth.register_hint": "Register with an email and a unique username.",
|
||||
"auth.verify_notice": "Check your email to verify your account before logging in.",
|
||||
"auth.register_title": "Create account",
|
||||
"footer.copy": "speedBB",
|
||||
"form.body": "Body",
|
||||
"form.create_account": "Create account",
|
||||
"form.create_thread": "Create thread",
|
||||
"form.description": "Description",
|
||||
"form.email": "Email",
|
||||
"form.message": "Message",
|
||||
"form.password": "Password",
|
||||
"form.post_reply": "Post reply",
|
||||
"form.posting": "Posting...",
|
||||
"form.registering": "Registering...",
|
||||
"form.reply_placeholder": "Share your reply.",
|
||||
"form.sign_in": "Sign in",
|
||||
"form.signing_in": "Signing in...",
|
||||
"form.thread_body_placeholder": "Share the context and your question.",
|
||||
"form.thread_title_placeholder": "Topic headline",
|
||||
"form.title": "Title",
|
||||
"form.username": "Username",
|
||||
"forum.children": "Sub-forums",
|
||||
"forum.empty_children": "No sub-forums yet.",
|
||||
"forum.empty_threads": "No threads here yet. Start one below.",
|
||||
"forum.loading": "Loading forum...",
|
||||
"forum.login_hint": "Log in to create a new thread.",
|
||||
"forum.no_description": "No description added yet.",
|
||||
"forum.only_forums": "Threads can only be created in forums.",
|
||||
"forum.open": "Open forum",
|
||||
"forum.start_thread": "Start a thread",
|
||||
"forum.threads": "Threads",
|
||||
"forum.type_category": "Category",
|
||||
"forum.type_forum": "Forum",
|
||||
"user.id": "ID",
|
||||
"user.name": "Name",
|
||||
"user.email": "Email",
|
||||
"user.roles": "Roles",
|
||||
"user.actions": "Actions",
|
||||
"user.impersonate": "Impersonate",
|
||||
"user.edit": "Edit",
|
||||
"user.delete": "Delete",
|
||||
"table.rows_per_page": "Rows per page:",
|
||||
"table.range_separator": "of",
|
||||
"home.browse": "Browse forums",
|
||||
"home.empty": "No forums yet. Create the first one in the API.",
|
||||
"home.hero_body": "Explore conversations, ask questions, and share ideas across categories and forums.",
|
||||
"home.hero_title": "Forums",
|
||||
"home.loading": "Loading forums...",
|
||||
"nav.acp": "ACP",
|
||||
"nav.forums": "Forums",
|
||||
"nav.language": "Language",
|
||||
"nav.login": "Login",
|
||||
"nav.logout": "Logout",
|
||||
"nav.register": "Register",
|
||||
"nav.theme": "Theme",
|
||||
"nav.theme_auto": "Auto",
|
||||
"nav.theme_dark": "Dark",
|
||||
"nav.theme_light": "Light",
|
||||
"thread.anonymous": "Anonymous",
|
||||
"thread.back_to_category": "Back to forum",
|
||||
"thread.category": "Forum:",
|
||||
"thread.empty": "Be the first to reply.",
|
||||
"thread.label": "Thread",
|
||||
"thread.loading": "Loading thread...",
|
||||
"thread.login_hint": "Log in to reply to this thread.",
|
||||
"thread.replies": "Replies",
|
||||
"thread.reply": "Reply",
|
||||
"thread.view": "View thread"
|
||||
}
|
||||
13
resources/views/app.blade.php
Normal file
13
resources/views/app.blade.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SpeedBB</title>
|
||||
@viteReactRefresh
|
||||
@vite(['resources/js/main.jsx'])
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
277
resources/views/welcome.blade.php
Normal file
277
resources/views/welcome.blade.php
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user