Ethica/Termix
1
0
Fork 0
mirror of https://github.com/Termix-SSH/Termix.git synced 2026-07-15 04:43:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: seperated host manager into 2 rail tabs, electron fixes for auth, shared credential fixes

Browse Source
This commit is contained in:
LukeGus
2026-05-20 22:55:16 -05:00
parent 15e815a632
commit 170080399b
12 changed files with 289 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/backend/utils/credential-system-encryption-migration.ts
+7 -2
View File
@@ -1,5 +1,5 @@
import { db } from "../database/db/index.js";
import { sshCredentials } from "../database/db/schema.js";
import { sshCredentials, sharedCredentials } from "../database/db/schema.js";
import { eq, and, or, isNull } from "drizzle-orm";
import { DataCrypto } from "./data-crypto.js";
import { SystemCrypto } from "./system-crypto.js";
@@ -64,7 +64,7 @@ export class CredentialSystemEncryptionMigration {
cred.keyPassword,
userDEK,
cred.id.toString(),
"key_password",
"keyPassword",
)
: null;
@@ -105,6 +105,11 @@ export class CredentialSystemEncryptionMigration {
})
.where(eq(sshCredentials.id, cred.id));
await db
.update(sharedCredentials)
.set({ needsReEncryption: true })
.where(eq(sharedCredentials.originalCredentialId, cred.id));
migrated++;
} catch (error) {
databaseLogger.warn(
src/main.tsx
+5 -3
View File
@@ -8,7 +8,7 @@ import "./ui/i18n/i18n";
import { isElectron } from "@/lib/electron";
import { Toaster } from "@/components/sonner";
import { Auth, getStoredAuth, clearStoredAuth } from "@/auth/Auth";
import { getUserInfo } from "@/main-axios";
import { getUserInfo, appReadyPromise } from "@/main-axios";
import { applyAccentColor, applyFontSize } from "@/lib/theme";
import type { FontSizeId } from "@/types/ui-types";
import { useServiceWorker } from "@/hooks/use-service-worker";
@@ -128,10 +128,12 @@ function App() {
};
}, []);
// Verify stored session against the server before rendering AppShell
// Verify stored session against the server before rendering AppShell.
// Wait for API instances to be initialized with correct embedded/server config first.
useEffect(() => {
if (phase !== "verifying") return;
getUserInfo()
appReadyPromise
.then(() => getUserInfo())
.then(() => setPhase("idle-app"))
.catch(() => {
clearStoredAuth();
src/ui/AppShell.tsx
+35 -45
View File
@@ -18,6 +18,7 @@ import { HistoryPanel } from "@/sidebar/HistoryPanel";
import { SplitScreenPanel } from "@/sidebar/SplitScreenPanel";
import { UserProfilePanel } from "@/sidebar/UserProfilePanel";
import { AdminSettingsPanel } from "@/sidebar/AdminSettingsPanel";
import { CredentialsPanel } from "@/sidebar/CredentialsPanel";
import { SplitView } from "@/shell/SplitView";
import { TabBar } from "@/shell/TabBar";
import type {
@@ -138,9 +139,9 @@ export function AppShell({
const [sidebarOpen, setSidebarOpen] = useState(true);
const [railView, setRailView] = useState<RailView>("hosts");
const [profileDropdownOpen, setProfileDropdownOpen] = useState(false);
const [hostManagerExpanded, setHostManagerExpanded] = useState(false);
const [sidebarWidth, setSidebarWidth] = useState(266);
const [sidebarDragging, setSidebarDragging] = useState(false);
const [sidebarEditing, setSidebarEditing] = useState(false);
const isMobile = useIsMobile();
@@ -155,10 +156,6 @@ export function AppShell({
.catch(() => setIsAdmin(false));
}, []);
const pendingHostManagerEditId = useRef<string | null>(null);
const pendingHostManagerAction = useRef<"add-host" | "add-credential" | null>(
null,
);
const lastShiftTime = useRef(0);
const terminalRefs = useRef<Map<string, ReturnType<typeof createRef>>>(
new Map(),
@@ -166,6 +163,7 @@ export function AppShell({
const sidebarTitle: Record<RailView, string> = {
hosts: "Hosts",
credentials: "Credentials",
"quick-connect": "Quick Connect",
"ssh-tools": "SSH Tools",
snippets: "Snippets",
@@ -340,21 +338,25 @@ export function AppShell({
function openSingletonTab(type: TabType, pendingEvent?: string) {
if (type === "host-manager") {
if (pendingEvent === "host-manager:add-host")
pendingHostManagerAction.current = "add-host";
else if (pendingEvent === "host-manager:add-credential")
pendingHostManagerAction.current = "add-credential";
setHostManagerExpanded(true);
if (pendingEvent === "host-manager:add-credential") {
setSidebarOpen(true);
setRailView("credentials");
setTimeout(
() =>
window.dispatchEvent(
new CustomEvent("host-manager:add-credential"),
),
0,
);
} else {
setSidebarOpen(true);
setRailView("hosts");
if (pendingEvent) {
// Use a small delay to ensure HostManager is mounted if it wasn't already,
// and to allow the current render cycle to complete.
setTimeout(() => {
window.dispatchEvent(new CustomEvent(pendingEvent));
}, 0);
setTimeout(
() => window.dispatchEvent(new CustomEvent(pendingEvent)),
0,
);
}
}
return;
}
@@ -422,16 +424,20 @@ export function AppShell({
if (railView === view && sidebarOpen) {
setSidebarOpen(false);
} else {
if (view !== railView) setSidebarEditing(false);
setRailView(view);
setSidebarOpen(true);
}
}
function editHostInManager(host: Host) {
pendingHostManagerEditId.current = host.id;
setHostManagerExpanded(true);
setSidebarOpen(true);
setRailView("hosts");
setTimeout(() => {
window.dispatchEvent(
new CustomEvent("host-manager:edit-host", { detail: host.id }),
);
}, 0);
}
const onSidebarMouseDown = useCallback(
@@ -465,23 +471,20 @@ export function AppShell({
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
{railView === "hosts" && (
<HostsPanel
expanded={hostManagerExpanded}
onExpand={() => setHostManagerExpanded(true)}
onCollapse={() => {
setHostManagerExpanded(false);
loadHosts();
}}
pendingEditId={pendingHostManagerEditId}
pendingAction={pendingHostManagerAction}
onOpenTab={(host, type) => {
connectHost(host, type);
if (isMobile) setSidebarOpen(false);
}}
onEditHost={editHostInManager}
hostTree={realHostTree ?? undefined}
onEditingChange={setSidebarEditing}
/>
)}
{railView === "credentials" && (
<CredentialsPanel onEditingChange={setSidebarEditing} />
)}
{railView === "quick-connect" && (
<QuickConnectPanel
onConnect={(host, type) => {
@@ -547,7 +550,7 @@ export function AppShell({
<span className="flex-1 text-base font-bold tracking-tight text-foreground px-3">
{sidebarTitle[railView]}
</span>
{!hostManagerExpanded && !isMobile && (
{!isMobile && (
<>
<Separator orientation="vertical" />
<Button
@@ -566,10 +569,7 @@ export function AppShell({
variant="ghost"
size="icon"
className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
onClick={() => {
setSidebarOpen(false);
setHostManagerExpanded(false);
}}
onClick={() => setSidebarOpen(false)}
>
<ChevronLeft className="size-4" />
</Button>
@@ -597,18 +597,14 @@ export function AppShell({
<div
className={`relative flex flex-col bg-sidebar shrink-0 overflow-hidden ${sidebarOpen ? `border-r transition-colors ${sidebarDragging ? "border-accent-brand/60" : "border-border"}` : ""}`}
style={{
width: sidebarOpen
? hostManagerExpanded && railView === "hosts"
? 720
: sidebarWidth
: 0,
width: sidebarOpen ? (sidebarEditing ? 560 : sidebarWidth) : 0,
transition: sidebarDragging ? "none" : "width 0.2s",
}}
>
{sidebarHeader}
{sidebarPanelContent}
{sidebarOpen && !(hostManagerExpanded && railView === "hosts") && (
{sidebarOpen && !sidebarEditing && (
<div
onMouseDown={onSidebarMouseDown}
className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-30 transition-colors ${sidebarDragging ? "bg-accent-brand/60" : "hover:bg-accent-brand/40"}`}
@@ -619,13 +615,7 @@ export function AppShell({
{/* Mobile: sidebar as overlay sheet */}
{isMobile && (
<Sheet
open={sidebarOpen}
onOpenChange={(open) => {
setSidebarOpen(open);
if (!open) setHostManagerExpanded(false);
}}
>
<Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
<SheetContent
side="left"
showCloseButton={false}
src/ui/auth/Auth.tsx
+8 -5
View File
@@ -347,7 +347,7 @@ export function Auth({ onLogin }: AuthProps) {
platform: "desktop",
timestamp: Date.now(),
},
window.location.origin,
"*",
);
setWebviewAuthSuccess(true);
window.history.replaceState(
@@ -378,16 +378,19 @@ export function Auth({ onLogin }: AuthProps) {
}, [onLogin, t]);
const handleElectronAuthSuccess = useCallback(
async (previousJwt: string | null) => {
async (token: string | null) => {
try {
if (!token) {
// No token in postMessage — fall back to waiting for the HttpOnly cookie
const cookieReady = await window.electronAPI?.waitForSessionCookie?.(
"jwt",
currentServerUrl,
previousJwt,
null,
5000,
);
if (cookieReady && !cookieReady.success)
throw new Error(cookieReady.error || "Auth cookie not ready");
}
const meRes = await getUserInfo();
if (!meRes) throw new Error("Failed to get user info");
storeAuth(meRes.username || "");
@@ -447,7 +450,7 @@ export function Auth({ onLogin }: AuthProps) {
platform: "desktop",
timestamp: Date.now(),
},
window.location.origin,
"*",
);
setWebviewAuthSuccess(true);
return;
@@ -539,7 +542,7 @@ export function Auth({ onLogin }: AuthProps) {
platform: "desktop",
timestamp: Date.now(),
},
window.location.origin,
"*",
);
setWebviewAuthSuccess(true);
return;
src/ui/locales/en.json
+5 -1
View File
@@ -8,7 +8,9 @@
"upload": "Upload",
"keyPassword": "Key Password",
"sshKey": "SSH Key",
"uploadPrivateKeyFile": "Upload Private Key File"
"uploadPrivateKeyFile": "Upload Private Key File",
"searchCredentials": "Search credentials...",
"addCredential": "Add Credential"
},
"homepage": {
"failedToLoadAlerts": "Failed to load alerts",
@@ -138,6 +140,7 @@
"hosts": "Hosts",
"snippets": "Snippets",
"hostManager": "Host Manager",
"credentials": "Credentials",
"roleAdministrator": "Administrator",
"roleUser": "User"
},
@@ -536,6 +539,7 @@
"loadingHost": "Loading host...",
"hostNotFound": "Host not found",
"searchHosts": "Search hosts...",
"addHost": "Add Host",
"guac": {
"connection": "Connection",
"authentication": "Authentication",
src/ui/main-axios.ts
+9
View File
@@ -865,6 +865,11 @@ export let dockerApi: AxiosInstance;
// Pre-initialize with default values to avoid undefined errors during early mounting
initializeApiInstances();
let _resolveAppReady!: () => void;
export const appReadyPromise: Promise<void> = new Promise((resolve) => {
_resolveAppReady = resolve;
});
function initializeApp() {
if (isElectron()) {
Promise.all([getServerConfig(), getEmbeddedServerStatus()])
@@ -895,9 +900,13 @@ function initializeApp() {
error,
);
initializeApiInstances();
})
.finally(() => {
_resolveAppReady();
});
} else {
initializeApiInstances();
_resolveAppReady();
}
}
src/ui/shell/MobileBottomBar.tsx
+5
View File
@@ -37,6 +37,11 @@ const PRIMARY_ITEMS: {
];
const MORE_ITEMS: { view: RailView; icon: React.ReactNode; title: string }[] = [
{
view: "credentials",
icon: <KeyRound className="size-4" />,
title: "Credentials",
},
{ view: "history", icon: <Clock className="size-4" />, title: "History" },
{
view: "split-screen",
src/ui/sidebar/AppRail.tsx
+6
View File
@@ -21,6 +21,7 @@ import type { SplitMode, ToolsTab } from "@/types/ui-types";
export type RailView =
| "hosts"
| "credentials"
| "quick-connect"
| ToolsTab
| "user-profile"
@@ -42,6 +43,11 @@ function buildRailButtons(
): RailItem[] {
return [
{ view: "hosts", icon: <Server size={16} />, title: t("nav.hosts") },
{
view: "credentials",
icon: <KeyRound size={16} />,
title: t("nav.credentials"),
},
{ kind: "separator" },
{
view: "quick-connect",
src/ui/sidebar/CredentialsPanel.tsx
+66
View File
@@ -0,0 +1,66 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Plus, Search, X } from "lucide-react";
import { HostManager } from "@/sidebar/HostManager";
export function CredentialsPanel({
onEditingChange,
}: {
onEditingChange?: (editing: boolean) => void;
}) {
const { t } = useTranslation();
const [search, setSearch] = useState("");
const [managerEditing, setManagerEditing] = useState(false);
function handleEditingChange(editing: boolean) {
setManagerEditing(editing);
onEditingChange?.(editing);
}
return (
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
{!managerEditing && (
<div className="flex items-center gap-1.5 px-2 py-1.5 shrink-0 border-b border-border/60">
<div className="flex items-center gap-2 px-2.5 h-7 bg-muted/60 border border-border/60 rounded-sm flex-1 min-w-0">
<Search className="size-3 text-muted-foreground/60 shrink-0" />
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("credentials.searchCredentials")}
className="flex-1 text-xs bg-transparent outline-none placeholder:text-muted-foreground/50 text-foreground min-w-0"
/>
{search && (
<button
onClick={() => setSearch("")}
className="text-muted-foreground/60 hover:text-muted-foreground transition-colors"
>
<X className="size-3" />
</button>
)}
</div>
<button
onClick={() =>
window.dispatchEvent(
new CustomEvent("host-manager:add-credential"),
)
}
title={t("credentials.addCredential")}
className="flex items-center gap-1 h-7 px-2 text-[10px] font-medium text-accent-brand hover:bg-accent-brand/10 border border-accent-brand/30 rounded-sm shrink-0 transition-colors"
>
<Plus className="size-3 shrink-0" />
{t("credentials.addCredential")}
</button>
</div>
)}
<div className="flex flex-col flex-1 min-h-0">
<HostManager
initialSection="credentials"
hideListHeader
externalSearch={managerEditing ? undefined : search}
onEditingChange={handleEditingChange}
/>
</div>
</div>
);
}
src/ui/sidebar/HostManager.tsx
+55 -12
View File
@@ -99,6 +99,7 @@ import {
subscribeTunnelStatuses,
connectTunnel,
disconnectTunnel,
getCredentialDetails,
} from "@/main-axios";
import type { SSHHostWithStatus } from "@/main-axios";
@@ -5047,7 +5048,15 @@ function CredentialEditorView({
{["password", "key"].map((m) => (
<button
key={m}
onClick={() => setCredField("type", m as any)}
onClick={() =>
setCredForm((p) => ({
...p,
type: m as any,
value: "",
publicKey: "",
passphrase: "",
}))
}
className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${type === m ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
>
{m === "key"
@@ -5275,13 +5284,23 @@ export function HostManager({
onCollapse,
pendingEditId,
pendingAction,
onEditingChange,
initialSection,
hideListHeader,
externalSearch,
}: {
onCollapse?: () => void;
pendingEditId?: MutableRefObject<string | null>;
pendingAction?: MutableRefObject<"add-host" | "add-credential" | null>;
onEditingChange?: (editing: boolean) => void;
initialSection?: "hosts" | "credentials";
hideListHeader?: boolean;
externalSearch?: string;
} = {}) {
const { t } = useTranslation();
const [section, setSection] = useState<"hosts" | "credentials">("hosts");
const [section, setSection] = useState<"hosts" | "credentials">(
initialSection ?? "hosts",
);
const [editingHost, setEditingHost] = useState<Host | "new" | null>(null);
const [editingCredential, setEditingCredential] = useState<
Credential | "new" | null
@@ -5289,6 +5308,7 @@ export function HostManager({
const [activeHostTab, setActiveHostTab] = useState("general");
const [activeCredentialTab, setActiveCredentialTab] = useState("general");
const [searchQuery, setSearchQuery] = useState("");
const effectiveSearch = externalSearch ?? searchQuery;
const [hosts, setHosts] = useState<Host[]>([]);
const [credentials, setCredentials] = useState<Credential[]>([]);
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(
@@ -5501,16 +5521,16 @@ export function HostManager({
const allHosts = hosts;
const filteredHosts = allHosts.filter(
(h) =>
h.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
h.ip.toLowerCase().includes(searchQuery.toLowerCase()) ||
h.name.toLowerCase().includes(effectiveSearch.toLowerCase()) ||
h.ip.toLowerCase().includes(effectiveSearch.toLowerCase()) ||
h.tags?.some((tg) =>
tg.toLowerCase().includes(searchQuery.toLowerCase()),
tg.toLowerCase().includes(effectiveSearch.toLowerCase()),
),
);
const filteredCredentials = credentials.filter(
(c) =>
c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
c.username.toLowerCase().includes(searchQuery.toLowerCase()),
c.name.toLowerCase().includes(effectiveSearch.toLowerCase()) ||
c.username.toLowerCase().includes(effectiveSearch.toLowerCase()),
);
const folders = Array.from(new Set(allHosts.map((h) => h.folder))).sort();
@@ -6193,10 +6213,14 @@ export function HostManager({
const isEditing = !!editingHost || !!editingCredential;
useEffect(() => {
onEditingChange?.(isEditing);
}, [isEditing]);
return (
<div className="relative flex flex-col flex-1 min-h-0 overflow-hidden">
{/* Top bar: section switcher + actions */}
{!isEditing && (
{!isEditing && !hideListHeader && (
<div className="flex items-center gap-0 shrink-0 border-b border-border/60">
{/* Section tabs */}
<button
@@ -6414,7 +6438,8 @@ export function HostManager({
renderEditorView()
) : (
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
{/* Search bar */}
{/* Search bar — hidden when parent supplies its own */}
{!hideListHeader && (
<div className="px-2 py-1.5 shrink-0 border-b border-border/40">
<div className="flex items-center gap-2 px-2.5 h-7 bg-muted/60 border border-border/60">
<Search className="size-3 text-muted-foreground/60 shrink-0" />
@@ -6438,6 +6463,7 @@ export function HostManager({
)}
</div>
</div>
)}
<div className="flex-1 min-h-0 overflow-y-auto">
{section === "hosts" && (
@@ -6743,15 +6769,17 @@ export function HostManager({
{cred.type === "key" ? "KEY" : "PWD"}
</span>
</div>
{(cred.username || usedByHosts.length > 0) && (
<span className="text-[11px] text-muted-foreground/50 truncate">
{cred.username}
{usedByHosts.length > 0 && (
<span className="text-muted-foreground/30">
{" "}
· {usedByHosts.length}h
{cred.username ? " · " : ""}
{usedByHosts.length}h
</span>
)}
</span>
)}
{cred.tags && cred.tags.length > 0 && (
<div className="flex items-center gap-0.5 mt-0.5 flex-wrap">
{cred.tags.slice(0, 3).map((tag) => (
@@ -6805,8 +6833,23 @@ export function HostManager({
)}
<button
className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted rounded transition-colors"
onClick={() => {
onClick={async () => {
try {
const full = await getCredentialDetails(
Number(cred.id),
);
setEditingCredential({
...cred,
value:
(full as any).password ??
(full as any).key ??
"",
passphrase:
(full as any).keyPassword ?? "",
});
} catch {
setEditingCredential(cred);
}
setActiveCredentialTab("general");
}}
>
src/ui/sidebar/HostsPanel.tsx
+26 -26
View File
@@ -1,45 +1,33 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Search, Settings, X } from "lucide-react";
import { Plus, Search, X } from "lucide-react";
import { SidebarTree } from "@/sidebar/SidebarTree";
import { HostManager } from "@/sidebar/HostManager";
import type { Host, HostFolder, TabType } from "@/types/ui-types";
import type { MutableRefObject } from "react";
export function HostsPanel({
expanded,
onExpand,
onCollapse,
pendingEditId,
pendingAction,
onOpenTab,
onEditHost,
hostTree,
onEditingChange,
}: {
expanded: boolean;
onExpand: () => void;
onCollapse: () => void;
pendingEditId: MutableRefObject<string | null>;
pendingAction: MutableRefObject<"add-host" | "add-credential" | null>;
onOpenTab: (host: Host, type: TabType) => void;
onEditHost: (host: Host) => void;
hostTree?: HostFolder;
onEditingChange?: (editing: boolean) => void;
}) {
const { t } = useTranslation();
const [hostSearch, setHostSearch] = useState("");
const [managerEditing, setManagerEditing] = useState(false);
if (expanded) {
return (
<HostManager
onCollapse={onCollapse}
pendingEditId={pendingEditId}
pendingAction={pendingAction}
/>
);
function handleEditingChange(editing: boolean) {
setManagerEditing(editing);
onEditingChange?.(editing);
}
return (
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
{!managerEditing && (
<div className="flex items-center gap-1.5 px-2 py-1.5 shrink-0 border-b border-border/60">
<div className="flex items-center gap-2 px-2.5 h-7 bg-muted/60 border border-border/60 rounded-sm flex-1 min-w-0">
<Search className="size-3 text-muted-foreground/60 shrink-0" />
@@ -59,15 +47,21 @@ export function HostsPanel({
)}
</div>
<button
onClick={onExpand}
title="Manage Hosts"
className="flex items-center gap-1 h-7 px-2 text-[10px] font-medium text-muted-foreground hover:text-foreground hover:bg-muted/60 border border-border/60 rounded-sm shrink-0 transition-colors"
onClick={() =>
window.dispatchEvent(new CustomEvent("host-manager:add-host"))
}
title={t("hosts.addHost")}
className="flex items-center gap-1 h-7 px-2 text-[10px] font-medium text-accent-brand hover:bg-accent-brand/10 border border-accent-brand/30 rounded-sm shrink-0 transition-colors"
>
<Settings className="size-3 shrink-0" />
Manage
<Plus className="size-3 shrink-0" />
{t("hosts.addHost")}
</button>
</div>
<div className="flex-1 min-h-0 overflow-y-auto py-1">
)}
<div
className={`flex-1 min-h-0 overflow-y-auto py-1 ${managerEditing ? "hidden" : ""}`}
>
<SidebarTree
children={hostTree?.children ?? []}
onOpenTab={onOpenTab}
@@ -75,6 +69,12 @@ export function HostsPanel({
query={hostSearch.trim().toLowerCase()}
/>
</div>
<div
className={managerEditing ? "flex flex-col flex-1 min-h-0" : "hidden"}
>
<HostManager onEditingChange={handleEditingChange} />
</div>
</div>
);
}
src/ui/sidebar/SidebarTree.tsx
+1 -1
View File
@@ -282,7 +282,7 @@ export function HostItem({
e.stopPropagation();
onEditHost();
}}
className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
className="flex items-center justify-center size-7 rounded text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/10 transition-colors"
>
<Pencil className="size-3.5" />
</button>