changed anilist login flow

desktop/src/scripts/profile.js

@@ -122,13 +122,16 @@ const DashboardApp = {
                     headerBadge.title = `Connected as ${data.anilistUserId}`;
                 }
                 if (statusEl) {
-                    statusEl.textContent = `Connected as ID: ${data.anilistUserId}`;
-                    statusEl.style.color = 'var(--color-success)';
+                    // CAMBIO: Mostrar fecha de expiración si existe
+                    const expiresDate = data.expiresAt ? new Date(data.expiresAt).toLocaleDateString() : 'Unknown';
+                    statusEl.innerHTML = `
+                        <span style="color:var(--color-success)">Connected as: <b>${data.anilistUserId}</b></span>
+                        <span style="display:block; font-size:0.75rem; color:#71717a">Expires: ${expiresDate}</span>
+                    `;
                 }
                 if (btn) {
                     btn.textContent = 'Disconnect';
                     btn.className = 'btn-stream-outline link-danger';
-
                     btn.onclick = () => this.disconnectAniList(userId);
                 }
             } else {
@@ -140,7 +143,7 @@ const DashboardApp = {
                 if (btn) {
                     btn.textContent = 'Connect';
                     btn.className = 'btn-stream-outline';
-                    btn.onclick = () => this.redirectToAniListLogin();
+                    btn.onclick = () => this.openAniListModal();
                 }
             }
         },
@@ -154,6 +157,83 @@ const DashboardApp = {
                 window.location.href = `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&state=${state}`;
             } catch (err) { console.error(err); alert('Error starting AniList login'); }
         },
