72 lines
2.8 KiB
JavaScript
72 lines
2.8 KiB
JavaScript
import { Container, Form, Row, Col } from 'react-bootstrap'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function Ucp({ theme, setTheme, accentOverride, setAccentOverride }) {
|
|
const { t, i18n } = useTranslation()
|
|
const accentMode = accentOverride ? 'custom' : 'system'
|
|
|
|
const handleLanguageChange = (event) => {
|
|
const locale = event.target.value
|
|
i18n.changeLanguage(locale)
|
|
localStorage.setItem('speedbb_lang', locale)
|
|
}
|
|
|
|
return (
|
|
<Container className="py-5 bb-portal-shell">
|
|
<div className="bb-portal-card">
|
|
<div className="bb-portal-card-title">{t('portal.user_control_panel')}</div>
|
|
<p className="bb-muted mb-4">{t('ucp.intro')}</p>
|
|
<Row className="g-3">
|
|
<Col xs={12}>
|
|
<Form.Group>
|
|
<Form.Label>{t('nav.language')}</Form.Label>
|
|
<Form.Select value={i18n.language} onChange={handleLanguageChange}>
|
|
<option value="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
</Form.Select>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col md={6}>
|
|
<Form.Group>
|
|
<Form.Label>{t('nav.theme')}</Form.Label>
|
|
<Form.Select value={theme} onChange={(event) => setTheme(event.target.value)}>
|
|
<option value="auto">{t('ucp.system_default')}</option>
|
|
<option value="dark">{t('nav.theme_dark')}</option>
|
|
<option value="light">{t('nav.theme_light')}</option>
|
|
</Form.Select>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col md={6}>
|
|
<Form.Group>
|
|
<Form.Label>{t('ucp.accent_override')}</Form.Label>
|
|
<div className="d-flex align-items-center gap-2">
|
|
<Form.Select
|
|
value={accentMode}
|
|
onChange={(event) => {
|
|
const mode = event.target.value
|
|
if (mode === 'system') {
|
|
setAccentOverride('')
|
|
} else if (!accentOverride) {
|
|
setAccentOverride('#f29b3f')
|
|
}
|
|
}}
|
|
>
|
|
<option value="system">{t('ucp.system_default')}</option>
|
|
<option value="custom">{t('ucp.custom_color')}</option>
|
|
</Form.Select>
|
|
<Form.Control
|
|
type="color"
|
|
value={accentOverride || '#f29b3f'}
|
|
onChange={(event) => setAccentOverride(event.target.value)}
|
|
disabled={accentMode !== 'custom'}
|
|
/>
|
|
</div>
|
|
<Form.Text className="bb-muted">{t('ucp.accent_override_hint')}</Form.Text>
|
|
</Form.Group>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</Container>
|
|
)
|
|
}
|