@jhits/plugin-newsletter 0.0.10 → 0.0.11

package/src/views/components/SmtpSettingsModal.tsx

@@ -0,0 +1,433 @@
+/**
+ * SMTP Settings Modal Component
+ */
+
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Settings2, X, Save, Eye, EyeOff, RefreshCw, CheckCircle2, Pencil, Unlink, Image as ImageIcon, Upload, XCircle } from 'lucide-react';
+
+interface SmtpSettings {
+    host: string;
+    port: number;
+    user: string;
+    password: string;
+    from: string;
+    fromName: string;
+    primaryLanguage?: string;
+    logoUrl?: string;
+}
+
+interface SmtpSettingsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function SmtpSettingsModal({ isOpen, onClose }: SmtpSettingsModalProps) {
+    const [smtpSettings, setSmtpSettings] = useState<SmtpSettings>({
+        host: '',
+        port: 465,
+        user: '',
+        password: '',
+        from: '',
+        fromName: '',
+        primaryLanguage: 'en',
+        logoUrl: '',
+    });
+    const [smtpLoading, setSmtpLoading] = useState(true);
+    const [smtpSaving, setSmtpSaving] = useState(false);
+    const [smtpShowPassword, setSmtpShowPassword] = useState(false);
+    const [smtpSuccess, setSmtpSuccess] = useState(false);
+    const [fromEmailEditable, setFromEmailEditable] = useState(false);
+    const [isLogoUploading, setIsLogoUploading] = useState(false);
+
+    useEffect(() => {
+        if (isOpen) {
+            fetchSmtpSettings();
+        } else {
+            setFromEmailEditable(false);
+        }
+    }, [isOpen]);
+
+    const fetchSmtpSettings = async () => {
+        try {
+            setSmtpLoading(true);
+            const response = await fetch('/api/plugin-newsletter/smtp', {
+                credentials: 'include',
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setSmtpSettings({
+                    host: data.host || '',
+                    port: data.port || 465,
+                    user: data.user || '',
+                    password: data.password || '',
+                    from: data.from || '',
+                    fromName: data.fromName || '',
+                    primaryLanguage: data.primaryLanguage || 'en',
+                    logoUrl: data.logoUrl || '',
+                });
+                setFromEmailEditable(!!data.from && data.from !== data.user);
+            }
+        } catch (error) {
+            console.error('Failed to load SMTP settings:', error);
+        } finally {
+            setSmtpLoading(false);
+        }
+    };
+
+    const handleSave = async () => {
+        try {
+            setSmtpSaving(true);
+            
+            const settingsToSave = {
+                ...smtpSettings,
+                from: smtpSettings.from || smtpSettings.user,
+            };
+            
+            const response = await fetch('/api/plugin-newsletter/smtp', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify(settingsToSave),
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || 'Failed to save SMTP settings');
+            }
+
+            setSmtpSuccess(true);
+            setTimeout(() => {
+                setSmtpSuccess(false);
+                onClose();
+            }, 1500);
+        } catch (error: any) {
+            console.error('Failed to save SMTP settings:', error);
+            alert(error.message || 'Failed to save SMTP settings');
+        } finally {
+            setSmtpSaving(false);
+        }
+    };
+
+    const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const allowedTypes = ['image/png', 'image/jpeg'];
+        if (!allowedTypes.includes(file.type)) {
+            alert('Please upload a PNG or JPEG image');
+            return;
+        }
+
+        if (file.size > 2 * 1024 * 1024) {
+            alert('Image must be smaller than 2MB');
+            return;
+        }
+
+        try {
+            setIsLogoUploading(true);
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('type', 'logo');
+
+            const response = await fetch('/api/plugin-newsletter/upload', {
+                method: 'POST',
+                credentials: 'include',
+                body: formData,
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to upload logo');
+            }
+
+            const data = await response.json();
+            setSmtpSettings(prev => ({ ...prev, logoUrl: data.url }));
+        } catch (error: any) {
+            console.error('Failed to upload logo:', error);
+            alert(error.message || 'Failed to upload logo. Please try again.');
+        } finally {
+            setIsLogoUploading(false);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            {/* Backdrop */}
+            <div 
+                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                onClick={() => !smtpSaving && onClose()}
+            />
+            
+            {/* Modal */}
+            <div className="relative w-full max-w-2xl mx-4 bg-white dark:bg-neutral-900 rounded-3xl border border-dashboard-border shadow-2xl overflow-hidden">
+                {/* Header */}
+                <div className="flex items-center justify-between px-8 py-6 border-b border-dashboard-border">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center">
+                            <Settings2 className="w-5 h-5 text-primary" />
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-black text-dashboard-text uppercase tracking-tight">
+                                SMTP Settings
+                            </h2>
+                            <p className="text-xs text-dashboard-text-secondary">
+                                Configure email server for sending newsletters
+                            </p>
+                        </div>
+                    </div>
+                    <button
+                        onClick={() => !smtpSaving && onClose()}
+                        disabled={smtpSaving}
+                        className="p-2 rounded-full hover:bg-dashboard-border transition-colors"
+                    >
+                        <X size={20} className="text-dashboard-text-secondary" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-8 space-y-6 max-h-[60vh] overflow-y-auto">
+                    {smtpLoading ? (
+                        <div className="flex items-center justify-center py-12">
+                            <RefreshCw className="w-6 h-6 animate-spin text-primary" />
+                        </div>
+                    ) : (
+                        <>
+                            <div className="grid grid-cols-2 gap-6">
+                                <div className="col-span-2">
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        SMTP Host
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={smtpSettings.host}
+                                        onChange={(e) => setSmtpSettings(prev => ({ ...prev, host: e.target.value }))}
+                                        placeholder="smtp.example.com"
+                                        className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                    />
+                                </div>
+                                
+                                <div>
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        Port
+                                    </label>
+                                    <input
+                                        type="number"
+                                        value={smtpSettings.port}
+                                        onChange={(e) => setSmtpSettings(prev => ({ ...prev, port: parseInt(e.target.value) || 465 }))}
+                                        placeholder="465"
+                                        className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                    />
+                                </div>
+
+                                <div>
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        From Name
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={smtpSettings.fromName}
+                                        onChange={(e) => setSmtpSettings(prev => ({ ...prev, fromName: e.target.value }))}
+                                        placeholder="My Newsletter"
+                                        className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                    />
+                                </div>
+
+                                <div className="col-span-2">
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        Username / Email
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={smtpSettings.user}
+                                        onChange={(e) => setSmtpSettings(prev => ({ ...prev, user: e.target.value }))}
+                                        placeholder="smtp@example.com"
+                                        className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                    />
+                                </div>
+
+                                <div className="col-span-2">
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        Password / App Password
+                                    </label>
+                                    <div className="relative">
+                                        <input
+                                            type={smtpShowPassword ? 'text' : 'password'}
+                                            value={smtpSettings.password}
+                                            onChange={(e) => setSmtpSettings(prev => ({ ...prev, password: e.target.value }))}
+                                            placeholder="Enter password or app password"
+                                            className="w-full px-4 py-3 pr-12 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => setSmtpShowPassword(!smtpShowPassword)}
+                                            className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-dashboard-text-secondary hover:text-dashboard-text"
+                                        >
+                                            {smtpShowPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div className="col-span-2">
+                                    <div className="flex items-center justify-between mb-2">
+                                        <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
+                                            From Email
+                                        </label>
+                                        <button
+                                            type="button"
+                                            onClick={() => {
+                                                if (fromEmailEditable) {
+                                                    setFromEmailEditable(false);
+                                                    setSmtpSettings(prev => ({ ...prev, from: prev.user }));
+                                                } else {
+                                                    setFromEmailEditable(true);
+                                                }
+                                            }}
+                                            className="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-primary hover:underline"
+                                        >
+                                            {fromEmailEditable ? (
+                                                <>
+                                                    <Unlink size={12} />
+                                                    Use same as username
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <Pencil size={12} />
+                                                    Edit
+                                                </>
+                                            )}
+                                        </button>
+                                    </div>
+                                    <input
+                                        type="email"
+                                        value={smtpSettings.from || smtpSettings.user}
+                                        onChange={(e) => setSmtpSettings(prev => ({ ...prev, from: e.target.value }))}
+                                        disabled={!fromEmailEditable}
+                                        placeholder="newsletter@example.com"
+                                        className={`w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text ${
+                                            !fromEmailEditable ? 'opacity-60 cursor-not-allowed' : ''
+                                        }`}
+                                    />
+                                    {!fromEmailEditable && smtpSettings.user && (
+                                        <p className="text-[10px] text-dashboard-text-secondary mt-1">
+                                            Using: {smtpSettings.user}
+                                        </p>
+                                    )}
+                                </div>
+
+                                {/* Primary Language */}
+                                <div className="col-span-2">
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        Primary Language
+                                    </label>
+                                    <p className="text-[10px] text-dashboard-text-secondary mb-2">
+                                        Default language for welcome emails and newsletters
+                                    </p>
+                                    <select
+                                        value={smtpSettings.primaryLanguage || 'en'}
+                                        onChange={(e) => setSmtpSettings(prev => ({ ...prev, primaryLanguage: e.target.value }))}
+                                        className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text"
+                                    >
+                                        <option value="en">English</option>
+                                        <option value="nl">Dutch</option>
+                                        <option value="sv">Swedish</option>
+                                    </select>
+                                </div>
+
+                                {/* Logo Upload */}
+                                <div className="col-span-2">
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
+                                        <span className="flex items-center gap-2">
+                                            <ImageIcon size={14} />
+                                            Email Logo
+                                        </span>
+                                    </label>
+                                    <p className="text-[10px] text-dashboard-text-secondary mb-2">
+                                        Logo to use in email headers (recommended: 200x50px PNG/JPEG)
+                                    </p>
+                                    <div className="border-2 border-dashboard-border border-dashed rounded-xl p-6 bg-dashboard-bg text-center">
+                                        {isLogoUploading ? (
+                                            <div className="flex flex-col items-center gap-2 text-dashboard-text-secondary">
+                                                <RefreshCw size={24} className="animate-spin" />
+                                                <span className="text-xs">Uploading...</span>
+                                            </div>
+                                        ) : smtpSettings.logoUrl ? (
+                                            <div className="relative inline-block">
+                                                <img 
+                                                    src={smtpSettings.logoUrl} 
+                                                    alt="Logo preview" 
+                                                    className="max-h-16 mx-auto"
+                                                />
+                                                <button
+                                                    onClick={() => setSmtpSettings(prev => ({ ...prev, logoUrl: '' }))}
+                                                    className="absolute -top-2 -right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600"
+                                                >
+                                                    <XCircle size={16} />
+                                                </button>
+                                            </div>
+                                        ) : (
+                                            <label className="cursor-pointer block">
+                                                <input
+                                                    type="file"
+                                                    accept="image/png,image/jpeg"
+                                                    onChange={handleLogoUpload}
+                                                    className="hidden"
+                                                />
+                                                <div className="flex flex-col items-center gap-2 text-dashboard-text-secondary hover:text-dashboard-text">
+                                                    <Upload size={24} />
+                                                    <span className="text-xs">Click to upload logo</span>
+                                                </div>
+                                            </label>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </div>
+
+                {/* Footer */}
+                <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-dashboard-border bg-dashboard-bg/50">
+                    <button
+                        onClick={onClose}
+                        disabled={smtpSaving}
+                        className="px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={handleSave}
+                        disabled={smtpSaving || smtpLoading}
+                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${
+                            smtpSaving 
+                                ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                : smtpSuccess
+                                    ? 'bg-green-600 text-white'
+                                    : 'bg-primary text-white hover:bg-primary/90'
+                        }`}
+                    >
+                        {smtpSaving ? (
+                            <>
+                                <RefreshCw className="w-4 h-4 animate-spin" />
+                                Saving...
+                            </>
+                        ) : smtpSuccess ? (
+                            <>
+                                <CheckCircle2 className="w-4 h-4" />
+                                Saved!
+                            </>
+                        ) : (
+                            <>
+                                <Save className="w-4 h-4" />
+                                Save Settings
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}