+        openAniListModal: function() {
+            const modal = document.getElementById('anilist-connect-modal');
+            const body = document.getElementById('anilist-modal-body');
+            const clientId = 32898; // Tu Client ID
+
+            // Generamos el HTML del modal dinámicamente
+            body.innerHTML = `
+                <p class="modal-description">Connect your AniList account to sync your progress automatically.</p>
+                
+                <div style="margin-bottom: 1.5rem;">
+                    <label style="display:block; font-size:0.85rem; font-weight:600; color:#a1a1aa; margin-bottom:0.5rem">Step 1: Get Token</label>
+                    <a href="https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token" 
+                       target="_blank" 
+                       class="btn-blur" 
+                       style="width:100%; text-align:center; box-sizing:border-box; display:block;">
+                       Open AniList Login ↗
+                    </a>
+                </div>
+
+                <div class="input-group">
+                    <label>Step 2: Paste Token</label>
+                    <input type="text" id="manual-anilist-token" class="stream-input" placeholder="Paste the long access token here..." autocomplete="off">
+                </div>
+
+                <div class="modal-footer" style="padding:0; background:transparent;">
+                    <button class="btn-primary" style="width:100%" onclick="DashboardApp.User.submitAniListToken()">Verify & Connect</button>
+                </div>
+            `;
+
+            modal.classList.remove('hidden');
+        },
+
+        closeAniListModal: function() {
+            document.getElementById('anilist-connect-modal').classList.add('hidden');
+        },
+
+        submitAniListToken: async function() {
+            const tokenInput = document.getElementById('manual-anilist-token');
+            const token = tokenInput.value.trim();
+            const userId = DashboardApp.State.currentUserId;
+
+            if (!token) {
+                alert('Please paste the AniList token first');
+                return;
+            }
+
+            const confirmBtn = document.querySelector('#anilist-connect-modal .btn-primary');
+            const originalText = confirmBtn.textContent;
+            confirmBtn.textContent = "Verifying...";
+            confirmBtn.disabled = true;
+
+            try {
+                const res = await fetch(`${API_BASE}/anilist/store`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        userId: userId,
+                        accessToken: token
+                    })
+                });
+
+                const data = await res.json();
+
+                if (!res.ok) throw new Error(data.error || 'Failed to verify token');
+
+                this.closeAniListModal();
+                await this.checkIntegrations(userId);
+                alert('AniList connected successfully!');
+
+            } catch (err) {
+                console.error(err);
+                alert(err.message || 'Invalid Token');
+            } finally {
+                confirmBtn.textContent = originalText;
+                confirmBtn.disabled = false;
+            }
+        },
 
         disconnectAniList: async function(userId) {
             if(!confirm("Disconnect AniList?")) return;

desktop/src/scripts/users.js

@@ -838,8 +838,7 @@ function openAniListModal(userId) {
     modalUserActions.classList.remove('active');
     modalEditUser.classList.remove('active');
 
-    aniListContent.innerHTML = `<div style="text-align: center; padding: 2rem;">Loading integration status...</div>`;
-
+    // Estado de carga inicial
     modalAniList.innerHTML = `
         <div class="modal-overlay"></div>
         <div class="modal-content">
@@ -860,12 +859,15 @@ function openAniListModal(userId) {
 
     modalAniList.classList.add('active');
 
+    // Verificar si ya está conectado
     getIntegrationStatus(userId).then(integration => {
         const content = document.getElementById('aniListContent');
+        const clientId = 32898; // Tu Client ID de AniList
 
-        content.innerHTML = `
-            <div class="anilist-status">
-                ${integration.connected ? `
+        if (integration.connected) {
+            // VISTA: YA CONECTADO
+            content.innerHTML = `
+                <div class="anilist-status">
                     <div class="anilist-connected">
                         <div class="anilist-icon">
                             <img src="https://anilist.co/img/icons/icon.svg" alt="AniList" style="width:40px; height:40px;">
@@ -879,24 +881,43 @@ function openAniListModal(userId) {
                     <button class="btn-disconnect" onclick="handleDisconnectAniList()">
                         Disconnect AniList
                     </button>
-                ` : `
-                    <div style="text-align: center; padding: 1rem;">
-                        <h3 style="margin-bottom: 0.5rem;">Connect with AniList</h3>
-                        <p style="color: var(--color-text-secondary); margin-bottom: 1.5rem;">
-                            Sync your anime list by logging in with AniList.
-                        </p>
-                        <div style="display:flex; justify-content:center;">
-                            <button class="btn-connect" onclick="redirectToAniListLogin()">
-                                Login with AniList
-                            </button>
+                </div>
+            `;
+        } else {
+            // VISTA: NO CONECTADO (Formulario Manual)
+            content.innerHTML = `
+                <div class="anilist-status">
+                    <div style="text-align: left; padding: 0.5rem;">
+                        <h3 style="margin-bottom: 1rem; font-size: 1.1rem;">How to connect:</h3>
+                        
+                        <div style="margin-bottom: 1.5rem;">
+                            <p style="color: var(--color-text-secondary); margin-bottom: 0.5rem; font-size: 0.9rem;">
+                                1. Open the authorization page in a new tab:
+                            </p>
+                            <a href="https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token" 
+                               target="_blank" 
+                               class="btn-secondary" 
+                               style="display: inline-block; text-decoration: none; text-align: center; width: 100%; padding: 0.8rem;">
+                                Open AniList Login ↗
+                            </a>
                         </div>
-                        <p style="font-size:0.85rem; margin-top:1rem; color:var(--color-text-secondary)">
-                            You will be redirected and then returned here.
-                        </p>
+
+                        <div style="margin-bottom: 1.5rem;">
+                            <p style="color: var(--color-text-secondary); margin-bottom: 0.5rem; font-size: 0.9rem;">
+                                2. Authorize the app, then copy the <b>Access Token</b> provided and paste it here:
+                            </p>
+                            <div class="form-group">
+                                <input type="text" id="manualAniListToken" placeholder="Paste your Access Token here..." autocomplete="off">
+                            </div>
+                        </div>
+
+                        <button class="btn-connect" onclick="handleManualAniListToken()">
+                            Verify & Save Token
+                        </button>
                     </div>
-                `}
-            </div>
-        `;
+                </div>
+            `;
+        }
     }).catch(err => {
         console.error(err);
         const content = document.getElementById('aniListContent');
@@ -904,6 +925,49 @@ function openAniListModal(userId) {
     });
 }
 
+// Nueva función para manejar el token pegado manualmente
+async function handleManualAniListToken() {
+    const tokenInput = document.getElementById('manualAniListToken');
+    const token = tokenInput.value.trim();
+
+    if (!token) {
+        showUserToast('Please paste the AniList token first', 'error');
+        return;
+    }
+
+    const submitBtn = document.querySelector('.btn-connect');
+    const originalText = submitBtn.textContent;
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Verifying...';
+
+    try {
+        const res = await fetch(`${API_BASE}/anilist/store`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                userId: currentUserId,
+                accessToken: token,
+            })
+        });
+
+        const data = await res.json();
+
+        if (!res.ok) {
+            throw new Error(data.error || 'Failed to verify token');
+        }
+
+        showUserToast('AniList connected successfully!', 'success');
+        // Recargar el modal para mostrar el estado "Conectado"
+        openAniListModal(currentUserId);
+
+    } catch (err) {
+        console.error(err);
+        showUserToast(err.message || 'Invalid Token', 'error');
+        submitBtn.disabled = false;
+        submitBtn.textContent = originalText;
+    }
+}
+
 async function redirectToAniListLogin() {
     try {
         const res = await fetch(`/api/login`, {
@@ -918,15 +982,10 @@ async function redirectToAniListLogin() {
         localStorage.setItem('token', data.token);
 
         const clientId = 32898;
-        const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
-        const state = encodeURIComponent(currentUserId);
-
-        window.location.href =
-            `https://anilist.co/api/v2/oauth/authorize` +
-            `?client_id=${clientId}` +
-            `&response_type=code` +
-            `&redirect_uri=${redirectUri}` +
-            `&state=${state}`;
+        window.open(
+            `https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token`,
+            '_blank'
+        );
 
     } catch (err) {
         console.error(err);