Skip to content

Commit 974eaab

Browse files
FedoseevSMFedoseevSM
committed
ft: settings page
1 parent b05126c commit 974eaab

4 files changed

Lines changed: 170 additions & 1 deletion

File tree

‎public/sw.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,10 @@ async function handleGitHubRequest(request) {
5757
...Object.fromEntries(request.headers.entries()),
5858
'Authorization': `Bearer ${token}`,
5959
'Accept': 'application/vnd.github+json',
60+
'User-Agent': 'Feekool-App/1.0',
6061
'Content-Type': request.headers.get('Content-Type') || 'application/json'
6162
},
62-
body: ['GET', 'HEAD'].includes(request.method) ? undefined : await request.clone().text(),
63+
body: request.body,
6364
mode: 'cors',
6465
credentials: 'omit'
6566
});

‎src/App.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { HomePage } from './pages/HomePage';
1010
import { ForumPage } from './pages/ForumPage';
1111
import { TopicPage } from './pages/TopicPage';
1212
import { ProfilePage } from './pages/ProfilePage';
13+
import { AdminPage } from './pages/AdminPage';
1314

1415
// Error Boundary component
1516
class ErrorBoundary extends React.Component<
@@ -68,6 +69,24 @@ function ProtectedRoute({ children }: {children: React.ReactNode;}) {
6869
}
6970
return <>{children}</>;
7071
}
72+
73+
function AdminRoute({ children }: {children: React.ReactNode;}) {
74+
const { user, isLoading } = useAuth();
75+
if (isLoading) {
76+
return (
77+
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
78+
Loading...
79+
</div>);
80+
}
81+
if (!user) {
82+
return <Navigate to="/auth" replace />;
83+
}
84+
if (user.username !== 'admin') {
85+
return <Navigate to="/" replace />;
86+
}
87+
return <>{children}</>;
88+
}
89+
7190
function AppRoutes() {
7291
return (
7392
<Routes>
@@ -77,6 +96,7 @@ function AppRoutes() {
7796
<Route path="/profile" element={<ProfilePage />} />
7897
<Route path="/forum/:slug" element={<ForumPage />} />
7998
<Route path="/topic/:id" element={<TopicPage />} />
99+
<Route path="/admin" element={<AdminRoute><AdminPage /></AdminRoute>} />
80100
</Route>
81101
</Routes>);
82102

‎src/pages/AdminPage.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React, { useEffect, useState } from 'react';
2+
import { ArrowLeft, Save, ShieldCheck, Settings } from 'lucide-react';
3+
import { Navigate, useNavigate } from 'react-router-dom';
4+
import { useAuth } from '../lib/auth';
5+
6+
interface AdminSettings {
7+
maintenanceMode: boolean;
8+
allowSignups: boolean;
9+
adminNotice: string;
10+
}
11+
12+
const defaultSettings: AdminSettings = {
13+
maintenanceMode: false,
14+
allowSignups: true,
15+
adminNotice: 'Добро пожаловать в админ-панель.',
16+
};
17+
18+
export function AdminPage() {
19+
const { user } = useAuth();
20+
const navigate = useNavigate();
21+
const [settings, setSettings] = useState<AdminSettings>(defaultSettings);
22+
const [isSaving, setIsSaving] = useState(false);
23+
24+
useEffect(() => {
25+
const stored = localStorage.getItem('admin-settings');
26+
if (stored) {
27+
try {
28+
setSettings(JSON.parse(stored));
29+
} catch (error) {
30+
console.warn('Invalid admin settings in localStorage:', error);
31+
}
32+
}
33+
}, []);
34+
35+
if (!user) {
36+
return <Navigate to="/auth" replace />;
37+
}
38+
39+
if (user.username !== 'admin') {
40+
return <Navigate to="/" replace />;
41+
}
42+
43+
const handleSave = () => {
44+
setIsSaving(true);
45+
localStorage.setItem('admin-settings', JSON.stringify(settings));
46+
window.setTimeout(() => setIsSaving(false), 300);
47+
};
48+
49+
return (
50+
<div className="max-w-3xl mx-auto space-y-6">
51+
<div className="flex items-center gap-4">
52+
<button
53+
onClick={() => navigate('/profile')}
54+
className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white transition-colors"
55+
title="Назад в профиль"
56+
>
57+
<ArrowLeft className="w-5 h-5" />
58+
</button>
59+
<div>
60+
<h1 className="text-2xl font-bold">Админ-панель</h1>
61+
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
62+
Здесь доступны настройки только для пользователя <span className="font-semibold">admin</span>.
63+
</p>
64+
</div>
65+
</div>
66+
67+
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
68+
<div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center gap-3">
69+
<Settings className="w-6 h-6 text-blue-600 dark:text-blue-400" />
70+
<div>
71+
<h2 className="text-lg font-semibold">Настройки сайта</h2>
72+
<p className="text-sm text-gray-500 dark:text-gray-400">Изменения сохраняются локально в браузере.</p>
73+
</div>
74+
</div>
75+
76+
<div className="p-6 space-y-6">
77+
<div className="grid gap-4 md:grid-cols-2">
78+
<label className="flex items-center justify-between gap-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700">
79+
<div>
80+
<p className="font-medium">Режим обслуживания</p>
81+
<p className="text-sm text-gray-500 dark:text-gray-400">Отключает некоторые функции для посетителей.</p>
82+
</div>
83+
<input
84+
type="checkbox"
85+
checked={settings.maintenanceMode}
86+
onChange={(event) =>
87+
setSettings({ ...settings, maintenanceMode: event.target.checked })
88+
}
89+
className="h-5 w-5 text-blue-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700"
90+
/>
91+
</label>
92+
93+
<label className="flex items-center justify-between gap-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700">
94+
<div>
95+
<p className="font-medium">Разрешить регистрацию</p>
96+
<p className="text-sm text-gray-500 dark:text-gray-400">Включает или отключает создание новых аккаунтов.</p>
97+
</div>
98+
<input
99+
type="checkbox"
100+
checked={settings.allowSignups}
101+
onChange={(event) =>
102+
setSettings({ ...settings, allowSignups: event.target.checked })
103+
}
104+
className="h-5 w-5 text-blue-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700"
105+
/>
106+
</label>
107+
</div>
108+
109+
<div>
110+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Сообщение для пользователей</label>
111+
<textarea
112+
value={settings.adminNotice}
113+
onChange={(event) => setSettings({ ...settings, adminNotice: event.target.value })}
114+
rows={4}
115+
className="w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-4 py-3 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
116+
/>
117+
</div>
118+
119+
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
120+
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
121+
<ShieldCheck className="w-4 h-4 text-green-500" />
122+
Только администратор может видеть эту страницу.
123+
</div>
124+
<button
125+
onClick={handleSave}
126+
disabled={isSaving}
127+
className="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 text-sm font-medium transition-colors disabled:opacity-50"
128+
>
129+
{isSaving ? 'Сохранение...' : 'Сохранить настройки'}
130+
{!isSaving && <Save className="w-4 h-4" />}
131+
</button>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
);
137+
}

‎src/pages/ProfilePage.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,17 @@ export function ProfilePage() {
144144
<h1 className="text-2xl font-bold">{t('profile')}</h1>
145145
</div>
146146

147+
{user.username === 'admin' && (
148+
<div className="flex justify-end">
149+
<button
150+
onClick={() => navigate('/admin')}
151+
className="inline-flex items-center gap-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 text-sm font-medium transition-colors"
152+
>
153+
Админская панель
154+
</button>
155+
</div>
156+
)}
157+
147158
{/* Profile Card */}
148159
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
149160
{/* Avatar Section */}

0 commit comments

Comments
 (0)