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
2025-11-09 09:48:32 +08:00
committed by GitHub
parent b43e98073f
commit 5fc2ec3dc0
55 changed files with 2081 additions and 649 deletions

View File

@@ -790,6 +790,69 @@
"statusMonitoring": "状态",
"metricsMonitoring": "指标",
"terminalCustomizationNotice": "注意:终端自定义仅在桌面网站版本中有效。移动和 Electron 应用程序使用系统默认终端设置。",
"terminalCustomization": "终端自定义",
"appearance": "外观",
"behavior": "行为",
"advanced": "高级",
"themePreview": "主题预览",
"theme": "主题",
"selectTheme": "选择主题",
"chooseColorTheme": "选择终端的颜色主题",
"fontFamily": "字体系列",
"selectFont": "选择字体",
"selectFontDesc": "选择终端使用的字体",
"fontSize": "字体大小",
"fontSizeValue": "字体大小:{{value}}px",
"adjustFontSize": "调整终端字体大小",
"letterSpacing": "字母间距",
"letterSpacingValue": "字母间距:{{value}}px",
"adjustLetterSpacing": "调整字符之间的间距",
"lineHeight": "行高",
"lineHeightValue": "行高:{{value}}",
"adjustLineHeight": "调整行之间的间距",
"cursorStyle": "光标样式",
"selectCursorStyle": "选择光标样式",
"cursorStyleBlock": "块状",
"cursorStyleUnderline": "下划线",
"cursorStyleBar": "竖线",
"chooseCursorAppearance": "选择光标外观",
"cursorBlink": "光标闪烁",
"enableCursorBlink": "启用光标闪烁动画",
"scrollbackBuffer": "回滚缓冲区",
"scrollbackBufferValue": "回滚缓冲区:{{value}} 行",
"scrollbackBufferDesc": "保留在回滚历史记录中的行数",
"bellStyle": "铃声样式",
"selectBellStyle": "选择铃声样式",
"bellStyleNone": "无",
"bellStyleSound": "声音",
"bellStyleVisual": "视觉",
"bellStyleBoth": "两者",
"bellStyleDesc": "如何处理终端铃声BEL字符\\x07。程序在完成任务、遇到错误或通知时会触发此功能。\"声音\"播放音频提示音,\"视觉\"短暂闪烁屏幕,\"两者\"同时执行,\"无\"禁用铃声提醒。",
"rightClickSelectsWord": "右键选择单词",
"rightClickSelectsWordDesc": "右键单击选择光标下的单词",
"fastScrollModifier": "快速滚动修饰键",
"selectModifier": "选择修饰键",
"modifierAlt": "Alt",
"modifierCtrl": "Ctrl",
"modifierShift": "Shift",
"fastScrollModifierDesc": "快速滚动的修饰键",
"fastScrollSensitivity": "快速滚动灵敏度",
"fastScrollSensitivityValue": "快速滚动灵敏度:{{value}}",
"fastScrollSensitivityDesc": "按住修饰键时的滚动速度倍数",
"minimumContrastRatio": "最小对比度",
"minimumContrastRatioValue": "最小对比度:{{value}}",
"minimumContrastRatioDesc": "自动调整颜色以获得更好的可读性",
"sshAgentForwarding": "SSH 代理转发",
"sshAgentForwardingDesc": "将 SSH 身份验证代理转发到远程主机",
"backspaceMode": "退格模式",
"selectBackspaceMode": "选择退格模式",
"backspaceModeNormal": "正常 (DEL)",
"backspaceModeControlH": "Control-H (^H)",
"backspaceModeDesc": "退格键行为兼容性",
"startupSnippet": "启动代码片段",
"selectSnippet": "选择代码片段",
"searchSnippets": "搜索代码片段...",
"snippetNone": "无",
"noneAuthTitle": "键盘交互式认证",
"noneAuthDescription": "此认证方法在连接到 SSH 服务器时将使用键盘交互式认证。",
"noneAuthDetails": "键盘交互式认证允许服务器在连接期间提示您输入凭据。这对于需要多因素认证或动态密码输入的服务器很有用。",
@@ -1199,9 +1262,21 @@
"noInterfacesFound": "未找到网络接口",
"totalProcesses": "总进程数",
"running": "运行中",
"noProcessesFound": "未找到进程"
"noProcessesFound": "未找到进程",
"loginStats": "SSH 登录统计",
"totalLogins": "总登录次数",
"uniqueIPs": "唯一 IP 数",
"recentSuccessfulLogins": "最近成功登录",
"recentFailedAttempts": "最近失败尝试",
"noRecentLoginData": "无最近登录数据",
"from": "来自"
},
"auth": {
"tagline": "SSH 终端管理器",
"description": "安全、强大、直观的 SSH 连接管理",
"welcomeBack": "欢迎回到 TERMIX",
"createAccount": "创建您的 TERMIX 账户",
"continueExternal": "使用外部提供商继续",
"loginTitle": "登录 Termix",
"registerTitle": "创建账户",
"loginButton": "登录",
@@ -1512,5 +1587,28 @@
"cpu": "CPU",
"ram": "内存",
"notAvailable": "不可用"
},
"commandPalette": {
"searchPlaceholder": "搜索主机或快速操作...",
"recentActivity": "最近活动",
"navigation": "导航",
"addHost": "添加主机",
"addCredential": "添加凭据",
"adminSettings": "管理员设置",
"userProfile": "用户资料",
"updateLog": "更新日志",
"hosts": "主机",
"openServerDetails": "打开服务器详情",
"openFileManager": "打开文件管理器",
"edit": "编辑",
"links": "链接",
"github": "GitHub",
"support": "支持",
"discord": "Discord",
"donate": "捐赠",
"press": "按下",
"toToggle": "来切换",
"close": "关闭",
"hostManager": "主机管理器"
}
}