update docs, fix deluge login failure loop, check health every 2 min, fix health check false positives, update explanation for SECRET in docker compose

Author: AnthonyGress

README.md

@@ -5,21 +5,22 @@ This is an open-source user interface designed to be your internally/externally
 
 # Features
 Lab Dash features a customizable grid layout where you can add various widgets:
-- Links to your tools/services
+- Shortcuts to your tools/services
 - System information
 - Service health checks
 - Custom widgets and more
 
 ### Customization
 You can easily customize your dashboard by:
-- Dragging and reordering widgets
+- Dragging and reordering
 - Changing the background image
 - Adding custom search providers
-- Importing/exporting configurations
+- Custom title and tab name
 
 ### Privacy & Data Control
 You have complete control over your data and dashboard configuration.
-- All data is stored locally on your own server
+- All data is stored & used on your own device
+- Sensitive data is encrypted locally using [AES-256-CBC](https://docs.anchormydata.com/docs/what-is-aes-256-cbc)
 - Only administrator accounts can make changes
 - Configurations can be easily backed up and restored
 
@@ -47,9 +48,12 @@ services:
 ```
 
 # Usage
-Lab Dash can aslo be accessed from any web browser via `http://localhost:2022` or `192.168.x.x:2022` which should be your servers local IP address or yout hosted url `www.your-homepage.com`. 
+Lab Dash can aslo be accessed from any web browser via 
+- `http://localhost:2022` on the device running the container
+- `192.168.x.x:2022` on local network  
+- `www.your-homepage.com` using your custom domain name
 
-Lab Dash can aslo be installed as an app on your computer/phone as a PWA (Progressive Web App):
+Lab Dash can also be installed as an app on your computer/phone as a PWA (Progressive Web App):
 - Using Google Chrome on Mac/Windows/Android/Linux
 - Using Safari on iOS/iPad OS via the share menu > add to homscreen
 

backend/src/routes/deluge.route.ts

@@ -153,7 +153,6 @@ process.on('SIGINT', async () => {
 
 delugeRoute.post('/login', async (req: Request, res: Response) => {
     try {
-        const { username } = req.body;
         let { password } = req.body;
         const baseUrl = getBaseUrl(req);
         const host = req.query.host as string;
@@ -285,8 +284,8 @@ delugeRoute.get('/stats', async (req: Request, res: Response) => {
                         ssl
                     };
                 }
-            } catch (loginError) {
-                console.error('Deluge login attempt failed:', loginError);
+            } catch (loginError: any) {
+                console.error('Deluge login attempt failed:', loginError.message);
                 // Continue without cookie - will return default stats
             }
         }
@@ -457,8 +456,8 @@ delugeRoute.get('/torrents', async (req: Request, res: Response) => {
                         ssl
                     };
                 }
-            } catch (loginError) {
-                console.error('Deluge login attempt failed:', loginError);
+            } catch (loginError: any) {
+                console.error('Deluge login attempt failed:', loginError.message);
                 // Continue without cookie - will return empty array
             }
         }
@@ -600,8 +599,8 @@ delugeRoute.post('/torrents/resume', authenticateToken, async (req: Request, res
                         ssl
                     };
                 }
-            } catch (loginError) {
-                console.error('Deluge login attempt failed:', loginError);
+            } catch (loginError: any) {
+                console.error('Deluge login attempt failed:', loginError.message);
                 // Continue with existing cookie if available, otherwise will return an error below
             }
         }
@@ -694,8 +693,8 @@ delugeRoute.post('/torrents/pause', authenticateToken, async (req: Request, res:
                         ssl
                     };
                 }
-            } catch (loginError) {
-                console.error('Deluge login attempt failed:', loginError);
+            } catch (loginError: any) {
+                console.error('Deluge login attempt failed:', loginError.message);
                 // Continue with existing cookie if available, otherwise will return an error below
             }
         }
@@ -788,8 +787,8 @@ delugeRoute.post('/torrents/delete', authenticateToken, async (req: Request, res
                         ssl
                     };
                 }
-            } catch (loginError) {
-                console.error('Deluge login attempt failed:', loginError);
+            } catch (loginError: any) {
+                console.error('Deluge login attempt failed:', loginError.message);
                 // Continue with existing cookie if available, otherwise will return an error below
             }
         }

backend/src/routes/health.route.ts

@@ -46,23 +46,16 @@ healthRoute.get('/', async (req: Request, res: Response): Promise<void> => {
         }
 
         // If axios doesn't return valid status, try ping as fallback
-        try {
-            const parsedUrl = new URL(url);
-            const isReachable = await pingHost(parsedUrl.hostname);
-
-            res.json({ status: isReachable ? 'online' : 'offline' });
-        } catch (pingError) {
-            res.json({ status: 'offline' });
-        }
+        // try {
+        //     const parsedUrl = new URL(url);
+        //     const isReachable = await pingHost(parsedUrl.hostname);
+
+        //     res.json({ status: isReachable ? 'online' : 'offline' });
+        // } catch (pingError) {
+        //     res.json({ status: 'offline' });
+        // }
     } catch (error) {
-        // If axios completely fails, try ping as fallback
-        try {
-            const parsedUrl = new URL(url);
-            const isReachable = await pingHost(parsedUrl.hostname);
-
-            res.json({ status: isReachable ? 'online' : 'offline' });
-        } catch (pingError) {
-            res.json({ status: 'offline' });
-        }
+        console.log('service is offline', req.query.url);
+        res.json({ status: 'offline' });
     }
 });

