feat: implement settings API for toggling forum and bug reporting features

This commit is contained in:
Thibault Pouch
2026-03-17 11:44:14 +01:00
parent f9012bd123
commit 53740dc694
5 changed files with 83 additions and 12 deletions

View File

@@ -8,7 +8,7 @@ server {
set $api_upstream http://api:3000; set $api_upstream http://api:3000;
location /api/ { location /api/ {
proxy_pass $api_upstream/api/; proxy_pass $api_upstream;
proxy_set_header Host $host; proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

View File

@@ -8,7 +8,7 @@ const INTRANET_LINKS = [
{ to: '/intranet/feed', label: 'Team Feed', icon: '[~]', end: false }, { to: '/intranet/feed', label: 'Team Feed', icon: '[~]', end: false },
{ to: '/intranet/events', label: 'Events', icon: '[E]', end: false }, { to: '/intranet/events', label: 'Events', icon: '[E]', end: false },
{ to: '/intranet/users', label: 'Users', icon: '[U]', end: false }, { to: '/intranet/users', label: 'Users', icon: '[U]', end: false },
{ to: '/intranet/moderation', label: 'Moderation', icon: '[M]', end: false }, { to: '/intranet/moderation', label: 'Forum Mod', icon: '[M]', end: false },
{ to: '/intranet/services', label: 'Services', icon: '[S]', end: false }, { to: '/intranet/services', label: 'Services', icon: '[S]', end: false },
]; ];

View File

@@ -1,6 +1,7 @@
import { useState, useMemo, useCallback } from 'react'; import { useState, useMemo, useCallback, useEffect } from 'react';
import { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
import { formatDate, formatDateTime } from '../../utils/format'; import { formatDate, formatDateTime } from '../../utils/format';
import { settingsApi } from '../../utils/api';
import type { BugReport, BugSeverity, BugStatus, BugReportNote } from '../../types'; import type { BugReport, BugSeverity, BugStatus, BugReportNote } from '../../types';
function StatusBadge({ status }: { status: BugStatus }) { function StatusBadge({ status }: { status: BugStatus }) {
@@ -27,6 +28,19 @@ export default function IntranetBugs() {
const [assignedFilter, setAssignedFilter] = useState<string | 'all'>('all'); const [assignedFilter, setAssignedFilter] = useState<string | 'all'>('all');
const [noteText, setNoteText] = useState(''); const [noteText, setNoteText] = useState('');
const [isEnabled, setIsEnabled] = useState(true); const [isEnabled, setIsEnabled] = useState(true);
const [toggling, setToggling] = useState(false);
useEffect(() => {
settingsApi.get().then((s) => setIsEnabled(s.bugsEnabled)).catch(() => {});
}, []);
const handleToggle = useCallback((enabled: boolean) => {
setToggling(true);
settingsApi.update({ bugsEnabled: enabled })
.then(() => setIsEnabled(enabled))
.catch(() => {})
.finally(() => setToggling(false));
}, []);
const openCount = bugs.filter((b) => b.status === 'open').length; const openCount = bugs.filter((b) => b.status === 'open').length;
const criticalCount = bugs.filter((b) => b.severity === 'critical').length; const criticalCount = bugs.filter((b) => b.severity === 'critical').length;
@@ -82,7 +96,8 @@ export default function IntranetBugs() {
<h1 style={{ fontFamily: 'var(--font-heading)', color: 'var(--color-red)', fontSize: '2rem', marginBottom: '0.5rem' }}>FUNCTIONALITY DISABLED</h1> <h1 style={{ fontFamily: 'var(--font-heading)', color: 'var(--color-red)', fontSize: '2rem', marginBottom: '0.5rem' }}>FUNCTIONALITY DISABLED</h1>
<p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem' }}>Bug Reports feature is currently disabled</p> <p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem' }}>Bug Reports feature is currently disabled</p>
<button <button
onClick={() => setIsEnabled(true)} onClick={() => handleToggle(true)}
disabled={toggling}
style={{ style={{
background: 'var(--color-green)', background: 'var(--color-green)',
color: 'var(--color-bg)', color: 'var(--color-bg)',
@@ -90,9 +105,10 @@ export default function IntranetBugs() {
padding: '0.6rem 1.2rem', padding: '0.6rem 1.2rem',
fontFamily: 'var(--font-mono)', fontFamily: 'var(--font-mono)',
fontSize: '0.85rem', fontSize: '0.85rem',
cursor: 'pointer', cursor: toggling ? 'not-allowed' : 'pointer',
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.08em', letterSpacing: '0.08em',
opacity: toggling ? 0.6 : 1,
}} }}
> >
Re-enable Re-enable
@@ -111,7 +127,8 @@ export default function IntranetBugs() {
INTRANET / BUG REPORTS INTRANET / BUG REPORTS
</div> </div>
<button <button
onClick={() => setIsEnabled(false)} onClick={() => handleToggle(false)}
disabled={toggling}
style={{ style={{
background: 'transparent', background: 'transparent',
border: '1px solid var(--color-red)', border: '1px solid var(--color-red)',
@@ -119,9 +136,10 @@ export default function IntranetBugs() {
padding: '0.3rem 0.7rem', padding: '0.3rem 0.7rem',
fontFamily: 'var(--font-mono)', fontFamily: 'var(--font-mono)',
fontSize: '0.65rem', fontSize: '0.65rem',
cursor: 'pointer', cursor: toggling ? 'not-allowed' : 'pointer',
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.08em', letterSpacing: '0.08em',
opacity: toggling ? 0.6 : 1,
}} }}
title="Disable this feature" title="Disable this feature"
> >

View File

@@ -1,5 +1,6 @@
import { useState, useMemo, useCallback } 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 type { ForumThread, ForumReply } from '../../types'; import type { ForumThread, ForumReply } from '../../types';
export default function IntranetModeration() { export default function IntranetModeration() {
@@ -9,6 +10,19 @@ export default function IntranetModeration() {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [activeTab, setActiveTab] = useState<'threads' | 'replies'>('threads'); const [activeTab, setActiveTab] = useState<'threads' | 'replies'>('threads');
const [isEnabled, setIsEnabled] = useState(true); const [isEnabled, setIsEnabled] = useState(true);
const [toggling, setToggling] = useState(false);
useEffect(() => {
settingsApi.get().then((s) => setIsEnabled(s.forumEnabled)).catch(() => {});
}, []);
const handleToggle = useCallback((enabled: boolean) => {
setToggling(true);
settingsApi.update({ forumEnabled: enabled })
.then(() => setIsEnabled(enabled))
.catch(() => {})
.finally(() => setToggling(false));
}, []);
const filteredThreads = useMemo(() => { const filteredThreads = useMemo(() => {
if (!search.trim()) return threads; if (!search.trim()) return threads;
@@ -53,7 +67,8 @@ export default function IntranetModeration() {
<h1 style={{ fontFamily: 'var(--font-heading)', color: 'var(--color-red)', fontSize: '2rem', marginBottom: '0.5rem' }}>FUNCTIONALITY DISABLED</h1> <h1 style={{ fontFamily: 'var(--font-heading)', color: 'var(--color-red)', fontSize: '2rem', marginBottom: '0.5rem' }}>FUNCTIONALITY DISABLED</h1>
<p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem' }}>Forum Moderation feature is currently disabled</p> <p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem' }}>Forum Moderation feature is currently disabled</p>
<button <button
onClick={() => setIsEnabled(true)} onClick={() => handleToggle(true)}
disabled={toggling}
style={{ style={{
background: 'var(--color-green)', background: 'var(--color-green)',
color: 'var(--color-bg)', color: 'var(--color-bg)',
@@ -61,9 +76,10 @@ export default function IntranetModeration() {
padding: '0.6rem 1.2rem', padding: '0.6rem 1.2rem',
fontFamily: 'var(--font-mono)', fontFamily: 'var(--font-mono)',
fontSize: '0.85rem', fontSize: '0.85rem',
cursor: 'pointer', cursor: toggling ? 'not-allowed' : 'pointer',
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.08em', letterSpacing: '0.08em',
opacity: toggling ? 0.6 : 1,
}} }}
> >
Re-enable Re-enable
@@ -83,7 +99,8 @@ export default function IntranetModeration() {
</p> </p>
</div> </div>
<button <button
onClick={() => setIsEnabled(false)} onClick={() => handleToggle(false)}
disabled={toggling}
style={{ style={{
background: 'transparent', background: 'transparent',
border: '1px solid var(--color-red)', border: '1px solid var(--color-red)',
@@ -91,10 +108,11 @@ export default function IntranetModeration() {
padding: '0.3rem 0.7rem', padding: '0.3rem 0.7rem',
fontFamily: 'var(--font-mono)', fontFamily: 'var(--font-mono)',
fontSize: '0.65rem', fontSize: '0.65rem',
cursor: 'pointer', cursor: toggling ? 'not-allowed' : 'pointer',
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.08em', letterSpacing: '0.08em',
height: 'fit-content', height: 'fit-content',
opacity: toggling ? 0.6 : 1,
}} }}
title="Disable this feature" title="Disable this feature"
> >

View File

@@ -0,0 +1,35 @@
import { getToken } from '../contexts/AuthContext';
export const API_BASE = (import.meta.env.VITE_API_URL as string | undefined) ?? '/api';
async function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
const token = getToken();
const headers: Record<string, string> = {
'Content-Type': 'application/json',
...(options.headers as Record<string, string> ?? {}),
};
if (token) headers['Authorization'] = `Bearer ${token}`;
const res = await fetch(`${API_BASE}${path}`, { ...options, headers });
if (!res.ok) {
const body = await res.json().catch(() => ({})) as { error?: unknown };
const message = typeof body.error === 'string' ? body.error : `Request failed (${res.status})`;
throw new Error(message);
}
if (res.status === 204) return undefined as T;
return res.json() as Promise<T>;
}
export type SiteSettings = { forumEnabled: boolean; bugsEnabled: boolean };
export const settingsApi = {
get: () => apiFetch<SiteSettings>('/settings'),
update: (data: Partial<SiteSettings>) =>
apiFetch<SiteSettings>('/settings', {
method: 'PATCH',
body: JSON.stringify(data),
}),
};