PlexPlaylist_UI subtree merge

feat: Implement user authentication and login screen

Merge commit 'a14210c458d5f6c6a4875ca8228db63c0b73cf75'

sample-front-end/services/api.ts

@@ -3,7 +3,9 @@
 
 
 
-import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, SyncStrategy, PathMappingConfig, ScheduleSettings, ScheduleMode, BackupSettings } from '../types';
+
+
+import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, SyncStrategy, PathMappingConfig, ScheduleSettings, ScheduleMode, BackupSettings, LoginCredentials, AuthResponse } from '../types';
 import { MOCK_LOCAL_PLAYLISTS, MOCK_CLOUD_PLAYLISTS } from './mockData';
 
 const SIMULATE_DELAY_MS = 800;
@@ -229,5 +231,27 @@ export const apiService = {
         resolve({ data: null, status: 'success', message: 'Backup settings saved' });
       }, 500);
     });
+  },
+
+  // Mock Login - In a real app this would POST to a backend
+  login: async (creds: LoginCredentials): Promise<ApiResponse<AuthResponse>> => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        // Hardcoded mock credentials for demonstration
+        if (creds.username === 'admin' && creds.password === 'password') {
+          resolve({ 
+            data: { token: 'mock-jwt-token-123', username: 'admin' }, 
+            status: 'success', 
+            message: 'Login successful' 
+          });
+        } else {
+          resolve({ 
+            data: { token: '', username: '' }, 
+            status: 'error', 
+            message: 'Invalid credentials' 
+          });
+        }
+      }, 1000);
+    });
   }
 };