121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useI18n } from '../../components/I18nProvider';
|
|
|
|
type SiteSettings = {
|
|
requireLoginForContactDetails: boolean;
|
|
};
|
|
|
|
export default function AdminSettingsPage() {
|
|
const { t } = useI18n();
|
|
const [settings, setSettings] = useState<SiteSettings | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const meRes = await fetch('/api/auth/me', { cache: 'no-store' });
|
|
const me = await meRes.json();
|
|
if (me.user?.role !== 'ADMIN') {
|
|
setError(t('adminRequired'));
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
setIsAdmin(true);
|
|
const res = await fetch('/api/admin/settings', { cache: 'no-store' });
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setError(data.error || 'Failed to load settings');
|
|
} else {
|
|
setSettings(data.settings);
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError('Failed to load settings');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
load();
|
|
}, [t]);
|
|
|
|
async function save(next: Partial<SiteSettings>) {
|
|
if (!isAdmin) return;
|
|
setSaving(true);
|
|
setMessage(null);
|
|
setError(null);
|
|
try {
|
|
const res = await fetch('/api/admin/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(next),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setError(data.error || 'Failed to save settings');
|
|
} else {
|
|
setSettings(data.settings);
|
|
setMessage(t('settingsSaved'));
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError('Failed to save settings');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
function toggleRequireLoginForContactDetails() {
|
|
if (!settings) return;
|
|
save({ requireLoginForContactDetails: !settings.requireLoginForContactDetails });
|
|
}
|
|
|
|
return (
|
|
<main className="panel" style={{ maxWidth: 960, margin: '40px auto' }}>
|
|
<h1>{t('adminSettingsTitle')}</h1>
|
|
<p>{t('adminSettingsLead')}</p>
|
|
{loading ? <p>{t('loading')}</p> : null}
|
|
{message ? <p style={{ color: 'green' }}>{message}</p> : null}
|
|
{error ? <p style={{ color: 'red' }}>{error}</p> : null}
|
|
|
|
{!loading && settings ? (
|
|
<div style={{ display: 'grid', gap: 16, marginTop: 16 }}>
|
|
<section
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
background: 'linear-gradient(135deg, rgba(14,165,233,0.08), rgba(30,64,175,0.08))',
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: 520 }}>
|
|
<h2 style={{ margin: '0 0 8px' }}>{t('settingContactVisibilityTitle')}</h2>
|
|
<p style={{ margin: 0, color: '#475569' }}>{t('settingContactVisibilityHelp')}</p>
|
|
</div>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 600 }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={settings.requireLoginForContactDetails}
|
|
onChange={toggleRequireLoginForContactDetails}
|
|
disabled={saving}
|
|
/>
|
|
<span>{t('settingRequireLoginForContact')}</span>
|
|
</label>
|
|
</section>
|
|
</div>
|
|
) : null}
|
|
</main>
|
|
);
|
|
}
|