sena_db_api_layer/public/js/login.js

// API Base URL - thay đổi theo cấu hình của bạn
const API_BASE_URL = '/api/';

const loginForm = document.getElementById('loginForm');
const loginBtn = document.getElementById('loginBtn');
const registerBtn = document.getElementById('registerBtn');
const verifyTokenBtn = document.getElementById('verifyTokenBtn');
const logoutBtn = document.getElementById('logoutBtn');
const getAllUsersBtn = document.getElementById('getAllUsersBtn');
const testHealthBtn = document.getElementById('testHealthBtn');
const responseContainer = document.getElementById('responseContainer');

// Load token from localStorage
let authToken = localStorage.getItem('token');

// Helper function to display response
function displayResponse(title, data, status) {
    const statusClass = status >= 200 && status < 300 ? 'success' : 'error';
    const statusText = status >= 200 && status < 300 ? 'Success' : 'Error';
    
    responseContainer.innerHTML = `
        <div class="response-content">
            <div class="response-title">${title}</div>
            <span class="status ${statusClass}">Status: ${status} ${statusText}</span>
            <pre>${JSON.stringify(data, null, 2)}</pre>
        </div>
    `;
}

// Helper function to show loading
function showLoading(btn) {
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = originalText + '<span class="loading"></span>';
    return originalText;
}

function hideLoading(btn, originalText) {
    btn.disabled = false;
    btn.innerHTML = originalText;
}

// Login form submission
loginForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    const originalText = showLoading(loginBtn);

    try {
        // Call login endpoint
        const response = await fetch(`${API_BASE_URL}auth/login`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username,
                password: password,
            }),
        });

        const data = await response.json();
        displayResponse('Login Response', data, response.status);

        if (response.ok && data.data && data.data.token) {
            // Store token
            authToken = data.data.token;
            localStorage.setItem('token', authToken);
            alert('✅ Đăng nhập thành công!');
        }
    } catch (error) {
        displayResponse('Login Error', {
            error: error.message,
            note: 'Không thể kết nối đến server. Hãy đảm bảo server đang chạy.'
        }, 500);
        console.error('Error:', error);
    } finally {
        hideLoading(loginBtn, originalText);
    }
});

// Register button
registerBtn.addEventListener('click', async () => {
    const username = prompt('Nhập username:');
    if (!username) return;
    
    const email = prompt('Nhập email:');
    if (!email) return;
    
    const password = prompt('Nhập password:');
    if (!password) return;

    const full_name = prompt('Nhập họ tên (optional):');

    const originalText = showLoading(registerBtn);

    try {
        const response = await fetch(`${API_BASE_URL}auth/register`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username,
                email,
                password,
                full_name,
            }),
        });

        const data = await response.json();
        displayResponse('Register Response', data, response.status);

        if (response.ok) {
            alert('✅ Đăng ký thành công! Bạn có thể đăng nhập ngay.');
        }
    } catch (error) {
        displayResponse('Register Error', {
            error: error.message
        }, 500);
        console.error('Error:', error);
    } finally {
        hideLoading(registerBtn, originalText);
    }
});

// Verify token button
verifyTokenBtn.addEventListener('click', async () => {
    const originalText = showLoading(verifyTokenBtn);

    try {
        if (!authToken) {
            displayResponse('Verify Token Error', {
                error: 'Chưa có token. Vui lòng đăng nhập trước.'
            }, 401);
            return;
        }

        const response = await fetch(`${API_BASE_URL}auth/verify-token`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${authToken}`,
            },
        });

        const data = await response.json();
        displayResponse('Verify Token Response', data, response.status);
    } catch (error) {
        displayResponse('Verify Token Error', {
            error: error.message
        }, 500);
        console.error('Error:', error);
    } finally {
        hideLoading(verifyTokenBtn, originalText);
    }
});

// Logout button
logoutBtn.addEventListener('click', async () => {
    const originalText = showLoading(logoutBtn);

    try {
        if (!authToken) {
            displayResponse('Logout Error', {
                error: 'Chưa có token. Vui lòng đăng nhập trước.'
            }, 401);
            return;
        }

        const response = await fetch(`${API_BASE_URL}auth/logout`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${authToken}`,
            },
        });

        const data = await response.json();
        displayResponse('Logout Response', data, response.status);

        if (response.ok) {
            authToken = null;
            localStorage.removeItem('token');
            alert('✅ Đăng xuất thành công!');
        }
    } catch (error) {
        displayResponse('Logout Error', {
            error: error.message
        }, 500);
        console.error('Error:', error);
    } finally {
        hideLoading(logoutBtn, originalText);
    }
});

// Get all users
getAllUsersBtn.addEventListener('click', async () => {
    const originalText = showLoading(getAllUsersBtn);

    try {
        const response = await fetch(`${API_BASE_URL}users?page=1&limit=10`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
        });

        const data = await response.json();
        displayResponse('Get All Users', data, response.status);
    } catch (error) {
        displayResponse('Error', {
            error: error.message,
            note: 'Không thể kết nối đến API. Hãy đảm bảo server đang chạy tại ' + API_BASE_URL
        }, 500);
        console.error('Error:', error);
    } finally {
        hideLoading(getAllUsersBtn, originalText);
    }
});

// Test health endpoint
testHealthBtn.addEventListener('click', async () => {
    const originalText = showLoading(testHealthBtn);

    try {
        const response = await fetch(`/health`, {
            method: 'GET',
        });

        const data = await response.json();
        displayResponse('Health Check', data, response.status);
    } catch (error) {
        displayResponse('Error', {
            error: error.message,
            note: 'Không thể kết nối đến API. Hãy đảm bảo server đang chạy tại ' + API_BASE_URL
        }, 500);
        console.error('Error:', error);
    } finally {
        hideLoading(testHealthBtn, originalText);
    }
});

// Auto-test health on page load
window.addEventListener('load', () => {
    setTimeout(() => {
        testHealthBtn.click();
    }, 500);
});