283 lines
11 KiB
TypeScript
283 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { motion } from 'framer-motion';
|
|
import { createClient } from '@/lib/supabase/client';
|
|
import { Loader2, Mail, Server, ShieldCheck, Key, Send, CheckCircle2, AlertCircle } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
interface Settings {
|
|
host: string;
|
|
port: number;
|
|
secure: boolean;
|
|
user: string;
|
|
pass: string;
|
|
}
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.1 }
|
|
}
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 15 },
|
|
visible: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 80, damping: 15 } }
|
|
};
|
|
|
|
export default function SettingsPage() {
|
|
const [settings, setSettings] = useState<Settings | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [message, setMessage] = useState('');
|
|
const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
|
|
const [saving, setSaving] = useState(false);
|
|
const [testing, setTesting] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
async function checkAccessAndLoad() {
|
|
try {
|
|
const supabase = createClient();
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
if (!user) {
|
|
router.push('/auth/login');
|
|
return;
|
|
}
|
|
|
|
const [userRes, smtpRes] = await Promise.all([
|
|
supabase.from('users').select('role').eq('id', user.id).single(),
|
|
fetch('/api/admin/smtp-settings').then(res => res.json())
|
|
]);
|
|
|
|
if (!userRes.data || userRes.data.role === 'verwaltung') {
|
|
router.push('/admin');
|
|
return;
|
|
}
|
|
|
|
if (smtpRes.settings) {
|
|
setSettings(smtpRes.settings as Settings);
|
|
} else {
|
|
setMessage('Fehler beim Laden der SMTP-Einstellungen.');
|
|
setMsgType('error');
|
|
}
|
|
} catch (err) {
|
|
setMessage('Fehler beim Laden der Einstellungen.');
|
|
setMsgType('error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
checkAccessAndLoad();
|
|
}, [router]);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value, type, checked } = e.target;
|
|
setSettings((prev) =>
|
|
prev && {
|
|
...prev,
|
|
[name]: type === 'checkbox' ? checked : name === 'port' ? Number(value) : value,
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
setMessage('');
|
|
try {
|
|
const res = await fetch('/api/admin/smtp-settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(settings),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setMessage('SMTP-Einstellungen erfolgreich gespeichert.');
|
|
setMsgType('success');
|
|
} else {
|
|
setMessage(data.error || 'Fehler beim Speichern.');
|
|
setMsgType('error');
|
|
}
|
|
} catch {
|
|
setMessage('Verbindungsfehler beim Speichern.');
|
|
setMsgType('error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleTestEmail = async () => {
|
|
setTesting(true);
|
|
setMessage('');
|
|
try {
|
|
const testPayload = {
|
|
to: settings?.user || '',
|
|
subject: 'Test-E-Mail aus dem CASPOS Webshop Admin',
|
|
text: 'Dies ist eine automatische Test-E-Mail zur Bestätigung der SMTP-Konfiguration.',
|
|
};
|
|
const res = await fetch('/api/admin/send-test-email', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(testPayload),
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setMessage('Test-E-Mail erfolgreich versendet.');
|
|
setMsgType('success');
|
|
} else {
|
|
setMessage(data.error || 'Versand der Test-E-Mail fehlgeschlagen.');
|
|
setMsgType('error');
|
|
}
|
|
} catch {
|
|
setMessage('Fehler beim Senden der Test-E-Mail.');
|
|
setMsgType('error');
|
|
} finally {
|
|
setTesting(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-6">
|
|
{/* Header */}
|
|
<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="space-y-1">
|
|
<h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
|
|
<Mail className="w-8 h-8 text-sky-400" />
|
|
SMTP-Einstellungen
|
|
</h1>
|
|
<p className="text-slate-400 text-xs">
|
|
Konfigurieren Sie den E-Mail-Server für transaktionale Benachrichtigungen und Bestellbestätigungen.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Dynamic Status Message */}
|
|
{message && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
className={`p-3.5 rounded-xl text-xs font-semibold border flex items-center gap-2 ${
|
|
msgType === 'success'
|
|
? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
|
|
: 'bg-destructive/10 border-destructive/20 text-destructive'
|
|
}`}
|
|
>
|
|
{msgType === 'success' ? <CheckCircle2 className="w-4 h-4 shrink-0" /> : <AlertCircle className="w-4 h-4 shrink-0" />}
|
|
{message}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Bento Grid layout for SMTP */}
|
|
<form onSubmit={handleSave}>
|
|
<motion.div variants={containerVariants} initial="hidden" animate="visible" className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
{/* Bento Box 1: Server Connection Details (2 Spalten) */}
|
|
<motion.div variants={itemVariants} className="md:col-span-2 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-4 shadow-md">
|
|
<div className="flex items-center gap-2 text-sky-400 font-bold text-sm border-b border-slate-800 pb-3">
|
|
<Server className="w-4 h-4" />
|
|
<span>Server & Serververbindung</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div className="sm:col-span-2 space-y-1.5">
|
|
<Label htmlFor="host" className="text-xs font-bold text-slate-300">SMTP Host</Label>
|
|
<Input
|
|
id="host"
|
|
name="host"
|
|
type="text"
|
|
required
|
|
value={settings?.host ?? ''}
|
|
onChange={handleChange}
|
|
placeholder="smtp.beispiel.de"
|
|
className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="port" className="text-xs font-bold text-slate-300">Port</Label>
|
|
<Input
|
|
id="port"
|
|
name="port"
|
|
type="number"
|
|
required
|
|
value={settings?.port ?? ''}
|
|
onChange={handleChange}
|
|
placeholder="587"
|
|
className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<label className="inline-flex items-center gap-2 cursor-pointer p-3 rounded-xl bg-slate-950/50 border border-slate-800/80 hover:bg-slate-800/40 transition">
|
|
<input
|
|
name="secure"
|
|
type="checkbox"
|
|
checked={settings?.secure ?? false}
|
|
onChange={handleChange}
|
|
className="w-4 h-4 rounded text-sky-500 bg-slate-900 border-slate-700"
|
|
/>
|
|
<span className="text-xs font-semibold text-slate-200">SSL / TLS Verschlüsselung aktivieren</span>
|
|
</label>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Bento Box 2: Auth Credentials (1 Spalte) */}
|
|
<motion.div variants={itemVariants} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-4 shadow-md flex flex-col justify-between">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2 text-sky-400 font-bold text-sm border-b border-slate-800 pb-3">
|
|
<Key className="w-4 h-4" />
|
|
<span>Zugangsdaten</span>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="user" className="text-xs font-bold text-slate-300">SMTP Benutzer</Label>
|
|
<Input
|
|
id="user"
|
|
name="user"
|
|
type="email"
|
|
required
|
|
value={settings?.user ?? ''}
|
|
onChange={handleChange}
|
|
placeholder="absender@beispiel.de"
|
|
className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="pass" className="text-xs font-bold text-slate-300">Passwort</Label>
|
|
<Input
|
|
id="pass"
|
|
name="pass"
|
|
type="password"
|
|
required
|
|
value={settings?.pass ?? ''}
|
|
onChange={handleChange}
|
|
placeholder="••••••••••••"
|
|
className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submit & Test Buttons */}
|
|
<div className="flex flex-col gap-2 pt-4 border-t border-slate-800">
|
|
<Button type="submit" disabled={saving || testing} className="w-full bg-sky-600 hover:bg-sky-500 text-white rounded-xl h-10 text-xs font-bold">
|
|
{saving ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Speichert...</> : 'Konfiguration speichern'}
|
|
</Button>
|
|
<Button type="button" onClick={handleTestEmail} disabled={saving || testing} variant="outline" className="w-full border-slate-700 text-slate-300 hover:text-white rounded-xl h-10 text-xs font-bold">
|
|
{testing ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Sendet...</> : <><Send className="w-3.5 h-3.5 mr-2 text-emerald-400" /> Test-Mail senden</>}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|