From 6180135f94ec8fe93574b46600771dfb0e8451b1 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Wed, 8 Apr 2026 08:02:43 -0700
Subject: [PATCH] Add Deezer ARL token to Connections tab with bidirectional
 sync

ARL field now appears on both Connections tab (under Deezer OAuth)
and Downloads tab. Both fields are populated from the same config
key and synced bidirectionally via input listeners. Editing either
field instantly updates the other.
---
 webui/index.html       | 12 ++++++++++++
 webui/static/script.js |  8 ++++++++
 2 files changed, 20 insertions(+)

diff --git a/webui/index.html b/webui/index.html
index ddfebae5..d4456799 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -4125,6 +4125,18 @@
                                             <button class="auth-button" onclick="authenticateDeezer()">🔐
                                                 Authenticate</button>
                                         </div>
+                                        <div class="callback-info" style="margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px;">
+                                            <div class="callback-help" style="margin-bottom: 8px;">Or use an <strong>ARL token</strong> for playlist access and downloads (no OAuth app needed):</div>
+                                        </div>
+                                        <div class="form-group">
+                                            <label>ARL Token:</label>
+                                            <input type="password" id="deezer-connection-arl"
+                                                placeholder="Paste your ARL cookie token here">
+                                        </div>
+                                        <div class="callback-info">
+                                            <div class="callback-help">Log into <a href="https://www.deezer.com" target="_blank" style="color: #A238FF;">deezer.com</a>
+                                                → DevTools (F12) → Application → Cookies → copy the <code>arl</code> value. Provides playlist access + downloads.</div>
+                                        </div>
                                     </div>
                                 </div>
 
diff --git a/webui/static/script.js b/webui/static/script.js
index f6f9034a..419133df 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -5894,6 +5894,14 @@ async function loadSettingsData() {
         document.getElementById('deezer-download-quality').value = settings.deezer_download?.quality || 'flac';
         document.getElementById('deezer-allow-fallback').checked = settings.deezer_download?.allow_fallback !== false;
         document.getElementById('deezer-download-arl').value = settings.deezer_download?.arl || '';
+        // Sync ARL to connections tab field + bidirectional listeners
+        const _connArl = document.getElementById('deezer-connection-arl');
+        const _dlArl = document.getElementById('deezer-download-arl');
+        if (_connArl) _connArl.value = settings.deezer_download?.arl || '';
+        if (_connArl && _dlArl) {
+            _connArl.addEventListener('input', () => { _dlArl.value = _connArl.value; });
+            _dlArl.addEventListener('input', () => { _connArl.value = _dlArl.value; });
+        }
 
         // Populate YouTube settings
         document.getElementById('youtube-cookies-browser').value = settings.youtube?.cookies_browser || '';