CDN-APP-INSIDER/public/js/authlogin.script.js

// Gestion du thème
const body = document.body;
const themeSwitcher = document.getElementById('authlogin-theme-switch');

function setTheme(theme) {
    if (theme === 'dark') {
        body.classList.add('dark');
    } else {
        body.classList.remove('dark');
    }
    localStorage.setItem('theme', theme);
}

// Initialisation du thème
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    setTheme(savedTheme);
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    setTheme('dark');
}

themeSwitcher.addEventListener('click', () => {
    body.classList.contains('dark') ? setTheme('light') : setTheme('dark');
});

// Gestion du formulaire de connexion
document.getElementById('authlogin-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const username = document.getElementById('authlogin-username').value;
    const password = document.getElementById('authlogin-password').value;
    const loginButton = document.getElementById('authlogin-submit');

    // Animation de chargement
    loginButton.disabled = true;
    loginButton.innerHTML = `
        <div class="loading-dots">
            Connexion en cours<span>.</span><span>.</span><span>.</span>
        </div>
    `;

    fetch('/auth/activedirectory', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password }),
        redirect: 'follow',
    })
    .then(response => {
        if (response.url.includes('/dpanel/dashboard')) {
            loginButton.classList.add('success-animation');
            loginButton.innerHTML = '<i class="fas fa-check icon-spacing"></i>Succès!';
            
            // Crée l'effet de vague
            const ripple = document.createElement('span');
            ripple.style.cssText = `
                position: absolute;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                pointer-events: none;
                width: 200px;
                height: 200px;
                transform: translate(-50%, -50%) scale(0);
                animation: ripple 1s ease-out;
            `;
            loginButton.appendChild(ripple);

            setTimeout(() => {
                const formContainer = document.querySelector('.form-container');
                const h1Title = document.querySelector('h1');
                
                formContainer.style.opacity = '0';
                formContainer.style.transform = 'translateY(-20px) scale(0.98)';
                
                h1Title.style.transform = 'translateY(20px)';
                h1Title.style.opacity = '0';
                
                setTimeout(() => {
                    formContainer.innerHTML = `
                        <div class="text-center animate-success">
                            <div class="success-circle mb-4">
                                <i class="fas fa-check text-4xl"></i>
                            </div>
                            <h2 class="text-2xl font-semibold mb-3">Connexion réussie !</h2>
                            <p class="text-muted-foreground mb-4">Redirection vers le tableau de bord...</p>
                            <div class="loading-bar"></div>
                        </div>
                    `;
                    
                    formContainer.style.opacity = '1';
                    formContainer.style.transform = 'translateY(0) scale(1)';
                    
                    h1Title.textContent = 'Bienvenue !';
                    h1Title.style.transform = 'translateY(0)';
                    h1Title.style.opacity = '1';
                    
                    setTimeout(() => window.location.replace('/dpanel/dashboard'), 1500);
                }, 300);
            }, 700);
        } else {
            throw new Error('Échec de la connexion');
        }
    })
    .catch(error => {
        loginButton.classList.add('fail-animation');
        loginButton.innerHTML = '<i class="fas fa-times icon-spacing"></i>Échec';
        
        if ('vibrate' in navigator) {
            navigator.vibrate(100);
        }
        
        setTimeout(() => {
            loginButton.classList.remove('fail-animation');
            loginButton.disabled = false;
            loginButton.innerHTML = '<i class="fa-solid fa-user icon-spacing"></i>Se connecter';
        }, 1500);
    });
});

function redirectToDiscord(url) {
    const discordButton = document.getElementById('authlogin-discord');
    if (discordButton) {
        discordButton.innerHTML = `
            <div class="loading-dots">
                Redirection en cours<span>.</span><span>.</span><span>.</span>
            </div>
        `;
        discordButton.disabled = true;
        
        setTimeout(() => {
            document.querySelector('.form-container').style.opacity = '0';
            document.querySelector('.form-container').style.transform = 'translateY(-20px) scale(0.98)';
            setTimeout(() => window.location.href = url, 500);
        }, 500);
    }
}