Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
be07ab2fa3
commit
c71f7dbd87
@@ -0,0 +1,293 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Loader2, Mail, Send, KeyRound } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export const Route = createFileRoute("/settings/smtp")({
|
||||
component: SmtpSettingsPage,
|
||||
});
|
||||
|
||||
const EMPTY = {
|
||||
host: "",
|
||||
port: "587",
|
||||
secure: false,
|
||||
username: "",
|
||||
from_email: "",
|
||||
from_name: "",
|
||||
reply_to: "",
|
||||
enabled: true,
|
||||
notes: "",
|
||||
};
|
||||
|
||||
function SmtpSettingsPage() {
|
||||
const { user, isAdmin } = useAuth();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [recordId, setRecordId] = useState<string | null>(null);
|
||||
const [form, setForm] = useState({ ...EMPTY });
|
||||
const [testTo, setTestTo] = useState("");
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
const { data } = await supabase
|
||||
.from("smtp_settings")
|
||||
.select("*")
|
||||
.order("updated_at", { ascending: false })
|
||||
.limit(1)
|
||||
.maybeSingle();
|
||||
if (data) {
|
||||
setRecordId(data.id);
|
||||
setForm({
|
||||
host: data.host ?? "",
|
||||
port: String(data.port ?? 587),
|
||||
secure: !!data.secure,
|
||||
username: data.username ?? "",
|
||||
from_email: data.from_email ?? "",
|
||||
from_name: data.from_name ?? "",
|
||||
reply_to: data.reply_to ?? "",
|
||||
enabled: data.enabled ?? true,
|
||||
notes: data.notes ?? "",
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) load();
|
||||
else setLoading(false);
|
||||
}, [isAdmin]);
|
||||
|
||||
const update = (k: keyof typeof EMPTY, v: string | boolean) =>
|
||||
setForm((f) => ({ ...f, [k]: v }));
|
||||
|
||||
const save = async () => {
|
||||
if (!form.host || !form.from_email) {
|
||||
toast.error("Host and From email are required");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
const payload = {
|
||||
host: form.host.trim(),
|
||||
port: parseInt(form.port, 10) || 587,
|
||||
secure: form.secure,
|
||||
username: form.username || null,
|
||||
from_email: form.from_email.trim(),
|
||||
from_name: form.from_name || null,
|
||||
reply_to: form.reply_to || null,
|
||||
enabled: form.enabled,
|
||||
notes: form.notes || null,
|
||||
updated_by: user?.id,
|
||||
};
|
||||
const { error } = recordId
|
||||
? await supabase.from("smtp_settings").update(payload).eq("id", recordId)
|
||||
: await supabase.from("smtp_settings").insert(payload);
|
||||
setSaving(false);
|
||||
if (error) {
|
||||
toast.error("Could not save", { description: error.message });
|
||||
return;
|
||||
}
|
||||
toast.success("SMTP settings saved");
|
||||
load();
|
||||
};
|
||||
|
||||
const sendTest = async () => {
|
||||
if (!testTo) {
|
||||
toast.error("Enter a test recipient email");
|
||||
return;
|
||||
}
|
||||
setTesting(true);
|
||||
const { data, error } = await supabase.functions.invoke("send-smtp-email", {
|
||||
body: {
|
||||
to: testTo,
|
||||
subject: "SMTP test from your firm CRM",
|
||||
html: `<p>This is a test email sent from <strong>${form.from_email}</strong> via <code>${form.host}:${form.port}</code>.</p><p>If you received this, your SMTP settings are working.</p>`,
|
||||
text: `Test email from ${form.from_email} via ${form.host}:${form.port}.`,
|
||||
},
|
||||
});
|
||||
setTesting(false);
|
||||
if (error || (data as any)?.error) {
|
||||
toast.error("Send failed", {
|
||||
description: (error as any)?.message || (data as any)?.error,
|
||||
});
|
||||
return;
|
||||
}
|
||||
toast.success(`Test email sent to ${testTo}`);
|
||||
};
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="text-sm text-muted-foreground py-8">
|
||||
Only administrators can manage SMTP settings.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center py-16">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-3xl">
|
||||
<Card className="border-border/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-serif text-base flex items-center gap-2">
|
||||
<Mail className="h-4 w-4 text-muted-foreground" /> SMTP server
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="SMTP host *">
|
||||
<Input
|
||||
value={form.host}
|
||||
onChange={(e) => update("host", e.target.value)}
|
||||
placeholder="smtp.gmail.com"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Port *">
|
||||
<Input
|
||||
type="number"
|
||||
value={form.port}
|
||||
onChange={(e) => update("port", e.target.value)}
|
||||
placeholder="587"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Username">
|
||||
<Input
|
||||
value={form.username}
|
||||
onChange={(e) => update("username", e.target.value)}
|
||||
placeholder="user@yourdomain.com"
|
||||
/>
|
||||
</Field>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Password</Label>
|
||||
<div className="flex items-center gap-2 h-9 px-3 rounded-md border bg-muted/30 text-xs text-muted-foreground">
|
||||
<KeyRound className="h-3.5 w-3.5" />
|
||||
Stored securely as the <code>SMTP_PASSWORD</code> secret.
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:col-span-2 flex items-center justify-between rounded-md border p-3">
|
||||
<div>
|
||||
<div className="text-sm font-medium">Use TLS / SSL</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Enable for port 465 (implicit TLS). Leave off for 587 (STARTTLS).
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={form.secure}
|
||||
onCheckedChange={(v) => update("secure", v)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-border/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-serif text-base">Sender identity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="From email *">
|
||||
<Input
|
||||
type="email"
|
||||
value={form.from_email}
|
||||
onChange={(e) => update("from_email", e.target.value)}
|
||||
placeholder="notifications@yourfirm.com"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="From name">
|
||||
<Input
|
||||
value={form.from_name}
|
||||
onChange={(e) => update("from_name", e.target.value)}
|
||||
placeholder="Your Firm"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Reply-to (optional)" className="sm:col-span-2">
|
||||
<Input
|
||||
type="email"
|
||||
value={form.reply_to}
|
||||
onChange={(e) => update("reply_to", e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Notes" className="sm:col-span-2">
|
||||
<Textarea
|
||||
rows={2}
|
||||
value={form.notes}
|
||||
onChange={(e) => update("notes", e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<div className="sm:col-span-2 flex items-center justify-between rounded-md border p-3">
|
||||
<div>
|
||||
<div className="text-sm font-medium">Enabled</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Disable to stop the system from sending email.
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={form.enabled}
|
||||
onCheckedChange={(v) => update("enabled", v)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={save} disabled={saving}>
|
||||
{saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
Save SMTP settings
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="border-border/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-serif text-base flex items-center gap-2">
|
||||
<Send className="h-4 w-4 text-muted-foreground" /> Send a test email
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col sm:flex-row gap-2">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="recipient@example.com"
|
||||
value={testTo}
|
||||
onChange={(e) => setTestTo(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button onClick={sendTest} disabled={testing || !recordId}>
|
||||
{testing ? (
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Send test
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
className,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className={`space-y-1.5 ${className ?? ""}`}>
|
||||
<Label className="text-xs">{label}</Label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user