mirror of
https://github.com/vndangkhoa/purestream.git
synced 2026-04-05 01:17:58 +07:00
Fix: Update Login.tsx with mobile-friendly step-by-step design
This commit is contained in:
Khoa.vo
parent
7f7b41ff05
commit
7e742eba10
1 changed files with 124 additions and 87 deletions
|
|
@ -8,134 +8,171 @@ export const Login: React.FC = () => {
|
|||
const [cookies, setCookies] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [connectionStatus, setConnectionStatus] = useState('');
|
||||
const [showBrowserLogin, setShowBrowserLogin] = useState(false);
|
||||
const login = useAuthStore((state) => state.login);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleBrowserLogin = async () => {
|
||||
setError('');
|
||||
setIsConnecting(true);
|
||||
setConnectionStatus('Opening TikTok login...');
|
||||
|
||||
try {
|
||||
const res = await axios.post(`${API_BASE_URL}/auth/browser-login`);
|
||||
|
||||
if (res.data.status === 'success') {
|
||||
setConnectionStatus('Connected! Redirecting...');
|
||||
setTimeout(() => navigate('/'), 1000);
|
||||
} else if (res.data.status === 'timeout') {
|
||||
setError(res.data.message);
|
||||
setIsConnecting(false);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to connect. Please try manual method.');
|
||||
setError(err.response?.data?.detail || 'Failed to connect. Use the cookie method above.');
|
||||
setIsConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!cookies.trim()) return;
|
||||
|
||||
setError('');
|
||||
try {
|
||||
await login(cookies);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError('Invalid format or server error. Ensure you paste the full JSON or Netscape text.');
|
||||
setError('Invalid format. Make sure you paste the full cookie JSON.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-black text-white font-sans overflow-hidden relative">
|
||||
{/* Ambient Background Safelight */}
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-pink-500/20 blur-[120px] rounded-full" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-violet-500/20 blur-[120px] rounded-full" />
|
||||
|
||||
<div className="w-full max-w-xl p-8 sm:p-12 bg-white/5 backdrop-blur-3xl rounded-[2.5rem] shadow-2xl border border-white/10 z-10 mx-4 relative overflow-hidden">
|
||||
<div className="text-center mb-10 space-y-2">
|
||||
<h2 className="text-4xl font-black tracking-tight bg-gradient-to-br from-white via-white to-white/40 bg-clip-text text-transparent">
|
||||
TikTok Clean
|
||||
</h2>
|
||||
<p className="text-white/50 text-base font-medium">Your personalized feed, reimagined.</p>
|
||||
</div>
|
||||
|
||||
{/* Primary: Browser Login Button */}
|
||||
<div className="space-y-6 mb-8">
|
||||
<button
|
||||
onClick={handleBrowserLogin}
|
||||
disabled={isConnecting}
|
||||
className={`group relative w-full py-5 px-8 rounded-2xl transition-all font-black text-lg
|
||||
${isConnecting
|
||||
? 'bg-gray-800 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 text-white shadow-[0_0_40px_rgba(236,72,153,0.3)] hover:shadow-[0_0_60px_rgba(236,72,153,0.5)] active:scale-[0.98]'
|
||||
}`}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<span className="flex items-center justify-center gap-3">
|
||||
<div className="w-5 h-5 border-2 border-gray-500 border-t-white rounded-full animate-spin" />
|
||||
{connectionStatus}
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
|
||||
</svg>
|
||||
Connect with TikTok
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<p className="text-center text-white/30 text-sm">
|
||||
A browser window will open for you to log in securely.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="flex-1 h-px bg-white/10" />
|
||||
<span className="text-white/30 text-sm font-medium">or paste manually</span>
|
||||
<div className="flex-1 h-px bg-white/10" />
|
||||
</div>
|
||||
|
||||
{/* Secondary: Manual Paste */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<label className="text-xs font-bold text-white/50 uppercase tracking-widest">
|
||||
Session Data
|
||||
</label>
|
||||
<span className="text-[10px] py-1 px-2 bg-white/10 rounded-md text-white/40 font-mono">JSON / NETSCAPE</span>
|
||||
</div>
|
||||
<textarea
|
||||
className="w-full h-32 p-4 bg-black/40 rounded-xl border border-white/10 focus:border-pink-500/50 focus:ring-4 focus:ring-pink-500/10 focus:outline-none transition-all font-mono text-[11px] leading-relaxed placeholder:text-white/20"
|
||||
value={cookies}
|
||||
onChange={(e) => setCookies(e.target.value)}
|
||||
placeholder='Paste captured JSON here...'
|
||||
/>
|
||||
<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="relative inline-block mb-4">
|
||||
<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="relative w-16 h-16 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">
|
||||
<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>
|
||||
<p className="text-gray-500 text-sm">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="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-3 animate-shake">
|
||||
<div className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
|
||||
<p className="text-red-400 text-sm font-medium">{error}</p>
|
||||
<div className="mb-5 p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-400 text-sm text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-4 px-6 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-all font-bold text-base border border-white/10"
|
||||
>
|
||||
Initialize Feed
|
||||
</button>
|
||||
</form>
|
||||
{/* How to Login - Step by Step */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-white font-semibold text-lg mb-4 text-center">How to Login</h2>
|
||||
|
||||
{/* Help Section */}
|
||||
<div className="mt-8 pt-6 border-t border-white/5">
|
||||
<p className="text-center text-white/20 text-xs">
|
||||
Need help? Install <a href="https://github.com/botzvn/curl-websocket-capture" target="_blank" className="text-white/40 hover:text-white underline">curl-websocket-capture</a> for manual method.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
||||
<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>
|
||||
<div>
|
||||
<p className="text-white text-sm font-medium">Open TikTok in browser</p>
|
||||
<p className="text-gray-500 text-xs mt-0.5">Use Chrome/Safari on your phone or computer</p>
|
||||
</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>
|
||||
<p className="text-white text-sm font-medium">Export your cookies</p>
|
||||
<p className="text-gray-500 text-xs mt-0.5">Use "Cookie-Editor" extension (Chrome/Firefox)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
|
||||
<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>
|
||||
<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()}
|
||||
className={`w-full py-4 text-white font-semibold rounded-2xl transition-all transform active:scale-[0.98] shadow-lg text-base ${cookies.trim()
|
||||
? 'bg-gradient-to-r from-cyan-500 to-pink-500 hover:from-cyan-400 hover:to-pink-400 shadow-pink-500/20'
|
||||
: 'bg-gray-700 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
Connect to TikTok
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Help Link */}
|
||||
<div className="mt-6 text-center">
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-cyan-400 text-sm underline"
|
||||
>
|
||||
Get Cookie-Editor Extension →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Desktop Browser Login - Hidden by default */}
|
||||
<div className="mt-8 pt-6 border-t border-white/10">
|
||||
<button
|
||||
onClick={() => setShowBrowserLogin(!showBrowserLogin)}
|
||||
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>Desktop Browser Login</span>
|
||||
</button>
|
||||
|
||||
{showBrowserLogin && (
|
||||
<div className="mt-3 p-4 bg-white/5 rounded-xl">
|
||||
<p className="text-gray-400 text-xs text-center mb-3">
|
||||
⚠️ Only works on local machines with a display
|
||||
</p>
|
||||
<button
|
||||
onClick={handleBrowserLogin}
|
||||
disabled={isConnecting}
|
||||
className={`w-full py-3 rounded-xl transition-all text-sm ${isConnecting
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-white/10 hover:bg-white/20 text-white'
|
||||
}`}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue