使用VALKEY缓存登录装唐

public/js/main.js

@@ -19,6 +19,10 @@ document.addEventListener('DOMContentLoaded', () => {
     const currentVideoTitle = document.getElementById('current-video-title');
     const transcodeBtn = document.getElementById('transcode-btn');
     const stopTranscodeBtn = document.getElementById('stop-transcode-btn');
+    const themeSelector = document.getElementById('theme-selector');
+    const currentUsername = document.getElementById('current-username');
+    const logoutBtn = document.getElementById('logout-btn');
+    const topBannerTitle = document.getElementById('top-banner-title');
     const playBtn = document.getElementById('play-btn');
     const topBanner = document.getElementById('top-banner');
     const customControls = document.getElementById('custom-controls');
@@ -138,8 +142,13 @@ document.addEventListener('DOMContentLoaded', () => {
         const decoder = 'auto';
         const encoder = encoderSelect?.value || 'h264_rkmpp';
         let streamUrl = `/api/hls/playlist.m3u8?bucket=${encodeURIComponent(selectedBucket)}&key=${encodeURIComponent(selectedKey)}&decoder=${encodeURIComponent(decoder)}&encoder=${encodeURIComponent(encoder)}`;
-        if (s3Username) streamUrl += `&username=${encodeURIComponent(s3Username)}`;
-        if (s3Password) streamUrl += `&password=${encodeURIComponent(s3Password)}`;
+        const sessionId = localStorage.getItem('sessionId');
+        if (sessionId) {
+            streamUrl += `&sessionId=${encodeURIComponent(sessionId)}`;
+        } else {
+            if (s3Username) streamUrl += `&username=${encodeURIComponent(s3Username)}`;
+            if (s3Password) streamUrl += `&password=${encodeURIComponent(s3Password)}`;
+        }
         return streamUrl;
     };
 
@@ -531,7 +540,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (!res.ok) throw new Error('Failed to load config');
             const data = await res.json();
             const title = data.title || 'S3 Media Transcoder';
-            topBanner.textContent = title;
+            if (topBannerTitle) topBannerTitle.textContent = title;
             topBanner.classList.remove('hidden');
             document.title = title;
             populateSelect(encoderSelect, data.videoEncoders || [], data.defaultVideoEncoder || 'h264_rkmpp');
@@ -572,6 +581,21 @@ document.addEventListener('DOMContentLoaded', () => {
         if (s3Password) s3AuthHeaders['X-S3-Password'] = s3Password;
     };
 
+    const setSessionAuth = (sessionId, username) => {
+        s3AuthHeaders = { 'X-Session-ID': sessionId };
+        localStorage.setItem('sessionId', sessionId);
+        if (username) {
+            localStorage.setItem('username', username);
+            if (currentUsername) currentUsername.textContent = username;
+        }
+    };
+
+    const clearSessionAuth = () => {
+        s3AuthHeaders = {};
+        localStorage.removeItem('sessionId');
+        localStorage.removeItem('username');
+    };
+
     const showLogin = () => {
         if (loginScreen) loginScreen.classList.remove('hidden');
         if (appContainer) appContainer.classList.add('hidden');
@@ -618,16 +642,19 @@ document.addEventListener('DOMContentLoaded', () => {
         clearLoginError();
 
         try {
-            setAuthHeaders(username, password);
-            const res = await fetch('/api/buckets', { headers: s3AuthHeaders });
+            const res = await fetch('/api/login', { 
+                method: 'POST', 
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password })
+            });
+            const data = await res.json();
             if (!res.ok) {
-                const data = await res.json().catch(() => ({}));
                 throw new Error(data.error || 'Login failed');
             }
-            const data = await res.json();
             if (!Array.isArray(data.buckets) || data.buckets.length === 0) {
                 throw new Error('No buckets available for this account');
             }
+            setSessionAuth(data.sessionId, data.username);
             renderBuckets(data.buckets);
             showApp();
             selectedBucket = data.buckets[0].Name;
@@ -638,7 +665,7 @@ document.addEventListener('DOMContentLoaded', () => {
         } catch (err) {
             console.error('Login error:', err);
             showLoginError(err.message);
-            setAuthHeaders('', '');
+            clearSessionAuth();
         } finally {
             if (loginBtn) {
                 loginBtn.disabled = false;
@@ -1088,6 +1115,61 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    // Initial state: require login before loading data
-    showLogin();
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', async () => {
+            const sessionId = localStorage.getItem('sessionId');
+            if (sessionId) {
+                try {
+                    await fetch('/api/logout', { 
+                        method: 'POST', 
+                        headers: { 'X-Session-ID': sessionId } 
+                    });
+                } catch(e){}
+            }
+            clearSessionAuth();
+            location.reload();
+        });
+    }
+
+    if (themeSelector) {
+        themeSelector.addEventListener('change', (e) => {
+            const theme = e.target.value;
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+        });
+    }
+
+    const initApp = async () => {
+        const savedSession = localStorage.getItem('sessionId');
+        const savedUsername = localStorage.getItem('username');
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        if (themeSelector) themeSelector.value = savedTheme;
+
+        if (savedSession) {
+            setSessionAuth(savedSession, savedUsername);
+            try {
+                const res = await fetch('/api/buckets', { headers: s3AuthHeaders });
+                if (!res.ok) throw new Error('Session invalid');
+                const data = await res.json();
+                renderBuckets(data.buckets);
+                showApp();
+                selectedBucket = data.buckets[0].Name;
+                if (bucketSelect) bucketSelect.value = selectedBucket;
+                loadConfig();
+                connectWebSocket();
+                await fetchVideos(selectedBucket);
+            } catch (err) {
+                console.error('Auto login failed:', err);
+                clearSessionAuth();
+                showLogin();
+            }
+        } else {
+            showLogin();
+        }
+    };
+
+    // Initial state: attempt auto login
+    initApp();
 });