Fix: Use correct API endpoint for test email
This commit is contained in:
Tola Leng
@@ -1,4 +1,3 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -7,8 +6,9 @@ import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { useLanguage } from "@/contexts/LanguageContext";
|
||||
import { Mail, X } from "lucide-react";
|
||||
import { Mail, X, AlertCircle, CheckCircle, Loader2 } from "lucide-react";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
interface TestEmailDialogProps {
|
||||
open: boolean;
|
||||
@@ -33,9 +33,16 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
|
||||
const [email, setEmail] = useState('');
|
||||
const [template, setTemplate] = useState('verification');
|
||||
const [collection, setCollection] = useState('_superusers');
|
||||
const [lastResult, setLastResult] = useState<{ success: boolean; message: string } | null>(null);
|
||||
const [isInternalTesting, setIsInternalTesting] = useState(false);
|
||||
|
||||
const validateEmail = (email: string): boolean => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!email) {
|
||||
if (!email.trim()) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Please enter an email address",
|
||||
@@ -44,39 +51,73 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateEmail(email)) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Please enter a valid email address",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLastResult(null);
|
||||
setIsInternalTesting(true);
|
||||
|
||||
console.log('Sending test email with data:', {
|
||||
email,
|
||||
template,
|
||||
collection: template === 'verification' || template === 'password-reset' ? collection : undefined
|
||||
});
|
||||
|
||||
await onSendTest({
|
||||
email,
|
||||
template,
|
||||
collection: template === 'verification' ? collection : undefined
|
||||
collection: template === 'verification' || template === 'password-reset' ? collection : undefined
|
||||
});
|
||||
|
||||
setLastResult({
|
||||
success: true,
|
||||
message: `Test email sent successfully to ${email}`
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Test email sent successfully",
|
||||
description: `Test email sent successfully to ${email}`,
|
||||
variant: "default",
|
||||
});
|
||||
|
||||
// Close dialog on success
|
||||
handleClose();
|
||||
} catch (error) {
|
||||
console.error('Error sending test email:', error);
|
||||
const errorMessage = error instanceof Error ? error.message : "Failed to send test email";
|
||||
|
||||
setLastResult({
|
||||
success: false,
|
||||
message: errorMessage
|
||||
});
|
||||
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to send test email",
|
||||
description: errorMessage,
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsInternalTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
onOpenChange(false);
|
||||
// Reset form
|
||||
// Reset form but keep last result for reference
|
||||
setEmail('');
|
||||
setTemplate('verification');
|
||||
setCollection('_superusers');
|
||||
// Don't reset lastResult immediately to allow user to see the result
|
||||
setTimeout(() => setLastResult(null), 300);
|
||||
};
|
||||
|
||||
const isLoading = isTesting || isInternalTesting;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
@@ -90,16 +131,31 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
|
||||
size="icon"
|
||||
className="absolute right-4 top-4"
|
||||
onClick={handleClose}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Show last result */}
|
||||
{lastResult && (
|
||||
<Alert variant={lastResult.success ? "default" : "destructive"}>
|
||||
{lastResult.success ? (
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
)}
|
||||
<AlertDescription>
|
||||
{lastResult.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Template Selection */}
|
||||
<div className="space-y-3">
|
||||
<Label>{t("emailTemplate", "settings")}</Label>
|
||||
<RadioGroup value={template} onValueChange={setTemplate}>
|
||||
<RadioGroup value={template} onValueChange={setTemplate} disabled={isLoading}>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="verification" id="verification" />
|
||||
<Label htmlFor="verification">{t("verification", "settings")}</Label>
|
||||
@@ -112,22 +168,14 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
|
||||
<RadioGroupItem value="email-change" id="email-change" />
|
||||
<Label htmlFor="email-change">{t("confirmEmailChange", "settings")}</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="otp" id="otp" />
|
||||
<Label htmlFor="otp">{t("otp", "settings")}</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="login-alert" id="login-alert" />
|
||||
<Label htmlFor="login-alert">{t("loginAlert", "settings")}</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
{/* Auth Collection - only show for verification template */}
|
||||
{template === 'verification' && (
|
||||
{/* Auth Collection - show for verification and password-reset templates */}
|
||||
{(template === 'verification' || template === 'password-reset') && (
|
||||
<div className="space-y-2">
|
||||
<Label>{t("authCollection", "settings")} *</Label>
|
||||
<Select value={collection} onValueChange={setCollection}>
|
||||
<Select value={collection} onValueChange={setCollection} disabled={isLoading}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t("selectCollection", "settings")} />
|
||||
</SelectTrigger>
|
||||
@@ -148,21 +196,34 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={t("enterEmailAddress", "settings")}
|
||||
required
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info message */}
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
This will send a test email using your configured SMTP settings. Make sure SMTP is properly configured first.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex justify-between">
|
||||
<Button variant="outline" onClick={handleClose}>
|
||||
<Button variant="outline" onClick={handleClose} disabled={isLoading}>
|
||||
{t("close", "common")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
disabled={!email || isTesting}
|
||||
disabled={!email || isLoading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Mail className="h-4 w-4" />
|
||||
{isTesting ? t("sending", "settings") : t("send", "common")}
|
||||
{isLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Mail className="h-4 w-4" />
|
||||
)}
|
||||
{isLoading ? t("sending", "settings") : t("send", "common")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
Reference in New Issue
Block a user