282 lines
12 KiB
TypeScript
282 lines
12 KiB
TypeScript
'use client';
|
|
import { useState, useEffect } from 'react';
|
|
import { Setting } from '@/types';
|
|
import { settingsService } from '@/lib/services';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Label } from '@/components/ui/label';
|
|
import Navigation from '@/components/Navigation';
|
|
import AuthGuard from '@/components/AuthGuard';
|
|
import SmtpSettingsForm from '@/components/SmtpSettingsForm';
|
|
import { Settings, Monitor, Save, CheckCircle, Mail, FileText, Download } from 'lucide-react';
|
|
import { ExportAnonymizationSelect, AnonymizationLevel } from '@/components/ExportAnonymizationSelect';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
function SettingsPageContent() {
|
|
const [settings, setSettings] = useState<Setting[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [saved, setSaved] = useState(false);
|
|
const [randomizePropositions, setRandomizePropositions] = useState(false);
|
|
const [proposePageMessage, setProposePageMessage] = useState('');
|
|
const [footerMessage, setFooterMessage] = useState('');
|
|
const [exportAnonymization, setExportAnonymization] = useState<AnonymizationLevel>('full');
|
|
|
|
useEffect(() => {
|
|
// Vérifier la configuration Supabase
|
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
|
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
|
|
|
|
// Si pas de configuration ou valeurs par défaut, rediriger vers setup
|
|
if (!supabaseUrl || !supabaseAnonKey ||
|
|
supabaseUrl === 'https://placeholder.supabase.co' ||
|
|
supabaseAnonKey === 'your-anon-key') {
|
|
console.log('🔧 Configuration Supabase manquante, redirection vers /setup');
|
|
window.location.href = '/setup';
|
|
return;
|
|
}
|
|
|
|
loadSettings();
|
|
}, []);
|
|
|
|
const loadSettings = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const settingsData = await settingsService.getAll();
|
|
setSettings(settingsData);
|
|
|
|
// Charger la valeur du paramètre d'ordre aléatoire
|
|
const randomizeValue = await settingsService.getBooleanValue('randomize_propositions', false);
|
|
setRandomizePropositions(randomizeValue);
|
|
|
|
// Charger le message de la page de dépôt de propositions
|
|
const messageValue = await settingsService.getStringValue('propose_page_message', 'Partagez votre vision et proposez des projets qui feront la différence dans votre collectif. Votre voix compte pour façonner l\'avenir de votre communauté.');
|
|
setProposePageMessage(messageValue);
|
|
|
|
// Charger le message du bas de page
|
|
const footerValue = await settingsService.getStringValue('footer_message', 'Développé avec ❤️ pour faciliter la démocratie participative - [Logiciel libre et open source](GITURL) et transparent pour tous');
|
|
setFooterMessage(footerValue);
|
|
|
|
// Charger le niveau d'anonymisation des exports
|
|
const anonymizationValue = await settingsService.getStringValue('export_anonymization', 'full') as AnonymizationLevel;
|
|
setExportAnonymization(anonymizationValue);
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des paramètres:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRandomizeChange = async (checked: boolean) => {
|
|
setRandomizePropositions(checked);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
setSaving(true);
|
|
await settingsService.setBooleanValue('randomize_propositions', randomizePropositions);
|
|
await settingsService.setStringValue('propose_page_message', proposePageMessage);
|
|
await settingsService.setStringValue('footer_message', footerMessage);
|
|
await settingsService.setStringValue('export_anonymization', exportAnonymization);
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 2000);
|
|
} catch (error) {
|
|
console.error('Erreur lors de la sauvegarde des paramètres:', error);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
|
<div className="container mx-auto px-4 py-8">
|
|
<Navigation showBackButton={true} backUrl="/admin" />
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
|
|
<p className="text-slate-600 dark:text-slate-300">Chargement des paramètres...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
|
<div className="container mx-auto px-4 py-8">
|
|
<Navigation showBackButton={true} backUrl="/admin" />
|
|
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Paramètres</h1>
|
|
<p className="text-slate-600 dark:text-slate-300 mt-2">Configurez les paramètres de l'application</p>
|
|
</div>
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="flex items-center gap-2"
|
|
>
|
|
{saving ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
Sauvegarde...
|
|
</>
|
|
) : saved ? (
|
|
<>
|
|
<CheckCircle className="w-4 h-4" />
|
|
Sauvegardé
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="w-4 h-4" />
|
|
Sauvegarder
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Settings Categories */}
|
|
<div className="space-y-8">
|
|
{/* Affichage Category */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
|
<Monitor className="w-5 h-5 text-blue-600 dark:text-blue-300" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl">Affichage</CardTitle>
|
|
<CardDescription>
|
|
Paramètres d'affichage de l'interface utilisateur
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* Randomize Propositions Setting */}
|
|
<div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
|
<div className="flex-1">
|
|
<Label htmlFor="randomize-propositions" className="text-base font-medium">
|
|
Afficher les propositions dans un ordre aléatoire lors du vote
|
|
</Label>
|
|
<p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
|
|
Lorsque activé, les propositions seront affichées dans un ordre aléatoire pour chaque participant lors du vote.
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="randomize-propositions"
|
|
checked={randomizePropositions}
|
|
onCheckedChange={handleRandomizeChange}
|
|
className="ml-4"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Textes Category */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
|
<FileText className="w-5 h-5 text-green-600 dark:text-green-300" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl">Textes</CardTitle>
|
|
<CardDescription>
|
|
Personnalisez les textes affichés dans l'application
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* Propose Page Message Setting */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="propose-page-message" className="text-base font-medium">
|
|
Message d'invitation - Page de dépôt de propositions
|
|
</Label>
|
|
<p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
|
|
Ce texte apparaît sous le titre de la campagne pour inviter les utilisateurs à déposer des propositions.
|
|
</p>
|
|
</div>
|
|
<textarea
|
|
id="propose-page-message"
|
|
value={proposePageMessage}
|
|
onChange={(e) => setProposePageMessage(e.target.value)}
|
|
className="w-full min-h-[100px] p-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 resize-y"
|
|
placeholder="Entrez votre message d'invitation..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer Message Setting */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="footer-message" className="text-base font-medium">
|
|
Message du bas de page
|
|
</Label>
|
|
<p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
|
|
Ce texte apparaît en bas des pages publiques. Vous pouvez utiliser <code className="bg-slate-100 dark:bg-slate-700 px-1 rounded text-xs">[texte du lien](GITURL)</code> pour insérer un lien vers le repository Git.
|
|
</p>
|
|
</div>
|
|
<textarea
|
|
id="footer-message"
|
|
value={footerMessage}
|
|
onChange={(e) => setFooterMessage(e.target.value)}
|
|
className="w-full min-h-[80px] p-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 resize-y"
|
|
placeholder="Entrez votre message de bas de page..."
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Exports Category */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
|
<Download className="w-5 h-5 text-purple-600 dark:text-purple-300" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl">Exports</CardTitle>
|
|
<CardDescription>
|
|
Paramètres de confidentialité pour les exports de données
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
|
<ExportAnonymizationSelect
|
|
value={exportAnonymization}
|
|
onValueChange={setExportAnonymization}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Email Category */}
|
|
<SmtpSettingsForm onSave={() => {
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 2000);
|
|
}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SettingsPage() {
|
|
return (
|
|
<AuthGuard>
|
|
<SettingsPageContent />
|
|
</AuthGuard>
|
|
);
|
|
}
|