368 lines
12 KiB
TypeScript
368 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Mail, Users, Send, CheckCircle, AlertCircle, Loader2, Lock, LogOut } from 'lucide-react';
|
|
|
|
interface Subscriber {
|
|
email: string;
|
|
createdAt: string;
|
|
}
|
|
|
|
interface BroadcastInfo {
|
|
total: number;
|
|
recent: Subscriber[];
|
|
}
|
|
|
|
export default function NewsletterPage() {
|
|
const router = useRouter();
|
|
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
|
const [isAuthenticating, setIsAuthenticating] = useState(true);
|
|
const [loginError, setLoginError] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
|
|
const [info, setInfo] = useState<BroadcastInfo | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [broadcasting, setBroadcasting] = useState(false);
|
|
const [result, setResult] = useState<{
|
|
success: boolean;
|
|
message: string;
|
|
sent?: number;
|
|
failed?: number;
|
|
} | null>(null);
|
|
|
|
useEffect(() => {
|
|
checkAuth();
|
|
}, []);
|
|
|
|
const checkAuth = async () => {
|
|
try {
|
|
const response = await fetch('/api/newsletter/broadcast');
|
|
if (response.ok) {
|
|
setIsAuthenticated(true);
|
|
const data = await response.json();
|
|
setInfo(data);
|
|
setLoading(false);
|
|
} else {
|
|
setIsAuthenticated(false);
|
|
}
|
|
} catch (error) {
|
|
setIsAuthenticated(false);
|
|
} finally {
|
|
setIsAuthenticating(false);
|
|
}
|
|
};
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoginError('');
|
|
setIsAuthenticating(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/newsletter/admin-login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setIsAuthenticated(true);
|
|
await checkAuth();
|
|
} else {
|
|
const data = await response.json();
|
|
setLoginError(data.error || 'Invalid credentials');
|
|
}
|
|
} catch (error) {
|
|
setLoginError('Login failed. Please try again.');
|
|
} finally {
|
|
setIsAuthenticating(false);
|
|
}
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
router.push('/');
|
|
};
|
|
|
|
const fetchSubscriberInfo = async () => {
|
|
try {
|
|
const response = await fetch('/api/newsletter/broadcast');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setInfo(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch subscriber info:', error);
|
|
}
|
|
};
|
|
|
|
const handleBroadcast = async () => {
|
|
if (!confirm(`Are you sure you want to send the AI feature launch email to ${info?.total} subscribers?`)) {
|
|
return;
|
|
}
|
|
|
|
setBroadcasting(true);
|
|
setResult(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/newsletter/broadcast', {
|
|
method: 'POST',
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
setResult({
|
|
success: response.ok,
|
|
message: data.message || data.error,
|
|
sent: data.sent,
|
|
failed: data.failed,
|
|
});
|
|
|
|
if (response.ok) {
|
|
await fetchSubscriberInfo();
|
|
}
|
|
} catch (error) {
|
|
setResult({
|
|
success: false,
|
|
message: 'Failed to send broadcast. Please try again.',
|
|
});
|
|
} finally {
|
|
setBroadcasting(false);
|
|
}
|
|
};
|
|
|
|
// Login Screen
|
|
if (!isAuthenticated) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 px-4">
|
|
<Card className="w-full max-w-md p-8">
|
|
<div className="text-center mb-6">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Lock className="w-8 h-8 text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold mb-2">Newsletter Admin</h1>
|
|
<p className="text-muted-foreground text-sm">
|
|
Sign in to manage subscribers
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">Email</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Email"
|
|
required
|
|
className="w-full px-4 py-3 rounded-xl bg-background border border-border focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">Password</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Password"
|
|
required
|
|
className="w-full px-4 py-3 rounded-xl bg-background border border-border focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{loginError && (
|
|
<p className="text-sm text-red-600 dark:text-red-400">{loginError}</p>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isAuthenticating}
|
|
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
|
|
>
|
|
{isAuthenticating ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Signing in...
|
|
</>
|
|
) : (
|
|
'Sign In'
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="mt-6 pt-6 border-t text-center">
|
|
<p className="text-xs text-muted-foreground">
|
|
Admin credentials required
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Loading
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Admin Dashboard
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-purple-50/30 to-pink-50/30 dark:from-purple-950/10 dark:to-pink-950/10">
|
|
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold mb-2">Newsletter Management</h1>
|
|
<p className="text-muted-foreground">
|
|
Manage AI feature launch notifications
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={handleLogout}
|
|
variant="outline"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
Logout
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats Card */}
|
|
<Card className="p-6 mb-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
|
|
<Users className="w-6 h-6 text-purple-600 dark:text-purple-400" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold">{info?.total || 0}</h2>
|
|
<p className="text-sm text-muted-foreground">Total Subscribers</p>
|
|
</div>
|
|
</div>
|
|
<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
|
|
Active
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Broadcast Button */}
|
|
<div className="border-t pt-6">
|
|
<div className="mb-4">
|
|
<h3 className="font-semibold mb-2 flex items-center gap-2">
|
|
<Send className="w-4 h-4" />
|
|
Broadcast AI Feature Launch
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Send the AI feature launch announcement to all {info?.total} subscribers.
|
|
This will inform them that the features are now available.
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleBroadcast}
|
|
disabled={broadcasting || !info?.total}
|
|
className="w-full sm:w-auto bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
|
|
>
|
|
{broadcasting ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Sending Emails...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Mail className="w-4 h-4 mr-2" />
|
|
Send Launch Notification to All
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Result Message */}
|
|
{result && (
|
|
<Card
|
|
className={`p-4 mb-6 ${
|
|
result.success
|
|
? 'bg-green-50 dark:bg-green-950/20 border-green-200 dark:border-green-900'
|
|
: 'bg-red-50 dark:bg-red-950/20 border-red-200 dark:border-red-900'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
{result.success ? (
|
|
<CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
|
) : (
|
|
<AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
)}
|
|
<div className="flex-1">
|
|
<p
|
|
className={`font-medium ${
|
|
result.success
|
|
? 'text-green-900 dark:text-green-100'
|
|
: 'text-red-900 dark:text-red-100'
|
|
}`}
|
|
>
|
|
{result.message}
|
|
</p>
|
|
{result.sent !== undefined && (
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Sent: {result.sent} | Failed: {result.failed}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Recent Subscribers */}
|
|
<Card className="p-6">
|
|
<h3 className="font-semibold mb-4">Recent Subscribers</h3>
|
|
{info?.recent && info.recent.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{info.recent.map((subscriber, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-between py-2 border-b border-border last:border-0"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Mail className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm">{subscriber.email}</span>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(subscriber.createdAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">No subscribers yet</p>
|
|
)}
|
|
|
|
<div className="mt-4 pt-4 border-t">
|
|
<p className="text-xs text-muted-foreground">
|
|
💡 Tip: View all subscribers in{' '}
|
|
<a
|
|
href="http://localhost:5555"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary hover:underline"
|
|
>
|
|
Prisma Studio
|
|
</a>
|
|
{' '}(NewsletterSubscription table)
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|