mirror of
https://github.com/vndangkhoa/purestream.git
synced 2026-04-05 09:27:58 +07:00
Update Login page: Full-screen VNC, SSL Login naming, floating controls
This commit is contained in:
Khoa.vo
parent
cc18b99b63
commit
af84b12ed3
1 changed files with 39 additions and 51 deletions
|
|
@ -12,11 +12,10 @@ export const Login: React.FC = () => {
|
||||||
const pollIntervalRef = useRef<number | null>(null);
|
const pollIntervalRef = useRef<number | null>(null);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
// Check if already authenticated
|
// Check if already authenticated (ssl login check)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
checkAuth();
|
checkAuth();
|
||||||
return () => {
|
return () => {
|
||||||
// Cleanup polling on unmount
|
|
||||||
if (pollIntervalRef.current) {
|
if (pollIntervalRef.current) {
|
||||||
clearInterval(pollIntervalRef.current);
|
clearInterval(pollIntervalRef.current);
|
||||||
}
|
}
|
||||||
|
|
@ -34,35 +33,34 @@ export const Login: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Get the VNC URL (same host, port 6080)
|
|
||||||
const getVncUrl = () => {
|
const getVncUrl = () => {
|
||||||
const host = window.location.hostname;
|
const host = window.location.hostname;
|
||||||
return `http://${host}:6080/vnc.html?autoconnect=true&resize=scale`;
|
// autoconnect=true, resize=scale to fit, quality=9 for clear text
|
||||||
|
return `http://${host}:6080/vnc.html?autoconnect=true&resize=scale&quality=9`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Start VNC login
|
|
||||||
const handleVncLogin = async () => {
|
const handleVncLogin = async () => {
|
||||||
setError('');
|
setError('');
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setVncStatus('Starting browser...');
|
setVncStatus('Initializing secure browser...');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
// Start the VNC session (SSL Login flow)
|
||||||
const res = await axios.post(`${API_BASE_URL}/auth/start-vnc`);
|
const res = await axios.post(`${API_BASE_URL}/auth/start-vnc`);
|
||||||
|
|
||||||
if (res.data.status === 'started') {
|
if (res.data.status === 'started') {
|
||||||
setShowVnc(true);
|
setShowVnc(true);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
setVncStatus('Login on the browser below, then wait...');
|
setVncStatus('Waiting for login...');
|
||||||
|
|
||||||
// Start polling for login completion
|
// Poll for completion
|
||||||
pollIntervalRef.current = window.setInterval(async () => {
|
pollIntervalRef.current = window.setInterval(async () => {
|
||||||
try {
|
try {
|
||||||
const checkRes = await axios.get(`${API_BASE_URL}/auth/check-vnc`);
|
const checkRes = await axios.get(`${API_BASE_URL}/auth/check-vnc`);
|
||||||
|
|
||||||
if (checkRes.data.logged_in) {
|
if (checkRes.data.logged_in) {
|
||||||
// Success!
|
|
||||||
clearInterval(pollIntervalRef.current!);
|
clearInterval(pollIntervalRef.current!);
|
||||||
setVncStatus('Success! Redirecting...');
|
setVncStatus('Login successful! Redirecting...');
|
||||||
setTimeout(() => navigate('/'), 1000);
|
setTimeout(() => navigate('/'), 1000);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
|
@ -74,12 +72,11 @@ export const Login: React.FC = () => {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
setError(err.response?.data?.detail || 'Failed to start VNC login');
|
setError(err.response?.data?.detail || 'Failed to start login session');
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Cancel VNC login
|
|
||||||
const handleCancelVnc = async () => {
|
const handleCancelVnc = async () => {
|
||||||
if (pollIntervalRef.current) {
|
if (pollIntervalRef.current) {
|
||||||
clearInterval(pollIntervalRef.current);
|
clearInterval(pollIntervalRef.current);
|
||||||
|
|
@ -93,10 +90,8 @@ export const Login: React.FC = () => {
|
||||||
setVncStatus('');
|
setVncStatus('');
|
||||||
};
|
};
|
||||||
|
|
||||||
// Manual sessionid login (fallback)
|
|
||||||
const handleManualLogin = async () => {
|
const handleManualLogin = async () => {
|
||||||
if (!sessionId.trim()) return;
|
if (!sessionId.trim()) return;
|
||||||
|
|
||||||
setError('');
|
setError('');
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
|
|
@ -121,48 +116,45 @@ export const Login: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// VNC View
|
// Full Screen VNC View
|
||||||
if (showVnc) {
|
if (showVnc) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-black flex flex-col">
|
<div className="fixed inset-0 z-50 bg-black">
|
||||||
{/* Header */}
|
{/* Floating Control Bar */}
|
||||||
<div className="flex-shrink-0 p-4 bg-gray-900 flex items-center justify-between">
|
<div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 bg-gray-900/90 backdrop-blur-md border border-white/10 rounded-full px-6 py-3 flex items-center gap-6 shadow-2xl">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="w-8 h-8 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-lg flex items-center justify-center">
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||||
<svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
|
<span className="text-white text-sm font-medium">Secure Browser Active</span>
|
||||||
<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>
|
|
||||||
<p className="text-white text-sm font-medium">Login to TikTok</p>
|
|
||||||
<p className="text-gray-400 text-xs">{vncStatus}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="h-4 w-px bg-white/20" />
|
||||||
<button
|
<button
|
||||||
onClick={handleCancelVnc}
|
onClick={handleCancelVnc}
|
||||||
className="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg text-sm font-medium transition-colors"
|
className="text-red-400 hover:text-red-300 text-sm font-medium transition-colors"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel Login
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* VNC Iframe */}
|
{/* Status Toast */}
|
||||||
<div className="flex-1" style={{ minHeight: 'calc(100vh - 80px)' }}>
|
{vncStatus && (
|
||||||
<iframe
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 bg-black/80 backdrop-blur text-white/90 px-4 py-2 rounded-lg text-sm border border-white/10">
|
||||||
src={getVncUrl()}
|
{vncStatus}
|
||||||
className="w-full border-0"
|
</div>
|
||||||
style={{ height: 'calc(100vh - 80px)' }}
|
)}
|
||||||
title="TikTok Login"
|
|
||||||
/>
|
{/* Full Screen Iframe */}
|
||||||
</div>
|
<iframe
|
||||||
|
src={getVncUrl()}
|
||||||
|
className="w-full h-full border-0"
|
||||||
|
style={{ width: '100vw', height: '100vh' }}
|
||||||
|
title="TikTok Secure Login"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Login View
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col">
|
<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-10 pb-6 px-6 text-center">
|
<div className="flex-shrink-0 pt-10 pb-6 px-6 text-center">
|
||||||
<div className="relative inline-block mb-3">
|
<div className="relative inline-block mb-3">
|
||||||
<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="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" />
|
||||||
|
|
@ -176,7 +168,6 @@ export const Login: React.FC = () => {
|
||||||
<p className="text-gray-500 text-xs">Ad-free TikTok viewing</p>
|
<p className="text-gray-500 text-xs">Ad-free TikTok viewing</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="flex-1 overflow-y-auto px-5 pb-8">
|
<div className="flex-1 overflow-y-auto px-5 pb-8">
|
||||||
<div className="max-w-sm mx-auto">
|
<div className="max-w-sm mx-auto">
|
||||||
{error && (
|
{error && (
|
||||||
|
|
@ -185,41 +176,38 @@ export const Login: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Primary: VNC Login Button */}
|
|
||||||
<button
|
<button
|
||||||
onClick={handleVncLogin}
|
onClick={handleVncLogin}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className={`w-full py-4 rounded-2xl font-bold text-base flex items-center justify-center gap-3 transition-all ${isLoading
|
className={`w-full py-4 rounded-2xl font-bold text-base flex items-center justify-center gap-3 transition-all ${isLoading
|
||||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||||
: 'bg-gradient-to-r from-pink-500 to-orange-500 text-white shadow-lg shadow-pink-500/25 hover:shadow-pink-500/40 active:scale-[0.98]'
|
: 'bg-gradient-to-r from-pink-500 to-orange-500 text-white shadow-lg shadow-pink-500/25 hover:shadow-pink-500/40 active:scale-[0.98]'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<>
|
<>
|
||||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||||
{vncStatus || 'Please wait...'}
|
Starting...
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
<svg className="w-5 h-5" 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.64c.32 0 .6.05.88.13V9.4c-.3-.04-.6-.05-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" />
|
<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.64c.32 0 .6.05.88.13V9.4c-.3-.04-.6-.05-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>
|
</svg>
|
||||||
Login with TikTok
|
SSL Login with TikTok
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
<p className="text-gray-600 text-xs text-center mt-3">
|
<p className="text-gray-600 text-xs text-center mt-3">
|
||||||
Opens a secure browser window for you to login
|
Launch secure browser to login automatically
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Divider */}
|
|
||||||
<div className="flex items-center gap-3 my-8">
|
<div className="flex items-center gap-3 my-8">
|
||||||
<div className="flex-1 h-px bg-white/10" />
|
<div className="flex-1 h-px bg-white/10" />
|
||||||
<span className="text-gray-600 text-xs">or enter manually</span>
|
<span className="text-gray-600 text-xs">or enter manually</span>
|
||||||
<div className="flex-1 h-px bg-white/10" />
|
<div className="flex-1 h-px bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Manual Method */}
|
|
||||||
<div className="bg-white/5 rounded-xl p-4">
|
<div className="bg-white/5 rounded-xl p-4">
|
||||||
<p className="text-gray-500 text-xs mb-3">
|
<p className="text-gray-500 text-xs mb-3">
|
||||||
Paste your TikTok <code className="text-pink-400 bg-pink-500/20 px-1 rounded">sessionid</code> cookie:
|
Paste your TikTok <code className="text-pink-400 bg-pink-500/20 px-1 rounded">sessionid</code> cookie:
|
||||||
|
|
@ -236,8 +224,8 @@ export const Login: React.FC = () => {
|
||||||
onClick={handleManualLogin}
|
onClick={handleManualLogin}
|
||||||
disabled={!sessionId.trim() || isLoading}
|
disabled={!sessionId.trim() || isLoading}
|
||||||
className={`w-full py-2.5 rounded-lg font-medium text-sm transition-all ${sessionId.trim() && !isLoading
|
className={`w-full py-2.5 rounded-lg font-medium text-sm transition-all ${sessionId.trim() && !isLoading
|
||||||
? 'bg-white/10 hover:bg-white/20 text-white'
|
? 'bg-white/10 hover:bg-white/20 text-white'
|
||||||
: 'bg-white/5 text-gray-600 cursor-not-allowed'
|
: 'bg-white/5 text-gray-600 cursor-not-allowed'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
Connect
|
Connect
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue