feat: Enhanced security, UI improvements, and animations (#432)
* fix: Remove empty catch blocks and add error logging
* refactor: Modularize server stats widget collectors
* feat: Add i18n support for terminal customization and login stats
- Add comprehensive terminal customization translations (60+ keys) for appearance, behavior, and advanced settings across all 4 languages
- Add SSH login statistics translations
- Update HostManagerEditor to use i18n for all terminal customization UI elements
- Update LoginStatsWidget to use i18n for all UI text
- Add missing logger imports in backend files for improved debugging
* feat: Add keyboard shortcut enhancements with Kbd component
- Add shadcn kbd component for displaying keyboard shortcuts
- Enhance file manager context menu to display shortcuts with Kbd component
- Add 5 new keyboard shortcuts to file manager:
- Ctrl+D: Download selected files
- Ctrl+N: Create new file
- Ctrl+Shift+N: Create new folder
- Ctrl+U: Upload files
- Enter: Open/run selected file
- Add keyboard shortcut hints to command palette footer
- Create helper function to parse and render keyboard shortcuts
* feat: Add i18n support for command palette
- Add commandPalette translation section with 22 keys to all 4 languages
- Update CommandPalette component to use i18n for all UI text
- Translate search placeholder, group headings, menu items, and shortcut hints
- Support multilingual command palette interface
* feat: Add smooth transitions and animations to UI
- Add fade-in/fade-out transition to command palette (200ms)
- Add scale animation to command palette on open/close
- Add smooth popup animation to context menu (150ms)
- Add visual feedback for file selection with ring effect
- Add hover scale effect to file grid items
- Add transition-all to list view items for consistent behavior
- Zero JavaScript overhead, pure CSS transitions
- All animations under 200ms for instant feel
* feat: Add button active state and dashboard card animations
- Add active:scale-95 to all buttons for tactile click feedback
- Add hover border effect to dashboard cards (150ms transition)
- Add pulse animation to dashboard loading states
- Pure CSS transitions with zero JavaScript overhead
- Improves enterprise-level feel of UI
* feat: Add smooth macOS-style page transitions
- Add fullscreen crossfade transition for login/logout (300ms fade-out + 400ms fade-in)
- Add slide-in-from-right animation for all page switches (Dashboard, Terminal, SSH Manager, Admin, Profile)
- Fix TypeScript compilation by adding esModuleInterop to tsconfig.node.json
- Pass handleLogout from DesktopApp to LeftSidebar for consistent transition behavior
All page transitions now use Tailwind animate-in utilities with 300ms duration for smooth, native-feeling UX
* fix: Add key prop to force animation re-trigger on tab switch
Each page container now has key={currentTab} to ensure React unmounts and remounts the element on every tab switch, properly triggering the slide-in animation
* revert: Remove page transition animations
Page switching animations were not noticeable enough and felt unnecessary.
Keep only the login/logout fullscreen crossfade transitions which provide clear visual feedback for authentication state changes
* feat: Add ripple effect to login/logout transitions
Add three-layer expanding ripple animation during fadeOut phase:
- Ripples expand from screen center using primary theme color
- Each layer has staggered delay (0ms, 150ms, 300ms) for wave effect
- Ripples fade out as they expand to create elegant visual feedback
- Uses pure CSS keyframe animation, no external libraries
Total animation: 800ms ripple + 300ms screen fade
* feat: Add smooth TERMIX logo animation to transitions
Changes:
- Extend transition duration from 300ms/400ms to 800ms/600ms for more elegant feel
- Reduce ripple intensity from /20,/15,/10 to /8,/5 for subtlety
- Slow down ripple animation from 0.8s to 2s with cubic-bezier easing
- Add centered TERMIX logo with monospace font and subtitle
- Logo fades in from 80% scale, holds, then fades out at 110% scale
- Total effect: 1.2s logo animation synced with 2s ripple waves
Creates a premium, branded transition experience
* feat: Enhance transition animation with premium details
Timing adjustments:
- Extend fadeOut from 800ms to 1200ms
- Extend fadeIn from 600ms to 800ms
- Slow background fade to 700ms for elegance
Visual enhancements:
- Add 4-layer ripple waves (10%, 7%, 5%, 3% opacity) with staggered delays
- Ripple animation extended to 2.5s with refined opacity curve
- Logo blur effect: starts at 8px, sharpens to 0px, exits at 4px
- Logo glow effect: triple-layer text-shadow using primary theme color
- Increase logo size from text-6xl to text-7xl
- Subtitle delayed fade-in from bottom with smooth slide animation
Creates a cinematic, polished brand experience
* feat: Redesign login page with split-screen cinematic layout
Major redesign of authentication page:
Left Side (40% width):
- Full-height gradient background using primary theme color
- Large TERMIX logo with glow effect
- Subtitle and tagline
- Infinite animated ripple waves (3 layers)
- Hidden on mobile, shows brand identity
Right Side (60% width):
- Centered glassmorphism card with backdrop blur
- Refined tab switcher with pill-style active state
- Enlarged title with gradient text effect
- Added welcome subtitles for better UX
- Card slides in from bottom on load
- All existing functionality preserved
Visual enhancements:
- Tab navigation: segmented control style in muted container
- Active tab: white background with subtle shadow
- Smooth 200ms transitions on all interactions
- Card: rounded-2xl, shadow-xl, semi-transparent border
Creates premium, modern login experience matching transition animations
* feat: Update login page theme colors and add i18n support
- Changed login page gradient from blue to match dark theme colors
- Updated ripple effects to use theme primary color
- Added i18n translation keys for login page (auth.tagline, auth.description, auth.welcomeBack, auth.createAccount, auth.continueExternal)
- Updated all language files (en, zh, de, ru, pt-BR) with new translations
- Fixed TypeScript compilation issues by clearing build cache
* refactor: Use shadcn Tabs component and fix modal styling
- Replace custom tab navigation with shadcn Tabs component
- Restore border-2 border-dark-border for modal consistency
- Remove circular icon from login success message
- Simplify authentication success display
* refactor: Remove ripple effects and gradient from login page
- Remove animated ripple background effects
- Remove gradient background, use solid color (bg-dark-bg-darker)
- Remove text-shadow glow effect from logo
- Simplify brand showcase to clean, minimal design
* feat: Add decorative slash and remove subtitle from login page
- Add decorative slash divider with gradient lines below TERMIX logo
- Remove subtitle text (welcomeBack and createAccount)
- Simplify page title to show only the main heading
* feat: Add diagonal line pattern background to login page
- Replace decorative slash with subtle diagonal line pattern background
- Use repeating-linear-gradient at 45deg angle
- Set very low opacity (0.03) for subtle effect
- Pattern uses theme primary color
* fix: Display diagonal line pattern on login background
- Combine background color and pattern in single style attribute
- Use white semi-transparent lines (rgba 0.03 opacity)
- 45deg angle, 35px spacing, 2px width
- Remove separate overlay div to ensure pattern visibility
* security: Fix user enumeration vulnerability in login
- Unify error messages for invalid username and incorrect password
- Both return 401 status with 'Invalid username or password'
- Prevent attackers from enumerating valid usernames
- Maintain detailed logging for debugging purposes
- Changed from 404 'User not found' to generic auth failure message
* security: Add login rate limiting to prevent brute force attacks
- Implement LoginRateLimiter with IP and username-based tracking
- Block after 5 failed attempts within 15 minutes
- Lock account/IP for 15 minutes after threshold
- Automatic cleanup of expired entries every 5 minutes
- Track remaining attempts in logs for monitoring
- Return 429 status with remaining time on rate limit
- Reset counters on successful login
- Dual protection: both IP-based and username-based limits
This commit was merged in pull request #432.
This commit is contained in:
ZacharyZcR
GitHub
@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input.tsx";
|
||||
import { PasswordInput } from "@/components/ui/password-input.tsx";
|
||||
import { Label } from "@/components/ui/label.tsx";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LanguageSwitcher } from "@/ui/desktop/user/LanguageSwitcher.tsx";
|
||||
import { toast } from "sonner";
|
||||
@@ -679,7 +680,7 @@ export function Auth({
|
||||
if (showServerConfig === null && !isInElectronWebView()) {
|
||||
return (
|
||||
<div
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 ${className || ""}`}
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
|
||||
style={{ maxHeight: "calc(100vh - 1rem)" }}
|
||||
{...props}
|
||||
>
|
||||
@@ -693,7 +694,7 @@ export function Auth({
|
||||
if (showServerConfig && !isInElectronWebView()) {
|
||||
return (
|
||||
<div
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 ${className || ""}`}
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
|
||||
style={{ maxHeight: "calc(100vh - 1rem)" }}
|
||||
{...props}
|
||||
>
|
||||
@@ -718,7 +719,7 @@ export function Auth({
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 ${className || ""}`}
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
|
||||
style={{ maxHeight: "calc(100vh - 1rem)" }}
|
||||
{...props}
|
||||
>
|
||||
@@ -751,7 +752,7 @@ export function Auth({
|
||||
if (dbHealthChecking && !dbConnectionFailed) {
|
||||
return (
|
||||
<div
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 ${className || ""}`}
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
|
||||
style={{ maxHeight: "calc(100vh - 1rem)" }}
|
||||
{...props}
|
||||
>
|
||||
@@ -770,7 +771,7 @@ export function Auth({
|
||||
if (dbConnectionFailed) {
|
||||
return (
|
||||
<div
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 ${className || ""}`}
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
|
||||
style={{ maxHeight: "calc(100vh - 1rem)" }}
|
||||
{...props}
|
||||
>
|
||||
@@ -830,10 +831,50 @@ export function Auth({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 ${className || ""}`}
|
||||
style={{ maxHeight: "calc(100vh - 1rem)" }}
|
||||
className={`fixed inset-0 flex items-center justify-center ${className || ""}`}
|
||||
{...props}
|
||||
>
|
||||
{/* Split Screen Layout */}
|
||||
<div className="w-full h-full flex flex-col md:flex-row">
|
||||
|
||||
{/* Left Side - Brand Showcase */}
|
||||
<div
|
||||
className="hidden md:flex md:w-2/5 items-center justify-center relative"
|
||||
style={{
|
||||
background: '#0e0e10',
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 35px,
|
||||
rgba(255, 255, 255, 0.03) 35px,
|
||||
rgba(255, 255, 255, 0.03) 37px
|
||||
)`
|
||||
}}
|
||||
>
|
||||
{/* Logo and Branding */}
|
||||
<div className="relative text-center px-8">
|
||||
<div
|
||||
className="text-7xl font-bold tracking-wider mb-4 text-foreground"
|
||||
style={{
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
|
||||
}}
|
||||
>
|
||||
TERMIX
|
||||
</div>
|
||||
<div className="text-lg text-muted-foreground tracking-widest font-light">
|
||||
{t("auth.tagline") || "SSH TERMINAL MANAGER"}
|
||||
</div>
|
||||
<div className="mt-8 text-sm text-muted-foreground/80 max-w-md">
|
||||
{t("auth.description") || "Secure, powerful, and intuitive SSH connection management"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Auth Form */}
|
||||
<div className="flex-1 flex items-center justify-center p-6 md:p-12 bg-background overflow-y-auto">
|
||||
<div className="w-full max-w-md backdrop-blur-sm bg-card/50 rounded-2xl p-8 shadow-xl border-2 border-dark-border animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||||
style={{ maxHeight: "calc(100vh - 3rem)" }}
|
||||
>
|
||||
{isInElectronWebView() && !webviewAuthSuccess && (
|
||||
<Alert className="mb-4 border-blue-500 bg-blue-500/10">
|
||||
<Monitor className="h-4 w-4" />
|
||||
@@ -843,21 +884,6 @@ export function Auth({
|
||||
)}
|
||||
{isInElectronWebView() && webviewAuthSuccess && (
|
||||
<div className="flex flex-col items-center justify-center h-64 gap-4">
|
||||
<div className="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<svg
|
||||
className="w-10 h-10 text-green-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl font-bold mb-2">
|
||||
{t("messages.loginSuccess")}
|
||||
@@ -944,72 +970,49 @@ export function Auth({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-2 mb-6">
|
||||
{passwordLoginAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex-1 py-2 text-base font-medium rounded-md transition-all",
|
||||
tab === "login"
|
||||
? "bg-primary text-primary-foreground shadow"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent",
|
||||
)}
|
||||
onClick={() => {
|
||||
setTab("login");
|
||||
if (tab === "reset") resetPasswordState();
|
||||
if (tab === "signup") clearFormFields();
|
||||
}}
|
||||
aria-selected={tab === "login"}
|
||||
disabled={loading || firstUser}
|
||||
>
|
||||
{t("common.login")}
|
||||
</button>
|
||||
)}
|
||||
{(passwordLoginAllowed || firstUser) &&
|
||||
registrationAllowed && (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex-1 py-2 text-base font-medium rounded-md transition-all",
|
||||
tab === "signup"
|
||||
? "bg-primary text-primary-foreground shadow"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent",
|
||||
)}
|
||||
onClick={() => {
|
||||
setTab("signup");
|
||||
if (tab === "reset") resetPasswordState();
|
||||
if (tab === "login") clearFormFields();
|
||||
}}
|
||||
aria-selected={tab === "signup"}
|
||||
{/* Tab Navigation */}
|
||||
<Tabs value={tab} onValueChange={(value) => {
|
||||
const newTab = value as "login" | "signup" | "external" | "reset";
|
||||
setTab(newTab);
|
||||
if (tab === "reset") resetPasswordState();
|
||||
if ((tab === "login" && newTab === "signup") || (tab === "signup" && newTab === "login")) {
|
||||
clearFormFields();
|
||||
}
|
||||
}} className="w-full mb-8">
|
||||
<TabsList className="w-full">
|
||||
{passwordLoginAllowed && (
|
||||
<TabsTrigger
|
||||
value="login"
|
||||
disabled={loading || firstUser}
|
||||
className="flex-1"
|
||||
>
|
||||
{t("common.login")}
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{(passwordLoginAllowed || firstUser) && registrationAllowed && (
|
||||
<TabsTrigger
|
||||
value="signup"
|
||||
disabled={loading}
|
||||
className="flex-1"
|
||||
>
|
||||
{t("common.register")}
|
||||
</button>
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{oidcConfigured && (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex-1 py-2 text-base font-medium rounded-md transition-all",
|
||||
tab === "external"
|
||||
? "bg-primary text-primary-foreground shadow"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent",
|
||||
)}
|
||||
onClick={() => {
|
||||
setTab("external");
|
||||
if (tab === "reset") resetPasswordState();
|
||||
if (tab === "login" || tab === "signup")
|
||||
clearFormFields();
|
||||
}}
|
||||
aria-selected={tab === "external"}
|
||||
disabled={oidcLoading}
|
||||
>
|
||||
{t("auth.external")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-6 text-center">
|
||||
<h2 className="text-xl font-bold mb-1">
|
||||
{oidcConfigured && (
|
||||
<TabsTrigger
|
||||
value="external"
|
||||
disabled={oidcLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
{t("auth.external")}
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* Page Title */}
|
||||
<div className="mb-8 text-center">
|
||||
<h2 className="text-2xl font-bold">
|
||||
{tab === "login"
|
||||
? t("auth.loginTitle")
|
||||
: tab === "signup"
|
||||
@@ -1335,6 +1338,9 @@ export function Auth({
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -63,7 +63,9 @@ export function ElectronLoginForm({
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {}
|
||||
} catch (err) {
|
||||
console.error("Authentication operation failed:", err);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", handleMessage);
|
||||
@@ -190,8 +192,12 @@ export function ElectronLoginForm({
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (err) {}
|
||||
} catch (err) {}
|
||||
} catch (err) {
|
||||
console.error("Authentication operation failed:", err);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Authentication operation failed:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleError = () => {
|
||||
|
||||
@@ -37,7 +37,9 @@ export function ElectronServerConfig({
|
||||
if (config?.serverUrl) {
|
||||
setServerUrl(config.serverUrl);
|
||||
}
|
||||
} catch {}
|
||||
} catch (error) {
|
||||
console.error("Server config operation failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveConfig = async () => {
|
||||
|
||||
Reference in New Issue
Block a user