Add Email Testing Functionality to Admin Tools

- Introduced a new section in the admin tools for testing email configurations.
- Added a form to send test emails, including recipient, subject, and message fields.
- Implemented backend logic to handle test email requests and send emails using the configured SMTP server.
- Created a toast notification component to display success or failure messages for email tests.
- Updated routes to include a new endpoint for handling test email submissions.
This commit is contained in:
StarFleetCPTN
2025-03-20 18:11:57 -07:00
parent 1a1df435de
commit d6bd471eb0
4 changed files with 407 additions and 5 deletions
+169
View File
@@ -36,6 +36,9 @@ type AdminToolsData struct {
LogFiles []LogFile
LogContent string
CurrentLogFile string
EmailTestSuccess *bool
EmailTestMessage string
SmtpServer string
}
// Dialog component for confirmation dialogs
@@ -463,6 +466,101 @@ templ AdminTools(ctx context.Context, data AdminToolsData) {
</div>
</div>
<!-- Email Testing Tools -->
<div class="mt-8">
<div class="card">
<div class="card-header">
<h3 class="text-lg font-medium text-secondary-900 dark:text-secondary-100">
<i class="fas fa-envelope mr-2 text-primary-500"></i>
Email Testing
</h3>
</div>
<div class="card-body">
<p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">
Test your email configuration by sending a test email to verify the server can send emails properly.
</p>
<form id="test-email-form" hx-post="/admin/test-email" hx-target="#email-test-result" hx-swap="outerHTML" hx-indicator="#email-test-indicator">
<div class="space-y-4">
<div>
<label for="test-email-recipient" class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
Recipient Email
</label>
<input
type="email"
id="test-email-recipient"
name="recipient"
class="form-input w-full"
placeholder="recipient@example.com"
required
/>
</div>
<div>
<label for="test-email-subject" class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
Subject (Optional)
</label>
<input
type="text"
id="test-email-subject"
name="subject"
class="form-input w-full"
placeholder="Test Email from GoMFT"
/>
</div>
<div>
<label for="test-email-message" class="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
Message (Optional)
</label>
<textarea
id="test-email-message"
name="message"
rows="3"
class="form-textarea w-full"
placeholder="This is a test email from GoMFT."
></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="btn-primary flex items-center justify-center" onclick="fadeInAnimation()">
<i class="fas fa-paper-plane mr-2"></i>
<span>Send Test Email</span>
<div id="email-test-indicator" class="htmx-indicator ml-2">
<i class="fas fa-circle-notch fa-spin"></i>
</div>
</button>
</div>
</div>
</form>
<!-- Toast container for email test results -->
<div id="email-test-result" class="mt-4 hidden">
if data.EmailTestSuccess != nil {
@EmailTestToast(*data.EmailTestSuccess, data.EmailTestMessage)
}
</div>
<!-- Email settings reminder -->
<div class="mt-6 bg-secondary-50 dark:bg-secondary-800/50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-secondary-900 dark:text-secondary-100 flex items-center">
<i class="fas fa-info-circle mr-2 text-blue-500"></i>
Email Configuration
</h4>
if data.SmtpServer != "" {
<p class="mt-2 text-xs text-secondary-600 dark:text-secondary-400">
Current SMTP server: <span class="font-mono">{ data.SmtpServer }</span>
</p>
} else {
<p class="mt-2 text-xs text-secondary-600 dark:text-secondary-400">
Email settings are configured in your application configuration file. Make sure SMTP settings are properly configured before testing.
</p>
}
</div>
</div>
</div>
</div>
<!-- Available Backups -->
<div id="backups-container" class="mt-8">
@BackupsList(data)
@@ -1000,3 +1098,74 @@ var Commit = "unknown"
func getCommit() string {
return Commit
}
// EmailTestToast is a component for showing email test results
templ EmailTestToast(success bool, message string) {
<div id="email-test-result" class="mt-4 animate-fade-in">
<div class={
"rounded-lg p-4 flex items-start",
templ.KV("bg-green-50 dark:bg-green-900/20 border-l-4 border-green-400", success),
templ.KV("bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400", !success),
}>
<div class="flex-shrink-0">
if success {
<i class="fas fa-check-circle text-green-400"></i>
} else {
<i class="fas fa-exclamation-circle text-red-400"></i>
}
</div>
<div class="ml-3">
<h3 class={
"text-sm font-medium",
templ.KV("text-green-800 dark:text-green-300", success),
templ.KV("text-red-800 dark:text-red-300", !success),
}>
if success {
Email Sent Successfully
} else {
Email Sending Failed
}
</h3>
<div class={
"mt-1 text-sm",
templ.KV("text-green-700 dark:text-green-400", success),
templ.KV("text-red-700 dark:text-red-400", !success),
}>
{ message }
</div>
</div>
<div class="ml-auto pl-3 flex-shrink-0">
<button
type="button"
onclick="document.getElementById('email-test-result').classList.add('hidden');"
class={
"inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2",
templ.KV("text-green-500 hover:bg-green-100 dark:hover:bg-green-900/30 focus:ring-green-500", success),
templ.KV("text-red-500 hover:bg-red-100 dark:hover:bg-red-900/30 focus:ring-red-500", !success),
}
>
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
}
// Add a style for the animate-fade-in animation
script fadeInAnimation() {
// Add CSS animation if it doesn't exist
if (!document.getElementById('fade-in-animation')) {
const style = document.createElement('style');
style.id = 'fade-in-animation';
style.textContent = `
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
`;
document.head.appendChild(style);
}
}