backend/src/utils/crypto.ts

@@ -59,8 +59,6 @@ export function decrypt(encryptedText: string): string {
     } catch (error) {
         console.error('Decryption error:', error);
         console.warn('Decryption failed - possibly encrypted with a different key');
-
-        // Return empty string instead of encrypted text to avoid sending invalid credentials
         return '';
     }
 }

docker-compose.yml

@@ -4,11 +4,12 @@ services:
       container_name: lab-dash
       image: ghcr.io/anthonygress/lab-dash:latest
       privileged: true
-      network_mode: host
+      network_mode: host # for monitoring network usage stats
       ports:
         - 2022:2022
       environment:
-        - SECRET=YOUR_SECRET_KEY # any random string for jwt encryption
+        - SECRET=YOUR_SECRET_KEY # any random string for used for encryption.
+        # You can run `openssl rand -base64 32` to generate a key
       volumes:
         - /sys:/sys:ro
         - /docker/lab-dash/config:/config

frontend/src/components/dashboard/base-items/widgets/DelugeWidget.tsx

@@ -20,6 +20,7 @@ export const DelugeWidget = (props: { config?: DelugeWidgetConfig }) => {
     const [authError, setAuthError] = useState('');
     const [stats, setStats] = useState<any>(null);
     const [torrents, setTorrents] = useState<any[]>([]);
+    const [loginAttemptFailed, setLoginAttemptFailed] = useState(false);
     const [loginCredentials, setLoginCredentials] = useState({
         host: config?.host || 'localhost',
         port: config?.port || '8112',
@@ -38,6 +39,8 @@ export const DelugeWidget = (props: { config?: DelugeWidgetConfig }) => {
                 username: config.username || '',
                 password: config.password || ''
             });
+            // Reset failed flag when credentials are updated
+            setLoginAttemptFailed(false);
         }
     }, [config]);
 
@@ -49,6 +52,9 @@ export const DelugeWidget = (props: { config?: DelugeWidgetConfig }) => {
             setIsAuthenticated(success);
             if (!success) {
                 setAuthError('Login failed. Check your credentials and connection.');
+                setLoginAttemptFailed(true);
+            } else {
+                setLoginAttemptFailed(false);
             }
         } catch (error: any) {
             console.error('Login error:', error);
@@ -59,12 +65,15 @@ export const DelugeWidget = (props: { config?: DelugeWidgetConfig }) => {
                 setAuthError('Connection error. Check your Deluge WebUI settings.');
             }
             setIsAuthenticated(false);
+            setLoginAttemptFailed(true);
         } finally {
             setIsLoading(false);
         }
     }, [loginCredentials]);
 
     const fetchStats = useCallback(async () => {
+        if (loginAttemptFailed || !isAuthenticated) return;
+
         try {
             const connectionInfo = {
                 host: loginCredentials.host,
@@ -91,9 +100,11 @@ export const DelugeWidget = (props: { config?: DelugeWidgetConfig }) => {
                 setAuthError('Session expired. Please login again.');
             }
         }
-    }, [loginCredentials]);
+    }, [loginCredentials, isAuthenticated, loginAttemptFailed]);
 
     const fetchTorrents = useCallback(async () => {
+        if (loginAttemptFailed || !isAuthenticated) return;
+
         try {
             const connectionInfo = {
                 host: loginCredentials.host,
@@ -126,7 +137,7 @@ export const DelugeWidget = (props: { config?: DelugeWidgetConfig }) => {
                 setAuthError('Session expired. Please login again.');
             }
         }
-    }, [loginCredentials, config?.maxDisplayedTorrents]);
+    }, [loginCredentials, config?.maxDisplayedTorrents, isAuthenticated, loginAttemptFailed]);
 
     // Handle input changes
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -135,29 +146,33 @@ export const DelugeWidget = (props: { config?: DelugeWidgetConfig }) => {
             ...prev,
             [name]: type === 'checkbox' ? checked : value
         }));
+        // Reset failed flag when credentials are changed manually
+        setLoginAttemptFailed(false);
     };
 
