tracer/speedBB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added PSR-12 rules

Browse Source
This commit is contained in:
tracer
2026-01-11 00:35:42 +01:00
parent fe1015bff1
commit eef3262a53
22 changed files with 372 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
resources/js/pages/Acp.jsx
View File

@@ -6,11 +6,12 @@ import { useDropzone } from 'react-dropzone'
import {
createForum,
deleteForum,
fetchSetting,
fetchSettings,
listAllForums,
listUsers,
reorderForums,
saveSetting,
saveSettings,
uploadFavicon,
uploadLogo,
updateForum,
@@ -35,21 +36,37 @@ export default function Acp({ isAdmin }) {
const [generalUploading, setGeneralUploading] = useState(false)
const [generalError, setGeneralError] = useState('')
const [generalSettings, setGeneralSettings] = useState({
forumName: '',
defaultTheme: 'auto',
darkAccent: '',
lightAccent: '',
darkLogo: '',
lightLogo: '',
showHeaderName: true,
faviconIco: '',
favicon16: '',
favicon32: '',
favicon48: '',
favicon64: '',
favicon128: '',
favicon256: '',
forum_name: '',
default_theme: 'auto',
accent_color_dark: '',
accent_color_light: '',
logo_dark: '',
logo_light: '',
show_header_name: 'true',
favicon_ico: '',
favicon_16: '',
favicon_32: '',
favicon_48: '',
favicon_64: '',
favicon_128: '',
favicon_256: '',
})
const settingsDetailMap = {
forum_name: 'forumName',
default_theme: 'defaultTheme',
accent_color_dark: 'accentDark',
accent_color_light: 'accentLight',
logo_dark: 'logoDark',
logo_light: 'logoLight',
show_header_name: 'showHeaderName',
favicon_ico: 'faviconIco',
favicon_16: 'favicon16',
favicon_32: 'favicon32',
favicon_48: 'favicon48',
favicon_64: 'favicon64',
favicon_128: 'favicon128',
favicon_256: 'favicon256',
}
const [themeMode, setThemeMode] = useState(
document.documentElement.getAttribute('data-bs-theme') || 'light'
)
@@ -105,39 +122,24 @@ export default function Acp({ isAdmin }) {
let active = true
const loadSettings = async () => {
try {
const keys = [
'forum_name',
'default_theme',
'accent_color_dark',
'accent_color_light',
'logo_dark',
'logo_light',
'show_header_name',
'favicon_ico',
'favicon_16',
'favicon_32',
'favicon_48',
'favicon_64',
'favicon_128',
'favicon_256',
]
const results = await Promise.all(keys.map((key) => fetchSetting(key)))
const allSettings = await fetchSettings()
const settingsMap = new Map(allSettings.map((setting) => [setting.key, setting.value]))
if (!active) return
const next = {
forumName: results[0]?.value || '',
defaultTheme: results[1]?.value || 'auto',
darkAccent: results[2]?.value || '',
lightAccent: results[3]?.value || '',
darkLogo: results[4]?.value || '',
lightLogo: results[5]?.value || '',
showHeaderName: results[6]?.value !== 'false',
faviconIco: results[7]?.value || '',
favicon16: results[8]?.value || '',
favicon32: results[9]?.value || '',
favicon48: results[10]?.value || '',
favicon64: results[11]?.value || '',
favicon128: results[12]?.value || '',
favicon256: results[13]?.value || '',
forum_name: settingsMap.get('forum_name') || '',
default_theme: settingsMap.get('default_theme') || 'auto',
accent_color_dark: settingsMap.get('accent_color_dark') || '',
accent_color_light: settingsMap.get('accent_color_light') || '',
logo_dark: settingsMap.get('logo_dark') || '',
logo_light: settingsMap.get('logo_light') || '',
show_header_name: settingsMap.get('show_header_name') || 'true',
favicon_ico: settingsMap.get('favicon_ico') || '',
favicon_16: settingsMap.get('favicon_16') || '',
favicon_32: settingsMap.get('favicon_32') || '',
favicon_48: settingsMap.get('favicon_48') || '',
favicon_64: settingsMap.get('favicon_64') || '',
favicon_128: settingsMap.get('favicon_128') || '',
favicon_256: settingsMap.get('favicon_256') || '',
}
setGeneralSettings(next)
} catch (err) {
@@ -155,42 +157,23 @@ export default function Acp({ isAdmin }) {
setGeneralSaving(true)
setGeneralError('')
try {
await Promise.all([
saveSetting('forum_name', generalSettings.forumName.trim() || ''),
saveSetting('default_theme', generalSettings.defaultTheme || 'auto'),
saveSetting('accent_color_dark', generalSettings.darkAccent.trim() || ''),
saveSetting('accent_color_light', generalSettings.lightAccent.trim() || ''),
saveSetting('logo_dark', generalSettings.darkLogo.trim() || ''),
saveSetting('logo_light', generalSettings.lightLogo.trim() || ''),
saveSetting('show_header_name', generalSettings.showHeaderName ? 'true' : 'false'),
saveSetting('favicon_ico', generalSettings.faviconIco.trim() || ''),
saveSetting('favicon_16', generalSettings.favicon16.trim() || ''),
saveSetting('favicon_32', generalSettings.favicon32.trim() || ''),
saveSetting('favicon_48', generalSettings.favicon48.trim() || ''),
saveSetting('favicon_64', generalSettings.favicon64.trim() || ''),
saveSetting('favicon_128', generalSettings.favicon128.trim() || ''),
saveSetting('favicon_256', generalSettings.favicon256.trim() || ''),
])
window.dispatchEvent(
new CustomEvent('speedbb-settings-updated', {
detail: {
forumName: generalSettings.forumName.trim() || '',
defaultTheme: generalSettings.defaultTheme || 'auto',
accentDark: generalSettings.darkAccent.trim() || '',
accentLight: generalSettings.lightAccent.trim() || '',
logoDark: generalSettings.darkLogo.trim() || '',
logoLight: generalSettings.lightLogo.trim() || '',
showHeaderName: generalSettings.showHeaderName,
faviconIco: generalSettings.faviconIco.trim() || '',
favicon16: generalSettings.favicon16.trim() || '',
favicon32: generalSettings.favicon32.trim() || '',
favicon48: generalSettings.favicon48.trim() || '',
favicon64: generalSettings.favicon64.trim() || '',
favicon128: generalSettings.favicon128.trim() || '',
favicon256: generalSettings.favicon256.trim() || '',
},
})
await saveSettings(
Object.entries(generalSettings).map(([key, value]) => ({
key,
value: typeof value === 'string' ? value.trim() : String(value ?? ''),
}))
)
const detail = Object.entries(generalSettings).reduce((acc, [key, value]) => {
const mappedKey = settingsDetailMap[key]
if (!mappedKey) return acc
if (key === 'show_header_name') {
acc[mappedKey] = value !== 'false'
return acc
}
acc[mappedKey] = typeof value === 'string' ? value.trim() : String(value ?? '')
return acc
}, {})
window.dispatchEvent(new CustomEvent('speedbb-settings-updated', { detail }))
} catch (err) {
setGeneralError(err.message)
} finally {
@@ -199,8 +182,8 @@ export default function Acp({ isAdmin }) {
}
const handleDefaultThemeChange = async (value) => {
const previous = generalSettings.defaultTheme
setGeneralSettings((prev) => ({ ...prev, defaultTheme: value }))
const previous = generalSettings.default_theme
setGeneralSettings((prev) => ({ ...prev, default_theme: value }))
setGeneralError('')
try {
await saveSetting('default_theme', value)
@@ -210,22 +193,29 @@ export default function Acp({ isAdmin }) {
})
)
} catch (err) {
setGeneralSettings((prev) => ({ ...prev, defaultTheme: previous }))
setGeneralSettings((prev) => ({ ...prev, default_theme: previous }))
setGeneralError(err.message)
}
}
const handleLogoUpload = async (file, variantKey) => {
const handleLogoUpload = async (file, settingKey) => {
if (!file) return
setGeneralUploading(true)
setGeneralError('')
try {
const result = await uploadLogo(file)
const url = result?.url || ''
const settingKey = variantKey === 'darkLogo' ? 'logo_dark' : 'logo_light'
setGeneralSettings((prev) => ({ ...prev, [variantKey]: url }))
setGeneralSettings((prev) => ({ ...prev, [settingKey]: url }))
if (url) {
await saveSetting(settingKey, url)
const mappedKey = settingsDetailMap[settingKey]
if (mappedKey) {
window.dispatchEvent(
new CustomEvent('speedbb-settings-updated', {
detail: { [mappedKey]: url },
})
)
}
}
} catch (err) {
setGeneralError(err.message)
@@ -234,21 +224,24 @@ export default function Acp({ isAdmin }) {
}
}
const handleFaviconUpload = async (file, settingKey, stateKey) => {
const handleFaviconUpload = async (file, settingKey) => {
if (!file) return
setGeneralUploading(true)
setGeneralError('')
try {
const result = await uploadFavicon(file)
const url = result?.url || ''
setGeneralSettings((prev) => ({ ...prev, [stateKey]: url }))
setGeneralSettings((prev) => ({ ...prev, [settingKey]: url }))
if (url) {
await saveSetting(settingKey, url)
window.dispatchEvent(
new CustomEvent('speedbb-settings-updated', {
detail: { [stateKey]: url },
})
)
const mappedKey = settingsDetailMap[settingKey]
if (mappedKey) {
window.dispatchEvent(
new CustomEvent('speedbb-settings-updated', {
detail: { [mappedKey]: url },
})
)
}
}
} catch (err) {
setGeneralError(err.message)
@@ -263,7 +256,7 @@ export default function Acp({ isAdmin }) {
'image/x-icon': ['.ico'],
},
maxFiles: 1,
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_ico', 'faviconIco'),
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_ico'),
})
const favicon16Dropzone = useDropzone({
@@ -272,7 +265,7 @@ export default function Acp({ isAdmin }) {
'image/x-icon': ['.ico'],
},
maxFiles: 1,
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_16', 'favicon16'),
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_16'),
})
const favicon32Dropzone = useDropzone({
@@ -281,7 +274,7 @@ export default function Acp({ isAdmin }) {
'image/x-icon': ['.ico'],
},
maxFiles: 1,
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_32', 'favicon32'),
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_32'),
})
const favicon48Dropzone = useDropzone({
@@ -290,7 +283,7 @@ export default function Acp({ isAdmin }) {
'image/x-icon': ['.ico'],
},
maxFiles: 1,
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_48', 'favicon48'),
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_48'),
})
const favicon64Dropzone = useDropzone({
@@ -299,7 +292,7 @@ export default function Acp({ isAdmin }) {
'image/x-icon': ['.ico'],
},
maxFiles: 1,
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_64', 'favicon64'),
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_64'),
})
const favicon128Dropzone = useDropzone({
@@ -308,7 +301,7 @@ export default function Acp({ isAdmin }) {
'image/x-icon': ['.ico'],
},
maxFiles: 1,
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_128', 'favicon128'),
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_128'),
})
const favicon256Dropzone = useDropzone({
@@ -317,7 +310,7 @@ export default function Acp({ isAdmin }) {
'image/x-icon': ['.ico'],
},
maxFiles: 1,
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_256', 'favicon256'),
onDrop: (files) => handleFaviconUpload(files[0], 'favicon_256'),
})
const darkLogoDropzone = useDropzone({
@@ -325,7 +318,7 @@ export default function Acp({ isAdmin }) {
'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'],
},
maxFiles: 1,
onDrop: (files) => handleLogoUpload(files[0], 'darkLogo'),
onDrop: (files) => handleLogoUpload(files[0], 'logo_dark'),
})
const lightLogoDropzone = useDropzone({
@@ -333,7 +326,7 @@ export default function Acp({ isAdmin }) {
'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'],
},
maxFiles: 1,
onDrop: (files) => handleLogoUpload(files[0], 'lightLogo'),
onDrop: (files) => handleLogoUpload(files[0], 'logo_light'),
})
useEffect(() => {
@@ -970,9 +963,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.forum_name')}</Form.Label>
<Form.Control
type="text"
value={generalSettings.forumName}
value={generalSettings.forum_name}
onChange={(event) =>
setGeneralSettings((prev) => ({ ...prev, forumName: event.target.value }))
setGeneralSettings((prev) => ({ ...prev, forum_name: event.target.value }))
}
/>
</Form.Group>
@@ -981,11 +974,11 @@ export default function Acp({ isAdmin }) {
type="checkbox"
id="acp-show-header-name"
label={t('acp.show_header_name')}
checked={generalSettings.showHeaderName}
checked={generalSettings.show_header_name !== 'false'}
onChange={(event) =>
setGeneralSettings((prev) => ({
...prev,
showHeaderName: event.target.checked,
show_header_name: event.target.checked ? 'true' : 'false',
}))
}
/>
@@ -995,7 +988,7 @@ export default function Acp({ isAdmin }) {
<Form.Group>
<Form.Label>{t('acp.default_theme')}</Form.Label>
<Form.Select
value={generalSettings.defaultTheme}
value={generalSettings.default_theme}
onChange={(event) => handleDefaultThemeChange(event.target.value)}
>
<option value="auto">{t('ucp.system_default')}</option>
@@ -1010,22 +1003,22 @@ export default function Acp({ isAdmin }) {
<div className="d-flex align-items-center gap-2">
<Form.Control
type="text"
value={generalSettings.darkAccent}
value={generalSettings.accent_color_dark}
onChange={(event) =>
setGeneralSettings((prev) => ({
...prev,
darkAccent: event.target.value,
accent_color_dark: event.target.value,
}))
}
placeholder="#f29b3f"
/>
<Form.Control
type="color"
value={generalSettings.darkAccent || '#f29b3f'}
value={generalSettings.accent_color_dark || '#f29b3f'}
onChange={(event) =>
setGeneralSettings((prev) => ({
...prev,
darkAccent: event.target.value,
accent_color_dark: event.target.value,
}))
}
/>
@@ -1038,22 +1031,22 @@ export default function Acp({ isAdmin }) {
<div className="d-flex align-items-center gap-2">
<Form.Control
type="text"
value={generalSettings.lightAccent}
value={generalSettings.accent_color_light}
onChange={(event) =>
setGeneralSettings((prev) => ({
...prev,
lightAccent: event.target.value,
accent_color_light: event.target.value,
}))
}
placeholder="#f29b3f"
/>
<Form.Control
type="color"
value={generalSettings.lightAccent || '#f29b3f'}
value={generalSettings.accent_color_light || '#f29b3f'}
onChange={(event) =>
setGeneralSettings((prev) => ({
...prev,
lightAccent: event.target.value,
accent_color_light: event.target.value,
}))
}
/>
@@ -1069,9 +1062,9 @@ export default function Acp({ isAdmin }) {
})}
>
<input {...darkLogoDropzone.getInputProps()} />
{generalSettings.darkLogo ? (
{generalSettings.logo_dark ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.darkLogo} alt={t('acp.logo_dark')} />
<img src={generalSettings.logo_dark} alt={t('acp.logo_dark')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1091,9 +1084,9 @@ export default function Acp({ isAdmin }) {
})}
>
<input {...lightLogoDropzone.getInputProps()} />
{generalSettings.lightLogo ? (
{generalSettings.logo_light ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.lightLogo} alt={t('acp.logo_light')} />
<img src={generalSettings.logo_light} alt={t('acp.logo_light')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1115,9 +1108,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.favicon_ico')}</Form.Label>
<div {...faviconIcoDropzone.getRootProps({ className: 'bb-dropzone' })}>
<input {...faviconIcoDropzone.getInputProps()} />
{generalSettings.faviconIco ? (
{generalSettings.favicon_ico ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.faviconIco} alt={t('acp.favicon_ico')} />
<img src={generalSettings.favicon_ico} alt={t('acp.favicon_ico')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1133,9 +1126,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.favicon_16')}</Form.Label>
<div {...favicon16Dropzone.getRootProps({ className: 'bb-dropzone' })}>
<input {...favicon16Dropzone.getInputProps()} />
{generalSettings.favicon16 ? (
{generalSettings.favicon_16 ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.favicon16} alt={t('acp.favicon_16')} />
<img src={generalSettings.favicon_16} alt={t('acp.favicon_16')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1151,9 +1144,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.favicon_32')}</Form.Label>
<div {...favicon32Dropzone.getRootProps({ className: 'bb-dropzone' })}>
<input {...favicon32Dropzone.getInputProps()} />
{generalSettings.favicon32 ? (
{generalSettings.favicon_32 ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.favicon32} alt={t('acp.favicon_32')} />
<img src={generalSettings.favicon_32} alt={t('acp.favicon_32')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1169,9 +1162,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.favicon_48')}</Form.Label>
<div {...favicon48Dropzone.getRootProps({ className: 'bb-dropzone' })}>
<input {...favicon48Dropzone.getInputProps()} />
{generalSettings.favicon48 ? (
{generalSettings.favicon_48 ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.favicon48} alt={t('acp.favicon_48')} />
<img src={generalSettings.favicon_48} alt={t('acp.favicon_48')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1187,9 +1180,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.favicon_64')}</Form.Label>
<div {...favicon64Dropzone.getRootProps({ className: 'bb-dropzone' })}>
<input {...favicon64Dropzone.getInputProps()} />
{generalSettings.favicon64 ? (
{generalSettings.favicon_64 ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.favicon64} alt={t('acp.favicon_64')} />
<img src={generalSettings.favicon_64} alt={t('acp.favicon_64')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1205,9 +1198,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.favicon_128')}</Form.Label>
<div {...favicon128Dropzone.getRootProps({ className: 'bb-dropzone' })}>
<input {...favicon128Dropzone.getInputProps()} />
{generalSettings.favicon128 ? (
{generalSettings.favicon_128 ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.favicon128} alt={t('acp.favicon_128')} />
<img src={generalSettings.favicon_128} alt={t('acp.favicon_128')} />
</div>
) : (
<div className="bb-dropzone-placeholder">
@@ -1223,9 +1216,9 @@ export default function Acp({ isAdmin }) {
<Form.Label>{t('acp.favicon_256')}</Form.Label>
<div {...favicon256Dropzone.getRootProps({ className: 'bb-dropzone' })}>
<input {...favicon256Dropzone.getInputProps()} />
{generalSettings.favicon256 ? (
{generalSettings.favicon_256 ? (
<div className="bb-dropzone-preview">
<img src={generalSettings.favicon256} alt={t('acp.favicon_256')} />
<img src={generalSettings.favicon_256} alt={t('acp.favicon_256')} />
</div>
) : (
<div className="bb-dropzone-placeholder">