vndangkhoa/kv-tiktok
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve login UX for Docker deployments - show manual cookie login as primary

Browse source
This commit is contained in:
Khoa.vo 2025-12-19 14:42:37 +07:00
parent a19015fe99
commit 3d90735c4a
1 changed files with 46 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/components/Feed.tsx
View file

@ -607,41 +607,59 @@ export const Feed: React.FC = () => {
</div> </div>
)} )}
<button {/* Info for Docker/Server users */}
onClick={handleBrowserLogin} <div className="mb-6 p-4 bg-cyan-500/10 border border-cyan-500/20 rounded-xl">
className="w-full py-4 px-6 bg-gradient-to-r from-cyan-500 to-pink-500 hover:from-cyan-400 hover:to-pink-400 text-white font-semibold rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-pink-500/20 mb-4" <p className="text-cyan-400 text-sm text-center mb-2">
> 🐳 <strong>Docker/Server Users</strong>
Login with TikTok
</button>
<p className="text-center text-gray-600 text-xs mb-6">
Opens a browser for secure SSL login
</p> </p>
<p className="text-gray-400 text-xs text-center">
Use the <strong>Manual Login</strong> below. Browser login only works on local machines with a display.
</p>
</div>
<button {/* Manual Login - Primary for Docker */}
onClick={() => setShowAdvanced(!showAdvanced)} <div className="p-4 bg-white/5 rounded-xl border border-white/10 mb-4">
className="w-full text-center text-gray-500 hover:text-gray-400 text-sm py-2" <label className="block text-gray-300 text-sm font-medium mb-3">
> 📋 Paste TikTok Cookies (Recommended)
{showAdvanced ? '▲ Hide Advanced' : '▼ Advanced Login'}
</button>
{showAdvanced && (
<div className="mt-4 p-4 bg-white/5 rounded-xl border border-white/10">
<label className="block text-gray-400 text-sm mb-2">
Paste Session JSON:
</label> </label>
<textarea <textarea
value={jsonInput} value={jsonInput}
onChange={(e) => setJsonInput(e.target.value)} onChange={(e) => setJsonInput(e.target.value)}
placeholder='{"http": {"headers": {...}, "cookies": {...}}}' placeholder='{"http": {"headers": {...}, "cookies": {...}}}'
className="w-full h-32 bg-black/50 border border-white/10 rounded-lg p-3 text-white text-xs font-mono resize-none focus:outline-none focus:border-cyan-500/50" className="w-full h-28 bg-black/50 border border-white/10 rounded-lg p-3 text-white text-xs font-mono resize-none focus:outline-none focus:border-cyan-500/50 mb-3"
/> />
<button <button
onClick={handleJsonLogin} onClick={handleJsonLogin}
className="w-full mt-3 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg text-sm transition-colors" className="w-full py-3 bg-gradient-to-r from-cyan-500 to-pink-500 hover:from-cyan-400 hover:to-pink-400 text-white font-semibold rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-pink-500/20"
> >
Connect with Session Data Connect with Cookies
</button> </button>
<p className="text-gray-500 text-xs text-center mt-3">
Export cookies from TikTok using a browser extension like "EditThisCookie" or "Cookie-Editor"
</p>
</div>
{/* Browser Login - Alternative */}
<div className="text-center">
<button
onClick={() => setShowAdvanced(!showAdvanced)}
className="text-gray-500 hover:text-gray-400 text-sm py-2"
>
{showAdvanced ? '▲ Hide Browser Login' : '▼ Try Browser Login (Local Only)'}
</button>
</div>
{showAdvanced && (
<div className="mt-4">
<button
onClick={handleBrowserLogin}
className="w-full py-3 px-6 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-all text-sm"
>
Open TikTok Login Window
</button>
<p className="text-center text-gray-600 text-xs mt-2">
⚠️ Only works when running locally with a display
</p>
</div> </div>
)} )}
</div> </div>