-
{
- if (terminal && !splitScreen) {
- terminal.focus();
- }
- }}
- />
-
- {isConnecting && (
-
-
-
-
{t("terminal.connecting")}
-
-
- )}
-
- );
-});
-
-const style = document.createElement("style");
-style.innerHTML = `
-@font-face {
- font-family: 'Caskaydia Cove Nerd Font Mono';
- src: url('./fonts/CaskaydiaCoveNerdFontMono-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: 'Caskaydia Cove Nerd Font Mono';
- src: url('./fonts/CaskaydiaCoveNerdFontMono-Bold.ttf') format('truetype');
- font-weight: bold;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: 'Caskaydia Cove Nerd Font Mono';
- src: url('./fonts/CaskaydiaCoveNerdFontMono-Italic.ttf') format('truetype');
- font-weight: normal;
- font-style: italic;
- font-display: swap;
-}
-
-@font-face {
- font-family: 'Caskaydia Cove Nerd Font Mono';
- src: url('./fonts/CaskaydiaCoveNerdFontMono-BoldItalic.ttf') format('truetype');
- font-weight: bold;
- font-style: italic;
- font-display: swap;
-}
-
-.xterm .xterm-viewport::-webkit-scrollbar {
- width: 8px;
- background: transparent;
-}
-.xterm .xterm-viewport::-webkit-scrollbar-thumb {
- background: rgba(180,180,180,0.7);
- border-radius: 4px;
-}
-.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
- background: rgba(120,120,120,0.9);
-}
-.xterm .xterm-viewport {
- scrollbar-width: thin;
- scrollbar-color: rgba(180,180,180,0.7) transparent;
-}
-
-.xterm {
- font-feature-settings: "liga" 1, "calt" 1;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.xterm .xterm-screen {
- font-family: 'Caskaydia Cove Nerd Font Mono', 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
- font-variant-ligatures: contextual;
-}
-
-.xterm .xterm-screen .xterm-char {
- font-feature-settings: "liga" 1, "calt" 1;
-}
-`;
-document.head.appendChild(style);
diff --git a/src/ui/Desktop/Homepage/Homepage.tsx b/src/ui/Desktop/Homepage/Homepage.tsx
deleted file mode 100644
index 2b156618..00000000
--- a/src/ui/Desktop/Homepage/Homepage.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { HomepageAuth } from "@/ui/Desktop/Homepage/HomepageAuth.tsx";
-import { HomepageUpdateLog } from "@/ui/Desktop/Homepage/HompageUpdateLog.tsx";
-import { HomepageAlertManager } from "@/ui/Desktop/Homepage/HomepageAlertManager.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { getUserInfo, getDatabaseHealth, getCookie } from "@/ui/main-axios.ts";
-import { useTranslation } from "react-i18next";
-
-interface HomepageProps {
- onSelectView: (view: string) => void;
- isAuthenticated: boolean;
- authLoading: boolean;
- onAuthSuccess: (authData: {
- isAdmin: boolean;
- username: string | null;
- userId: string | null;
- }) => void;
- isTopbarOpen: boolean;
-}
-
-export function Homepage({
- isAuthenticated,
- authLoading,
- onAuthSuccess,
- isTopbarOpen,
-}: HomepageProps): React.ReactElement {
- const [loggedIn, setLoggedIn] = useState(isAuthenticated);
- const [isAdmin, setIsAdmin] = useState(false);
- const [username, setUsername] = useState
(null);
- const [userId, setUserId] = useState(null);
- const [dbError, setDbError] = useState(null);
-
- const topMarginPx = isTopbarOpen ? 74 : 26;
- const leftMarginPx = 26;
- const bottomMarginPx = 8;
-
- useEffect(() => {
- setLoggedIn(isAuthenticated);
- }, [isAuthenticated]);
-
- useEffect(() => {
- if (isAuthenticated) {
- const jwt = getCookie("jwt");
- if (jwt) {
- getUserInfo()
- .then((meRes) => {
- setIsAdmin(!!meRes.is_admin);
- setUsername(meRes.username || null);
- setUserId(meRes.userId || null);
- setDbError(null);
- })
- .catch((err) => {
- setIsAdmin(false);
- setUsername(null);
- setUserId(null);
-
- const errorCode = err?.response?.data?.code;
- if (errorCode === "SESSION_EXPIRED") {
- console.warn("Session expired - please log in again");
- setDbError("Session expired - please log in again");
- } else {
- setDbError(null);
- }
- });
-
- getDatabaseHealth()
- .then(() => {
- setDbError(null);
- })
- .catch((err) => {
- if (err?.response?.data?.error?.includes("Database")) {
- setDbError(
- "Could not connect to the database. Please try again later.",
- );
- }
- });
- }
- }
- }, [isAuthenticated]);
-
- return (
- <>
- {!loggedIn ? (
-
-
- ) : (
-
-
-
-
-
-
-
- window.open("https://github.com/Termix-SSH/Termix", "_blank")
- }
- >
- GitHub
-
-
-
- window.open(
- "https://github.com/Termix-SSH/Termix/issues/new",
- "_blank",
- )
- }
- >
- Feedback
-
-
-
- window.open(
- "https://discord.com/invite/jVQGdvHDrf",
- "_blank",
- )
- }
- >
- Discord
-
-
-
- window.open("https://github.com/sponsors/LukeGus", "_blank")
- }
- >
- Donate
-
-
-
-
-
(null);
- const [internalLoggedIn, setInternalLoggedIn] = useState(false);
- const [firstUser, setFirstUser] = useState(false);
- const [firstUserToastShown, setFirstUserToastShown] = useState(false);
- const [registrationAllowed, setRegistrationAllowed] = useState(true);
- const [oidcConfigured, setOidcConfigured] = useState(false);
-
- const [resetStep, setResetStep] = useState<
- "initiate" | "verify" | "newPassword"
- >("initiate");
- const [resetCode, setResetCode] = useState("");
- const [newPassword, setNewPassword] = useState("");
- const [confirmPassword, setConfirmPassword] = useState("");
- const [tempToken, setTempToken] = useState("");
- const [resetLoading, setResetLoading] = useState(false);
- const [resetSuccess, setResetSuccess] = useState(false);
-
- const [totpRequired, setTotpRequired] = useState(false);
- const [totpCode, setTotpCode] = useState("");
- const [totpTempToken, setTotpTempToken] = useState("");
- const [totpLoading, setTotpLoading] = useState(false);
-
- useEffect(() => {
- setInternalLoggedIn(loggedIn);
- }, [loggedIn]);
-
- useEffect(() => {
- const clearJWTOnLoad = async () => {
- try {
- await logoutUser();
- } catch (error) {}
- };
-
- clearJWTOnLoad();
- }, []);
-
- useEffect(() => {
- getRegistrationAllowed().then((res) => {
- setRegistrationAllowed(res.allowed);
- });
- }, []);
-
- useEffect(() => {
- getOIDCConfig()
- .then((response) => {
- if (response) {
- setOidcConfigured(true);
- } else {
- setOidcConfigured(false);
- }
- })
- .catch((error) => {
- if (error.response?.status === 404) {
- setOidcConfigured(false);
- } else {
- setOidcConfigured(false);
- }
- });
- }, []);
-
- useEffect(() => {
- setDbHealthChecking(true);
- getSetupRequired()
- .then((res) => {
- if (res.setup_required) {
- setFirstUser(true);
- setTab("signup");
- if (!firstUserToastShown) {
- toast.info(t("auth.firstUserMessage"));
- setFirstUserToastShown(true);
- }
- } else {
- setFirstUser(false);
- }
- setDbError(null);
- setDbConnectionFailed(false);
- })
- .catch(() => {
- setDbConnectionFailed(true);
- })
- .finally(() => {
- setDbHealthChecking(false);
- });
- }, [setDbError, firstUserToastShown]);
-
- useEffect(() => {
- if (!registrationAllowed && !internalLoggedIn) {
- toast.warning(t("messages.registrationDisabled"));
- }
- }, [registrationAllowed, internalLoggedIn, t]);
-
- async function handleSubmit(e: React.FormEvent) {
- e.preventDefault();
- setError(null);
- setLoading(true);
-
- if (!localUsername.trim()) {
- toast.error(t("errors.requiredField"));
- setLoading(false);
- return;
- }
-
- try {
- let res, meRes;
- if (tab === "login") {
- res = await loginUser(localUsername, password);
- } else {
- if (password !== signupConfirmPassword) {
- toast.error(t("errors.passwordMismatch"));
- setLoading(false);
- return;
- }
- if (password.length < 6) {
- toast.error(t("errors.minLength", { min: 6 }));
- setLoading(false);
- return;
- }
-
- await registerUser(localUsername, password);
- res = await loginUser(localUsername, password);
- }
-
- if (res.requires_totp) {
- setTotpRequired(true);
- setTotpTempToken(res.temp_token);
- setLoading(false);
- return;
- }
-
- if (!res || !res.success) {
- throw new Error(t("errors.loginFailed"));
- }
-
- [meRes] = await Promise.all([getUserInfo()]);
-
- setInternalLoggedIn(true);
- setLoggedIn(true);
- setIsAdmin(!!meRes.is_admin);
- setUsername(meRes.username || null);
- setUserId(meRes.userId || null);
- setDbError(null);
- onAuthSuccess({
- isAdmin: !!meRes.is_admin,
- username: meRes.username || null,
- userId: meRes.userId || null,
- });
- setInternalLoggedIn(true);
- if (tab === "signup") {
- setSignupConfirmPassword("");
- toast.success(t("messages.registrationSuccess"));
- } else {
- toast.success(t("messages.loginSuccess"));
- }
- setTotpRequired(false);
- setTotpCode("");
- setTotpTempToken("");
- } catch (err: any) {
- const errorMessage =
- err?.response?.data?.error || err?.message || t("errors.unknownError");
- toast.error(errorMessage);
- setInternalLoggedIn(false);
- setLoggedIn(false);
- setIsAdmin(false);
- setUsername(null);
- setUserId(null);
- if (err?.response?.data?.error?.includes("Database")) {
- setDbConnectionFailed(true);
- } else {
- setDbError(null);
- }
- } finally {
- setLoading(false);
- }
- }
-
- async function handleInitiatePasswordReset() {
- setError(null);
- setResetLoading(true);
- try {
- const result = await initiatePasswordReset(localUsername);
- setResetStep("verify");
- toast.success(t("messages.resetCodeSent"));
- } catch (err: any) {
- toast.error(
- err?.response?.data?.error ||
- err?.message ||
- t("errors.failedPasswordReset"),
- );
- } finally {
- setResetLoading(false);
- }
- }
-
- async function handleVerifyResetCode() {
- setError(null);
- setResetLoading(true);
- try {
- const response = await verifyPasswordResetCode(localUsername, resetCode);
- setTempToken(response.tempToken);
- setResetStep("newPassword");
- toast.success(t("messages.codeVerified"));
- } catch (err: any) {
- toast.error(err?.response?.data?.error || t("errors.failedVerifyCode"));
- } finally {
- setResetLoading(false);
- }
- }
-
- async function handleCompletePasswordReset() {
- setError(null);
- setResetLoading(true);
-
- if (newPassword !== confirmPassword) {
- toast.error(t("errors.passwordMismatch"));
- setResetLoading(false);
- return;
- }
-
- if (newPassword.length < 6) {
- toast.error(t("errors.minLength", { min: 6 }));
- setResetLoading(false);
- return;
- }
-
- try {
- await completePasswordReset(localUsername, tempToken, newPassword);
-
- setResetStep("initiate");
- setResetCode("");
- setNewPassword("");
- setConfirmPassword("");
- setTempToken("");
- setError(null);
-
- setResetSuccess(true);
- toast.success(t("messages.passwordResetSuccess"));
-
- setTab("login");
- resetPasswordState();
- } catch (err: any) {
- toast.error(
- err?.response?.data?.error || t("errors.failedCompleteReset"),
- );
- } finally {
- setResetLoading(false);
- }
- }
-
- function resetPasswordState() {
- setResetStep("initiate");
- setResetCode("");
- setNewPassword("");
- setConfirmPassword("");
- setTempToken("");
- setError(null);
- setResetSuccess(false);
- setSignupConfirmPassword("");
- }
-
- function clearFormFields() {
- setPassword("");
- setSignupConfirmPassword("");
- setError(null);
- }
-
- async function handleTOTPVerification() {
- if (totpCode.length !== 6) {
- toast.error(t("auth.enterCode"));
- return;
- }
-
- setError(null);
- setTotpLoading(true);
-
- try {
- const res = await verifyTOTPLogin(totpTempToken, totpCode);
-
- if (!res || !res.success) {
- throw new Error(t("errors.loginFailed"));
- }
-
- if (isElectron() && res.token) {
- localStorage.setItem("jwt", res.token);
- }
-
- setInternalLoggedIn(true);
- setLoggedIn(true);
- setIsAdmin(!!res.is_admin);
- setUsername(res.username || null);
- setUserId(res.userId || null);
- setDbError(null);
-
- setTimeout(() => {
- onAuthSuccess({
- isAdmin: !!res.is_admin,
- username: res.username || null,
- userId: res.userId || null,
- });
- }, 100);
-
- setInternalLoggedIn(true);
- setTotpRequired(false);
- setTotpCode("");
- setTotpTempToken("");
- toast.success(t("messages.loginSuccess"));
- } catch (err: any) {
- const errorCode = err?.response?.data?.code;
- const errorMessage =
- err?.response?.data?.error ||
- err?.message ||
- t("errors.invalidTotpCode");
-
- if (errorCode === "SESSION_EXPIRED") {
- setTotpRequired(false);
- setTotpCode("");
- setTotpTempToken("");
- setTab("login");
- toast.error(t("errors.sessionExpired"));
- } else {
- toast.error(errorMessage);
- }
- } finally {
- setTotpLoading(false);
- }
- }
-
- async function handleOIDCLogin() {
- setError(null);
- setOidcLoading(true);
- try {
- const authResponse = await getOIDCAuthorizeUrl();
- const { auth_url: authUrl } = authResponse;
-
- if (!authUrl || authUrl === "undefined") {
- throw new Error(t("errors.invalidAuthUrl"));
- }
-
- window.location.replace(authUrl);
- } catch (err: any) {
- const errorMessage =
- err?.response?.data?.error ||
- err?.message ||
- t("errors.failedOidcLogin");
- toast.error(errorMessage);
- setOidcLoading(false);
- }
- }
-
- useEffect(() => {
- const urlParams = new URLSearchParams(window.location.search);
- const success = urlParams.get("success");
- const token = urlParams.get("token");
- const error = urlParams.get("error");
-
- if (error) {
- toast.error(`${t("errors.oidcAuthFailed")}: ${error}`);
- setOidcLoading(false);
- window.history.replaceState({}, document.title, window.location.pathname);
- return;
- }
-
- if (success) {
- setOidcLoading(true);
- setError(null);
-
- getUserInfo()
- .then((meRes) => {
- setInternalLoggedIn(true);
- setLoggedIn(true);
- setIsAdmin(!!meRes.is_admin);
- setUsername(meRes.username || null);
- setUserId(meRes.userId || null);
- setDbError(null);
- onAuthSuccess({
- isAdmin: !!meRes.is_admin,
- username: meRes.username || null,
- userId: meRes.userId || null,
- });
- setInternalLoggedIn(true);
- window.history.replaceState(
- {},
- document.title,
- window.location.pathname,
- );
- })
- .catch((err) => {
- setInternalLoggedIn(false);
- setLoggedIn(false);
- setIsAdmin(false);
- setUsername(null);
- setUserId(null);
- window.history.replaceState(
- {},
- document.title,
- window.location.pathname,
- );
- })
- .finally(() => {
- setOidcLoading(false);
- });
- }
- }, []);
-
- const Spinner = (
-
-
- );
-
- const [showServerConfig, setShowServerConfig] = useState(
- null,
- );
- const [currentServerUrl, setCurrentServerUrl] = useState("");
- const [dbConnectionFailed, setDbConnectionFailed] = useState(false);
- const [dbHealthChecking, setDbHealthChecking] = useState(false);
-
- useEffect(() => {
- if (dbConnectionFailed) {
- toast.error(t("errors.databaseConnection"));
- }
- }, [dbConnectionFailed, t]);
-
- const retryDatabaseConnection = async () => {
- setDbHealthChecking(true);
- setDbConnectionFailed(false);
- try {
- const res = await getSetupRequired();
- if (res.setup_required) {
- setFirstUser(true);
- setTab("signup");
- } else {
- setFirstUser(false);
- }
- setDbError(null);
- toast.success(t("messages.databaseConnected"));
- } catch (error) {
- setDbConnectionFailed(true);
- } finally {
- setDbHealthChecking(false);
- }
- };
-
- useEffect(() => {
- const checkServerConfig = async () => {
- if (isElectron()) {
- try {
- const config = await getServerConfig();
- setCurrentServerUrl(config?.serverUrl || "");
- setShowServerConfig(!config || !config.serverUrl);
- } catch (error) {
- setShowServerConfig(true);
- }
- } else {
- setShowServerConfig(false);
- }
- };
-
- checkServerConfig();
- }, []);
-
- if (showServerConfig === null) {
- return (
-
- );
- }
-
- if (showServerConfig) {
- return (
-
- {
- window.location.reload();
- }}
- onCancel={() => {
- setShowServerConfig(false);
- }}
- isFirstTime={!currentServerUrl}
- />
-
- );
- }
-
- if (dbHealthChecking && !dbConnectionFailed) {
- return (
-
-
-
-
-
- {t("common.checkingDatabase")}
-
-
-
-
-
-
- {t("errors.databaseConnection")}
-
-
- {t("messages.databaseConnectionFailed")}
-
-
-
-
- window.location.reload()}
- >
- {t("common.refresh")}
-
-
-
-
-
-
-
- {t("common.language")}
-
-
-
-
- {isElectron() && currentServerUrl && (
-
-
-
Server
-
- {currentServerUrl}
-
-
-
setShowServerConfig(true)}
- className="h-8 px-3"
- >
- Edit
-
-
- )}
-
-
- {totpRequired && (
-
-
-
- {t("auth.twoFactorAuth")}
-
-
{t("auth.enterCode")}
-
-
-
-
{t("auth.verifyCode")}
-
setTotpCode(e.target.value.replace(/\D/g, ""))}
- disabled={totpLoading}
- className="text-center text-2xl tracking-widest font-mono"
- autoComplete="one-time-code"
- />
-
- {t("auth.backupCode")}
-
-
-
-
- {totpLoading ? Spinner : t("auth.verifyCode")}
-
-
-
{
- setTotpRequired(false);
- setTotpCode("");
- setTotpTempToken("");
- setError(null);
- }}
- >
- {t("common.cancel")}
-
-
- )}
-
- {!loggedIn && !authLoading && !totpRequired && (
- <>
-
- {
- setTab("login");
- if (tab === "reset") resetPasswordState();
- if (tab === "signup") clearFormFields();
- }}
- aria-selected={tab === "login"}
- disabled={loading || firstUser}
- >
- {t("common.login")}
-
- {
- setTab("signup");
- if (tab === "reset") resetPasswordState();
- if (tab === "login") clearFormFields();
- }}
- aria-selected={tab === "signup"}
- disabled={loading || !registrationAllowed}
- >
- {t("common.register")}
-
- {oidcConfigured && (
- {
- setTab("external");
- if (tab === "reset") resetPasswordState();
- if (tab === "login" || tab === "signup") clearFormFields();
- }}
- aria-selected={tab === "external"}
- disabled={oidcLoading}
- >
- {t("auth.external")}
-
- )}
-
-
-
- {tab === "login"
- ? t("auth.loginTitle")
- : tab === "signup"
- ? t("auth.registerTitle")
- : tab === "external"
- ? t("auth.loginWithExternal")
- : t("auth.forgotPassword")}
-
-
-
- {tab === "external" || tab === "reset" ? (
-
- {tab === "external" && (
- <>
-
-
{t("auth.loginWithExternalDesc")}
-
- {(() => {
- if (isElectron()) {
- return (
-
-
- {t("auth.externalNotSupportedInElectron")}
-
-
- );
- } else {
- return (
-
- {oidcLoading ? Spinner : t("auth.loginWithExternal")}
-
- );
- }
- })()}
-
- )}
- {tab === "reset" && (
- <>
- {resetStep === "initiate" && (
- <>
-
-
{t("auth.resetCodeDesc")}
-
-
-
-
- {t("common.username")}
-
-
-
- {resetLoading ? Spinner : t("auth.sendResetCode")}
-
-
-
- )}
-
- {resetStep === "verify" && (
- <>
-
-
- {t("auth.enterResetCode")}{" "}
- {localUsername}
-
-
-
-
-
- {t("auth.resetCode")}
-
-
-
- {resetLoading ? Spinner : t("auth.verifyCodeButton")}
-
-
{
- setResetStep("initiate");
- setResetCode("");
- }}
- >
- {t("common.back")}
-
-
-
- )}
-
- {resetStep === "newPassword" && !resetSuccess && (
- <>
-
-
- {t("auth.enterNewPassword")}{" "}
- {localUsername}
-
-
-
-
-
- {t("auth.newPassword")}
-
-
setNewPassword(e.target.value)}
- disabled={resetLoading}
- autoComplete="new-password"
- />
-
-
-
- {t("auth.confirmNewPassword")}
-
-
setConfirmPassword(e.target.value)}
- disabled={resetLoading}
- autoComplete="new-password"
- />
-
-
- {resetLoading
- ? Spinner
- : t("auth.resetPasswordButton")}
-
-
{
- setResetStep("verify");
- setNewPassword("");
- setConfirmPassword("");
- }}
- >
- {t("common.back")}
-
-
-
- )}
-
- )}
-
- ) : (
-
- )}
-
-
-
-
-
- {t("common.language")}
-
-
-
-
- {isElectron() && currentServerUrl && (
-
-
-
- Server
-
-
- {currentServerUrl}
-
-
-
setShowServerConfig(true)}
- className="h-8 px-3"
- >
- Edit
-
-
- )}
-
-
- )}
-
(null);
- const [versionInfo, setVersionInfo] = useState(null);
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState(null);
-
- useEffect(() => {
- if (loggedIn) {
- setLoading(true);
- Promise.all([getReleasesRSS(100), getVersionInfo()])
- .then(([releasesRes, versionRes]) => {
- setReleases(releasesRes);
- setVersionInfo(versionRes);
- setError(null);
- })
- .catch((err) => {
- setError(t("common.failedToFetchUpdateInfo"));
- })
- .finally(() => setLoading(false));
- }
- }, [loggedIn]);
-
- if (!loggedIn) {
- return null;
- }
-
- const formatDescription = (description: string) => {
- const firstLine = description.split("\n")[0];
- return firstLine.replace(/[#*`]/g, "").replace(/\s+/g, " ").trim();
- };
-
- return (
-
-
-
- {t("common.updatesAndReleases")}
-
-
-
-
- {versionInfo && versionInfo.status === "requires_update" && (
-
-
- {t("common.updateAvailable")}
-
-
- {t("common.newVersionAvailable", {
- version: versionInfo.version,
- })}
-
-
- )}
-
-
- {versionInfo && versionInfo.status === "requires_update" && (
-
- )}
-
-
- {loading && (
-
- )}
-
- {error && (
-
-
- {t("common.error")}
-
-
- {error}
-
-
- )}
-
- {releases?.items.map((release) => (
-
window.open(release.link, "_blank")}
- >
-
-
- {release.title}
-
- {release.isPrerelease && (
-
- {t("common.preRelease")}
-
- )}
-
-
-
- {formatDescription(release.description)}
-
-
-
- {new Date(release.pubDate).toLocaleDateString()}
- {release.assets.length > 0 && (
- <>
- •
-
- {release.assets.length} asset
- {release.assets.length !== 1 ? "s" : ""}
-
-
- )}
-
-
- ))}
-
- {releases && releases.items.length === 0 && !loading && (
-
-
- {t("common.noReleases")}
-
-
- {t("common.noReleasesFound")}
-
-
- )}
-
-
-
-
-
-
- {host.name || host.ip}
-
-
-
-
- {host.enableTerminal && (
-
-
- )}
-
-
- {hasTags && (
-
- {tags.map((tag: string) => (
-
- ))}
-
- )}
-
(null);
-
- const [isSidebarOpen, setIsSidebarOpen] = useState(() => {
- const saved = localStorage.getItem("leftSidebarOpen");
- return saved !== null ? JSON.parse(saved) : true;
- });
-
- const {
- tabs: tabList,
- addTab,
- setCurrentTab,
- allSplitScreenTab,
- updateHostConfig,
- } = useTabs() as any;
- const isSplitScreenActive =
- Array.isArray(allSplitScreenTab) && allSplitScreenTab.length > 0;
- const sshManagerTab = tabList.find((t) => t.type === "ssh_manager");
- const openSshManagerTab = () => {
- if (sshManagerTab || isSplitScreenActive) return;
- const id = addTab({ type: "ssh_manager" } as any);
- setCurrentTab(id);
- };
- const adminTab = tabList.find((t) => t.type === "admin");
- const openAdminTab = () => {
- if (isSplitScreenActive) return;
- if (adminTab) {
- setCurrentTab(adminTab.id);
- return;
- }
- const id = addTab({ type: "admin" } as any);
- setCurrentTab(id);
- };
- const userProfileTab = tabList.find((t) => t.type === "user_profile");
- const openUserProfileTab = () => {
- if (isSplitScreenActive) return;
- if (userProfileTab) {
- setCurrentTab(userProfileTab.id);
- return;
- }
- const id = addTab({ type: "user_profile" } as any);
- setCurrentTab(id);
- };
-
- const [hosts, setHosts] = useState([]);
- const [hostsLoading, setHostsLoading] = useState(false);
- const [hostsError, setHostsError] = useState(null);
- const prevHostsRef = React.useRef([]);
- const [search, setSearch] = useState("");
- const [debouncedSearch, setDebouncedSearch] = useState("");
-
- const fetchHosts = React.useCallback(async () => {
- try {
- const newHosts = await getSSHHosts();
- const prevHosts = prevHostsRef.current;
-
- const existingHostsMap = new Map(prevHosts.map((h) => [h.id, h]));
- const newHostsMap = new Map(newHosts.map((h) => [h.id, h]));
-
- let hasChanges = false;
-
- if (newHosts.length !== prevHosts.length) {
- hasChanges = true;
- } else {
- for (const [id, newHost] of newHostsMap) {
- const existingHost = existingHostsMap.get(id);
- if (!existingHost) {
- hasChanges = true;
- break;
- }
-
- if (
- newHost.name !== existingHost.name ||
- newHost.folder !== existingHost.folder ||
- newHost.ip !== existingHost.ip ||
- newHost.port !== existingHost.port ||
- newHost.username !== existingHost.username ||
- newHost.pin !== existingHost.pin ||
- newHost.enableTerminal !== existingHost.enableTerminal ||
- newHost.enableTunnel !== existingHost.enableTunnel ||
- newHost.enableFileManager !== existingHost.enableFileManager ||
- newHost.authType !== existingHost.authType ||
- newHost.password !== existingHost.password ||
- newHost.key !== existingHost.key ||
- newHost.keyPassword !== existingHost.keyPassword ||
- newHost.keyType !== existingHost.keyType ||
- newHost.defaultPath !== existingHost.defaultPath ||
- JSON.stringify(newHost.tags) !==
- JSON.stringify(existingHost.tags) ||
- JSON.stringify(newHost.tunnelConnections) !==
- JSON.stringify(existingHost.tunnelConnections)
- ) {
- hasChanges = true;
- break;
- }
- }
- }
-
- if (hasChanges) {
- setTimeout(() => {
- setHosts(newHosts);
- prevHostsRef.current = newHosts;
-
- newHosts.forEach((newHost) => {
- updateHostConfig(newHost.id, newHost);
- });
- }, 50);
- }
- } catch (err: any) {
- setHostsError(t("leftSidebar.failedToLoadHosts"));
- }
- }, [updateHostConfig]);
-
- React.useEffect(() => {
- fetchHosts();
- const interval = setInterval(fetchHosts, 300000);
- return () => clearInterval(interval);
- }, [fetchHosts]);
-
- React.useEffect(() => {
- const handleHostsChanged = () => {
- fetchHosts();
- };
- const handleCredentialsChanged = () => {
- fetchHosts();
- };
- window.addEventListener(
- "ssh-hosts:changed",
- handleHostsChanged as EventListener,
- );
- window.addEventListener(
- "credentials:changed",
- handleCredentialsChanged as EventListener,
- );
- return () => {
- window.removeEventListener(
- "ssh-hosts:changed",
- handleHostsChanged as EventListener,
- );
- window.removeEventListener(
- "credentials:changed",
- handleCredentialsChanged as EventListener,
- );
- };
- }, [fetchHosts]);
-
- React.useEffect(() => {
- const handler = setTimeout(() => setDebouncedSearch(search), 200);
- return () => clearTimeout(handler);
- }, [search]);
-
- React.useEffect(() => {
- localStorage.setItem("leftSidebarOpen", JSON.stringify(isSidebarOpen));
- }, [isSidebarOpen]);
-
- const filteredHosts = React.useMemo(() => {
- if (!debouncedSearch.trim()) return hosts;
- const q = debouncedSearch.trim().toLowerCase();
- return hosts.filter((h) => {
- const searchableText = [
- h.name || "",
- h.username,
- h.ip,
- h.folder || "",
- ...(h.tags || []),
- h.authType,
- h.defaultPath || "",
- ]
- .join(" ")
- .toLowerCase();
- return searchableText.includes(q);
- });
- }, [hosts, debouncedSearch]);
-
- const hostsByFolder = React.useMemo(() => {
- const map: Record 
英文 |
+ 
中文
-Termix is an open-source, forever-free, self-hosted all-in-one server management platform. It provides a web-based
+Termix is an open-source, forever-free, self-hosted all-in-one server management platform. It provides a multi-platform
solution for managing your servers and infrastructure through a single, intuitive interface. Termix offers SSH terminal
-access, SSH tunneling capabilities, and remote file management, with many more tools to come.
+access, SSH tunneling capabilities, and remote file management, with many more tools to come. Termix is the perfect
+free and self-hosted alternative to Termius available for all platforms.
# Features
-- **SSH Terminal Access** - Full-featured terminal with split-screen support (up to 4 panels) and tab system
+- **SSH Terminal Access** - Full-featured terminal with split-screen support (up to 4 panels) with a browser-like tab system. Includes support for customizing the terminal including common terminal themes, fonts, and other components
- **SSH Tunnel Management** - Create and manage SSH tunnels with automatic reconnection and health monitoring
-- **Remote File Manager** - Manage files directly on remote servers with support for viewing and editing code, images, audio, and video. Upload, download, rename, delete, and move files seamlessly.
-- **SSH Host Manager** - Save, organize, and manage your SSH connections with tags and folders and easily save reusable login info while being able to automate the deploying of SSH keys
-- **Server Stats** - View CPU, memory, and HDD usage on any SSH server
-- **User Authentication** - Secure user management with admin controls and OIDC and 2FA (TOTP) support
-- **Database Encryption** - SQLite database files encrypted at rest with automatic encryption/decryption
-- **Data Export/Import** - Export and import SSH hosts, credentials, and file manager data with incremental sync
+- **Remote File Manager** - Manage files directly on remote servers with support for viewing and editing code, images, audio, and video. Upload, download, rename, delete, and move files seamlessly
+- **SSH Host Manager** - Save, organize, and manage your SSH connections with tags and folders, and easily save reusable login info while being able to automate the deployment of SSH keys
+- **Server Stats** - View CPU, memory, and disk usage along with network, uptime, and system information on any SSH server
+- **Dashboard** - View server information at a glance on your dashboard
+- **User Authentication** - Secure user management with admin controls and OIDC and 2FA (TOTP) support. View active user sessions across all platforms and revoke permissions.
+- **Database Encryption** - Backend stored as encrypted SQLite database files
+- **Data Export/Import** - Export and import SSH hosts, credentials, and file manager data
- **Automatic SSL Setup** - Built-in SSL certificate generation and management with HTTPS redirects
- **Modern UI** - Clean desktop/mobile-friendly interface built with React, Tailwind CSS, and Shadcn
-- **Languages** - Built-in support for English, Chinese, and German
-- **Platform Support** - Available as a web app, desktop application (Windows & Linux), and dedicated mobile app for iOS and Android. macOS and iPadOS support is planned.
+- **Languages** - Built-in support for English, Chinese, German, and Portuguese
+- **Platform Support** - Available as a web app, desktop application (Windows, Linux, and macOS), and dedicated mobile/tablet app for iOS and Android.
+- **SSH Tools** - Create reusable command snippets that execute with a single click. Run one command simultaneously across multiple open terminals.
# Planned Features
@@ -70,12 +73,26 @@ See [Projects](https://github.com/orgs/Termix-SSH/projects/2) for all planned fe
Supported Devices:
-- Website (any modern browser like Google, Safari, and Firefox)
-- Windows (app)
-- Linux (app)
-- iOS (app)
-- Android (app)
-- iPadOS and macOS are in progress
+- Website (any modern browser on any platform like Chrome, Safari, and Firefox)
+- Windows (x64/ia32)
+ - Portable
+ - MSI Installer
+ - Chocolatey Package Manager
+- Linux (x64/ia32)
+ - Portable
+ - AppImage
+ - Deb
+ - Flatpak
+- macOS (x64/ia32 on v12.0+)
+ - Apple App Store
+ - DMG
+ - Homebrew
+- iOS/iPadOS (v15.1+)
+ - Apple App Store
+ - ISO
+- Android (v7.0+)
+ - Google Play Store
+ - APK
Visit the Termix [Docs](https://docs.termix.site/install) for more information on how to install Termix on all platforms. Otherwise, view
a sample Docker Compose file here:
@@ -130,6 +147,7 @@ channel, however, response times may be longer.
Your browser does not support the video tag.
+Videos and images may be out of date.
# License
diff --git a/build/Termix_Mac_App_Store.provisionprofile b/build/Termix_Mac_App_Store.provisionprofile
new file mode 100644
index 00000000..8e87f405
Binary files /dev/null and b/build/Termix_Mac_App_Store.provisionprofile differ
diff --git a/build/entitlements.mac.inherit.plist b/build/entitlements.mac.inherit.plist
new file mode 100644
index 00000000..ee90b853
--- /dev/null
+++ b/build/entitlements.mac.inherit.plist
@@ -0,0 +1,14 @@
+
+
+