package pages import ( "tankstopp/internal/currency" "tankstopp/internal/models" "tankstopp/internal/views/components" ) templ SettingsPage(user *models.User, username string, currencies []currency.Currency, successMessage, errorMessage string) { @components.BaseLayout("Settings", user, username) { @components.PageHeader("Manage your account", "Settings")
if successMessage != "" {
@components.Alert("success", successMessage)
} if errorMessage != "" {
@components.Alert("danger", errorMessage)
}
@components.Card("Profile Settings", "user") { @components.Form("post", "/settings/profile") {
@components.FormGroup("Username", "Your unique username") { @components.Input("username", "text", "Enter username", username, true) }
@components.FormGroup("Email", "Your email address") { @components.Input("email", "email", "Enter email", user.Email, true) }
@components.FormGroup("Base Currency", "Default currency for fuel prices") { @components.CurrencySelect("base_currency", user.BaseCurrency, currencies) }
@components.ButtonGroup() { @components.PrimaryButton("Save Profile", "save") }
} }
@components.Card("Application Preferences", "settings") { @components.Form("post", "/settings/preferences") {
@components.FormGroup("Distance Unit", "Unit for distance measurements") { @components.Select("distance_unit", false) { @components.Option("km", "Kilometers (km)", true) @components.Option("mi", "Miles (mi)", false) } }
@components.FormGroup("Volume Unit", "Unit for fuel volume measurements") { @components.Select("volume_unit", false) { @components.Option("L", "Liters (L)", true) @components.Option("gal", "Gallons (gal)", false) } }
@components.FormGroup("Date Format", "How dates are displayed") { @components.Select("date_format", false) { @components.Option("DD/MM/YYYY", "DD/MM/YYYY", false) @components.Option("MM/DD/YYYY", "MM/DD/YYYY", false) @components.Option("YYYY-MM-DD", "YYYY-MM-DD", true) } }
@components.FormGroup("Language", "Application language") { @components.Select("language", false) { @components.Option("en", "English", true) @components.Option("de", "Deutsch", false) @components.Option("fr", "Français", false) @components.Option("es", "Español", false) } }
@components.FormGroup("Notifications", "Email notification preferences") { @components.Switch("email_notifications", "Send email notifications", false) }
@components.ButtonGroup() { @components.PrimaryButton("Save Preferences", "save") }
} }
@components.Card("Security Settings", "lock") { @components.Form("post", "/settings/password") {
@components.FormGroup("Current Password", "Enter your current password") { @components.PasswordInput("current_password", "Current password", true) }
@components.FormGroup("New Password", "Choose a new password") { @components.PasswordInput("new_password", "New password", true) }
@components.FormGroup("Confirm New Password", "Confirm your new password") { @components.PasswordInput("confirm_password", "Confirm new password", true) }
@components.ButtonGroup() { @components.PrimaryButton("Change Password", "lock") }
} }
@components.Card("Data Management", "database") {
Export Data

Download your fuel stop data in various formats

@components.ButtonGroup() { @components.Icon("download", 24) Export CSV @components.Icon("download", 24) Export JSON }
Import Data

Import fuel stop data from a CSV file

@components.Form("post", "/import/csv") {
@components.PrimaryButton("Import CSV", "upload") }
Danger Zone

These actions cannot be undone

@components.ButtonGroup() { }
}
@components.Card("Account Management", "user") {
Delete Account

Permanently delete your account and all associated data. This action cannot be undone.

}
@components.Card("Account Summary", "info-circle") {
Member since { user.CreatedAt.Format("Jan 2006") }
Email { user.Email }
Base currency { user.BaseCurrency }
Account status Active
}
@components.Card("Quick Actions", "zap") {
@components.Icon("plus", 24) Add Fuel Stop @components.Icon("car", 24) Manage Vehicles @components.Icon("home", 24) Go to Dashboard
}
@SettingsScript() } } script SettingsScript() { function confirmClearData() { if (confirm('Are you sure you want to clear all your data? This will delete all fuel stops and vehicles permanently.')) { if (confirm('This action cannot be undone. Are you absolutely sure?')) { // Create a form to submit the clear data request const form = document.createElement('form'); form.method = 'POST'; form.action = '/settings/clear-data'; document.body.appendChild(form); form.submit(); } } } function confirmDeleteAccount() { if (confirm('Are you sure you want to delete your account? This will permanently delete all your data.')) { if (confirm('This action cannot be undone. Type "DELETE" to confirm:')) { const confirmation = prompt('Please type "DELETE" to confirm account deletion:'); if (confirmation === 'DELETE') { // Create a form to submit the delete account request const form = document.createElement('form'); form.method = 'POST'; form.action = '/settings/delete-account'; document.body.appendChild(form); form.submit(); } else { alert('Account deletion cancelled. The confirmation text did not match.'); } } } } // Initialize settings page document.addEventListener('DOMContentLoaded', function() { // Initialize tooltips var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); // Handle file input styling const fileInputs = document.querySelectorAll('input[type="file"]'); fileInputs.forEach(function(input) { input.addEventListener('change', function(e) { const fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen'; const label = e.target.parentNode.querySelector('.file-label'); if (label) { label.textContent = fileName; } }); }); }); }