Compare commits
3 Commits
792816c6c8
...
032b08bfb5
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
032b08bfb5 | ||
|
|
bc9d93fe90 | ||
|
|
e7d1cda356 |
@@ -1,5 +1,6 @@
|
|||||||
import { Request, Response, NextFunction } from 'express';
|
import { Request, Response, NextFunction } from 'express';
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
|
import prisma from '../lib/prisma.js';
|
||||||
|
|
||||||
export interface JwtPayload {
|
export interface JwtPayload {
|
||||||
userId: string;
|
userId: string;
|
||||||
@@ -15,7 +16,7 @@ declare global {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function authenticate(req: Request, res: Response, next: NextFunction): void {
|
export async function authenticate(req: Request, res: Response, next: NextFunction): Promise<void> {
|
||||||
const header = req.headers.authorization;
|
const header = req.headers.authorization;
|
||||||
if (!header?.startsWith('Bearer ')) {
|
if (!header?.startsWith('Bearer ')) {
|
||||||
res.status(401).json({ error: 'Missing or invalid Authorization header' });
|
res.status(401).json({ error: 'Missing or invalid Authorization header' });
|
||||||
@@ -25,7 +26,21 @@ export function authenticate(req: Request, res: Response, next: NextFunction): v
|
|||||||
const token = header.slice(7);
|
const token = header.slice(7);
|
||||||
try {
|
try {
|
||||||
const payload = jwt.verify(token, process.env.JWT_SECRET!) as JwtPayload;
|
const payload = jwt.verify(token, process.env.JWT_SECRET!) as JwtPayload;
|
||||||
req.user = payload;
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id: payload.userId },
|
||||||
|
select: { id: true, role: true, isAdmin: true, isBanned: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user || user.isBanned) {
|
||||||
|
res.status(401).json({ error: 'Token user no longer exists or is banned. Please login again.' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
req.user = {
|
||||||
|
userId: user.id,
|
||||||
|
role: user.role,
|
||||||
|
isAdmin: user.isAdmin,
|
||||||
|
};
|
||||||
next();
|
next();
|
||||||
} catch {
|
} catch {
|
||||||
res.status(401).json({ error: 'Token expired or invalid' });
|
res.status(401).json({ error: 'Token expired or invalid' });
|
||||||
|
|||||||
@@ -217,7 +217,7 @@ export default function ForumPage() {
|
|||||||
{!loading && !error && (
|
{!loading && !error && (
|
||||||
filteredCategories.length === 0 ? (
|
filteredCategories.length === 0 ? (
|
||||||
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
|
<div className="crt-box" style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)' }}>
|
||||||
No results found for "{search}"
|
{search.trim() ? `No results found for "${search}"` : 'No forum categories available yet.'}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
filteredCategories.map((cat) => (
|
filteredCategories.map((cat) => (
|
||||||
|
|||||||
@@ -114,14 +114,26 @@ export const forumApi = {
|
|||||||
getCategories: () =>
|
getCategories: () =>
|
||||||
apiFetch<ForumCategory[]>('/forum/categories'),
|
apiFetch<ForumCategory[]>('/forum/categories'),
|
||||||
|
|
||||||
getThreads: (params?: { categoryId?: string; page?: number; limit?: number }) => {
|
getThreads: async (params?: { categoryId?: string; page?: number; limit?: number }) => {
|
||||||
const q = new URLSearchParams();
|
const q = new URLSearchParams();
|
||||||
if (params?.categoryId) q.set('categoryId', params.categoryId);
|
if (params?.categoryId) q.set('categoryId', params.categoryId);
|
||||||
q.set('page', String(params?.page ?? 1));
|
q.set('page', String(params?.page ?? 1));
|
||||||
q.set('limit', String(params?.limit ?? 100));
|
q.set('limit', String(params?.limit ?? 100));
|
||||||
return apiFetch<{ data: ForumThread[]; total: number; page: number; pages: number }>(
|
|
||||||
`/forum/threads?${q}`
|
const result = await apiFetch<{
|
||||||
);
|
data?: ForumThread[];
|
||||||
|
threads?: ForumThread[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pages: number;
|
||||||
|
}>(`/forum/threads?${q}`);
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: result.data ?? result.threads ?? [],
|
||||||
|
total: result.total,
|
||||||
|
page: result.page,
|
||||||
|
pages: result.pages,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getThread: (id: string) =>
|
getThread: (id: string) =>
|
||||||
|
|||||||
@@ -1,21 +1,80 @@
|
|||||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||||
import { formatDateTime } from '../../utils/format';
|
import { formatDateTime } from '../../utils/format';
|
||||||
import { settingsApi } from '../../utils/api';
|
import { forumApi, settingsApi } from '../../utils/api';
|
||||||
import type { ForumThread, ForumReply } from '../../types';
|
import type { ForumCategory, ForumReply, ForumThread } from '../../types';
|
||||||
|
|
||||||
export default function IntranetModeration() {
|
export default function IntranetModeration() {
|
||||||
|
const [categories, setCategories] = useState<ForumCategory[]>([]);
|
||||||
const [threads, setThreads] = useState<ForumThread[]>([]);
|
const [threads, setThreads] = useState<ForumThread[]>([]);
|
||||||
const [replies, setReplies] = useState<ForumReply[]>([]);
|
const [replies, setReplies] = useState<ForumReply[]>([]);
|
||||||
const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
|
const [selectedThreadId, setSelectedThreadId] = useState<string | null>(null);
|
||||||
|
const [createTitle, setCreateTitle] = useState('');
|
||||||
|
const [createContent, setCreateContent] = useState('');
|
||||||
|
const [createCategoryId, setCreateCategoryId] = useState('');
|
||||||
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||||
|
const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
|
||||||
|
const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);
|
||||||
|
const [categoryName, setCategoryName] = useState('');
|
||||||
|
const [categoryDescription, setCategoryDescription] = useState('');
|
||||||
|
const [categoryIcon, setCategoryIcon] = useState('📁');
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const [activeTab, setActiveTab] = useState<'threads' | 'replies'>('threads');
|
const [activeTab, setActiveTab] = useState<'threads' | 'replies' | 'categories'>('threads');
|
||||||
const [isEnabled, setIsEnabled] = useState(true);
|
const [isEnabled, setIsEnabled] = useState(true);
|
||||||
const [toggling, setToggling] = useState(false);
|
const [toggling, setToggling] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [creating, setCreating] = useState(false);
|
||||||
|
const [savingCategory, setSavingCategory] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
const loadModerationData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const [cats, threadRes] = await Promise.all([
|
||||||
|
forumApi.getCategories(),
|
||||||
|
forumApi.getThreads({ limit: 200 }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const loadedThreads = threadRes.data;
|
||||||
|
setCategories(cats);
|
||||||
|
setThreads(loadedThreads);
|
||||||
|
|
||||||
|
const detailed = await Promise.all(
|
||||||
|
loadedThreads.map((thread) => forumApi.getThread(thread.id).catch(() => null))
|
||||||
|
);
|
||||||
|
|
||||||
|
const allReplies = detailed
|
||||||
|
.filter((thread): thread is ForumThread & { replies: ForumReply[] } => Boolean(thread))
|
||||||
|
.flatMap((thread) => thread.replies);
|
||||||
|
setReplies(allReplies);
|
||||||
|
} catch {
|
||||||
|
setError('Failed to load moderation data.');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
settingsApi.get().then((s) => setIsEnabled(s.forumEnabled)).catch(() => {});
|
settingsApi.get().then((s) => setIsEnabled(s.forumEnabled)).catch(() => {});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void loadModerationData();
|
||||||
|
}, [loadModerationData]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (categories.length === 0) {
|
||||||
|
setCreateCategoryId('');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const exists = categories.some((category) => category.id === createCategoryId);
|
||||||
|
if (!exists) {
|
||||||
|
setCreateCategoryId(categories[0].id);
|
||||||
|
}
|
||||||
|
}, [categories, createCategoryId]);
|
||||||
|
|
||||||
const handleToggle = useCallback((enabled: boolean) => {
|
const handleToggle = useCallback((enabled: boolean) => {
|
||||||
setToggling(true);
|
setToggling(true);
|
||||||
settingsApi.update({ forumEnabled: enabled })
|
settingsApi.update({ forumEnabled: enabled })
|
||||||
@@ -36,23 +95,151 @@ export default function IntranetModeration() {
|
|||||||
}, [replies, selectedThreadId]);
|
}, [replies, selectedThreadId]);
|
||||||
|
|
||||||
const deleteThread = useCallback((id: string) => {
|
const deleteThread = useCallback((id: string) => {
|
||||||
setThreads((prev) => prev.filter((t) => t.id !== id));
|
forumApi.deleteThread(id)
|
||||||
setReplies((prev) => prev.filter((r) => r.threadId !== id));
|
.then(() => {
|
||||||
if (selectedThreadId === id) setSelectedThreadId(null);
|
setThreads((prev) => prev.filter((t) => t.id !== id));
|
||||||
|
setReplies((prev) => prev.filter((r) => r.threadId !== id));
|
||||||
|
if (selectedThreadId === id) setSelectedThreadId(null);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setError('Failed to delete thread.');
|
||||||
|
});
|
||||||
}, [selectedThreadId]);
|
}, [selectedThreadId]);
|
||||||
|
|
||||||
const togglePin = useCallback((id: string) => {
|
const togglePin = useCallback((id: string) => {
|
||||||
setThreads((prev) => prev.map((t) => t.id === id ? { ...t, isPinned: !t.isPinned } : t));
|
const thread = threads.find((t) => t.id === id);
|
||||||
}, []);
|
if (!thread) return;
|
||||||
|
|
||||||
|
forumApi.updateThread(id, { isPinned: !thread.isPinned })
|
||||||
|
.then((updated) => {
|
||||||
|
setThreads((prev) => prev.map((t) => (t.id === id ? updated : t)));
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setError('Failed to update pin state.');
|
||||||
|
});
|
||||||
|
}, [threads]);
|
||||||
|
|
||||||
const toggleLock = useCallback((id: string) => {
|
const toggleLock = useCallback((id: string) => {
|
||||||
setThreads((prev) => prev.map((t) => t.id === id ? { ...t, isLocked: !t.isLocked } : t));
|
const thread = threads.find((t) => t.id === id);
|
||||||
}, []);
|
if (!thread) return;
|
||||||
|
|
||||||
|
forumApi.updateThread(id, { isLocked: !thread.isLocked })
|
||||||
|
.then((updated) => {
|
||||||
|
setThreads((prev) => prev.map((t) => (t.id === id ? updated : t)));
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setError('Failed to update lock state.');
|
||||||
|
});
|
||||||
|
}, [threads]);
|
||||||
|
|
||||||
const deleteReply = useCallback((id: string) => {
|
const deleteReply = useCallback((id: string) => {
|
||||||
setReplies((prev) => prev.filter((r) => r.id !== id));
|
const removedReply = replies.find((r) => r.id === id);
|
||||||
|
|
||||||
|
forumApi.deleteReply(id)
|
||||||
|
.then(() => {
|
||||||
|
setReplies((prev) => prev.filter((r) => r.id !== id));
|
||||||
|
setThreads((prev) => prev.map((t) => {
|
||||||
|
if (!removedReply || removedReply.threadId !== t.id) return t;
|
||||||
|
return { ...t, replyCount: Math.max(0, t.replyCount - 1) };
|
||||||
|
}));
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setError('Failed to delete reply.');
|
||||||
|
});
|
||||||
|
}, [replies]);
|
||||||
|
|
||||||
|
const createThread = useCallback(() => {
|
||||||
|
const title = createTitle.trim();
|
||||||
|
const content = createContent.trim();
|
||||||
|
|
||||||
|
if (!title || !content || !createCategoryId) {
|
||||||
|
setError('Title, category and content are required.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCreating(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
forumApi.createThread({
|
||||||
|
title,
|
||||||
|
content,
|
||||||
|
categoryId: createCategoryId,
|
||||||
|
})
|
||||||
|
.then((thread) => {
|
||||||
|
setThreads((prev) => [thread, ...prev]);
|
||||||
|
setCategories((prev) => prev.map((cat) => (
|
||||||
|
cat.id === createCategoryId
|
||||||
|
? { ...cat, threadCount: cat.threadCount + 1 }
|
||||||
|
: cat
|
||||||
|
)));
|
||||||
|
setCreateTitle('');
|
||||||
|
setCreateContent('');
|
||||||
|
setIsCreateModalOpen(false);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setError('Failed to create thread.');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setCreating(false);
|
||||||
|
});
|
||||||
|
}, [createCategoryId, createContent, createTitle]);
|
||||||
|
|
||||||
|
const openCreateCategoryModal = useCallback(() => {
|
||||||
|
setEditingCategoryId(null);
|
||||||
|
setCategoryName('');
|
||||||
|
setCategoryDescription('');
|
||||||
|
setCategoryIcon('📁');
|
||||||
|
setIsCategoryModalOpen(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const openEditCategoryModal = useCallback((category: ForumCategory) => {
|
||||||
|
setEditingCategoryId(category.id);
|
||||||
|
setCategoryName(category.name);
|
||||||
|
setCategoryDescription(category.description);
|
||||||
|
setCategoryIcon(category.icon || '📁');
|
||||||
|
setIsCategoryModalOpen(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const saveCategory = useCallback(() => {
|
||||||
|
const name = categoryName.trim();
|
||||||
|
const description = categoryDescription.trim();
|
||||||
|
const icon = categoryIcon.trim() || '📁';
|
||||||
|
|
||||||
|
if (!name || !description) {
|
||||||
|
setError('Category name and description are required.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSavingCategory(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
const action = editingCategoryId
|
||||||
|
? forumApi.updateCategory(editingCategoryId, { name, description, icon })
|
||||||
|
: forumApi.createCategory({ name, description, icon });
|
||||||
|
|
||||||
|
action
|
||||||
|
.then(() => loadModerationData())
|
||||||
|
.then(() => setIsCategoryModalOpen(false))
|
||||||
|
.catch(() => {
|
||||||
|
setError(editingCategoryId ? 'Failed to update category.' : 'Failed to create category.');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setSavingCategory(false);
|
||||||
|
});
|
||||||
|
}, [categoryDescription, categoryIcon, categoryName, editingCategoryId, loadModerationData]);
|
||||||
|
|
||||||
|
const removeCategory = useCallback((id: string) => {
|
||||||
|
const confirmed = window.confirm('Delete this category? This can fail if it still has threads.');
|
||||||
|
if (!confirmed) return;
|
||||||
|
|
||||||
|
setError('');
|
||||||
|
forumApi.deleteCategory(id)
|
||||||
|
.then(() => loadModerationData())
|
||||||
|
.catch(() => {
|
||||||
|
setError('Failed to delete category. Remove or move threads first.');
|
||||||
|
});
|
||||||
|
}, [loadModerationData]);
|
||||||
|
|
||||||
const recentReplies = useMemo(() => {
|
const recentReplies = useMemo(() => {
|
||||||
return [...replies].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).slice(0, 20);
|
return [...replies].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).slice(0, 20);
|
||||||
}, [replies]);
|
}, [replies]);
|
||||||
@@ -87,6 +274,16 @@ export default function IntranetModeration() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
|
{loading && (
|
||||||
|
<div style={{ marginBottom: '1rem', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.78rem' }}>
|
||||||
|
Loading moderation data...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<div style={{ marginBottom: '1rem', color: 'var(--color-red)', fontFamily: 'var(--font-mono)', fontSize: '0.78rem' }}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div style={{ marginBottom: '1.75rem' }}>
|
<div style={{ marginBottom: '1.75rem' }}>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
<div>
|
<div>
|
||||||
@@ -123,7 +320,7 @@ export default function IntranetModeration() {
|
|||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
<div style={{ display: 'flex', borderBottom: '1px solid var(--color-border)', marginBottom: '1.5rem', gap: 0 }}>
|
<div style={{ display: 'flex', borderBottom: '1px solid var(--color-border)', marginBottom: '1.5rem', gap: 0 }}>
|
||||||
{(['threads', 'replies'] as const).map((tab) => (
|
{(['threads', 'replies', 'categories'] as const).map((tab) => (
|
||||||
<button
|
<button
|
||||||
key={tab}
|
key={tab}
|
||||||
onClick={() => setActiveTab(tab)}
|
onClick={() => setActiveTab(tab)}
|
||||||
@@ -140,7 +337,11 @@ export default function IntranetModeration() {
|
|||||||
letterSpacing: '0.08em',
|
letterSpacing: '0.08em',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{tab === 'threads' ? `Threads (${threads.length})` : `Replies (${replies.length})`}
|
{tab === 'threads'
|
||||||
|
? `Threads (${threads.length})`
|
||||||
|
: tab === 'replies'
|
||||||
|
? `Replies (${replies.length})`
|
||||||
|
: `Categories (${categories.length})`}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -149,6 +350,22 @@ export default function IntranetModeration() {
|
|||||||
<div style={{ display: 'grid', gridTemplateColumns: selectedThreadId ? '1fr 340px' : '1fr', gap: '1.25rem', alignItems: 'start' }}>
|
<div style={{ display: 'grid', gridTemplateColumns: selectedThreadId ? '1fr 340px' : '1fr', gap: '1.25rem', alignItems: 'start' }}>
|
||||||
{/* Thread list */}
|
{/* Thread list */}
|
||||||
<div>
|
<div>
|
||||||
|
<div style={{ marginBottom: '1rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||||
|
<button
|
||||||
|
className="btn-terminal btn-amber"
|
||||||
|
onClick={() => setIsCreateModalOpen(true)}
|
||||||
|
disabled={loading || categories.length === 0}
|
||||||
|
style={{ opacity: loading || categories.length === 0 ? 0.6 : 1 }}
|
||||||
|
>
|
||||||
|
+ Create Thread
|
||||||
|
</button>
|
||||||
|
{categories.length === 0 && (
|
||||||
|
<div style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.72rem' }}>
|
||||||
|
No categories available.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
className="input-terminal"
|
className="input-terminal"
|
||||||
type="search"
|
type="search"
|
||||||
@@ -192,6 +409,7 @@ export default function IntranetModeration() {
|
|||||||
className={`btn-terminal ${thread.isPinned ? 'btn-danger' : 'btn-amber'}`}
|
className={`btn-terminal ${thread.isPinned ? 'btn-danger' : 'btn-amber'}`}
|
||||||
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
||||||
onClick={() => togglePin(thread.id)}
|
onClick={() => togglePin(thread.id)}
|
||||||
|
disabled={loading}
|
||||||
>
|
>
|
||||||
{thread.isPinned ? 'Unpin' : 'Pin'}
|
{thread.isPinned ? 'Unpin' : 'Pin'}
|
||||||
</button>
|
</button>
|
||||||
@@ -199,6 +417,7 @@ export default function IntranetModeration() {
|
|||||||
className="btn-terminal btn-amber"
|
className="btn-terminal btn-amber"
|
||||||
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
||||||
onClick={() => toggleLock(thread.id)}
|
onClick={() => toggleLock(thread.id)}
|
||||||
|
disabled={loading}
|
||||||
>
|
>
|
||||||
{thread.isLocked ? 'Unlock' : 'Lock'}
|
{thread.isLocked ? 'Unlock' : 'Lock'}
|
||||||
</button>
|
</button>
|
||||||
@@ -206,6 +425,7 @@ export default function IntranetModeration() {
|
|||||||
className="btn-terminal btn-danger"
|
className="btn-terminal btn-danger"
|
||||||
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
||||||
onClick={() => deleteThread(thread.id)}
|
onClick={() => deleteThread(thread.id)}
|
||||||
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
@@ -292,6 +512,203 @@ export default function IntranetModeration() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'categories' && (
|
||||||
|
<div>
|
||||||
|
<div style={{ marginBottom: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
<button className="btn-terminal btn-amber" onClick={openCreateCategoryModal}>
|
||||||
|
+ Create Category
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '0.75rem' }}>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<div
|
||||||
|
key={category.id}
|
||||||
|
style={{
|
||||||
|
background: 'var(--color-surface)',
|
||||||
|
border: '1px solid var(--color-border)',
|
||||||
|
padding: '1rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.4rem', gap: '0.5rem' }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-amber)', fontSize: '0.9rem' }}>
|
||||||
|
{category.icon} {category.name}
|
||||||
|
</div>
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.68rem' }}>
|
||||||
|
{category.threadCount} threads
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)', fontSize: '0.75rem', lineHeight: 1.6 }}>
|
||||||
|
{category.description}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.4rem', marginTop: '0.7rem' }}>
|
||||||
|
<button
|
||||||
|
className="btn-terminal"
|
||||||
|
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
||||||
|
onClick={() => openEditCategoryModal(category)}
|
||||||
|
>
|
||||||
|
Modify
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-terminal btn-danger"
|
||||||
|
style={{ padding: '0.15rem 0.55rem', fontSize: '0.65rem' }}
|
||||||
|
onClick={() => removeCategory(category.id)}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{categories.length === 0 && (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center', color: 'var(--color-text-muted)', fontFamily: 'var(--font-mono)', fontSize: '0.8rem', background: 'var(--color-surface)', border: '1px solid var(--color-border)' }}>
|
||||||
|
No categories found.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isCreateModalOpen && (
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
inset: 0,
|
||||||
|
background: 'rgba(0,0,0,0.55)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
zIndex: 40,
|
||||||
|
padding: '1rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', width: 'min(620px, 100%)', padding: '1rem' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.8rem' }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-amber)', fontSize: '0.75rem', letterSpacing: '0.1em' }}>
|
||||||
|
CREATE THREAD
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsCreateModalOpen(false)}
|
||||||
|
style={{ background: 'transparent', border: 'none', color: 'var(--color-text-muted)', cursor: 'pointer' }}
|
||||||
|
aria-label="Close create thread popup"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.6rem' }}>
|
||||||
|
<input
|
||||||
|
className="input-terminal"
|
||||||
|
type="text"
|
||||||
|
placeholder="Thread title"
|
||||||
|
value={createTitle}
|
||||||
|
onChange={(e) => setCreateTitle(e.target.value)}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
className="input-terminal"
|
||||||
|
value={createCategoryId}
|
||||||
|
onChange={(e) => setCreateCategoryId(e.target.value)}
|
||||||
|
>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<option key={category.id} value={category.id}>{category.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<textarea
|
||||||
|
className="input-terminal"
|
||||||
|
rows={4}
|
||||||
|
placeholder="Thread content"
|
||||||
|
value={createContent}
|
||||||
|
onChange={(e) => setCreateContent(e.target.value)}
|
||||||
|
style={{ resize: 'vertical' }}
|
||||||
|
/>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
|
||||||
|
<button className="btn-terminal" onClick={() => setIsCreateModalOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-terminal btn-amber"
|
||||||
|
onClick={createThread}
|
||||||
|
disabled={creating || loading || categories.length === 0}
|
||||||
|
style={{ opacity: creating || loading || categories.length === 0 ? 0.6 : 1 }}
|
||||||
|
>
|
||||||
|
{creating ? 'Creating...' : 'Create Thread'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isCategoryModalOpen && (
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
inset: 0,
|
||||||
|
background: 'rgba(0,0,0,0.55)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
zIndex: 50,
|
||||||
|
padding: '1rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', width: 'min(560px, 100%)', padding: '1rem' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.8rem' }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-amber)', fontSize: '0.75rem', letterSpacing: '0.1em' }}>
|
||||||
|
{editingCategoryId ? 'MODIFY CATEGORY' : 'CREATE CATEGORY'}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsCategoryModalOpen(false)}
|
||||||
|
style={{ background: 'transparent', border: 'none', color: 'var(--color-text-muted)', cursor: 'pointer' }}
|
||||||
|
aria-label="Close category popup"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.6rem' }}>
|
||||||
|
<input
|
||||||
|
className="input-terminal"
|
||||||
|
type="text"
|
||||||
|
placeholder="Category name"
|
||||||
|
value={categoryName}
|
||||||
|
onChange={(e) => setCategoryName(e.target.value)}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
className="input-terminal"
|
||||||
|
type="text"
|
||||||
|
placeholder="Icon (emoji)"
|
||||||
|
value={categoryIcon}
|
||||||
|
onChange={(e) => setCategoryIcon(e.target.value)}
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
className="input-terminal"
|
||||||
|
rows={3}
|
||||||
|
placeholder="Category description"
|
||||||
|
value={categoryDescription}
|
||||||
|
onChange={(e) => setCategoryDescription(e.target.value)}
|
||||||
|
style={{ resize: 'vertical' }}
|
||||||
|
/>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
|
||||||
|
<button className="btn-terminal" onClick={() => setIsCategoryModalOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-terminal btn-amber"
|
||||||
|
onClick={saveCategory}
|
||||||
|
disabled={savingCategory}
|
||||||
|
style={{ opacity: savingCategory ? 0.6 : 1 }}
|
||||||
|
>
|
||||||
|
{savingCategory ? 'Saving...' : editingCategoryId ? 'Save Changes' : 'Create Category'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { getToken } from '../contexts/AuthContext';
|
import { getToken } from '../contexts/AuthContext';
|
||||||
|
import type { ForumCategory, ForumReply, ForumThread } from '../types';
|
||||||
|
|
||||||
export const API_BASE = (import.meta.env.VITE_API_URL as string | undefined) ?? '/api';
|
export const API_BASE = (import.meta.env.VITE_API_URL as string | undefined) ?? '/api';
|
||||||
|
|
||||||
@@ -22,6 +23,84 @@ async function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T>
|
|||||||
return res.json() as Promise<T>;
|
return res.json() as Promise<T>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class ApiError extends Error {
|
||||||
|
status: number;
|
||||||
|
|
||||||
|
constructor(status: number, message: string) {
|
||||||
|
super(message);
|
||||||
|
this.name = 'ApiError';
|
||||||
|
this.status = status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type ThreadsResponse = {
|
||||||
|
data?: ForumThread[];
|
||||||
|
threads?: ForumThread[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pages: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const forumApi = {
|
||||||
|
getCategories: () => apiFetch<ForumCategory[]>('/forum/categories'),
|
||||||
|
|
||||||
|
createCategory: (payload: { name: string; description: string; icon: string }) =>
|
||||||
|
apiFetch<ForumCategory>('/forum/categories', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateCategory: (id: string, payload: { name?: string; description?: string; icon?: string }) =>
|
||||||
|
apiFetch<ForumCategory>(`/forum/categories/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
}),
|
||||||
|
|
||||||
|
deleteCategory: (id: string) =>
|
||||||
|
apiFetch<void>(`/forum/categories/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
}),
|
||||||
|
|
||||||
|
getThreads: async (params?: { categoryId?: string; page?: number; limit?: number }) => {
|
||||||
|
const q = new URLSearchParams();
|
||||||
|
if (params?.categoryId) q.set('categoryId', params.categoryId);
|
||||||
|
q.set('page', String(params?.page ?? 1));
|
||||||
|
q.set('limit', String(params?.limit ?? 100));
|
||||||
|
|
||||||
|
const result = await apiFetch<ThreadsResponse>(`/forum/threads?${q.toString()}`);
|
||||||
|
return {
|
||||||
|
data: result.data ?? result.threads ?? [],
|
||||||
|
total: result.total,
|
||||||
|
page: result.page,
|
||||||
|
pages: result.pages,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getThread: (id: string) => apiFetch<ForumThread & { replies: ForumReply[] }>(`/forum/threads/${id}`),
|
||||||
|
|
||||||
|
createThread: (payload: { title: string; content: string; categoryId: string }) =>
|
||||||
|
apiFetch<ForumThread>('/forum/threads', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
}),
|
||||||
|
|
||||||
|
updateThread: (id: string, payload: { isPinned?: boolean; isLocked?: boolean; title?: string; content?: string }) =>
|
||||||
|
apiFetch<ForumThread>(`/forum/threads/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
}),
|
||||||
|
|
||||||
|
deleteThread: (id: string) =>
|
||||||
|
apiFetch<void>(`/forum/threads/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
}),
|
||||||
|
|
||||||
|
deleteReply: (id: string) =>
|
||||||
|
apiFetch<void>(`/forum/replies/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
export type SiteSettings = { forumEnabled: boolean; bugsEnabled: boolean };
|
export type SiteSettings = { forumEnabled: boolean; bugsEnabled: boolean };
|
||||||
|
|
||||||
export const settingsApi = {
|
export const settingsApi = {
|
||||||
|
|||||||
Reference in New Issue
Block a user