mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-07-16 05:13:36 +00:00
ZacharyZcR
2330 lines
88 KiB
TypeScript
2330 lines
88 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { copyToClipboard } from "@/lib/clipboard";
|
|
import {
|
|
getUserInfo,
|
|
getApiKeys,
|
|
createApiKey,
|
|
deleteApiKey,
|
|
changePassword,
|
|
deleteAccount,
|
|
logoutUser,
|
|
setupTOTP,
|
|
enableTOTP,
|
|
disableTOTP,
|
|
getVersionInfo,
|
|
getUserRoles,
|
|
saveUserPreferences,
|
|
getUserPreferences,
|
|
} from "@/main-axios";
|
|
import {
|
|
deleteWebAuthnCredential,
|
|
listWebAuthnCredentials,
|
|
registerWebAuthnCredential,
|
|
type WebAuthnCredentialSummary,
|
|
type WebAuthnUserVerification,
|
|
} from "@/api/webauthn-api";
|
|
import type { UserRole } from "@/main-axios";
|
|
import type React from "react";
|
|
import { isElectron } from "@/lib/electron";
|
|
import { C2STunnelPresetManager } from "@/user/C2STunnelPresetManager";
|
|
import { Button } from "@/components/button";
|
|
import { Input } from "@/components/input";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@/components/dialog";
|
|
import {
|
|
Activity,
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
ChevronDown,
|
|
Clock,
|
|
Copy,
|
|
Eye,
|
|
EyeOff,
|
|
Hammer,
|
|
KeyRound,
|
|
LayoutPanelLeft,
|
|
Network,
|
|
Palette,
|
|
Play,
|
|
Plug,
|
|
Plus,
|
|
RotateCcw,
|
|
ScrollText,
|
|
Server,
|
|
Shield,
|
|
ShieldCheck,
|
|
Trash2,
|
|
Type,
|
|
Usb,
|
|
User,
|
|
X,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import { SettingRow, FakeSwitch } from "@/components/section-card";
|
|
import {
|
|
ACCENT_PRESET_COLORS,
|
|
applyAccentColor,
|
|
applyFontSize,
|
|
FONT_SIZES,
|
|
} from "@/lib/theme";
|
|
import type { ApiKey } from "@/main-axios";
|
|
import { useTheme } from "@/components/theme-provider";
|
|
import type { FontSizeId, ThemeId } from "@/types/ui-types";
|
|
import { toast } from "sonner";
|
|
import { changeAppLanguage, normalizeLanguageCode } from "@/i18n/i18n";
|
|
|
|
type UserProfileSection =
|
|
| "account"
|
|
| "appearance"
|
|
| "security"
|
|
| "api-keys"
|
|
| "c2s-tunnels";
|
|
|
|
const THEMES: { id: ThemeId; preview: string }[] = [
|
|
{ id: "system", preview: "auto" },
|
|
{ id: "light", preview: "#ffffff" },
|
|
{ id: "dark", preview: "#1a1c22" },
|
|
{ id: "dracula", preview: "#282a36" },
|
|
{ id: "catppuccin", preview: "#1e1e2e" },
|
|
{ id: "nord", preview: "#2e3440" },
|
|
{ id: "solarized", preview: "#002b36" },
|
|
{ id: "tokyo-night", preview: "#1a1b26" },
|
|
{ id: "one-dark", preview: "#282c34" },
|
|
{ id: "gruvbox", preview: "#282828" },
|
|
];
|
|
|
|
const LANGUAGES = [
|
|
{ code: "en", label: "English" },
|
|
{ code: "af", label: "Afrikaans" },
|
|
{ code: "ar", label: "العربية" },
|
|
{ code: "bn", label: "বাংলা" },
|
|
{ code: "bg", label: "Български" },
|
|
{ code: "ca", label: "Català" },
|
|
{ code: "zh-CN", label: "中文 (简体)" },
|
|
{ code: "zh-TW", label: "中文 (繁體)" },
|
|
{ code: "cs", label: "Čeština" },
|
|
{ code: "da", label: "Dansk" },
|
|
{ code: "nl", label: "Nederlands" },
|
|
{ code: "fi", label: "Suomi" },
|
|
{ code: "fr", label: "Français" },
|
|
{ code: "de", label: "Deutsch" },
|
|
{ code: "el", label: "Ελληνικά" },
|
|
{ code: "he", label: "עברית" },
|
|
{ code: "hi", label: "हिन्दी" },
|
|
{ code: "hu", label: "Magyar" },
|
|
{ code: "id", label: "Indonesia" },
|
|
{ code: "it", label: "Italiano" },
|
|
{ code: "ja", label: "日本語" },
|
|
{ code: "ko", label: "한국어" },
|
|
{ code: "no", label: "Norsk" },
|
|
{ code: "pl", label: "Polski" },
|
|
{ code: "pt-PT", label: "Português (PT)" },
|
|
{ code: "pt-BR", label: "Português (BR)" },
|
|
{ code: "ro", label: "Română" },
|
|
{ code: "ru", label: "Русский" },
|
|
{ code: "sr", label: "Српски" },
|
|
{ code: "es-ES", label: "Español" },
|
|
{ code: "sv-SE", label: "Svenska" },
|
|
{ code: "th", label: "ไทย" },
|
|
{ code: "tr", label: "Türkçe" },
|
|
{ code: "uk", label: "Українська" },
|
|
{ code: "vi", label: "Tiếng Việt" },
|
|
];
|
|
|
|
function AccordionSection({
|
|
id,
|
|
label,
|
|
icon,
|
|
open,
|
|
onToggle,
|
|
children,
|
|
}: {
|
|
id: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
open: boolean;
|
|
onToggle: () => void;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="border border-border bg-card overflow-hidden">
|
|
<button
|
|
onClick={onToggle}
|
|
aria-expanded={open}
|
|
aria-controls={`${id}-content`}
|
|
className="flex items-center gap-2 w-full px-3 py-2.5 text-left hover:bg-muted/40 transition-colors"
|
|
>
|
|
<span className="text-muted-foreground shrink-0">{icon}</span>
|
|
<span className="text-xs font-bold uppercase tracking-widest text-foreground flex-1">
|
|
{label}
|
|
</span>
|
|
<ChevronDown
|
|
className={`size-3.5 text-muted-foreground shrink-0 transition-transform duration-150 ${open ? "rotate-180" : ""}`}
|
|
/>
|
|
</button>
|
|
{open && (
|
|
<div id={`${id}-content`} className="border-t border-border px-3 pb-3">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type ApiErrorLike = {
|
|
response?: {
|
|
data?: {
|
|
error?: string;
|
|
};
|
|
};
|
|
};
|
|
|
|
function apiErrorMessage(error: unknown, fallback: string) {
|
|
return (error as ApiErrorLike).response?.data?.error || fallback;
|
|
}
|
|
|
|
type CreatedProfileApiKey = {
|
|
id: string;
|
|
name: string;
|
|
token?: string;
|
|
tokenPrefix?: string;
|
|
createdAt?: string;
|
|
expiresAt?: string | null;
|
|
};
|
|
|
|
function NewApiKeyDialog({
|
|
open,
|
|
onOpenChange,
|
|
onAdd,
|
|
userId,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (v: boolean) => void;
|
|
onAdd: (key: CreatedProfileApiKey) => void;
|
|
userId: string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [name, setName] = useState("");
|
|
const [expiry, setExpiry] = useState("");
|
|
|
|
const handleCreate = async () => {
|
|
if (!name.trim()) {
|
|
toast.error(t("newUi.sidebar.userProfile.apiKeyNameRequired"));
|
|
return;
|
|
}
|
|
try {
|
|
const created = await createApiKey(
|
|
name.trim(),
|
|
userId,
|
|
expiry ? new Date(expiry).toISOString() : undefined,
|
|
);
|
|
onAdd(created);
|
|
onOpenChange(false);
|
|
setName("");
|
|
setExpiry("");
|
|
toast.success(t("newUi.sidebar.userProfile.apiKeyCreated", { name }));
|
|
} catch {
|
|
toast.error(t("newUi.sidebar.userProfile.apiKeyCreateFailed"));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-md rounded-none border-border bg-card p-0 gap-0 overflow-hidden">
|
|
<DialogHeader className="px-5 pt-5 pb-4 border-b border-border">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="size-8 border border-border bg-muted flex items-center justify-center shrink-0">
|
|
<Network className="size-3.5 text-accent-brand" />
|
|
</div>
|
|
<div>
|
|
<DialogTitle className="text-base font-bold leading-none">
|
|
{t("newUi.sidebar.userProfile.createApiKeyTitle")}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs text-muted-foreground mt-0.5">
|
|
{t("newUi.sidebar.userProfile.createApiKeyDescription")}
|
|
</DialogDescription>
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-4 px-5 py-4">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.apiKeyNameLabel")}
|
|
</label>
|
|
<Input
|
|
autoFocus
|
|
placeholder={t("newUi.sidebar.userProfile.apiKeyNamePlaceholder")}
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleCreate()}
|
|
className="rounded-none bg-muted/50 border-border text-sm h-9"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.expiryDateLabel")}{" "}
|
|
<span className="text-muted-foreground/50 normal-case font-medium">
|
|
({t("newUi.sidebar.userProfile.optional")})
|
|
</span>
|
|
</label>
|
|
<Input
|
|
type="date"
|
|
value={expiry}
|
|
onChange={(e) => setExpiry(e.target.value)}
|
|
className="rounded-none bg-muted/50 border-border text-sm h-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="px-5 py-3 border-t border-border bg-muted/20">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => onOpenChange(false)}
|
|
className="rounded-none text-[10px] font-bold uppercase tracking-widest"
|
|
>
|
|
{t("newUi.sidebar.userProfile.cancel")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest gap-1.5"
|
|
onClick={handleCreate}
|
|
>
|
|
<KeyRound className="size-3" />{" "}
|
|
{t("newUi.sidebar.userProfile.createKey")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function PasswordChangeSection({
|
|
showPassword,
|
|
setShowPassword,
|
|
onLogout,
|
|
}: {
|
|
showPassword: boolean;
|
|
setShowPassword: (v: boolean | ((prev: boolean) => boolean)) => void;
|
|
onLogout?: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [currentPw, setCurrentPw] = useState("");
|
|
const [newPw, setNewPw] = useState("");
|
|
const [confirmPw, setConfirmPw] = useState("");
|
|
|
|
async function handleUpdate() {
|
|
if (!currentPw || !newPw) {
|
|
toast.error(t("newUi.sidebar.userProfile.passwordFieldsRequired"));
|
|
return;
|
|
}
|
|
if (newPw !== confirmPw) {
|
|
toast.error(t("newUi.sidebar.userProfile.passwordMismatch"));
|
|
return;
|
|
}
|
|
if (newPw.length < 6) {
|
|
toast.error(t("newUi.sidebar.userProfile.passwordTooShort"));
|
|
return;
|
|
}
|
|
try {
|
|
await changePassword(currentPw, newPw);
|
|
toast.success(t("newUi.sidebar.userProfile.passwordUpdated"));
|
|
setCurrentPw("");
|
|
setNewPw("");
|
|
setConfirmPw("");
|
|
onLogout?.();
|
|
} catch (e: unknown) {
|
|
toast.error(
|
|
apiErrorMessage(e, t("newUi.sidebar.userProfile.passwordUpdateFailed")),
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 border-t border-border pt-3">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.changePassword")}
|
|
</span>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
|
|
{t("newUi.sidebar.userProfile.currentPasswordLabel")}
|
|
</label>
|
|
<div className="relative">
|
|
<Input
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder={t(
|
|
"newUi.sidebar.userProfile.currentPasswordPlaceholder",
|
|
)}
|
|
value={currentPw}
|
|
onChange={(e) => setCurrentPw(e.target.value)}
|
|
className="pr-9 text-sm"
|
|
/>
|
|
<button
|
|
onClick={() => setShowPassword((o) => !o)}
|
|
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="size-4" />
|
|
) : (
|
|
<Eye className="size-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
|
|
{t("newUi.sidebar.userProfile.newPasswordLabel")}
|
|
</label>
|
|
<Input
|
|
type="password"
|
|
placeholder={t("newUi.sidebar.userProfile.newPasswordPlaceholder")}
|
|
value={newPw}
|
|
onChange={(e) => setNewPw(e.target.value)}
|
|
className="text-sm"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
|
|
{t("newUi.sidebar.userProfile.confirmPasswordLabel")}
|
|
</label>
|
|
<Input
|
|
type="password"
|
|
placeholder={t(
|
|
"newUi.sidebar.userProfile.confirmPasswordPlaceholder",
|
|
)}
|
|
value={confirmPw}
|
|
onChange={(e) => setConfirmPw(e.target.value)}
|
|
className="text-sm"
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand self-end"
|
|
onClick={handleUpdate}
|
|
>
|
|
<KeyRound className="size-3.5" />
|
|
{t("newUi.sidebar.userProfile.updatePassword")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function UserProfilePanel({
|
|
username,
|
|
onLogout,
|
|
onChangeServer,
|
|
userPrefs,
|
|
onPrefsChange,
|
|
}: {
|
|
username?: string;
|
|
onLogout?: () => void;
|
|
onChangeServer?: () => void;
|
|
userPrefs?: {
|
|
reopenTabsOnLogin: boolean;
|
|
storageMode?: string | null;
|
|
commandAutocomplete?: boolean | null;
|
|
commandPaletteEnabled?: boolean | null;
|
|
showHostTags?: boolean | null;
|
|
hostTrayOnClick?: boolean | null;
|
|
compactHostView?: boolean | null;
|
|
pinAppRail?: boolean | null;
|
|
expandAppRailOnHover?: boolean | null;
|
|
foldersCollapsed?: boolean | null;
|
|
confirmSnippetExecution?: boolean | null;
|
|
disableUpdateCheck?: boolean | null;
|
|
confirmTabClose?: boolean | null;
|
|
hiddenRailTabs?: string | null;
|
|
statusColorScheme?: string | null;
|
|
};
|
|
onPrefsChange?: (prefs: {
|
|
reopenTabsOnLogin?: boolean;
|
|
storageMode?: "local" | "cloud";
|
|
}) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const themeLabel: Record<ThemeId, string> = {
|
|
system: t("newUi.sidebar.userProfile.themeSystem"),
|
|
light: t("newUi.sidebar.userProfile.themeLight"),
|
|
dark: t("newUi.sidebar.userProfile.themeDark"),
|
|
dracula: t("newUi.sidebar.userProfile.themeDracula"),
|
|
catppuccin: t("newUi.sidebar.userProfile.themeCatppuccin"),
|
|
nord: t("newUi.sidebar.userProfile.themeNord"),
|
|
solarized: t("newUi.sidebar.userProfile.themeSolarized"),
|
|
"tokyo-night": t("newUi.sidebar.userProfile.themeTokyoNight"),
|
|
"one-dark": t("newUi.sidebar.userProfile.themeOneDark"),
|
|
gruvbox: t("newUi.sidebar.userProfile.themeGruvbox"),
|
|
};
|
|
const [openSection, setOpenSection] = useState<UserProfileSection | null>(
|
|
"account",
|
|
);
|
|
|
|
// User info
|
|
const [userId, setUserId] = useState("");
|
|
const [userRole, setUserRole] = useState("");
|
|
const [authMethod, setAuthMethod] = useState("");
|
|
const [version, setVersion] = useState("");
|
|
const [versionStatus, setVersionStatus] = useState<
|
|
"up_to_date" | "requires_update" | "beta"
|
|
>("up_to_date");
|
|
const [isOidc, setIsOidc] = useState(false);
|
|
const [isDualAuth, setIsDualAuth] = useState(false);
|
|
|
|
// TOTP
|
|
const [totpEnabled, setTotpEnabled] = useState(false);
|
|
const [totpStep, setTotpStep] = useState<
|
|
"idle" | "setup" | "verify" | "backup"
|
|
>("idle");
|
|
const [totpQrCode, setTotpQrCode] = useState("");
|
|
const [totpSecret, setTotpSecret] = useState("");
|
|
const [totpCode, setTotpCode] = useState("");
|
|
const [totpBackupCodes, setTotpBackupCodes] = useState<string[]>([]);
|
|
const [totpLoading, setTotpLoading] = useState(false);
|
|
const [showDisableTotp, setShowDisableTotp] = useState(false);
|
|
const [disableTotpInput, setDisableTotpInput] = useState("");
|
|
const [passkeys, setPasskeys] = useState<WebAuthnCredentialSummary[]>([]);
|
|
const [passkeyLoading, setPasskeyLoading] = useState(false);
|
|
const [passkeyName, setPasskeyName] = useState("");
|
|
const [passkeyUserVerification, setPasskeyUserVerification] =
|
|
useState<WebAuthnUserVerification>("preferred");
|
|
|
|
// Delete account
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
const [deletePassword, setDeletePassword] = useState("");
|
|
const [deleteLoading, setDeleteLoading] = useState(false);
|
|
|
|
// UI state
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [newKeyOpen, setNewKeyOpen] = useState(false);
|
|
const colorInputRef = useRef<HTMLInputElement>(null);
|
|
const { theme, setTheme } = useTheme();
|
|
const localSnapshot = useRef<Record<string, string | null>>({});
|
|
|
|
// Appearance state — initialized from localStorage
|
|
const [accentColor, setAccentColor] = useState(
|
|
() => localStorage.getItem("termix-accent") ?? "#f59145",
|
|
);
|
|
const [customColorInput, setCustomColorInput] = useState(
|
|
() => localStorage.getItem("termix-accent") ?? "#f59145",
|
|
);
|
|
const [fontSize, setFontSize] = useState<FontSizeId>(
|
|
() => (localStorage.getItem("termix-font-size") as FontSizeId) ?? "md",
|
|
);
|
|
const [language, setLanguage] = useState(() =>
|
|
normalizeLanguageCode(localStorage.getItem("i18nextLng")),
|
|
);
|
|
const [storageMode, setStorageMode] = useState<"local" | "cloud">(() =>
|
|
userPrefs?.storageMode === "cloud" ? "cloud" : "local",
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (userPrefs?.storageMode) {
|
|
setStorageMode(userPrefs.storageMode === "cloud" ? "cloud" : "local");
|
|
}
|
|
}, [userPrefs?.storageMode]);
|
|
|
|
// Settings toggles — all backed by localStorage
|
|
const [commandAutocomplete, setCommandAutocomplete] = useState(
|
|
() => localStorage.getItem("commandAutocomplete") === "true",
|
|
);
|
|
const [terminalLinkClickBehavior, setTerminalLinkClickBehavior] = useState(
|
|
() => localStorage.getItem("terminalLinkClickBehavior") ?? "confirm",
|
|
);
|
|
const [commandPaletteEnabled, setCommandPaletteEnabled] = useState(() => {
|
|
const v = localStorage.getItem("commandPaletteShortcutEnabled");
|
|
return v !== null ? v === "true" : true;
|
|
});
|
|
const [showHostTags, setShowHostTags] = useState(() => {
|
|
const v = localStorage.getItem("showHostTags");
|
|
return v !== null ? v === "true" : true;
|
|
});
|
|
const [hostTrayOnClick, setHostTrayOnClick] = useState(
|
|
() => localStorage.getItem("hostTrayOnClick") === "true",
|
|
);
|
|
const [compactHostView, setCompactHostView] = useState(
|
|
() => localStorage.getItem("compactHostView") === "true",
|
|
);
|
|
const [statusColorScheme, setStatusColorScheme] = useState(
|
|
() => localStorage.getItem("statusColorScheme") ?? "accent",
|
|
);
|
|
const [pinAppRail, setPinAppRail] = useState(
|
|
() => localStorage.getItem("pinAppRail") === "true",
|
|
);
|
|
const [expandAppRailOnHover, setExpandAppRailOnHover] = useState(
|
|
() => localStorage.getItem("expandAppRailOnHover") !== "false",
|
|
);
|
|
const [foldersCollapsed, setFoldersCollapsed] = useState(
|
|
() => localStorage.getItem("defaultSnippetFoldersCollapsed") !== "false",
|
|
);
|
|
const [confirmSnippetExecution, setConfirmSnippetExecution] = useState(
|
|
() => localStorage.getItem("confirmSnippetExecution") === "true",
|
|
);
|
|
const [disableUpdateCheck, setDisableUpdateCheck] = useState(
|
|
() => localStorage.getItem("disableUpdateCheck") === "true",
|
|
);
|
|
const [confirmTabClose, setConfirmTabClose] = useState(
|
|
() => localStorage.getItem("confirmTabClose") === "true",
|
|
);
|
|
const [hiddenRailTabs, setHiddenRailTabs] = useState<Set<string>>(() => {
|
|
try {
|
|
const stored = localStorage.getItem("hiddenRailTabs");
|
|
return stored ? new Set(JSON.parse(stored)) : new Set();
|
|
} catch {
|
|
return new Set();
|
|
}
|
|
});
|
|
|
|
// API keys
|
|
const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
|
|
|
|
// RBAC roles
|
|
const [userRoles, setUserRoles] = useState<UserRole[]>([]);
|
|
|
|
useEffect(() => {
|
|
getUserInfo()
|
|
.then((info) => {
|
|
setUserId(info.userId);
|
|
setTotpEnabled(info.totp_enabled ?? false);
|
|
setIsOidc(info.is_oidc ?? false);
|
|
setIsDualAuth(info.is_dual_auth ?? false);
|
|
setUserRole(
|
|
info.is_admin
|
|
? t("newUi.sidebar.userProfile.roleAdministrator")
|
|
: t("newUi.sidebar.userProfile.roleUser"),
|
|
);
|
|
if (info.is_dual_auth) {
|
|
setAuthMethod(t("newUi.sidebar.userProfile.authMethodDual"));
|
|
} else if (info.is_oidc) {
|
|
setAuthMethod(t("newUi.sidebar.userProfile.authMethodOidc"));
|
|
} else {
|
|
setAuthMethod(t("newUi.sidebar.userProfile.authMethodLocal"));
|
|
}
|
|
getUserRoles(info.userId)
|
|
.then(({ roles }) => setUserRoles(roles ?? []))
|
|
.catch(() => {});
|
|
})
|
|
.catch(() => {});
|
|
getApiKeys()
|
|
.then(({ apiKeys: keys }) => setApiKeys(keys))
|
|
.catch(() => {});
|
|
listWebAuthnCredentials()
|
|
.then(({ credentials }) => setPasskeys(credentials ?? []))
|
|
.catch(() => {});
|
|
getVersionInfo()
|
|
.then((info) => {
|
|
setVersion(info.localVersion);
|
|
setVersionStatus(info.status ?? "up_to_date");
|
|
})
|
|
.catch(() => {});
|
|
}, [t]);
|
|
|
|
function saveToCloud(prefs: Parameters<typeof saveUserPreferences>[0]) {
|
|
void saveUserPreferences(prefs).catch(() => {});
|
|
}
|
|
|
|
async function handleStorageModeChange(mode: "local" | "cloud") {
|
|
setStorageMode(mode);
|
|
onPrefsChange?.({ storageMode: mode });
|
|
if (mode === "cloud") {
|
|
// Snapshot current browser localStorage values so any tab can restore them later
|
|
const SNAPSHOT_KEYS = [
|
|
"termix-accent",
|
|
"termix-font-size",
|
|
"i18nextLng",
|
|
"commandAutocomplete",
|
|
"commandPaletteShortcutEnabled",
|
|
"showHostTags",
|
|
"hostTrayOnClick",
|
|
"compactHostView",
|
|
"pinAppRail",
|
|
"expandAppRailOnHover",
|
|
"defaultSnippetFoldersCollapsed",
|
|
"confirmSnippetExecution",
|
|
"disableUpdateCheck",
|
|
"confirmTabClose",
|
|
"hiddenRailTabs",
|
|
"statusColorScheme",
|
|
];
|
|
const snap: Record<string, string | null> = { __theme: theme };
|
|
for (const key of SNAPSHOT_KEYS) snap[key] = localStorage.getItem(key);
|
|
localSnapshot.current = snap;
|
|
localStorage.setItem("termix-local-snapshot", JSON.stringify(snap));
|
|
|
|
try {
|
|
const prefs = await getUserPreferences();
|
|
if (prefs.theme) setTheme(prefs.theme as ThemeId);
|
|
if (prefs.fontSize) {
|
|
setFontSize(prefs.fontSize as FontSizeId);
|
|
applyFontSize(prefs.fontSize as FontSizeId);
|
|
}
|
|
if (prefs.accentColor) {
|
|
setAccentColor(prefs.accentColor);
|
|
setCustomColorInput(prefs.accentColor);
|
|
localStorage.setItem("termix-accent", prefs.accentColor);
|
|
applyAccentColor(prefs.accentColor);
|
|
}
|
|
if (prefs.language) {
|
|
const language = await changeAppLanguage(prefs.language);
|
|
setLanguage(language);
|
|
}
|
|
if (prefs.commandAutocomplete != null) {
|
|
setCommandAutocomplete(prefs.commandAutocomplete);
|
|
localStorage.setItem(
|
|
"commandAutocomplete",
|
|
String(prefs.commandAutocomplete),
|
|
);
|
|
}
|
|
if (prefs.commandPaletteEnabled != null) {
|
|
setCommandPaletteEnabled(prefs.commandPaletteEnabled);
|
|
localStorage.setItem(
|
|
"commandPaletteShortcutEnabled",
|
|
String(prefs.commandPaletteEnabled),
|
|
);
|
|
}
|
|
if (prefs.showHostTags != null) {
|
|
setShowHostTags(prefs.showHostTags);
|
|
localStorage.setItem("showHostTags", String(prefs.showHostTags));
|
|
window.dispatchEvent(new CustomEvent("showHostTagsChanged"));
|
|
}
|
|
if (prefs.hostTrayOnClick != null) {
|
|
setHostTrayOnClick(prefs.hostTrayOnClick);
|
|
localStorage.setItem(
|
|
"hostTrayOnClick",
|
|
String(prefs.hostTrayOnClick),
|
|
);
|
|
}
|
|
if (prefs.compactHostView != null) {
|
|
setCompactHostView(prefs.compactHostView);
|
|
localStorage.setItem(
|
|
"compactHostView",
|
|
String(prefs.compactHostView),
|
|
);
|
|
window.dispatchEvent(new CustomEvent("compactHostViewChanged"));
|
|
}
|
|
if (prefs.pinAppRail != null) {
|
|
setPinAppRail(prefs.pinAppRail);
|
|
localStorage.setItem("pinAppRail", String(prefs.pinAppRail));
|
|
window.dispatchEvent(new Event("pinAppRailChanged"));
|
|
}
|
|
if (prefs.expandAppRailOnHover != null) {
|
|
setExpandAppRailOnHover(prefs.expandAppRailOnHover);
|
|
localStorage.setItem(
|
|
"expandAppRailOnHover",
|
|
String(prefs.expandAppRailOnHover),
|
|
);
|
|
window.dispatchEvent(new Event("expandAppRailOnHoverChanged"));
|
|
}
|
|
if (prefs.foldersCollapsed != null) {
|
|
setFoldersCollapsed(prefs.foldersCollapsed);
|
|
localStorage.setItem(
|
|
"defaultSnippetFoldersCollapsed",
|
|
String(prefs.foldersCollapsed),
|
|
);
|
|
}
|
|
if (prefs.confirmSnippetExecution != null) {
|
|
setConfirmSnippetExecution(prefs.confirmSnippetExecution);
|
|
localStorage.setItem(
|
|
"confirmSnippetExecution",
|
|
String(prefs.confirmSnippetExecution),
|
|
);
|
|
}
|
|
if (prefs.disableUpdateCheck != null) {
|
|
setDisableUpdateCheck(prefs.disableUpdateCheck);
|
|
localStorage.setItem(
|
|
"disableUpdateCheck",
|
|
String(prefs.disableUpdateCheck),
|
|
);
|
|
}
|
|
if (prefs.confirmTabClose != null) {
|
|
setConfirmTabClose(prefs.confirmTabClose);
|
|
localStorage.setItem(
|
|
"confirmTabClose",
|
|
String(prefs.confirmTabClose),
|
|
);
|
|
}
|
|
if (prefs.hiddenRailTabs != null) {
|
|
const s = new Set<string>(JSON.parse(prefs.hiddenRailTabs));
|
|
setHiddenRailTabs(s);
|
|
localStorage.setItem("hiddenRailTabs", prefs.hiddenRailTabs);
|
|
window.dispatchEvent(new CustomEvent("hiddenRailTabsChanged"));
|
|
}
|
|
if (prefs.statusColorScheme != null) {
|
|
setStatusColorScheme(prefs.statusColorScheme);
|
|
localStorage.setItem("statusColorScheme", prefs.statusColorScheme);
|
|
window.dispatchEvent(new CustomEvent("statusColorSchemeChanged"));
|
|
}
|
|
} catch {
|
|
// leave UI as-is on error
|
|
}
|
|
saveToCloud({ storageMode: "cloud" });
|
|
} else {
|
|
restoreLocalSnapshot();
|
|
saveToCloud({ storageMode: "local" });
|
|
}
|
|
}
|
|
|
|
function resetToDefaults() {
|
|
const DEFAULT_ACCENT = "#f59145";
|
|
setTheme("system");
|
|
setFontSize("md");
|
|
applyFontSize("md");
|
|
setAccentColor(DEFAULT_ACCENT);
|
|
setCustomColorInput(DEFAULT_ACCENT);
|
|
localStorage.setItem("termix-accent", DEFAULT_ACCENT);
|
|
applyAccentColor(DEFAULT_ACCENT);
|
|
setLanguage("en");
|
|
void changeAppLanguage("en");
|
|
setCommandAutocomplete(false);
|
|
localStorage.setItem("commandAutocomplete", "false");
|
|
setCommandPaletteEnabled(true);
|
|
localStorage.setItem("commandPaletteShortcutEnabled", "true");
|
|
setShowHostTags(true);
|
|
localStorage.setItem("showHostTags", "true");
|
|
window.dispatchEvent(new CustomEvent("showHostTagsChanged"));
|
|
setHostTrayOnClick(false);
|
|
localStorage.setItem("hostTrayOnClick", "false");
|
|
setCompactHostView(false);
|
|
localStorage.setItem("compactHostView", "false");
|
|
window.dispatchEvent(new CustomEvent("compactHostViewChanged"));
|
|
setPinAppRail(false);
|
|
localStorage.setItem("pinAppRail", "false");
|
|
window.dispatchEvent(new Event("pinAppRailChanged"));
|
|
setExpandAppRailOnHover(true);
|
|
localStorage.setItem("expandAppRailOnHover", "true");
|
|
window.dispatchEvent(new Event("expandAppRailOnHoverChanged"));
|
|
setFoldersCollapsed(true);
|
|
localStorage.removeItem("defaultSnippetFoldersCollapsed");
|
|
setConfirmSnippetExecution(false);
|
|
localStorage.setItem("confirmSnippetExecution", "false");
|
|
setDisableUpdateCheck(false);
|
|
localStorage.setItem("disableUpdateCheck", "false");
|
|
setConfirmTabClose(false);
|
|
localStorage.setItem("confirmTabClose", "false");
|
|
setHiddenRailTabs(new Set());
|
|
localStorage.removeItem("hiddenRailTabs");
|
|
window.dispatchEvent(new CustomEvent("hiddenRailTabsChanged"));
|
|
setStatusColorScheme("accent");
|
|
localStorage.setItem("statusColorScheme", "accent");
|
|
window.dispatchEvent(new CustomEvent("statusColorSchemeChanged"));
|
|
if (storageMode === "cloud") {
|
|
saveToCloud({
|
|
theme: "system",
|
|
fontSize: "md",
|
|
accentColor: DEFAULT_ACCENT,
|
|
language: "en",
|
|
commandAutocomplete: false,
|
|
commandPaletteEnabled: true,
|
|
showHostTags: true,
|
|
hostTrayOnClick: false,
|
|
compactHostView: false,
|
|
pinAppRail: false,
|
|
expandAppRailOnHover: true,
|
|
foldersCollapsed: true,
|
|
confirmSnippetExecution: false,
|
|
disableUpdateCheck: false,
|
|
confirmTabClose: false,
|
|
hiddenRailTabs: "[]",
|
|
statusColorScheme: "accent",
|
|
});
|
|
}
|
|
localSnapshot.current = {};
|
|
localStorage.removeItem("termix-local-snapshot");
|
|
toast.success(t("newUi.sidebar.userProfile.resetToDefaultsSuccess"));
|
|
}
|
|
|
|
function restoreLocalSnapshot() {
|
|
// Prefer the persisted snapshot (survives new tabs/reloads), fall back to in-memory ref.
|
|
// If neither exists there were never any browser values to restore, so use current localStorage.
|
|
const persisted = localStorage.getItem("termix-local-snapshot");
|
|
const snap: Record<string, string | null> = persisted
|
|
? (JSON.parse(persisted) as Record<string, string | null>)
|
|
: localSnapshot.current;
|
|
const hasSnap = Object.keys(snap).length > 0;
|
|
const restore = (key: string, fallback: string | null = null) =>
|
|
hasSnap
|
|
? snap[key] !== undefined
|
|
? snap[key]
|
|
: fallback
|
|
: (localStorage.getItem(key) ?? fallback);
|
|
|
|
const restoredTheme =
|
|
((hasSnap ? snap["__theme"] : theme) as ThemeId) ?? "system";
|
|
setTheme(restoredTheme);
|
|
|
|
const restoredFontSize =
|
|
(restore("termix-font-size", "md") as FontSizeId) ?? "md";
|
|
setFontSize(restoredFontSize);
|
|
applyFontSize(restoredFontSize);
|
|
|
|
const restoredAccent = restore("termix-accent", "#f59145") ?? "#f59145";
|
|
setAccentColor(restoredAccent);
|
|
setCustomColorInput(restoredAccent);
|
|
localStorage.setItem("termix-accent", restoredAccent);
|
|
applyAccentColor(restoredAccent);
|
|
|
|
const restoredLang = normalizeLanguageCode(restore("i18nextLng", "en"));
|
|
setLanguage(restoredLang);
|
|
void changeAppLanguage(restoredLang);
|
|
|
|
const restoredAutocomplete =
|
|
restore("commandAutocomplete", "false") === "true";
|
|
setCommandAutocomplete(restoredAutocomplete);
|
|
localStorage.setItem("commandAutocomplete", String(restoredAutocomplete));
|
|
|
|
const restoredPalette =
|
|
restore("commandPaletteShortcutEnabled", "true") !== "false";
|
|
setCommandPaletteEnabled(restoredPalette);
|
|
localStorage.setItem(
|
|
"commandPaletteShortcutEnabled",
|
|
String(restoredPalette),
|
|
);
|
|
|
|
const restoredHostTags = restore("showHostTags", "true") !== "false";
|
|
setShowHostTags(restoredHostTags);
|
|
localStorage.setItem("showHostTags", String(restoredHostTags));
|
|
window.dispatchEvent(new CustomEvent("showHostTagsChanged"));
|
|
|
|
const restoredTrayOnClick = restore("hostTrayOnClick", "false") === "true";
|
|
setHostTrayOnClick(restoredTrayOnClick);
|
|
localStorage.setItem("hostTrayOnClick", String(restoredTrayOnClick));
|
|
|
|
const restoredCompactHostView =
|
|
restore("compactHostView", "false") === "true";
|
|
setCompactHostView(restoredCompactHostView);
|
|
localStorage.setItem("compactHostView", String(restoredCompactHostView));
|
|
window.dispatchEvent(new CustomEvent("compactHostViewChanged"));
|
|
|
|
const restoredPinRail = restore("pinAppRail", "false") === "true";
|
|
setPinAppRail(restoredPinRail);
|
|
localStorage.setItem("pinAppRail", String(restoredPinRail));
|
|
window.dispatchEvent(new Event("pinAppRailChanged"));
|
|
|
|
const restoredExpandRailOnHover =
|
|
restore("expandAppRailOnHover", "true") !== "false";
|
|
setExpandAppRailOnHover(restoredExpandRailOnHover);
|
|
localStorage.setItem(
|
|
"expandAppRailOnHover",
|
|
String(restoredExpandRailOnHover),
|
|
);
|
|
window.dispatchEvent(new Event("expandAppRailOnHoverChanged"));
|
|
|
|
const restoredFolders =
|
|
restore("defaultSnippetFoldersCollapsed", null) !== "false";
|
|
setFoldersCollapsed(restoredFolders);
|
|
const snapFolders = hasSnap
|
|
? snap["defaultSnippetFoldersCollapsed"]
|
|
: localStorage.getItem("defaultSnippetFoldersCollapsed");
|
|
if (snapFolders == null) {
|
|
localStorage.removeItem("defaultSnippetFoldersCollapsed");
|
|
} else {
|
|
localStorage.setItem("defaultSnippetFoldersCollapsed", snapFolders);
|
|
}
|
|
|
|
const restoredConfirmSnippet =
|
|
restore("confirmSnippetExecution", "false") === "true";
|
|
setConfirmSnippetExecution(restoredConfirmSnippet);
|
|
localStorage.setItem(
|
|
"confirmSnippetExecution",
|
|
String(restoredConfirmSnippet),
|
|
);
|
|
|
|
const restoredUpdateCheck =
|
|
restore("disableUpdateCheck", "false") === "true";
|
|
setDisableUpdateCheck(restoredUpdateCheck);
|
|
localStorage.setItem("disableUpdateCheck", String(restoredUpdateCheck));
|
|
|
|
const restoredConfirmTab = restore("confirmTabClose", "false") === "true";
|
|
setConfirmTabClose(restoredConfirmTab);
|
|
localStorage.setItem("confirmTabClose", String(restoredConfirmTab));
|
|
|
|
const restoredHiddenRaw = hasSnap
|
|
? snap["hiddenRailTabs"]
|
|
: localStorage.getItem("hiddenRailTabs");
|
|
if (restoredHiddenRaw == null) {
|
|
setHiddenRailTabs(new Set());
|
|
localStorage.removeItem("hiddenRailTabs");
|
|
} else {
|
|
try {
|
|
setHiddenRailTabs(new Set(JSON.parse(restoredHiddenRaw)));
|
|
} catch {
|
|
setHiddenRailTabs(new Set());
|
|
}
|
|
localStorage.setItem("hiddenRailTabs", restoredHiddenRaw);
|
|
}
|
|
window.dispatchEvent(new CustomEvent("hiddenRailTabsChanged"));
|
|
|
|
const restoredStatusScheme =
|
|
restore("statusColorScheme", "accent") ?? "accent";
|
|
setStatusColorScheme(restoredStatusScheme);
|
|
localStorage.setItem("statusColorScheme", restoredStatusScheme);
|
|
window.dispatchEvent(new CustomEvent("statusColorSchemeChanged"));
|
|
|
|
localStorage.removeItem("termix-local-snapshot");
|
|
localSnapshot.current = {};
|
|
}
|
|
|
|
function handleThemeChange(id: ThemeId) {
|
|
setTheme(id);
|
|
if (storageMode === "cloud") saveToCloud({ theme: id });
|
|
}
|
|
|
|
function handleAccentChange(value: string) {
|
|
setAccentColor(value);
|
|
setCustomColorInput(value);
|
|
localStorage.setItem("termix-accent", value);
|
|
applyAccentColor(value);
|
|
if (storageMode === "cloud") saveToCloud({ accentColor: value });
|
|
}
|
|
|
|
function handleFontSizeChange(id: FontSizeId) {
|
|
setFontSize(id);
|
|
applyFontSize(id);
|
|
if (storageMode === "cloud") saveToCloud({ fontSize: id });
|
|
}
|
|
|
|
function handleLanguageChange(code: string) {
|
|
void changeAppLanguage(code)
|
|
.then((language) => {
|
|
setLanguage(language);
|
|
if (storageMode === "cloud") saveToCloud({ language });
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function toggle(id: UserProfileSection) {
|
|
setOpenSection((prev) => (prev === id ? null : id));
|
|
}
|
|
|
|
async function handleStartTotpSetup() {
|
|
setTotpLoading(true);
|
|
try {
|
|
const result = await setupTOTP();
|
|
setTotpQrCode(result.qr_code);
|
|
setTotpSecret(result.secret);
|
|
setTotpCode("");
|
|
setTotpStep("setup");
|
|
} catch {
|
|
toast.error(t("newUi.sidebar.userProfile.totpSetupFailed"));
|
|
} finally {
|
|
setTotpLoading(false);
|
|
}
|
|
}
|
|
|
|
async function handleVerifyTotp() {
|
|
if (!totpCode || totpCode.length !== 6) {
|
|
toast.error(t("newUi.sidebar.userProfile.totpEnter6Digits"));
|
|
return;
|
|
}
|
|
setTotpLoading(true);
|
|
try {
|
|
const result = await enableTOTP(totpCode);
|
|
setTotpBackupCodes(result.backup_codes ?? []);
|
|
setTotpEnabled(true);
|
|
setTotpStep("backup");
|
|
toast.success(t("newUi.sidebar.userProfile.totpEnabledSuccess"));
|
|
} catch (e: unknown) {
|
|
toast.error(
|
|
apiErrorMessage(e, t("newUi.sidebar.userProfile.totpInvalidCode")),
|
|
);
|
|
} finally {
|
|
setTotpLoading(false);
|
|
}
|
|
}
|
|
|
|
async function handleDisableTotp() {
|
|
if (!disableTotpInput) {
|
|
toast.error(t("newUi.sidebar.userProfile.totpDisableInputRequired"));
|
|
return;
|
|
}
|
|
setTotpLoading(true);
|
|
try {
|
|
await disableTOTP(disableTotpInput);
|
|
setTotpEnabled(false);
|
|
setShowDisableTotp(false);
|
|
setDisableTotpInput("");
|
|
toast.success(t("newUi.sidebar.userProfile.totpDisabledSuccess"));
|
|
} catch (e: unknown) {
|
|
toast.error(
|
|
apiErrorMessage(e, t("newUi.sidebar.userProfile.totpDisableFailed")),
|
|
);
|
|
} finally {
|
|
setTotpLoading(false);
|
|
}
|
|
}
|
|
|
|
async function handleRegisterPasskey() {
|
|
setPasskeyLoading(true);
|
|
try {
|
|
await registerWebAuthnCredential(
|
|
passkeyName || "Passkey",
|
|
passkeyUserVerification,
|
|
);
|
|
const { credentials } = await listWebAuthnCredentials();
|
|
setPasskeys(credentials ?? []);
|
|
setPasskeyName("");
|
|
toast.success(t("newUi.sidebar.userProfile.passkeyAdded"));
|
|
} catch (e: unknown) {
|
|
toast.error(
|
|
apiErrorMessage(e, t("newUi.sidebar.userProfile.passkeyAddFailed")),
|
|
);
|
|
} finally {
|
|
setPasskeyLoading(false);
|
|
}
|
|
}
|
|
|
|
async function handleDeletePasskey(credentialId: string) {
|
|
setPasskeyLoading(true);
|
|
try {
|
|
await deleteWebAuthnCredential(credentialId);
|
|
setPasskeys((prev) => prev.filter((item) => item.id !== credentialId));
|
|
toast.success(t("newUi.sidebar.userProfile.passkeyDeleted"));
|
|
} catch (e: unknown) {
|
|
toast.error(
|
|
apiErrorMessage(e, t("newUi.sidebar.userProfile.passkeyDeleteFailed")),
|
|
);
|
|
} finally {
|
|
setPasskeyLoading(false);
|
|
}
|
|
}
|
|
|
|
function downloadBackupCodes() {
|
|
const blob = new Blob([totpBackupCodes.join("\n")], { type: "text/plain" });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = "termix-backup-codes.txt";
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
async function handleDeleteAccount() {
|
|
if (!deletePassword.trim()) {
|
|
toast.error(t("newUi.sidebar.userProfile.deletePasswordRequired"));
|
|
return;
|
|
}
|
|
setDeleteLoading(true);
|
|
try {
|
|
await deleteAccount(deletePassword);
|
|
await logoutUser().catch(() => {});
|
|
window.location.reload();
|
|
} catch (e: unknown) {
|
|
toast.error(
|
|
apiErrorMessage(e, t("newUi.sidebar.userProfile.deleteFailed")),
|
|
);
|
|
setDeleteLoading(false);
|
|
}
|
|
}
|
|
|
|
const canChangePasword = !isOidc || isDualAuth;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 p-3">
|
|
<NewApiKeyDialog
|
|
open={newKeyOpen}
|
|
onOpenChange={setNewKeyOpen}
|
|
onAdd={(key) => setApiKeys((prev) => [key, ...prev])}
|
|
userId={userId}
|
|
/>
|
|
|
|
{/* Storage mode toggle */}
|
|
<div className="border border-border bg-card px-3 py-2.5 flex flex-col gap-2">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.storageModeSwitch")}
|
|
</span>
|
|
<div className="flex border border-border overflow-hidden w-full">
|
|
<button
|
|
onClick={() => handleStorageModeChange("local")}
|
|
className={`flex-1 py-1 text-[10px] font-bold uppercase tracking-widest transition-colors ${
|
|
storageMode === "local"
|
|
? "bg-accent-brand text-white"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-muted/40"
|
|
}`}
|
|
>
|
|
{t("newUi.sidebar.userProfile.storageModeLocal")}
|
|
</button>
|
|
<button
|
|
onClick={() => handleStorageModeChange("cloud")}
|
|
className={`flex-1 py-1 text-[10px] font-bold uppercase tracking-widest transition-colors ${
|
|
storageMode === "cloud"
|
|
? "bg-accent-brand text-white"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-muted/40"
|
|
}`}
|
|
>
|
|
{t("newUi.sidebar.userProfile.storageModeCloud")}
|
|
</button>
|
|
</div>
|
|
<p className="text-[10px] text-muted-foreground leading-relaxed">
|
|
{t("newUi.sidebar.userProfile.storageModeDescription")}
|
|
</p>
|
|
<button
|
|
onClick={resetToDefaults}
|
|
className="self-start flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<RotateCcw className="size-3" />
|
|
{t("newUi.sidebar.userProfile.resetToDefaults")}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Account */}
|
|
<AccordionSection
|
|
id="account"
|
|
label={t("newUi.sidebar.userProfile.sectionAccount")}
|
|
icon={<User className="size-3.5" />}
|
|
open={openSection === "account"}
|
|
onToggle={() => toggle("account")}
|
|
>
|
|
<div className="flex flex-col gap-0 pt-2">
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-0">
|
|
<div className="flex flex-col py-2">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("newUi.sidebar.userProfile.usernameLabel")}
|
|
</span>
|
|
<span className="text-sm font-semibold mt-0.5">
|
|
{username ?? "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col py-2">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("newUi.sidebar.userProfile.roleLabel")}
|
|
</span>
|
|
<div className="flex flex-wrap gap-1 mt-0.5">
|
|
<span className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold border border-accent-brand/40 bg-accent-brand/10 text-accent-brand w-fit">
|
|
{userRole || "—"}
|
|
</span>
|
|
{userRoles.map((r) => (
|
|
<span
|
|
key={r.roleId}
|
|
className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold border border-border bg-muted text-muted-foreground w-fit"
|
|
>
|
|
{r.roleDisplayName}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col py-2">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("newUi.sidebar.userProfile.authMethodLabel")}
|
|
</span>
|
|
<span className="text-sm font-semibold mt-0.5">
|
|
{authMethod || "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col py-2">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("newUi.sidebar.userProfile.twoFaLabel")}
|
|
</span>
|
|
<span className="flex items-center gap-1 mt-0.5">
|
|
{totpEnabled ? (
|
|
<>
|
|
<ShieldCheck className="size-3.5 text-accent-brand" />
|
|
<span className="text-sm font-semibold text-accent-brand">
|
|
{t("newUi.sidebar.userProfile.twoFaOn")}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<span className="text-sm font-semibold text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.twoFaOff")}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-border pt-3 mt-1">
|
|
<span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("newUi.sidebar.userProfile.versionLabel")}
|
|
</span>
|
|
<div className="flex items-center justify-between mt-1.5">
|
|
<span className="text-sm font-bold text-accent-brand">
|
|
{version ? `v${version}` : "—"}
|
|
</span>
|
|
<span
|
|
className={`text-[10px] px-1.5 py-0.5 font-semibold leading-none ${
|
|
versionStatus === "beta"
|
|
? "bg-blue-500/20 text-blue-400"
|
|
: versionStatus === "requires_update"
|
|
? "bg-yellow-500/20 text-yellow-400"
|
|
: "bg-accent-brand/20 text-accent-brand"
|
|
}`}
|
|
>
|
|
{versionStatus === "beta"
|
|
? t("dashboard.beta").toUpperCase()
|
|
: versionStatus === "requires_update"
|
|
? t("dashboard.updateAvailable").toUpperCase()
|
|
: t("dashboardTab.stable")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{isElectron() && onChangeServer && (
|
|
<div className="border-t border-border pt-3 mt-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-xs font-medium">
|
|
{t("serverConfig.changeServer")}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.changeServerDescription")}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="shrink-0 ml-3 text-[10px] h-7"
|
|
onClick={onChangeServer}
|
|
>
|
|
<Server className="size-3" />
|
|
{t("serverConfig.changeServer")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="border-t border-border pt-3 mt-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-xs font-medium text-destructive">
|
|
{t("newUi.sidebar.userProfile.deleteAccount")}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.deleteAccountDescription")}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive shrink-0 ml-3 text-[10px] h-7"
|
|
onClick={() => setShowDeleteConfirm(true)}
|
|
>
|
|
{t("newUi.sidebar.userProfile.deleteButton")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* Appearance */}
|
|
<AccordionSection
|
|
id="appearance"
|
|
label={t("newUi.sidebar.userProfile.sectionAppearance")}
|
|
icon={<Palette className="size-3.5" />}
|
|
open={openSection === "appearance"}
|
|
onToggle={() => toggle("appearance")}
|
|
>
|
|
<div className="flex flex-col gap-4 pt-3">
|
|
<div className="flex flex-col gap-1.5">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.languageLabel")}
|
|
</span>
|
|
<select
|
|
value={language}
|
|
onChange={(e) => handleLanguageChange(e.target.value)}
|
|
className="px-2.5 py-1.5 text-xs bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring w-full"
|
|
>
|
|
{LANGUAGES.map((lang) => (
|
|
<option key={lang.code} value={lang.code}>
|
|
{lang.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.themeLabel")}
|
|
</span>
|
|
<div className="relative">
|
|
<select
|
|
value={theme}
|
|
onChange={(e) => handleThemeChange(e.target.value as ThemeId)}
|
|
className="w-full px-2.5 py-1.5 text-xs bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring appearance-none pr-7"
|
|
>
|
|
{THEMES.map((th) => (
|
|
<option key={th.id} value={th.id}>
|
|
{themeLabel[th.id]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground pointer-events-none" />
|
|
</div>
|
|
<div className="flex gap-1 mt-0.5">
|
|
{THEMES.filter((th) => th.id !== "system").map((th) => (
|
|
<button
|
|
key={th.id}
|
|
title={themeLabel[th.id]}
|
|
onClick={() => handleThemeChange(th.id)}
|
|
className={`h-4 flex-1 border transition-all ${theme === th.id ? "border-accent-brand ring-1 ring-accent-brand" : "border-border/50"}`}
|
|
style={{ background: th.preview }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
|
|
<Type className="size-3" />
|
|
{t("newUi.sidebar.userProfile.fontSizeLabel")}
|
|
</span>
|
|
<div className="flex gap-1">
|
|
{FONT_SIZES.map((fs) => (
|
|
<button
|
|
key={fs.id}
|
|
onClick={() => handleFontSizeChange(fs.id)}
|
|
className={`flex-1 py-1.5 border text-[10px] font-bold transition-colors ${
|
|
fontSize === fs.id
|
|
? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand"
|
|
: "border-border text-muted-foreground hover:text-foreground"
|
|
}`}
|
|
>
|
|
{fs.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.accentColorLabel")}
|
|
</span>
|
|
<div className="grid grid-cols-6 gap-1">
|
|
{ACCENT_PRESET_COLORS.map((ac) => (
|
|
<button
|
|
key={ac.value}
|
|
title={ac.label}
|
|
onClick={() => handleAccentChange(ac.value)}
|
|
className={`h-6 border-2 transition-all ${
|
|
accentColor === ac.value
|
|
? "border-foreground scale-110"
|
|
: "border-transparent hover:border-foreground/40"
|
|
}`}
|
|
style={{ background: ac.value }}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-2 border border-border bg-muted/30 px-2 py-1.5">
|
|
<button
|
|
onClick={() => colorInputRef.current?.click()}
|
|
className="size-5 shrink-0 border border-border/60 cursor-pointer"
|
|
style={{ background: accentColor }}
|
|
title={t("newUi.sidebar.userProfile.colorPickerTooltip")}
|
|
/>
|
|
<input
|
|
ref={colorInputRef}
|
|
type="color"
|
|
value={accentColor.startsWith("#") ? accentColor : "#f97316"}
|
|
onChange={(e) => handleAccentChange(e.target.value)}
|
|
className="sr-only"
|
|
/>
|
|
<Input
|
|
value={customColorInput}
|
|
onChange={(e) => setCustomColorInput(e.target.value)}
|
|
onBlur={() => {
|
|
const v = customColorInput.trim();
|
|
if (
|
|
/^#[0-9a-fA-F]{6}$/.test(v) ||
|
|
/^#[0-9a-fA-F]{3}$/.test(v)
|
|
) {
|
|
handleAccentChange(v);
|
|
} else {
|
|
setCustomColorInput(accentColor);
|
|
}
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
const v = customColorInput.trim();
|
|
if (
|
|
/^#[0-9a-fA-F]{6}$/.test(v) ||
|
|
/^#[0-9a-fA-F]{3}$/.test(v)
|
|
) {
|
|
handleAccentChange(v);
|
|
}
|
|
}
|
|
}}
|
|
placeholder="#f97316"
|
|
className="h-6 text-[11px] font-mono border-0 bg-transparent p-0 focus-visible:ring-0 flex-1 min-w-0"
|
|
/>
|
|
<span className="text-[10px] text-muted-foreground shrink-0">
|
|
hex
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1 border-t border-border pt-3">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
|
|
{t("newUi.sidebar.userProfile.settingsTerminal")}
|
|
</span>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.commandAutocomplete")}
|
|
description={t(
|
|
"newUi.sidebar.userProfile.commandAutocompleteDesc",
|
|
)}
|
|
>
|
|
<FakeSwitch
|
|
checked={commandAutocomplete}
|
|
onChange={(v) => {
|
|
setCommandAutocomplete(v);
|
|
localStorage.setItem("commandAutocomplete", v.toString());
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ commandAutocomplete: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<div className="flex flex-col gap-1.5 py-3 border-b border-border">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-sm font-medium leading-snug">
|
|
{t("newUi.sidebar.userProfile.terminalLinkBehavior")}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground leading-snug">
|
|
{t("newUi.sidebar.userProfile.terminalLinkBehaviorDesc")}
|
|
</span>
|
|
</div>
|
|
<select
|
|
value={terminalLinkClickBehavior}
|
|
onChange={(e) => {
|
|
setTerminalLinkClickBehavior(e.target.value);
|
|
localStorage.setItem(
|
|
"terminalLinkClickBehavior",
|
|
e.target.value,
|
|
);
|
|
}}
|
|
className="h-7 border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
|
|
>
|
|
<option value="confirm">
|
|
{t("hosts.linkClickBehaviorConfirm")}
|
|
</option>
|
|
<option value="direct">
|
|
{t("hosts.linkClickBehaviorDirect")}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.commandPalette")}
|
|
description={t("newUi.sidebar.userProfile.commandPaletteDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={commandPaletteEnabled}
|
|
onChange={(v) => {
|
|
setCommandPaletteEnabled(v);
|
|
localStorage.setItem(
|
|
"commandPaletteShortcutEnabled",
|
|
v.toString(),
|
|
);
|
|
window.dispatchEvent(
|
|
new Event("commandPaletteShortcutEnabledChanged"),
|
|
);
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ commandPaletteEnabled: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.reopenTabsOnLogin")}
|
|
description={t("newUi.sidebar.userProfile.reopenTabsOnLoginDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={userPrefs?.reopenTabsOnLogin ?? false}
|
|
onChange={(v) => {
|
|
onPrefsChange?.({ reopenTabsOnLogin: v });
|
|
import("@/main-axios").then(({ saveUserPreferences }) => {
|
|
saveUserPreferences({ reopenTabsOnLogin: v }).catch(
|
|
() => {},
|
|
);
|
|
});
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.confirmTabClose")}
|
|
description={t("newUi.sidebar.userProfile.confirmTabCloseDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={confirmTabClose}
|
|
onChange={(v) => {
|
|
setConfirmTabClose(v);
|
|
localStorage.setItem("confirmTabClose", v.toString());
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ confirmTabClose: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1 border-t border-border pt-3">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
|
|
{t("newUi.sidebar.userProfile.settingsSidebar")}
|
|
</span>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.showHostTags")}
|
|
description={t("newUi.sidebar.userProfile.showHostTagsDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={showHostTags}
|
|
onChange={(v) => {
|
|
setShowHostTags(v);
|
|
localStorage.setItem("showHostTags", v.toString());
|
|
window.dispatchEvent(new Event("showHostTagsChanged"));
|
|
if (storageMode === "cloud") saveToCloud({ showHostTags: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.hostTrayOnClick")}
|
|
description={t("newUi.sidebar.userProfile.hostTrayOnClickDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={hostTrayOnClick}
|
|
onChange={(v) => {
|
|
setHostTrayOnClick(v);
|
|
localStorage.setItem("hostTrayOnClick", v.toString());
|
|
window.dispatchEvent(new Event("hostTrayOnClickChanged"));
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ hostTrayOnClick: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.compactHostView")}
|
|
description={t("newUi.sidebar.userProfile.compactHostViewDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={compactHostView}
|
|
onChange={(v) => {
|
|
setCompactHostView(v);
|
|
localStorage.setItem("compactHostView", v.toString());
|
|
window.dispatchEvent(new Event("compactHostViewChanged"));
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ compactHostView: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.statusColors")}
|
|
description={t("newUi.sidebar.userProfile.statusColorsDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={statusColorScheme === "status"}
|
|
onChange={(v) => {
|
|
const scheme = v ? "status" : "accent";
|
|
setStatusColorScheme(scheme);
|
|
localStorage.setItem("statusColorScheme", scheme);
|
|
window.dispatchEvent(new Event("statusColorSchemeChanged"));
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ statusColorScheme: scheme });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.pinAppRail")}
|
|
description={t("newUi.sidebar.userProfile.pinAppRailDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={pinAppRail}
|
|
onChange={(v) => {
|
|
setPinAppRail(v);
|
|
localStorage.setItem("pinAppRail", v.toString());
|
|
window.dispatchEvent(new Event("pinAppRailChanged"));
|
|
if (storageMode === "cloud") saveToCloud({ pinAppRail: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.expandAppRailOnHover")}
|
|
description={t(
|
|
"newUi.sidebar.userProfile.expandAppRailOnHoverDesc",
|
|
)}
|
|
>
|
|
<FakeSwitch
|
|
checked={expandAppRailOnHover}
|
|
onChange={(v) => {
|
|
setExpandAppRailOnHover(v);
|
|
localStorage.setItem("expandAppRailOnHover", v.toString());
|
|
window.dispatchEvent(
|
|
new Event("expandAppRailOnHoverChanged"),
|
|
);
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ expandAppRailOnHover: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1 border-t border-border pt-3">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
|
|
{t("newUi.sidebar.userProfile.settingsNavigation")}
|
|
</span>
|
|
<p className="text-[10px] text-muted-foreground mb-2">
|
|
{t("newUi.sidebar.userProfile.navigationTabsDesc")}
|
|
</p>
|
|
{(
|
|
[
|
|
{
|
|
id: "hosts",
|
|
icon: <Server size={12} />,
|
|
label: t("nav.hosts"),
|
|
},
|
|
{
|
|
id: "credentials",
|
|
icon: <KeyRound size={12} />,
|
|
label: t("nav.credentials"),
|
|
},
|
|
{
|
|
id: "connections",
|
|
icon: <Plug size={12} />,
|
|
label: t("nav.connections"),
|
|
},
|
|
{
|
|
id: "quick-connect",
|
|
icon: <Zap size={12} />,
|
|
label: t("nav.quickConnect"),
|
|
},
|
|
{
|
|
id: "serial",
|
|
icon: <Usb size={12} />,
|
|
label: t("nav.serial"),
|
|
},
|
|
{
|
|
id: "ssh-tools",
|
|
icon: <Hammer size={12} />,
|
|
label: t("nav.sshTools"),
|
|
},
|
|
{
|
|
id: "snippets",
|
|
icon: <Play size={12} />,
|
|
label: t("nav.snippets"),
|
|
},
|
|
{
|
|
id: "history",
|
|
icon: <Clock size={12} />,
|
|
label: t("nav.history"),
|
|
},
|
|
{
|
|
id: "session-logs",
|
|
icon: <ScrollText size={12} />,
|
|
label: t("nav.sessionLogs"),
|
|
},
|
|
{
|
|
id: "split-screen",
|
|
icon: <LayoutPanelLeft size={12} />,
|
|
label: t("nav.splitScreen"),
|
|
},
|
|
{
|
|
id: "network_graph",
|
|
icon: <Network size={12} />,
|
|
label: t("nav.networkGraph"),
|
|
},
|
|
] as { id: string; icon: React.ReactNode; label: string }[]
|
|
).map((tab) => (
|
|
<div
|
|
key={tab.id}
|
|
className="flex items-center justify-between py-1.5"
|
|
>
|
|
<span className="flex items-center gap-1.5 text-xs font-medium text-foreground">
|
|
<span className="text-muted-foreground">{tab.icon}</span>
|
|
{tab.label}
|
|
</span>
|
|
<FakeSwitch
|
|
checked={!hiddenRailTabs.has(tab.id)}
|
|
onChange={(visible) => {
|
|
const next = new Set(hiddenRailTabs);
|
|
if (visible) next.delete(tab.id);
|
|
else next.add(tab.id);
|
|
setHiddenRailTabs(next);
|
|
const serialized = JSON.stringify([...next]);
|
|
localStorage.setItem("hiddenRailTabs", serialized);
|
|
window.dispatchEvent(new Event("hiddenRailTabsChanged"));
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ hiddenRailTabs: serialized });
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1 border-t border-border pt-3">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
|
|
{t("newUi.sidebar.userProfile.settingsSnippets")}
|
|
</span>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.foldersCollapsed")}
|
|
description={t("newUi.sidebar.userProfile.foldersCollapsedDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={foldersCollapsed}
|
|
onChange={(v) => {
|
|
setFoldersCollapsed(v);
|
|
localStorage.setItem(
|
|
"defaultSnippetFoldersCollapsed",
|
|
v.toString(),
|
|
);
|
|
window.dispatchEvent(
|
|
new Event("defaultSnippetFoldersCollapsedChanged"),
|
|
);
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ foldersCollapsed: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.confirmExecution")}
|
|
description={t("newUi.sidebar.userProfile.confirmExecutionDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={confirmSnippetExecution}
|
|
onChange={(v) => {
|
|
setConfirmSnippetExecution(v);
|
|
localStorage.setItem("confirmSnippetExecution", v.toString());
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ confirmSnippetExecution: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1 border-t border-border pt-3">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1">
|
|
{t("newUi.sidebar.userProfile.settingsUpdates")}
|
|
</span>
|
|
<SettingRow
|
|
label={t("newUi.sidebar.userProfile.disableUpdateChecks")}
|
|
description={t(
|
|
"newUi.sidebar.userProfile.disableUpdateChecksDesc",
|
|
)}
|
|
>
|
|
<FakeSwitch
|
|
checked={disableUpdateCheck}
|
|
onChange={(v) => {
|
|
setDisableUpdateCheck(v);
|
|
localStorage.setItem("disableUpdateCheck", v.toString());
|
|
if (storageMode === "cloud")
|
|
saveToCloud({ disableUpdateCheck: v });
|
|
}}
|
|
/>
|
|
</SettingRow>
|
|
</div>
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* Security */}
|
|
<AccordionSection
|
|
id="security"
|
|
label={t("newUi.sidebar.userProfile.sectionSecurity")}
|
|
icon={<Shield className="size-3.5" />}
|
|
open={openSection === "security"}
|
|
onToggle={() => toggle("security")}
|
|
>
|
|
<div className="flex flex-col gap-4 pt-3">
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col gap-0.5">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-medium">
|
|
{t("newUi.sidebar.userProfile.totpAuthenticator")}
|
|
</span>
|
|
<a
|
|
href="https://docs.termix.site/features/authentication/totp"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-[10px] text-accent-brand hover:underline"
|
|
>
|
|
{t("hosts.docsLink")}
|
|
</a>
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{totpEnabled
|
|
? t("newUi.sidebar.userProfile.totpEnabled")
|
|
: t("newUi.sidebar.userProfile.totpDisabled")}
|
|
</span>
|
|
</div>
|
|
{totpEnabled ? (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="shrink-0 ml-3 text-[10px] h-7 border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
onClick={() => setShowDisableTotp((o) => !o)}
|
|
>
|
|
{t("newUi.sidebar.userProfile.disable")}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="shrink-0 ml-3 text-[10px] h-7 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={handleStartTotpSetup}
|
|
disabled={totpLoading || totpStep !== "idle"}
|
|
>
|
|
{t("newUi.sidebar.userProfile.enable")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Disable TOTP form */}
|
|
{totpEnabled && showDisableTotp && (
|
|
<div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.totpDisableTitle")}
|
|
</span>
|
|
<Input
|
|
placeholder={t(
|
|
"newUi.sidebar.userProfile.totpDisablePlaceholder",
|
|
)}
|
|
value={disableTotpInput}
|
|
onChange={(e) => setDisableTotpInput(e.target.value)}
|
|
className="text-sm"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="flex-1 text-xs"
|
|
onClick={() => {
|
|
setShowDisableTotp(false);
|
|
setDisableTotpInput("");
|
|
}}
|
|
>
|
|
{t("newUi.sidebar.userProfile.cancel")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1 text-xs border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
onClick={handleDisableTotp}
|
|
disabled={totpLoading}
|
|
>
|
|
{t("newUi.sidebar.userProfile.totpDisableConfirm")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TOTP setup: scan QR */}
|
|
{!totpEnabled && totpStep === "setup" && (
|
|
<div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.setupTotp")}
|
|
</span>
|
|
<button
|
|
onClick={() => setTotpStep("idle")}
|
|
className="text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
{totpQrCode ? (
|
|
<div className="flex items-center justify-center p-3 bg-background border border-border">
|
|
<img
|
|
src={totpQrCode}
|
|
alt={t("newUi.sidebar.userProfile.qrCode")}
|
|
className="size-32"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center p-3 bg-background border border-border">
|
|
<div className="size-24 bg-muted flex items-center justify-center text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.qrCode")}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2 bg-muted/30 border border-border px-2 py-1.5">
|
|
<span className="text-[10px] font-mono flex-1 tracking-widest select-all truncate">
|
|
{totpSecret}
|
|
</span>
|
|
<button
|
|
onClick={() => {
|
|
copyToClipboard(totpSecret);
|
|
toast.info(t("newUi.sidebar.userProfile.secretCopied"));
|
|
}}
|
|
className="text-muted-foreground hover:text-accent-brand shrink-0"
|
|
>
|
|
<Copy className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground text-center">
|
|
{t("newUi.sidebar.userProfile.totpInstructions")}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={() => setTotpStep("verify")}
|
|
>
|
|
{t("newUi.sidebar.userProfile.totpContinueVerify")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* TOTP setup: verify code */}
|
|
{!totpEnabled && totpStep === "verify" && (
|
|
<div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.totpVerifyTitle")}
|
|
</span>
|
|
<button
|
|
onClick={() => setTotpStep("setup")}
|
|
className="text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
<Input
|
|
placeholder={t(
|
|
"newUi.sidebar.userProfile.totpCodePlaceholder",
|
|
)}
|
|
value={totpCode}
|
|
onChange={(e) =>
|
|
setTotpCode(e.target.value.replace(/\D/g, "").slice(0, 6))
|
|
}
|
|
onKeyDown={(e) => e.key === "Enter" && handleVerifyTotp()}
|
|
className="text-center font-mono tracking-widest text-lg h-10"
|
|
maxLength={6}
|
|
/>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="flex-1 text-xs"
|
|
onClick={() => setTotpStep("setup")}
|
|
>
|
|
{t("newUi.sidebar.userProfile.cancel")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1 text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={handleVerifyTotp}
|
|
disabled={totpLoading || totpCode.length !== 6}
|
|
>
|
|
<CheckCircle2 className="size-3.5" />
|
|
{t("newUi.sidebar.userProfile.verify")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TOTP setup: backup codes */}
|
|
{totpStep === "backup" && totpBackupCodes.length > 0 && (
|
|
<div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.totpBackupTitle")}
|
|
</span>
|
|
<div className="grid grid-cols-2 gap-1">
|
|
{totpBackupCodes.map((code) => (
|
|
<span
|
|
key={code}
|
|
className="text-[10px] font-mono bg-muted border border-border px-2 py-1 text-center"
|
|
>
|
|
{code}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={downloadBackupCodes}
|
|
>
|
|
{t("newUi.sidebar.userProfile.totpDownloadBackup")}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs"
|
|
onClick={() => setTotpStep("idle")}
|
|
>
|
|
{t("newUi.sidebar.userProfile.done")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 border-t border-border pt-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-xs font-medium">
|
|
{t("newUi.sidebar.userProfile.passkeys")}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.passkeysDesc")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-[1fr_auto] gap-2">
|
|
<Input
|
|
placeholder={t("newUi.sidebar.userProfile.passkeyName")}
|
|
value={passkeyName}
|
|
onChange={(e) => setPasskeyName(e.target.value)}
|
|
className="h-8 text-xs"
|
|
disabled={passkeyLoading}
|
|
/>
|
|
<select
|
|
value={passkeyUserVerification}
|
|
onChange={(e) =>
|
|
setPasskeyUserVerification(
|
|
e.target.value as WebAuthnUserVerification,
|
|
)
|
|
}
|
|
className="h-8 w-28 text-xs border border-border bg-background px-2 outline-none focus:ring-1 focus:ring-ring"
|
|
disabled={passkeyLoading}
|
|
>
|
|
<option value="preferred">
|
|
{t("newUi.sidebar.userProfile.passkeyUvPreferred")}
|
|
</option>
|
|
<option value="required">
|
|
{t("newUi.sidebar.userProfile.passkeyUvRequired")}
|
|
</option>
|
|
<option value="discouraged">
|
|
{t("newUi.sidebar.userProfile.passkeyUvDiscouraged")}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 text-[10px] border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={handleRegisterPasskey}
|
|
disabled={passkeyLoading}
|
|
>
|
|
<KeyRound className="size-3" />
|
|
{t("newUi.sidebar.userProfile.addPasskey")}
|
|
</Button>
|
|
|
|
<div className="flex flex-col divide-y divide-border border border-border">
|
|
{passkeys.length === 0 ? (
|
|
<div className="py-4 text-center text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.noPasskeys")}
|
|
</div>
|
|
) : (
|
|
passkeys.map((passkey) => (
|
|
<div
|
|
key={passkey.id}
|
|
className="flex items-center justify-between gap-2 px-2 py-2"
|
|
>
|
|
<div className="min-w-0 flex flex-col">
|
|
<span className="text-xs font-medium truncate">
|
|
{passkey.name}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground truncate">
|
|
{passkey.deviceType || "unknown"}
|
|
{passkey.backedUp ? " / synced" : ""}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-6 text-muted-foreground hover:text-destructive"
|
|
onClick={() => handleDeletePasskey(passkey.id)}
|
|
disabled={passkeyLoading}
|
|
>
|
|
<Trash2 className="size-3" />
|
|
</Button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{canChangePasword && (
|
|
<PasswordChangeSection
|
|
showPassword={showPassword}
|
|
setShowPassword={setShowPassword}
|
|
onLogout={onLogout}
|
|
/>
|
|
)}
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* API Keys */}
|
|
<AccordionSection
|
|
id="api-keys"
|
|
label={t("newUi.sidebar.userProfile.sectionApiKeys")}
|
|
icon={<Network className="size-3.5" />}
|
|
open={openSection === "api-keys"}
|
|
onToggle={() => toggle("api-keys")}
|
|
>
|
|
<div className="flex flex-col gap-2 pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.apiKeyCount", {
|
|
count: apiKeys.length,
|
|
})}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-[10px] font-bold uppercase tracking-widest border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 gap-1"
|
|
onClick={() => setNewKeyOpen(true)}
|
|
>
|
|
<Plus className="size-3" />{" "}
|
|
{t("newUi.sidebar.userProfile.newKey")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex flex-col divide-y divide-border">
|
|
{apiKeys.length === 0 ? (
|
|
<div className="py-6 text-center text-muted-foreground text-xs">
|
|
{t("newUi.sidebar.userProfile.noApiKeys")}
|
|
</div>
|
|
) : (
|
|
apiKeys.map((key) => (
|
|
<div
|
|
key={key.id}
|
|
className="flex items-start justify-between py-2.5 gap-2"
|
|
>
|
|
<div className="flex flex-col gap-0.5 min-w-0 flex-1">
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
<span className="text-xs font-semibold truncate">
|
|
{key.name}
|
|
</span>
|
|
{key.isActive && (
|
|
<span className="text-[9px] font-bold px-1 py-px border border-accent-brand/40 bg-accent-brand/10 text-accent-brand uppercase shrink-0">
|
|
{t("newUi.sidebar.userProfile.apiKeyActive")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-[10px] font-mono text-muted-foreground truncate">
|
|
{key.tokenPrefix}…
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.apiKeyUser")}:{" "}
|
|
{key.username}
|
|
</span>
|
|
{key.expiresAt && (
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.apiKeyExpires")}:{" "}
|
|
{new Date(key.expiresAt).toLocaleDateString()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-0.5 shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-6 text-muted-foreground hover:text-destructive"
|
|
onClick={async () => {
|
|
try {
|
|
await deleteApiKey(key.id);
|
|
setApiKeys((prev) =>
|
|
prev.filter((k) => k.id !== key.id),
|
|
);
|
|
toast.success(
|
|
t("newUi.sidebar.userProfile.apiKeyRevoked", {
|
|
name: key.name,
|
|
}),
|
|
);
|
|
} catch {
|
|
toast.error(
|
|
t("newUi.sidebar.userProfile.apiKeyRevokeFailed"),
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
<Trash2 className="size-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-t border-border pt-2 text-[10px] text-muted-foreground flex flex-col gap-1">
|
|
<p>
|
|
{t("newUi.sidebar.userProfile.apiKeyUsageHint")}{" "}
|
|
<code className="font-mono text-accent-brand bg-accent-brand/10 px-1">
|
|
Authorization: Bearer
|
|
</code>{" "}
|
|
{t("newUi.sidebar.userProfile.apiKeyUsageHintHeader")}
|
|
</p>
|
|
<p>{t("newUi.sidebar.userProfile.apiKeyPermissionsHint")}</p>
|
|
</div>
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{isElectron() && (
|
|
<AccordionSection
|
|
id="c2s-tunnels"
|
|
label={t("newUi.sidebar.userProfile.sectionC2sTunnels")}
|
|
icon={<Activity className="size-3.5" />}
|
|
open={openSection === "c2s-tunnels"}
|
|
onToggle={() => toggle("c2s-tunnels")}
|
|
>
|
|
<C2STunnelPresetManager />
|
|
</AccordionSection>
|
|
)}
|
|
|
|
{/* Delete account dialog */}
|
|
<Dialog
|
|
open={showDeleteConfirm}
|
|
onOpenChange={(open) => {
|
|
setShowDeleteConfirm(open);
|
|
if (!open) setDeletePassword("");
|
|
}}
|
|
>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-lg font-bold text-destructive">
|
|
{t("newUi.sidebar.userProfile.deleteAccount")}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.deleteAccountPermanent")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-3 mt-1">
|
|
<div className="flex items-start gap-2.5 border border-destructive/30 bg-destructive/5 px-3 py-2.5">
|
|
<AlertCircle className="size-4 text-destructive shrink-0 mt-0.5" />
|
|
<span className="text-xs text-destructive">
|
|
{t("newUi.sidebar.userProfile.deleteAccountWarning")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
|
|
{t("newUi.sidebar.userProfile.confirmPasswordLabel")}
|
|
</label>
|
|
<Input
|
|
type="password"
|
|
placeholder={t(
|
|
"newUi.sidebar.userProfile.confirmPasswordDeletePlaceholder",
|
|
)}
|
|
value={deletePassword}
|
|
onChange={(e) => setDeletePassword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleDeleteAccount()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-end gap-2 mt-2">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setShowDeleteConfirm(false);
|
|
setDeletePassword("");
|
|
}}
|
|
>
|
|
{t("newUi.sidebar.userProfile.cancel")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
onClick={handleDeleteAccount}
|
|
disabled={deleteLoading || !deletePassword.trim()}
|
|
>
|
|
<Trash2 className="size-3.5" />
|
|
{deleteLoading
|
|
? t("newUi.sidebar.userProfile.deleting")
|
|
: t("newUi.sidebar.userProfile.deleteAccount")}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|