package components import ( "context" "fmt" ) type NotificationService struct { ID uint Name string Type string // "email", "webhook", etc. IsEnabled bool Config map[string]string Description string EventTriggers []string PayloadTemplate string SecretKey string RetryPolicy string SuccessCount int FailureCount int } type SettingsData struct { NotificationServices []NotificationService ErrorMessage string SuccessMessage string } templ Settings(ctx context.Context, data SettingsData) { @LayoutWithContext("Application Settings", ctx) {

Application Settings

Configure global settings for your GoMFT instance.

if data.SuccessMessage != "" { } if data.ErrorMessage != "" { }

Notification Services

Add Notification Service

if len(data.NotificationServices) == 0 {

No notification services configured

Use the form above to add your first notification service.

} else {
    for _, service := range data.NotificationServices {
  • if service.Type == "email" {
    } else if service.Type == "webhook" {
    } else {
    }

    { service.Name }

    { service.Description }

    if service.IsEnabled { Active } else { Disabled } { service.Type } if len(service.EventTriggers) > 0 && service.Type == "webhook" { { fmt.Sprintf("%d triggers", len(service.EventTriggers)) } } if service.SuccessCount > 0 || service.FailureCount > 0 { { fmt.Sprintf("%d/%d", service.SuccessCount, service.SuccessCount + service.FailureCount) } }
    if service.Type == "webhook" {
    Events: if len(service.EventTriggers) == 0 { None } else { for i, trigger := range service.EventTriggers { if i > 0 { , } { trigger } } }
    Retry: if service.RetryPolicy == "" { Default } else { { service.RetryPolicy } }
    } else {

    Last sent: if service.SuccessCount > 0 { "Recently" } else { "Never" }

    }
    • }
}
} @toggleNotificationFields() @addAuthSourceModals() @setupTabSwitching() } // Add new templ component for auth source modals templ addAuthSourceModals() { } // Script to toggle notification fields based on selection script toggleNotificationFields() { document.addEventListener('DOMContentLoaded', function() { const typeSelector = document.getElementById('notification_type'); const allFields = document.querySelectorAll('.notification-fields'); const commonFields = document.querySelectorAll('.common-fields'); typeSelector.addEventListener('change', function() { // Hide all fields first allFields.forEach(field => field.classList.add('hidden')); // Show/hide common fields based on selection const selectedType = this.value; if (selectedType) { // Show common fields (name, description) commonFields.forEach(field => field.classList.remove('hidden')); // Show the selected type's specific fields const fieldsToShow = document.getElementById(`${selectedType}_fields`); if (fieldsToShow) { fieldsToShow.classList.remove('hidden'); } } else { // Hide common fields if no type selected commonFields.forEach(field => field.classList.add('hidden')); } }); }); } // Add script to toggle authentication source fields based on type selection script toggleAuthSourceFields() { document.addEventListener('DOMContentLoaded', function() { const typeSelector = document.getElementById('auth_type'); const authFields = document.querySelectorAll('.auth-type-fields'); if (typeSelector) { typeSelector.addEventListener('change', function() { // Hide all auth type fields first authFields.forEach(field => field.classList.add('hidden')); // Show the selected type's fields const selectedType = this.value; if (selectedType) { const fieldsToShow = document.getElementById(`${selectedType}_fields`); if (fieldsToShow) { fieldsToShow.classList.remove('hidden'); } } }); } }); } // Add script to handle tab switching script setupTabSwitching() { document.addEventListener('DOMContentLoaded', function() { const tabButtons = document.querySelectorAll('[role="tab"]'); const tabPanels = document.querySelectorAll('[role="tabpanel"]'); function switchTab(targetId) { // Hide all tab panels tabPanels.forEach(panel => { panel.classList.add('hidden'); }); // Show the target panel const targetPanel = document.querySelector(targetId); if (targetPanel) { targetPanel.classList.remove('hidden'); targetPanel.classList.add('block'); } // Update tab button styles tabButtons.forEach(button => { // Get the target from the button const buttonTarget = button.getAttribute('data-tabs-target'); if (buttonTarget === targetId) { // Active tab button.classList.add('border-blue-600', 'text-blue-600', 'dark:text-blue-500', 'dark:border-blue-500'); button.classList.remove('border-transparent', 'hover:border-gray-300', 'hover:text-gray-600', 'dark:hover:text-gray-300'); button.setAttribute('aria-selected', 'true'); } else { // Inactive tab button.classList.remove('border-blue-600', 'text-blue-600', 'dark:text-blue-500', 'dark:border-blue-500'); button.classList.add('border-transparent', 'hover:border-gray-300', 'hover:text-gray-600', 'dark:hover:text-gray-300'); button.setAttribute('aria-selected', 'false'); } }); } // Add click event listeners to tab buttons tabButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('data-tabs-target'); switchTab(targetId); }); }); // Initialize the tabs (select the one with aria-selected="true") const initialTab = document.querySelector('[role="tab"][aria-selected="true"]'); if (initialTab) { const targetId = initialTab.getAttribute('data-tabs-target'); switchTab(targetId); } }); }