Success!
@@ -291,7 +295,7 @@
class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Save Configuration
-
@@ -335,12 +339,27 @@
successDiv.classList.add('hidden');
}
- function showSuccess(message = 'Configuration saved. Redirecting to dashboard...') {
+ function showSuccess(message = 'Configuration saved. Redirecting to dashboard...', showButton = false, showLoading = false) {
const errorDiv = document.getElementById('error-message');
const successDiv = document.getElementById('success-message');
const successText = document.getElementById('success-text');
+ const successIcon = document.getElementById('success-icon');
+ const loadingIcon = document.getElementById('loading-icon');
- successText.textContent = message;
+ // Toggle icons
+ if (showLoading) {
+ successIcon.classList.add('hidden');
+ loadingIcon.classList.remove('hidden');
+ } else {
+ successIcon.classList.remove('hidden');
+ loadingIcon.classList.add('hidden');
+ }
+
+ if (showButton) {
+ successText.innerHTML = message + '
';
+ } else {
+ successText.textContent = message;
+ }
errorDiv.classList.add('hidden');
successDiv.classList.remove('hidden');
}
@@ -350,7 +369,8 @@
document.getElementById('success-message').classList.add('hidden');
}
- async function testConnection() {
+ async function testConnection(event) {
+ if (event) event.preventDefault();
const formData = new FormData(document.getElementById('config-form'));
const config = {
proxmox: {
@@ -367,7 +387,7 @@
}
hideMessages();
- const button = event.target;
+ const button = event && event.target ? event.target : document.querySelector('button[onclick*="testConnection"]');
button.disabled = true;
button.textContent = 'Testing...';
@@ -381,7 +401,7 @@
const result = await response.json();
if (response.ok && result.success) {
- showSuccess('Connection test successful!');
+ showSuccess('Connection test successful!', false, false);
setTimeout(() => hideMessages(), 3000);
} else {
showError(result.error || 'Connection test failed');
@@ -394,8 +414,25 @@
}
}
- document.getElementById('config-form').addEventListener('submit', async (e) => {
+ // Ensure DOM is loaded before attaching event handlers
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', setupFormHandlers);
+ } else {
+ setupFormHandlers();
+ }
+
+ function setupFormHandlers() {
+ console.log('Setting up form handlers...');
+
+ const form = document.getElementById('config-form');
+ if (!form) {
+ console.error('Config form not found!');
+ return;
+ }
+
+ form.addEventListener('submit', async (e) => {
e.preventDefault();
+ console.log('Form submit event triggered');
const formData = new FormData(e.target);
const config = {
@@ -406,6 +443,12 @@
tokenSecret: formData.get('proxmox-token-secret')
}
};
+
+ // Validate required fields
+ if (!config.proxmox.host || !config.proxmox.tokenId || !config.proxmox.tokenSecret) {
+ showError('Please fill in all required Proxmox fields');
+ return;
+ }
// Add PBS config if provided
if (formData.get('pbs-host')) {
@@ -448,6 +491,7 @@
// Debug: Log what we're sending
console.log('Saving configuration:', JSON.stringify(config, null, 2));
+ console.log('Making POST request to /api/config...');
try {
const response = await fetch('/api/config', {
@@ -456,12 +500,16 @@
body: JSON.stringify(config)
});
+ console.log('Save response status:', response.status, 'ok:', response.ok);
const result = await response.json();
+ console.log('Save result:', result);
if (response.ok && result.success) {
- showSuccess();
+ showSuccess('Configuration saved! Applying settings...', false, true);
+
+ // Wait a moment for the server to start reloading
setTimeout(() => {
- window.location.href = '/';
+ checkServerReady();
}, 2000);
} else {
showError(result.error || 'Failed to save configuration');
@@ -469,11 +517,69 @@
button.textContent = 'Save Configuration';
}
} catch (error) {
+ console.error('Save configuration error:', error);
showError('Failed to save configuration: ' + error.message);
button.disabled = false;
button.textContent = 'Save Configuration';
}
- });
+ });
+
+ // Load config on page load
+ loadExistingConfig();
+ }
+
+ // Check if server is ready after configuration save
+ async function checkServerReady(attempts = 0) {
+ const maxAttempts = 15; // 30 seconds total (15 * 2 seconds)
+
+ try {
+ const response = await fetch('/api/health');
+
+ if (response.ok) {
+ const health = await response.json();
+ console.log('Health check response:', health);
+
+ // Check if the server has successfully loaded configuration
+ // Look for signs that API clients are initialized and not in placeholder mode
+ if (health.system && health.system.configPlaceholder === false) {
+ showSuccess('Configuration applied successfully!', true, false);
+
+ // Re-enable the save button
+ const button = document.getElementById('save-button');
+ button.disabled = false;
+ button.textContent = 'Save Configuration';
+ return;
+ }
+ }
+ } catch (error) {
+ console.log('Health check failed:', error);
+ }
+
+ // If we haven't exceeded max attempts, try again
+ if (attempts < maxAttempts) {
+ const messages = [
+ 'Applying configuration...',
+ 'Initializing connections...',
+ 'Connecting to Proxmox servers...',
+ 'Verifying credentials...',
+ 'Loading server data...'
+ ];
+ const messageIndex = Math.min(Math.floor(attempts / 3), messages.length - 1);
+ showSuccess(`${messages[messageIndex]} (${Math.floor((attempts / maxAttempts) * 100)}%)`, false, true);
+
+ setTimeout(() => {
+ checkServerReady(attempts + 1);
+ }, 2000);
+ } else {
+ // After 30 seconds, show the button anyway
+ showSuccess('Configuration saved! The server is taking longer than expected to initialize.', true, false);
+
+ // Re-enable the save button
+ const button = document.getElementById('save-button');
+ button.disabled = false;
+ button.textContent = 'Save Configuration';
+ }
+ }
// Load existing configuration if available
async function loadExistingConfig() {
@@ -534,9 +640,6 @@
console.error('Failed to load existing configuration:', error);
}
}
-
- // Load config on page load
- loadExistingConfig();