415 lines
12 KiB
TypeScript
415 lines
12 KiB
TypeScript
import React, { useState, useEffect, useRef } from "react";
|
|
import { Button } from "@/components/ui/button.tsx";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
|
|
import { useTranslation } from "react-i18next";
|
|
import { AlertCircle, Loader2, ArrowLeft, RefreshCw } from "lucide-react";
|
|
import { getCookie, getUserInfo } from "@/ui/main-axios.ts";
|
|
|
|
declare global {
|
|
namespace JSX {
|
|
interface IntrinsicElements {
|
|
webview: React.DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLElement>,
|
|
HTMLElement
|
|
> & {
|
|
src?: string;
|
|
partition?: string;
|
|
allowpopups?: string;
|
|
ref?: React.Ref<any>;
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
interface ElectronLoginFormProps {
|
|
serverUrl: string;
|
|
onAuthSuccess: () => void;
|
|
onChangeServer: () => void;
|
|
}
|
|
|
|
export function ElectronLoginForm({
|
|
serverUrl,
|
|
onAuthSuccess,
|
|
onChangeServer,
|
|
}: ElectronLoginFormProps) {
|
|
const { t } = useTranslation();
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isAuthenticating, setIsAuthenticating] = useState(false);
|
|
const webviewRef = useRef<any>(null);
|
|
const hasAuthenticatedRef = useRef(false);
|
|
const [currentUrl, setCurrentUrl] = useState(serverUrl);
|
|
const hasLoadedOnce = useRef(false);
|
|
const urlCheckInterval = useRef<NodeJS.Timeout | null>(null);
|
|
const loadTimeout = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
useEffect(() => {
|
|
const handleMessage = async (event: MessageEvent) => {
|
|
try {
|
|
const serverOrigin = new URL(serverUrl).origin;
|
|
if (event.origin !== serverOrigin) {
|
|
return;
|
|
}
|
|
|
|
if (event.data && typeof event.data === "object") {
|
|
const data = event.data;
|
|
|
|
if (
|
|
data.type === "AUTH_SUCCESS" &&
|
|
data.token &&
|
|
!hasAuthenticatedRef.current &&
|
|
!isAuthenticating
|
|
) {
|
|
hasAuthenticatedRef.current = true;
|
|
setIsAuthenticating(true);
|
|
|
|
try {
|
|
localStorage.setItem("jwt", data.token);
|
|
|
|
const savedToken = localStorage.getItem("jwt");
|
|
if (!savedToken) {
|
|
throw new Error("Failed to save JWT to localStorage");
|
|
}
|
|
|
|
try {
|
|
await getUserInfo();
|
|
} catch (verifyErr) {
|
|
localStorage.removeItem("jwt");
|
|
const errorMsg =
|
|
verifyErr instanceof Error
|
|
? verifyErr.message
|
|
: "Failed to verify authentication";
|
|
console.error("Authentication verification failed:", verifyErr);
|
|
throw new Error(
|
|
errorMsg.includes("registration") ||
|
|
errorMsg.includes("allowed")
|
|
? "Authentication failed. Please check your server connection and try again."
|
|
: errorMsg,
|
|
);
|
|
}
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
|
|
onAuthSuccess();
|
|
} catch (err) {
|
|
const errorMessage =
|
|
err instanceof Error
|
|
? err.message
|
|
: t("errors.authTokenSaveFailed");
|
|
setError(errorMessage);
|
|
setIsAuthenticating(false);
|
|
hasAuthenticatedRef.current = false;
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {}
|
|
};
|
|
|
|
window.addEventListener("message", handleMessage);
|
|
|
|
return () => {
|
|
window.removeEventListener("message", handleMessage);
|
|
};
|
|
}, [serverUrl, isAuthenticating, onAuthSuccess, t]);
|
|
|
|
useEffect(() => {
|
|
const checkWebviewUrl = () => {
|
|
const webview = webviewRef.current;
|
|
if (!webview) return;
|
|
|
|
try {
|
|
const webviewUrl = webview.getURL();
|
|
if (webviewUrl && webviewUrl !== currentUrl) {
|
|
setCurrentUrl(webviewUrl);
|
|
}
|
|
} catch (e) {}
|
|
};
|
|
|
|
urlCheckInterval.current = setInterval(checkWebviewUrl, 500);
|
|
|
|
return () => {
|
|
if (urlCheckInterval.current) {
|
|
clearInterval(urlCheckInterval.current);
|
|
urlCheckInterval.current = null;
|
|
}
|
|
};
|
|
}, [currentUrl]);
|
|
|
|
useEffect(() => {
|
|
const webview = webviewRef.current;
|
|
if (!webview) return;
|
|
|
|
loadTimeout.current = setTimeout(() => {
|
|
if (!hasLoadedOnce.current && loading) {
|
|
setLoading(false);
|
|
setError(
|
|
"Unable to connect to server. Please check the server URL and try again.",
|
|
);
|
|
}
|
|
}, 15000);
|
|
|
|
const handleLoad = () => {
|
|
if (loadTimeout.current) {
|
|
clearTimeout(loadTimeout.current);
|
|
loadTimeout.current = null;
|
|
}
|
|
|
|
setLoading(false);
|
|
hasLoadedOnce.current = true;
|
|
setError(null);
|
|
|
|
try {
|
|
const webviewUrl = webview.getURL();
|
|
setCurrentUrl(webviewUrl || serverUrl);
|
|
} catch (e) {
|
|
setCurrentUrl(serverUrl);
|
|
}
|
|
|
|
const injectedScript = `
|
|
(function() {
|
|
window.IS_ELECTRON = true;
|
|
if (typeof window.electronAPI === 'undefined') {
|
|
window.electronAPI = { isElectron: true };
|
|
}
|
|
|
|
let hasNotified = false;
|
|
|
|
function postJWTToParent(token, source) {
|
|
if (hasNotified) {
|
|
return;
|
|
}
|
|
hasNotified = true;
|
|
|
|
try {
|
|
window.parent.postMessage({
|
|
type: 'AUTH_SUCCESS',
|
|
token: token,
|
|
source: source,
|
|
platform: 'desktop',
|
|
timestamp: Date.now()
|
|
}, '*');
|
|
} catch (e) {
|
|
}
|
|
}
|
|
|
|
function clearAuthData() {
|
|
try {
|
|
localStorage.removeItem('jwt');
|
|
sessionStorage.removeItem('jwt');
|
|
|
|
const cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i];
|
|
const eqPos = cookie.indexOf('=');
|
|
const name = eqPos > -1 ? cookie.substr(0, eqPos).trim() : cookie.trim();
|
|
if (name === 'jwt') {
|
|
document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
|
|
document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=' + window.location.hostname;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
}
|
|
}
|
|
|
|
window.addEventListener('message', function(event) {
|
|
try {
|
|
if (event.data && typeof event.data === 'object') {
|
|
if (event.data.type === 'CLEAR_AUTH_DATA') {
|
|
clearAuthData();
|
|
}
|
|
}
|
|
} catch (error) {
|
|
}
|
|
});
|
|
|
|
function checkAuth() {
|
|
try {
|
|
const localToken = localStorage.getItem('jwt');
|
|
if (localToken && localToken.length > 20) {
|
|
postJWTToParent(localToken, 'localStorage');
|
|
return true;
|
|
}
|
|
|
|
const sessionToken = sessionStorage.getItem('jwt');
|
|
if (sessionToken && sessionToken.length > 20) {
|
|
postJWTToParent(sessionToken, 'sessionStorage');
|
|
return true;
|
|
}
|
|
|
|
const cookies = document.cookie;
|
|
if (cookies && cookies.length > 0) {
|
|
const cookieArray = cookies.split('; ');
|
|
const tokenCookie = cookieArray.find(row => row.startsWith('jwt='));
|
|
|
|
if (tokenCookie) {
|
|
const token = tokenCookie.split('=')[1];
|
|
if (token && token.length > 20) {
|
|
postJWTToParent(token, 'cookie');
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
}
|
|
return false;
|
|
}
|
|
|
|
const originalSetItem = localStorage.setItem;
|
|
localStorage.setItem = function(key, value) {
|
|
originalSetItem.apply(this, arguments);
|
|
if (key === 'jwt' && value && value.length > 20 && !hasNotified) {
|
|
setTimeout(() => checkAuth(), 100);
|
|
}
|
|
};
|
|
|
|
const originalSessionSetItem = sessionStorage.setItem;
|
|
sessionStorage.setItem = function(key, value) {
|
|
originalSessionSetItem.apply(this, arguments);
|
|
if (key === 'jwt' && value && value.length > 20 && !hasNotified) {
|
|
setTimeout(() => checkAuth(), 100);
|
|
}
|
|
};
|
|
|
|
const intervalId = setInterval(() => {
|
|
if (hasNotified) {
|
|
clearInterval(intervalId);
|
|
return;
|
|
}
|
|
if (checkAuth()) {
|
|
clearInterval(intervalId);
|
|
}
|
|
}, 500);
|
|
|
|
setTimeout(() => {
|
|
clearInterval(intervalId);
|
|
}, 300000);
|
|
|
|
setTimeout(() => checkAuth(), 500);
|
|
})();
|
|
`;
|
|
|
|
try {
|
|
webview.executeJavaScript(injectedScript);
|
|
} catch (err) {
|
|
console.error("Failed to inject authentication script:", err);
|
|
}
|
|
};
|
|
|
|
const handleError = () => {
|
|
setLoading(false);
|
|
if (hasLoadedOnce.current) {
|
|
setError(t("errors.failedToLoadServer"));
|
|
}
|
|
};
|
|
|
|
webview.addEventListener("did-finish-load", handleLoad);
|
|
webview.addEventListener("did-fail-load", handleError);
|
|
|
|
return () => {
|
|
webview.removeEventListener("did-finish-load", handleLoad);
|
|
webview.removeEventListener("did-fail-load", handleError);
|
|
if (loadTimeout.current) {
|
|
clearTimeout(loadTimeout.current);
|
|
loadTimeout.current = null;
|
|
}
|
|
};
|
|
}, [t, loading, serverUrl]);
|
|
|
|
const handleRefresh = () => {
|
|
if (webviewRef.current) {
|
|
if (loadTimeout.current) {
|
|
clearTimeout(loadTimeout.current);
|
|
loadTimeout.current = null;
|
|
}
|
|
|
|
webviewRef.current.src = serverUrl;
|
|
setLoading(true);
|
|
setError(null);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
onChangeServer();
|
|
};
|
|
|
|
const displayUrl = currentUrl.replace(/^https?:\/\//, "");
|
|
|
|
return (
|
|
<div className="fixed inset-0 w-screen h-screen bg-dark-bg flex flex-col">
|
|
<div className="flex items-center justify-between p-4 bg-dark-bg border-b border-dark-border">
|
|
<button
|
|
onClick={handleBack}
|
|
className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
|
|
disabled={isAuthenticating}
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
<span className="text-base font-medium">
|
|
{t("serverConfig.changeServer")}
|
|
</span>
|
|
</button>
|
|
<div className="flex-1 mx-4 text-center">
|
|
<span className="text-muted-foreground text-sm truncate block">
|
|
{displayUrl}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={handleRefresh}
|
|
className="p-2 text-foreground hover:text-primary transition-colors"
|
|
disabled={loading || isAuthenticating}
|
|
>
|
|
<RefreshCw className={`h-5 w-5 ${loading ? "animate-spin" : ""}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="absolute top-20 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-md px-4">
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertTitle>{t("common.error")}</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
|
|
{loading && (
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center bg-dark-bg z-40"
|
|
style={{ marginTop: "60px" }}
|
|
>
|
|
<div className="flex items-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
<span className="ml-3 text-muted-foreground">
|
|
{t("auth.loadingServer")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isAuthenticating && (
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center bg-dark-bg/80 z-40"
|
|
style={{ marginTop: "60px" }}
|
|
>
|
|
<div className="flex items-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
<span className="ml-3 text-muted-foreground">
|
|
{t("auth.authenticating")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 overflow-hidden">
|
|
<webview
|
|
ref={webviewRef}
|
|
src={serverUrl}
|
|
className="w-full h-full border-0"
|
|
partition="persist:termix"
|
|
allowpopups="false"
|
|
style={{ width: "100%", height: "100%" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|