-    // Auto-login when username and password are available
+    // Auto-login when username and password are available and no previous login attempt failed
     useEffect(() => {
-        if (config?.username && config?.password) {
+        if (config?.username && config?.password && !loginAttemptFailed && !isAuthenticated) {
             handleLogin();
         }
-    }, [config, handleLogin]);
+    }, [config, handleLogin, loginAttemptFailed, isAuthenticated]);
 
     // Refresh stats and torrents periodically
     useEffect(() => {
-        // Refresh both stats and torrents when the component mounts
-        fetchStats();
-        fetchTorrents();
-
-        // Set up periodic refresh
-        const interval = setInterval(() => {
+        // Only fetch data if authenticated
+        if (isAuthenticated) {
             fetchStats();
             fetchTorrents();
-        }, 5000); // Fixed interval of 5000ms as specified
 
-        return () => clearInterval(interval);
-    }, [fetchStats, fetchTorrents]);
+            // Set up periodic refresh
+            const interval = setInterval(() => {
+                fetchStats();
+                fetchTorrents();
+            }, 5000); // Fixed interval of 5000ms as specified
+
+            return () => clearInterval(interval);
+        }
+    }, [fetchStats, fetchTorrents, isAuthenticated]);
 
     // Torrent actions
     const handleResumeTorrent = useCallback(async (hash: string) => {

frontend/src/components/dashboard/base-items/widgets/QBittorrentWidget.tsx

@@ -66,6 +66,8 @@ export const QBittorrentWidget = (props: { config?: QBittorrentWidgetConfig }) =
     }, [loginCredentials]);
 
     const fetchStats = useCallback(async () => {
+        if (!isAuthenticated) return;
+
         try {
             const connectionInfo = {
                 host: loginCredentials.host,
@@ -92,9 +94,11 @@ export const QBittorrentWidget = (props: { config?: QBittorrentWidgetConfig }) =
                 setAuthError('Session expired. Please login again.');
             }
         }
-    }, [loginCredentials]);
+    }, [loginCredentials, isAuthenticated]);
 
     const fetchTorrents = useCallback(async () => {
+        if (!isAuthenticated) return;
+
         try {
             const connectionInfo = {
                 host: loginCredentials.host,
@@ -136,7 +140,7 @@ export const QBittorrentWidget = (props: { config?: QBittorrentWidgetConfig }) =
                 setAuthError('Session expired. Please login again.');
             }
         }
-    }, [loginCredentials, config?.maxDisplayedTorrents]);
+    }, [loginCredentials, config?.maxDisplayedTorrents, isAuthenticated]);
 
     // Handle input changes
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -147,27 +151,29 @@ export const QBittorrentWidget = (props: { config?: QBittorrentWidgetConfig }) =
         }));
     };
 
-    // Auto-login when username and password are available
+    // Auto-login when username and password are available and not authenticated
     useEffect(() => {
-        if (config?.username && config?.password) {
+        if (config?.username && config?.password && !isAuthenticated) {
             handleLogin();
         }
-    }, [config, handleLogin]);
+    }, [config, handleLogin, isAuthenticated]);
 
     // Refresh stats and torrents periodically
     useEffect(() => {
-        // Refresh both stats and torrents when the component mounts
-        fetchStats();
-        fetchTorrents();
-
-        // Set up periodic refresh
-        const interval = setInterval(() => {
+        // Only fetch data if authenticated
+        if (isAuthenticated) {
             fetchStats();
             fetchTorrents();
-        }, 5000); // Fixed interval of 5000ms as specified
 
-        return () => clearInterval(interval);
-    }, [fetchStats, fetchTorrents]);
+            // Set up periodic refresh
+            const interval = setInterval(() => {
+                fetchStats();
+                fetchTorrents();
+            }, 5000); // Fixed interval of 5000ms as specified
+
+            return () => clearInterval(interval);
+        }
+    }, [fetchStats, fetchTorrents, isAuthenticated]);
 
     // Torrent actions
     const handleStartTorrent = useCallback(async (hash: string) => {

frontend/src/components/dashboard/base-items/widgets/TorrentClientWidget.tsx

@@ -630,7 +630,7 @@ export const TorrentClientWidget: React.FC<TorrentClientWidgetProps> = ({
                                             bottom: 0,
                                             zIndex: 1
                                         }}>
-                                            No active torrents
+                                            No active items
                                         </Box>
                                         {/* Hidden sample torrent item to maintain width - but not visible */}
                                         <Box sx={{
@@ -660,7 +660,7 @@ export const TorrentClientWidget: React.FC<TorrentClientWidgetProps> = ({
                                                             fontSize: isMobile ? '0.7rem' : '.8rem'
                                                         }}
                                                     >
-                                                        Sample Torrent Name.mkv
+                                                        Sample File Name.mkv
                                                     </Typography>
                                                     <Typography
                                                         variant='caption'

frontend/src/components/dashboard/base-items/widgets/WidgetContainer.tsx

@@ -23,7 +23,8 @@ export const WidgetContainer: React.FC<Props> = ({ children, editMode, onEdit, o
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
 
-    const isOnline = useServiceStatus(url);
+    const isUrl = url && isValidHttpUrl(url);
+    const isOnline = useServiceStatus(isUrl ? url : null);
 
     let dotColor = 'gray';
     let tooltipText = 'Unknown';

frontend/src/constants/constants.ts

@@ -14,4 +14,5 @@ export const initialItems = [
 export const BACKEND_URL = import.meta.env.PROD ? '' : 'http://localhost:5000';
 
 export const FIFTEEN_MIN_IN_MS = 900000;
+export const TWO_MIN_IN_MS = 120000;
 // export const BACKEND_URL = 'http://localhost:5000';