refactor: Enhance dashboard initialization and error handling to fix white screen issue and improve user experience
This commit is contained in:
parent
2e6136caec
commit
97e4de1383
GPG Key ID:
13E498CE010AC6FD
@ -4,6 +4,41 @@
|
||||
|
||||
// Initialize components when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOM loaded, initializing dashboard...');
|
||||
|
||||
// Fix for white screen issue - ensure containers are properly initialized
|
||||
// This runs before any other initialization to make sure the DOM is in a good state
|
||||
const fixWhiteScreenIssue = () => {
|
||||
console.log('Running white screen fix...');
|
||||
|
||||
// Check if auth section exists and is visible
|
||||
const authSection = document.getElementById('auth-section');
|
||||
const dashboardContainer = document.getElementById('dashboard-container');
|
||||
const serverSelectSection = document.getElementById('server-select-section');
|
||||
|
||||
console.log('Auth section:', authSection ? 'found' : 'not found');
|
||||
console.log('Dashboard container:', dashboardContainer ? 'found' : 'not found');
|
||||
console.log('Server select section:', serverSelectSection ? 'found' : 'not found');
|
||||
|
||||
// If we're logged in (check for session cookie) but dashboard is hidden, show it
|
||||
const hasDashboardCookie = document.cookie.includes('dashboard_session');
|
||||
console.log('Dashboard session cookie present:', hasDashboardCookie);
|
||||
|
||||
if (hasDashboardCookie) {
|
||||
console.log('Session cookie found, ensuring dashboard is visible');
|
||||
if (authSection) authSection.style.display = 'none';
|
||||
if (dashboardContainer) dashboardContainer.style.display = 'block';
|
||||
if (serverSelectSection) serverSelectSection.style.display = 'block';
|
||||
} else {
|
||||
console.log('No session cookie found, showing auth section');
|
||||
if (authSection) authSection.style.display = 'block';
|
||||
if (dashboardContainer) dashboardContainer.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
// Run the fix immediately
|
||||
fixWhiteScreenIssue();
|
||||
|
||||
// Initialize modals
|
||||
Modal.init();
|
||||
|
||||
@ -22,6 +57,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Store selected guild ID globally (using localStorage)
|
||||
window.selectedGuildId = localStorage.getItem('selectedGuildId');
|
||||
window.currentSettingsGuildId = null; // Track which guild's settings are loaded
|
||||
|
||||
// If we have a selected guild ID but the dashboard is still not visible, force it
|
||||
if (window.selectedGuildId && document.getElementById('dashboard-container').style.display === 'none') {
|
||||
console.log('Selected guild ID found but dashboard not visible, forcing visibility');
|
||||
document.getElementById('dashboard-container').style.display = 'block';
|
||||
// Try to show the appropriate section
|
||||
showSection('server-settings');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
@ -84,6 +127,12 @@ function initAuth() {
|
||||
const logoutButton = document.getElementById('logout-button');
|
||||
const authSection = document.getElementById('auth-section');
|
||||
const dashboardSection = document.getElementById('dashboard-container');
|
||||
const serverSelectSection = document.getElementById('server-select-section');
|
||||
|
||||
console.log('Initializing authentication...');
|
||||
console.log('Auth section:', authSection ? 'found' : 'not found');
|
||||
console.log('Dashboard section:', dashboardSection ? 'found' : 'not found');
|
||||
console.log('Server select section:', serverSelectSection ? 'found' : 'not found');
|
||||
|
||||
// Check authentication status
|
||||
checkAuthStatus();
|
||||
@ -132,6 +181,8 @@ function initAuth() {
|
||||
* Check if user is authenticated
|
||||
*/
|
||||
function checkAuthStatus() {
|
||||
console.log('Checking authentication status...');
|
||||
|
||||
// Show loading indicator
|
||||
const loadingContainer = document.createElement('div');
|
||||
loadingContainer.className = 'loading-container';
|
||||
@ -146,33 +197,70 @@ function initAuth() {
|
||||
credentials: 'same-origin' // Important for cookies
|
||||
})
|
||||
.then(response => {
|
||||
console.log('Auth status response:', response.status);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Status check failed: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Auth status:', data);
|
||||
console.log('Auth status data:', data);
|
||||
|
||||
if (data.authenticated) {
|
||||
console.log('User is authenticated, showing dashboard');
|
||||
|
||||
// User is authenticated, show dashboard
|
||||
if (authSection) authSection.style.display = 'none';
|
||||
if (dashboardSection) dashboardSection.style.display = 'block';
|
||||
if (authSection) {
|
||||
console.log('Hiding auth section');
|
||||
authSection.style.display = 'none';
|
||||
} else {
|
||||
console.warn('Auth section not found');
|
||||
}
|
||||
|
||||
if (dashboardSection) {
|
||||
console.log('Showing dashboard section');
|
||||
dashboardSection.style.display = 'block';
|
||||
} else {
|
||||
console.warn('Dashboard section not found');
|
||||
}
|
||||
|
||||
// If user data is included in the response, use it
|
||||
if (data.user) {
|
||||
console.log('User data found in response, updating display');
|
||||
updateUserDisplay(data.user);
|
||||
} else {
|
||||
console.log('No user data in response, loading separately');
|
||||
// Otherwise load user info separately
|
||||
loadUserInfo();
|
||||
}
|
||||
|
||||
// Show server selection screen first
|
||||
console.log('Showing server selection screen');
|
||||
showServerSelection();
|
||||
|
||||
// Force visibility of server selection section
|
||||
const serverSelectSection = document.getElementById('server-select-section');
|
||||
if (serverSelectSection) {
|
||||
console.log('Forcing server select section to be visible');
|
||||
serverSelectSection.style.display = 'block';
|
||||
} else {
|
||||
console.warn('Server select section not found');
|
||||
}
|
||||
} else {
|
||||
console.log('User is not authenticated, showing login');
|
||||
|
||||
// User is not authenticated, show login
|
||||
if (authSection) authSection.style.display = 'block';
|
||||
if (dashboardSection) dashboardSection.style.display = 'none';
|
||||
if (authSection) {
|
||||
authSection.style.display = 'block';
|
||||
} else {
|
||||
console.warn('Auth section not found');
|
||||
}
|
||||
|
||||
if (dashboardSection) {
|
||||
dashboardSection.style.display = 'none';
|
||||
} else {
|
||||
console.warn('Dashboard section not found');
|
||||
}
|
||||
|
||||
// Show message if provided
|
||||
if (data.message) {
|
||||
@ -192,6 +280,31 @@ function initAuth() {
|
||||
.finally(() => {
|
||||
// Remove loading indicator
|
||||
document.body.removeChild(loadingContainer);
|
||||
|
||||
// Fallback mechanism - if we have a dashboard cookie but nothing is visible, force the dashboard to show
|
||||
const hasDashboardCookie = document.cookie.includes('dashboard_session');
|
||||
const authSection = document.getElementById('auth-section');
|
||||
const dashboardContainer = document.getElementById('dashboard-container');
|
||||
const serverSelectSection = document.getElementById('server-select-section');
|
||||
|
||||
if (hasDashboardCookie) {
|
||||
console.log('Fallback check: Session cookie found, ensuring dashboard is visible');
|
||||
|
||||
// Check if all sections are hidden, which would result in a white screen
|
||||
const allHidden =
|
||||
(!authSection || authSection.style.display === 'none') &&
|
||||
(!dashboardContainer || dashboardContainer.style.display === 'none') &&
|
||||
(!serverSelectSection || serverSelectSection.style.display === 'none');
|
||||
|
||||
if (allHidden) {
|
||||
console.log('CRITICAL: All sections are hidden, forcing dashboard and server selection to be visible');
|
||||
if (dashboardContainer) dashboardContainer.style.display = 'block';
|
||||
if (serverSelectSection) serverSelectSection.style.display = 'block';
|
||||
|
||||
// Force load user guilds
|
||||
loadUserGuilds();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -438,21 +551,53 @@ function showServerSelection() {
|
||||
|
||||
if (!serverSelectSection) {
|
||||
console.error('Server selection section not found!');
|
||||
// Maybe show an error to the user or default to the old behavior
|
||||
loadDashboardData(); // Fallback?
|
||||
// Create a visible error message for the user
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.style.position = 'fixed';
|
||||
errorDiv.style.top = '50%';
|
||||
errorDiv.style.left = '50%';
|
||||
errorDiv.style.transform = 'translate(-50%, -50%)';
|
||||
errorDiv.style.backgroundColor = '#f8d7da';
|
||||
errorDiv.style.color = '#721c24';
|
||||
errorDiv.style.padding = '20px';
|
||||
errorDiv.style.borderRadius = '5px';
|
||||
errorDiv.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
|
||||
errorDiv.style.zIndex = '9999';
|
||||
errorDiv.innerHTML = `
|
||||
<h3>Dashboard Error</h3>
|
||||
<p>The server selection section could not be found. This is likely a bug in the dashboard.</p>
|
||||
<p>Please try refreshing the page. If the problem persists, contact the administrator.</p>
|
||||
`;
|
||||
document.body.appendChild(errorDiv);
|
||||
|
||||
// Try to show the dashboard anyway as a fallback
|
||||
if (dashboardContainer) dashboardContainer.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide main dashboard content and show server selection
|
||||
if (dashboardContainer) dashboardContainer.style.display = 'none';
|
||||
console.log('Server selection section found, displaying it');
|
||||
|
||||
// Make sure dashboard container is visible first
|
||||
if (dashboardContainer) {
|
||||
console.log('Making dashboard container visible');
|
||||
dashboardContainer.style.display = 'block';
|
||||
} else {
|
||||
console.error('Dashboard container not found!');
|
||||
}
|
||||
|
||||
// Show server selection section
|
||||
console.log('Making server selection section visible');
|
||||
serverSelectSection.style.display = 'block';
|
||||
|
||||
// Hide all other specific dashboard sections just in case
|
||||
document.querySelectorAll('.dashboard-section').forEach(section => {
|
||||
if (section.id !== 'server-select-section') {
|
||||
section.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Load the list of guilds for the user
|
||||
console.log('Loading user guilds...');
|
||||
loadUserGuilds();
|
||||
}
|
||||
|
||||
@ -460,23 +605,45 @@ function showServerSelection() {
|
||||
* Load guilds the user has admin access to for the selection screen
|
||||
*/
|
||||
function loadUserGuilds() {
|
||||
console.log('Loading user guilds...');
|
||||
const serverListContainer = document.getElementById('server-list-container'); // Assuming this ID exists within server-select-section
|
||||
if (!serverListContainer) {
|
||||
console.error('Server list container not found!');
|
||||
|
||||
// Try to find the server-select-section and add the container
|
||||
const serverSelectSection = document.getElementById('server-select-section');
|
||||
if (serverSelectSection) {
|
||||
console.log('Server select section found, creating server list container');
|
||||
const newContainer = document.createElement('div');
|
||||
newContainer.id = 'server-list-container';
|
||||
newContainer.className = 'server-list-container';
|
||||
serverSelectSection.appendChild(newContainer);
|
||||
|
||||
// Now try again with the new container
|
||||
loadUserGuilds();
|
||||
return;
|
||||
} else {
|
||||
console.error('Server select section also not found, cannot proceed');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Server list container found, showing loading state');
|
||||
serverListContainer.innerHTML = '<div class="loading-spinner"></div><p>Loading your servers...</p>'; // Show loading state
|
||||
|
||||
console.log('Fetching user guilds from API...');
|
||||
API.get('/dashboard/api/user-guilds')
|
||||
.then(guilds => {
|
||||
console.log('User guilds received:', guilds);
|
||||
serverListContainer.innerHTML = ''; // Clear loading state
|
||||
|
||||
if (!guilds || guilds.length === 0) {
|
||||
console.log('No guilds found');
|
||||
serverListContainer.innerHTML = '<div class="alert alert-info">No servers found where you have admin permissions.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Found ${guilds.length} guilds, rendering them`);
|
||||
guilds.forEach(guild => {
|
||||
const guildElement = document.createElement('div');
|
||||
guildElement.className = 'server-select-item card'; // Add card class for styling
|
||||
@ -582,6 +749,15 @@ function loadUserGuilds() {
|
||||
errorMessage += '<li>Check that the bot is properly configured with database access</li>';
|
||||
errorMessage += '<li>Ensure the Discord bot token is properly set</li>';
|
||||
errorMessage += '</ol>';
|
||||
|
||||
// Add debug information to help troubleshoot
|
||||
errorMessage += '<div class="debug-info" style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 5px;">';
|
||||
errorMessage += '<h5>Debug Information</h5>';
|
||||
errorMessage += `<p>Error: ${error.message || 'Unknown error'}</p>`;
|
||||
errorMessage += `<p>Status: ${error.status || 'N/A'}</p>`;
|
||||
errorMessage += `<p>Time: ${new Date().toISOString()}</p>`;
|
||||
errorMessage += '</div>';
|
||||
|
||||
errorMessage += '<button id="retry-load-guilds" class="btn btn-primary">Retry</button>';
|
||||
errorMessage += '</div>';
|
||||
|
||||
@ -589,9 +765,24 @@ function loadUserGuilds() {
|
||||
|
||||
// Add event listener to the retry button
|
||||
document.getElementById('retry-load-guilds').addEventListener('click', () => {
|
||||
console.log('Retrying guild load...');
|
||||
loadUserGuilds(); // Retry loading guilds
|
||||
});
|
||||
|
||||
// Try to make the server selection section visible again in case it was hidden
|
||||
const serverSelectSection = document.getElementById('server-select-section');
|
||||
if (serverSelectSection) {
|
||||
console.log('Ensuring server select section is visible');
|
||||
serverSelectSection.style.display = 'block';
|
||||
}
|
||||
|
||||
// Try to make the dashboard container visible in case it was hidden
|
||||
const dashboardContainer = document.getElementById('dashboard-container');
|
||||
if (dashboardContainer) {
|
||||
console.log('Ensuring dashboard container is visible');
|
||||
dashboardContainer.style.display = 'block';
|
||||
}
|
||||
|
||||
Toast.error('Failed to load your servers. See details on screen.');
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user