Add username/password login for mobile users - headless Playwright login

backend/api/routes/auth.py

@@ -22,6 +22,33 @@ class CredentialsRequest(BaseModel):
     credentials: dict  # JSON credentials in http.headers format
 
 
+class CredentialLoginRequest(BaseModel):
+    username: str
+    password: str
+
+
+@router.post("/login", response_model=BrowserLoginResponse)
+async def credential_login(request: CredentialLoginRequest):
+    """
+    Login with TikTok username/email and password.
+    Uses headless browser - works on Docker/NAS.
+    """
+    try:
+        result = await PlaywrightManager.credential_login(
+            username=request.username,
+            password=request.password,
+            timeout_seconds=60
+        )
+        return BrowserLoginResponse(
+            status=result["status"],
+            message=result["message"],
+            cookie_count=result.get("cookie_count", 0)
+        )
+    except Exception as e:
+        print(f"DEBUG: Credential login error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @router.post("/browser-login", response_model=BrowserLoginResponse)
 async def browser_login():
     """

backend/core/playwright_manager.py

@@ -118,6 +118,129 @@ class PlaywrightManager:
         with open(USER_AGENT_FILE, "w") as f:
             json.dump({"user_agent": user_agent}, f)
 
+    @staticmethod
+    async def credential_login(username: str, password: str, timeout_seconds: int = 60) -> dict:
+        """
+        Headless login using username/password.
+        Works on Docker/NAS deployments without a display.
+        
+        Args:
+            username: TikTok username, email, or phone
+            password: TikTok password
+            timeout_seconds: Max time to wait for login
+            
+        Returns: {"status": "success/error", "message": "...", "cookie_count": N}
+        """
+        print(f"DEBUG: Starting headless credential login for: {username}")
+        
+        async with async_playwright() as p:
+            browser = await p.chromium.launch(
+                headless=True,
+                args=PlaywrightManager.BROWSER_ARGS
+            )
+            
+            context = await browser.new_context(
+                user_agent=PlaywrightManager.DEFAULT_USER_AGENT
+            )
+            
+            page = await context.new_page()
+            
+            try:
+                # Navigate to TikTok login page
+                await page.goto("https://www.tiktok.com/login/phone-or-email/email", wait_until="domcontentloaded")
+                await asyncio.sleep(2)
+                
+                print("DEBUG: Looking for login form...")
+                
+                # Wait for and fill username/email field
+                username_selector = 'input[name="username"], input[placeholder*="Email"], input[placeholder*="email"], input[type="text"]'
+                await page.wait_for_selector(username_selector, timeout=10000)
+                await page.fill(username_selector, username)
+                await asyncio.sleep(0.5)
+                
+                # Fill password field
+                password_selector = 'input[type="password"]'
+                await page.wait_for_selector(password_selector, timeout=5000)
+                await page.fill(password_selector, password)
+                await asyncio.sleep(0.5)
+                
+                print("DEBUG: Credentials filled, clicking login...")
+                
+                # Click login button
+                login_button = 'button[type="submit"], button[data-e2e="login-button"]'
+                await page.click(login_button)
+                
+                # Wait for login to complete - poll for sessionid cookie
+                print("DEBUG: Waiting for login to complete...")
+                elapsed = 0
+                check_interval = 2
+                cookies_found = {}
+                
+                while elapsed < timeout_seconds:
+                    await asyncio.sleep(check_interval)
+                    elapsed += check_interval
+                    
+                    # Check for error messages
+                    error_el = await page.query_selector('[class*="error"], [class*="Error"]')
+                    if error_el:
+                        error_text = await error_el.inner_text()
+                        if error_text and len(error_text) > 0:
+                            await browser.close()
+                            return {
+                                "status": "error",
+                                "message": f"Login failed: {error_text[:100]}",
+                                "cookie_count": 0
+                            }
+                    
+                    # Check cookies
+                    all_cookies = await context.cookies()
+                    for cookie in all_cookies:
+                        if cookie.get("domain", "").endswith("tiktok.com"):
+                            cookies_found[cookie["name"]] = cookie["value"]
+                    
+                    if "sessionid" in cookies_found:
+                        print(f"DEBUG: Login successful! Found {len(cookies_found)} cookies.")
+                        break
+                    
+                    # Check if CAPTCHA or verification needed
+                    captcha = await page.query_selector('[class*="captcha"], [class*="Captcha"], [class*="verify"]')
+                    if captcha:
+                        await browser.close()
+                        return {
+                            "status": "error",
+                            "message": "TikTok requires verification (CAPTCHA). Please try the cookie method.",
+                            "cookie_count": 0
+                        }
+                    
+                    print(f"DEBUG: Waiting for login... ({elapsed}s)")
+                
+                await browser.close()
+                
+                if "sessionid" not in cookies_found:
+                    return {
+                        "status": "error",
+                        "message": "Login timed out. Check your credentials or try the cookie method.",
+                        "cookie_count": 0
+                    }
+                
+                # Save credentials
+                PlaywrightManager.save_credentials(cookies_found, PlaywrightManager.DEFAULT_USER_AGENT)
+                
+                return {
+                    "status": "success",
+                    "message": "Successfully logged in!",
+                    "cookie_count": len(cookies_found)
+                }
+                
+            except Exception as e:
+                await browser.close()
+                print(f"DEBUG: Login error: {e}")
+                return {
+                    "status": "error",
+                    "message": f"Login failed: {str(e)[:100]}",
+                    "cookie_count": 0
+                }
+
     @staticmethod
     async def browser_login(timeout_seconds: int = 180) -> dict:
         """

frontend/src/pages/Login.tsx

@@ -1,172 +1,185 @@
 import React, { useState } from 'react';
-import { useAuthStore } from '../store/authStore';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { API_BASE_URL } from '../config';
 
 export const Login: React.FC = () => {
-    const [cookies, setCookies] = useState('');
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
     const [error, setError] = useState('');
-    const [isConnecting, setIsConnecting] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
-    const [showBrowserLogin, setShowBrowserLogin] = useState(false);
+    const [showCookieMethod, setShowCookieMethod] = useState(false);
-    const login = useAuthStore((state) => state.login);
+    const [cookies, setCookies] = useState('');
     const navigate = useNavigate();
 
-    const handleBrowserLogin = async () => {
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!username.trim() || !password.trim()) return;
+
         setError('');
-        setIsConnecting(true);
+        setIsLoading(true);
 
         try {
-            const res = await axios.post(`${API_BASE_URL}/auth/browser-login`);
+            const res = await axios.post(`${API_BASE_URL}/auth/login`, {
+                username: username.trim(),
+                password: password.trim()
+            });
 
             if (res.data.status === 'success') {
-                setTimeout(() => navigate('/'), 1000);
+                navigate('/');
-            } else if (res.data.status === 'timeout') {
+            } else {
-                setError(res.data.message);
+                setError(res.data.message || 'Login failed. Please check your credentials.');
-                setIsConnecting(false);
             }
         } catch (err: any) {
-            setError(err.response?.data?.detail || 'Failed to connect. Use the cookie method above.');
+            const message = err.response?.data?.detail || err.response?.data?.message || 'Login failed. Please try again.';
-            setIsConnecting(false);
+            setError(message);
+        } finally {
+            setIsLoading(false);
         }
     };
 
-    const handleSubmit = async (e: React.FormEvent) => {
+    const handleCookieLogin = async () => {
-        e.preventDefault();
         if (!cookies.trim()) return;
 
         setError('');
+        setIsLoading(true);
+
         try {
-            await login(cookies);
+            // Try to parse as JSON
-            navigate('/');
+            let jsonCreds;
-        } catch (err) {
+            try {
-            setError('Invalid format. Make sure you paste the full cookie JSON.');
+                jsonCreds = JSON.parse(cookies);
+            } catch {
+                // If not JSON, wrap it as simple session format
+                jsonCreds = {
+                    http: {
+                        cookies: { sessionid: cookies.trim() }
+                    }
+                };
+            }
+
+            const res = await axios.post(`${API_BASE_URL}/auth/credentials`, {
+                credentials: jsonCreds
+            });
+
+            if (res.data.status === 'success') {
+                navigate('/');
+            } else {
+                setError(res.data.message || 'Failed to save cookies.');
+            }
+        } catch (err: any) {
+            setError(err.response?.data?.detail || 'Invalid cookie format.');
+        } finally {
+            setIsLoading(false);
         }
     };
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col">
             {/* Header */}
-            <div className="flex-shrink-0 pt-12 pb-6 px-6 text-center">
+            <div className="flex-shrink-0 pt-10 pb-4 px-6 text-center">
-                <div className="relative inline-block mb-4">
+                <div className="relative inline-block mb-3">
-                    <div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl rotate-12 absolute -inset-1 blur-lg opacity-50" />
+                    <div className="w-14 h-14 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl rotate-12 absolute -inset-1 blur-lg opacity-50" />
-                    <div className="relative w-16 h-16 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl flex items-center justify-center">
+                    <div className="relative w-14 h-14 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl flex items-center justify-center">
-                        <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
+                        <svg className="w-7 h-7 text-white" viewBox="0 0 24 24" fill="currentColor">
                             <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                         </svg>
                     </div>
                 </div>
-                <h1 className="text-2xl font-bold text-white mb-1">PureStream</h1>
+                <h1 className="text-xl font-bold text-white mb-0.5">PureStream</h1>
-                <p className="text-gray-500 text-sm">Ad-free TikTok viewing</p>
+                <p className="text-gray-500 text-xs">Ad-free TikTok viewing</p>
             </div>
 
             {/* Scrollable Content */}
             <div className="flex-1 overflow-y-auto px-5 pb-8">
                 <div className="max-w-sm mx-auto">
                     {error && (
-                        <div className="mb-5 p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-400 text-sm text-center">
+                        <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm text-center">
                             {error}
                         </div>
                     )}
 
-                    {/* How to Login - Step by Step */}
+                    {/* Simple Login Form */}
-                    <div className="mb-6">
+                    <form onSubmit={handleLogin} className="space-y-4">
-                        <h2 className="text-white font-semibold text-lg mb-4 text-center">How to Login</h2>
+                        <div>
-
+                            <label className="block text-gray-400 text-xs mb-1.5 ml-1">Email or Username</label>
-                        <div className="space-y-3">
+                            <input
-                            <div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
+                                type="text"
-                                <div className="w-7 h-7 bg-cyan-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">1</div>
+                                value={username}
-                                <div>
+                                onChange={(e) => setUsername(e.target.value)}
-                                    <p className="text-white text-sm font-medium">Open TikTok in browser</p>
+                                placeholder="Enter your TikTok email"
-                                    <p className="text-gray-500 text-xs mt-0.5">Use Chrome/Safari on your phone or computer</p>
+                                className="w-full bg-black/60 border-2 border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
-                                </div>
+                                disabled={isLoading}
-                            </div>
+                            />
-
+                        </div>
-                            <div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
+
-                                <div className="w-7 h-7 bg-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">2</div>
+                        <div>
-                                <div>
+                            <label className="block text-gray-400 text-xs mb-1.5 ml-1">Password</label>
-                                    <p className="text-white text-sm font-medium">Export your cookies</p>
+                            <input
-                                    <p className="text-gray-500 text-xs mt-0.5">Use "Cookie-Editor" extension (Chrome/Firefox)</p>
+                                type="password"
-                                </div>
+                                value={password}
-                            </div>
+                                onChange={(e) => setPassword(e.target.value)}
-
+                                placeholder="Enter your password"
-                            <div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
+                                className="w-full bg-black/60 border-2 border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
-                                <div className="w-7 h-7 bg-purple-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">3</div>
+                                disabled={isLoading}
-                                <div>
-                                    <p className="text-white text-sm font-medium">Paste cookies below</p>
-                                    <p className="text-gray-500 text-xs mt-0.5">Copy the JSON and paste it here</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Cookie Input */}
-                    <form onSubmit={handleSubmit}>
-                        <div className="mb-4">
-                            <textarea
-                                value={cookies}
-                                onChange={(e) => setCookies(e.target.value)}
-                                placeholder='Paste your cookie JSON here...'
-                                className="w-full h-32 bg-black/60 border-2 border-white/10 rounded-2xl p-4 text-white text-sm font-mono resize-none focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
                             />
                         </div>
 
-                        {/* Connect Button */}
                         <button
                             type="submit"
-                            disabled={!cookies.trim()}
+                            disabled={!username.trim() || !password.trim() || isLoading}
-                            className={`w-full py-4 text-white font-semibold rounded-2xl transition-all transform active:scale-[0.98] shadow-lg text-base ${cookies.trim()
+                            className={`w-full py-4 text-white font-semibold rounded-xl transition-all transform active:scale-[0.98] text-base mt-2 ${username.trim() && password.trim() && !isLoading
-                                    ? 'bg-gradient-to-r from-cyan-500 to-pink-500 hover:from-cyan-400 hover:to-pink-400 shadow-pink-500/20'
+                                    ? 'bg-gradient-to-r from-cyan-500 to-pink-500 shadow-lg shadow-pink-500/20'
                                     : 'bg-gray-700 cursor-not-allowed'
                                 }`}
                         >
-                            Connect to TikTok
+                            {isLoading ? (
+                                <span className="flex items-center justify-center gap-2">
+                                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                    Logging in...
+                                </span>
+                            ) : (
+                                'Log In'
+                            )}
                         </button>
                     </form>
 
-                    {/* Help Link */}
+                    {/* Info */}
-                    <div className="mt-6 text-center">
+                    <p className="text-gray-600 text-xs text-center mt-4">
-                        <a
+                        Your credentials are used only to log into TikTok on the server. They are not stored.
-                            href="https://chrome.google.com/webstore/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm"
+                    </p>
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-cyan-400 text-sm underline"
-                        >
-                            Get Cookie-Editor Extension →
-                        </a>
-                    </div>
 
-                    {/* Desktop Browser Login - Hidden by default */}
+                    {/* Cookie Method - Alternative */}
                     <div className="mt-8 pt-6 border-t border-white/10">
                         <button
-                            onClick={() => setShowBrowserLogin(!showBrowserLogin)}
+                            onClick={() => setShowCookieMethod(!showCookieMethod)}
                             className="w-full text-gray-500 hover:text-gray-400 text-sm py-2 flex items-center justify-center gap-2"
                         >
-                            <span>{showBrowserLogin ? '▲' : '▼'}</span>
+                            <span>{showCookieMethod ? '▲' : '▼'}</span>
-                            <span>Desktop Browser Login</span>
+                            <span>Alternative: Cookie Method</span>
                         </button>
 
-                        {showBrowserLogin && (
+                        {showCookieMethod && (
-                            <div className="mt-3 p-4 bg-white/5 rounded-xl">
+                            <div className="mt-3 p-4 bg-white/5 rounded-xl space-y-3">
-                                <p className="text-gray-400 text-xs text-center mb-3">
+                                <p className="text-gray-400 text-xs text-center">
-                                    ⚠️ Only works on local machines with a display
+                                    If login doesn't work, you can paste TikTok cookies directly.
                                 </p>
+                                <textarea
+                                    value={cookies}
+                                    onChange={(e) => setCookies(e.target.value)}
+                                    placeholder='Paste sessionid or full cookie JSON...'
+                                    className="w-full h-24 bg-black/60 border border-white/10 rounded-xl p-3 text-white text-xs font-mono resize-none focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
+                                    disabled={isLoading}
+                                />
                                 <button
-                                    onClick={handleBrowserLogin}
+                                    onClick={handleCookieLogin}
-                                    disabled={isConnecting}
+                                    disabled={!cookies.trim() || isLoading}
-                                    className={`w-full py-3 rounded-xl transition-all text-sm ${isConnecting
+                                    className={`w-full py-3 rounded-xl text-sm transition-all ${cookies.trim() && !isLoading
-                                            ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+                                            ? 'bg-white/10 hover:bg-white/20 text-white'
-                                            : 'bg-white/10 hover:bg-white/20 text-white'
+                                            : 'bg-gray-800 text-gray-500 cursor-not-allowed'
                                         }`}
                                 >
-                                    {isConnecting ? (
+                                    Connect with Cookies
-                                        <span className="flex items-center justify-center gap-2">
-                                            <div className="w-4 h-4 border-2 border-gray-500 border-t-white rounded-full animate-spin" />
-                                            Connecting...
-                                        </span>
-                                    ) : (
-                                        'Open TikTok Login Window'
-                                    )}
                                 </button>
                             </div>
                         )}