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

src/locales/en/translation.json

@@ -779,6 +779,69 @@
     "statusMonitoring": "Status",
     "metricsMonitoring": "Metrics",
     "terminalCustomizationNotice": "Note: Terminal customizations only work on desktop (website and Electron app). Mobile apps and mobile website use system default terminal settings.",
+    "terminalCustomization": "Terminal Customization",
+    "appearance": "Appearance",
+    "behavior": "Behavior",
+    "advanced": "Advanced",
+    "themePreview": "Theme Preview",
+    "theme": "Theme",
+    "selectTheme": "Select theme",
+    "chooseColorTheme": "Choose a color theme for the terminal",
+    "fontFamily": "Font Family",
+    "selectFont": "Select font",
+    "selectFontDesc": "Select the font to use in the terminal",
+    "fontSize": "Font Size",
+    "fontSizeValue": "Font Size: {{value}}px",
+    "adjustFontSize": "Adjust the terminal font size",
+    "letterSpacing": "Letter Spacing",
+    "letterSpacingValue": "Letter Spacing: {{value}}px",
+    "adjustLetterSpacing": "Adjust spacing between characters",
+    "lineHeight": "Line Height",
+    "lineHeightValue": "Line Height: {{value}}",
+    "adjustLineHeight": "Adjust spacing between lines",
+    "cursorStyle": "Cursor Style",
+    "selectCursorStyle": "Select cursor style",
+    "cursorStyleBlock": "Block",
+    "cursorStyleUnderline": "Underline",
+    "cursorStyleBar": "Bar",
+    "chooseCursorAppearance": "Choose the cursor appearance",
+    "cursorBlink": "Cursor Blink",
+    "enableCursorBlink": "Enable cursor blinking animation",
+    "scrollbackBuffer": "Scrollback Buffer",
+    "scrollbackBufferValue": "Scrollback Buffer: {{value}} lines",
+    "scrollbackBufferDesc": "Number of lines to keep in scrollback history",
+    "bellStyle": "Bell Style",
+    "selectBellStyle": "Select bell style",
+    "bellStyleNone": "None",
+    "bellStyleSound": "Sound",
+    "bellStyleVisual": "Visual",
+    "bellStyleBoth": "Both",
+    "bellStyleDesc": "How to handle terminal bell (BEL character, \\x07). Programs trigger this when completing tasks, encountering errors, or for notifications. \"Sound\" plays an audio beep, \"Visual\" flashes the screen briefly, \"Both\" does both, \"None\" disables bell alerts.",
+    "rightClickSelectsWord": "Right Click Selects Word",
+    "rightClickSelectsWordDesc": "Right-clicking selects the word under cursor",
+    "fastScrollModifier": "Fast Scroll Modifier",
+    "selectModifier": "Select modifier",
+    "modifierAlt": "Alt",
+    "modifierCtrl": "Ctrl",
+    "modifierShift": "Shift",
+    "fastScrollModifierDesc": "Modifier key for fast scrolling",
+    "fastScrollSensitivity": "Fast Scroll Sensitivity",
+    "fastScrollSensitivityValue": "Fast Scroll Sensitivity: {{value}}",
+    "fastScrollSensitivityDesc": "Scroll speed multiplier when modifier is held",
+    "minimumContrastRatio": "Minimum Contrast Ratio",
+    "minimumContrastRatioValue": "Minimum Contrast Ratio: {{value}}",
+    "minimumContrastRatioDesc": "Automatically adjust colors for better readability",
+    "sshAgentForwarding": "SSH Agent Forwarding",
+    "sshAgentForwardingDesc": "Forward SSH authentication agent to remote host",
+    "backspaceMode": "Backspace Mode",
+    "selectBackspaceMode": "Select backspace mode",
+    "backspaceModeNormal": "Normal (DEL)",
+    "backspaceModeControlH": "Control-H (^H)",
+    "backspaceModeDesc": "Backspace key behavior for compatibility",
+    "startupSnippet": "Startup Snippet",
+    "selectSnippet": "Select snippet",
+    "searchSnippets": "Search snippets...",
+    "snippetNone": "None",
     "noneAuthTitle": "Keyboard-Interactive Authentication",
     "noneAuthDescription": "This authentication method will use keyboard-interactive authentication when connecting to the SSH server.",
     "noneAuthDetails": "Keyboard-interactive authentication allows the server to prompt you for credentials during connection. This is useful for servers that require multi-factor authentication or if you do not want to save credentials locally.",
@@ -1231,9 +1294,21 @@
     "noInterfacesFound": "No network interfaces found",
     "totalProcesses": "Total Processes",
     "running": "Running",
-    "noProcessesFound": "No processes found"
+    "noProcessesFound": "No processes found",
+    "loginStats": "SSH Login Statistics",
+    "totalLogins": "Total Logins",
+    "uniqueIPs": "Unique IPs",
+    "recentSuccessfulLogins": "Recent Successful Logins",
+    "recentFailedAttempts": "Recent Failed Attempts",
+    "noRecentLoginData": "No recent login data",
+    "from": "from"
   },
   "auth": {
+    "tagline": "SSH TERMINAL MANAGER",
+    "description": "Secure, powerful, and intuitive SSH connection management",
+    "welcomeBack": "Welcome back to TERMIX",
+    "createAccount": "Create your TERMIX account",
+    "continueExternal": "Continue with external provider",
     "loginTitle": "Login to Termix",
     "registerTitle": "Create Account",
     "loginButton": "Login",
@@ -1622,5 +1697,28 @@
     "cpu": "CPU",
     "ram": "RAM",
     "notAvailable": "N/A"
+  },
+  "commandPalette": {
+    "searchPlaceholder": "Search for hosts or quick actions...",
+    "recentActivity": "Recent Activity",
+    "navigation": "Navigation",
+    "addHost": "Add Host",
+    "addCredential": "Add Credential",
+    "adminSettings": "Admin Settings",
+    "userProfile": "User Profile",
+    "updateLog": "Update Log",
+    "hosts": "Hosts",
+    "openServerDetails": "Open Server Details",
+    "openFileManager": "Open File Manager",
+    "edit": "Edit",
+    "links": "Links",
+    "github": "GitHub",
+    "support": "Support",
+    "discord": "Discord",
+    "donate": "Donate",
+    "press": "Press",
+    "toToggle": "to toggle",
+    "close": "Close",
+    "hostManager": "Host Manager"
   }
 }