V1.0.0-beta.17 Update 1

Note: We appreciate your feedback and bug reports to continue improving our platform. Thank you for your continued support!

public/js/authlogin.script.js

@@ -0,0 +1,134 @@
+// 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);
+    }
+}