Client Feedback Dashboard

Main Dashboard Integration Guide

To integrate your main dashboard (syncara_dashboard (13).html) with this login system, follow these steps:

1. Add Authentication Check

At the beginning of the <script> tag in your syncara_dashboard (13).html, add this JavaScript code to check if a user is logged in. If not, it will redirect them to the login page.

document.addEventListener('DOMContentLoaded', function() {
    const authDataString = localStorage.getItem('syncaraAuthenticatedUser');
    if (!authDataString) {
        // Not authenticated, redirect to login
        // Make sure 'syncara_login.html' is in the same directory or provide the correct relative path
        window.location.href = 'syncara_login.html'; 
        return; // Stop further script execution on this page
    }

    try {
        const authUser = JSON.parse(authDataString);
        console.log('Authenticated User:', authUser);

        // Personalize your dashboard (Example)
        const companyNameSpan = document.getElementById('dashboardCompanyName'); // Assuming you have this ID
        if (companyNameSpan && authUser.companyName) {
            companyNameSpan.textContent = authUser.companyName;
        }
        // Add more personalization as needed (e.g., client logo)

        // --- Initialize your dashboard with authUser.id or other data ---
        // For example, if your Airtable fetching depends on a client ID:
        // AIRTABLE_API.setClientId(authUser.id); // Hypothetical function
        // DASHBOARD.loadRealData(); 
        
    } catch (e) {
        console.error("Error parsing auth data:", e);
        localStorage.removeItem('syncaraAuthenticatedUser'); // Clear corrupted data
        window.location.href = 'syncara_login.html';
    }
    
    // ... rest of your dashboard's DOMContentLoaded logic ...
});
                    

2. Implement Logout Functionality

In your syncara_dashboard (13).html, ensure your logout button/link does the following:

function handleDashboardLogout() {
    localStorage.removeItem('syncaraAuthenticatedUser');
    // Optionally clear other dashboard-specific localStorage items
    // For example, if your dashboard uses SYNCARA_SETTINGS:
    // if (typeof SYNCARA_SETTINGS !== 'undefined' && SYNCARA_SETTINGS.clear) {
    //     SYNCARA_SETTINGS.clear(); 
    // }
    alert('You have been logged out.'); // Or use your dashboard's toast/notification system
    window.location.href = 'syncara_login.html';
}

// Attach this to your logout button, e.g.:
// const logoutBtn = document.getElementById('yourLogoutButtonId');
// if (logoutBtn) logoutBtn.addEventListener('click', handleDashboardLogout);
                    

Make sure the "Account" and "Logout" links in your dashboard's sidebar point to syncara_login.html and trigger the logout respectively.

3. Fetching Client-Specific Data

When fetching data from Airtable in your main dashboard (syncara_dashboard (13).html), you'll need to use the logged-in user's ID (authUser.id from localStorage) to filter or fetch the correct data. This part depends heavily on how your Airtable base is structured and how your dashboard's AIRTABLE_API object is designed.

For example, if each client's data is in a separate table or tagged with their ID, you would modify your Airtable API calls to include this identifier.

4. Important Notes:

• Ensure syncara_landing.html, syncara_login.html, and your syncara_dashboard (13).html are in the same directory for relative links to work correctly when testing locally.
• This is a client-side authentication simulation. For a production application, always implement robust server-side authentication.
• The syncaraAuthenticatedUser item in localStorage will contain: { id, email, companyName, userType, logoUrl, selectedPlan, selectedAction }.

Back to My Dashboard