Configure external identity provider for - OIDC/OAuth2 authentication.
{t('admin.configureExternalProvider')}
Select a server from the sidebar to start editing files
{t('fileManager.selectServerToEdit')}
- Are you sure you want to delete {deletingItem.name}? - {deletingItem.type === 'directory' && ' This will delete the folder and all its contents.'} + {t('fileManager.confirmDeleteMessage', { name: deletingItem.name })} + {deletingItem.type === 'directory' && ` ${t('fileManager.deleteDirectoryWarning')}`}
- This action cannot be undone. + {t('fileManager.actionCannotBeUndone')}
Connect to SSH to use file operations
{t('fileManager.connectToSsh')}
- Max: 100MB (JSON) / 200MB (Binary) + {t('fileManager.maxFileSize')}
Click to select a file
{t('fileManager.clickToSelectFile')}
sudo apt install sshpass
{t('hosts.otherInstallMethods')} + • {t('hosts.centosRhelFedora')} sudo yum install sshpass or sudo dnf install sshpass - • macOS: brew + • {t('hosts.macos')} brew install hudochenkov/sshpass/sshpass - • Windows: Use WSL or consider SSH key authentication + • {t('hosts.windows')} - SSH Server Configuration Required - For reverse SSH tunnels, the endpoint SSH server must allow: + {t('hosts.sshServerConfigRequired')} + {t('hosts.sshServerConfigDesc')} • GatewayPorts - yes (bind remote ports) + yes {t('hosts.gatewayPortsYes')} • AllowTcpForwarding - yes (port forwarding) + yes {t('hosts.allowTcpForwardingYes')} • PermitRootLogin - yes (if using root) + yes {t('hosts.permitRootLoginYes')} - Edit /etc/ssh/sshd_config and - restart SSH: sudo - systemctl restart sshd + {t('hosts.editSshConfig')} @@ -783,7 +784,7 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name="tunnelConnections" render={({field}) => ( - Tunnel Connections + {t('hosts.tunnelConnections')} {field.value.map((connection, index) => ( @@ -791,7 +792,7 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos className="p-4 border rounded-lg bg-muted/50"> - Connection {index + 1} + {t('hosts.connection')} {index + 1} - Remove + {t('hosts.remove')} @@ -810,10 +811,8 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name={`tunnelConnections.${index}.sourcePort`} render={({field: sourcePortField}) => ( - Source Port - (Source refers to the Current - Connection Details in the - General tab) + {t('hosts.sourcePort')} + {t('hosts.sourcePortDesc')} @@ -826,8 +825,7 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name={`tunnelConnections.${index}.endpointPort`} render={({field: endpointPortField}) => ( - Endpoint Port - (Remote) + {t('hosts.endpointPort')} @@ -841,14 +839,13 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos render={({field: endpointHostField}) => ( - Endpoint SSH - Configuration + {t('hosts.endpointSshConfig')} { sshConfigInputRefs.current[index] = el; }} - placeholder="endpoint ssh configuration" + placeholder={t('placeholders.sshConfig')} className="min-h-[40px]" autoComplete="off" value={endpointHostField.value} @@ -895,12 +892,10 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos - This tunnel will forward traffic from - port {form.watch(`tunnelConnections.${index}.sourcePort`) || '22'} on - the source machine (current connection details - in general tab) to - port {form.watch(`tunnelConnections.${index}.endpointPort`) || '224'} on - the endpoint machine. + {t('hosts.tunnelForwardDescription', { + sourcePort: form.watch(`tunnelConnections.${index}.sourcePort`) || '22', + endpointPort: form.watch(`tunnelConnections.${index}.endpointPort`) || '224' + })} @@ -909,14 +904,13 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name={`tunnelConnections.${index}.maxRetries`} render={({field: maxRetriesField}) => ( - Max Retries + {t('hosts.maxRetries')} + placeholder={t('placeholders.maxRetries')} {...maxRetriesField} /> - Maximum number of retry attempts - for tunnel connection. + {t('hosts.maxRetriesDescription')} )} @@ -926,15 +920,13 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name={`tunnelConnections.${index}.retryInterval`} render={({field: retryIntervalField}) => ( - Retry Interval - (seconds) + {t('hosts.retryInterval')} + placeholder={t('placeholders.retryInterval')} {...retryIntervalField} /> - Time to wait between retry - attempts. + {t('hosts.retryIntervalDescription')} )} @@ -944,8 +936,7 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name={`tunnelConnections.${index}.autoStart`} render={({field}) => ( - Auto Start on Container - Launch + {t('hosts.autoStartContainer')} - Automatically start this tunnel - when the container launches. + {t('hosts.autoStartDesc')} )} @@ -976,7 +966,7 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos }]); }} > - Add Tunnel Connection + {t('hosts.addConnection')} @@ -994,7 +984,7 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name="enableFileManager" render={({field}) => ( - Enable File Manager + {t('hosts.enableFileManager')} - Enable/disable host visibility in File Manager tab. + {t('hosts.enableFileManagerDesc')} )} @@ -1015,12 +1005,11 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos name="defaultPath" render={({field}) => ( - Default Path + {t('hosts.defaultPath')} - + - Set default directory shown when connected via - File Manager + {t('hosts.defaultPathDesc')} )} /> @@ -1039,7 +1028,7 @@ export function HostManagerHostEditor({editingHost, onFormSubmit}: SSHManagerHos transform: 'translateY(8px)' }} > - {editingHost ? "Update Host" : "Add Host"} + {editingHost ? t('hosts.updateHost') : t('hosts.addHost')} diff --git a/src/ui/Apps/Host Manager/HostManagerHostViewer.tsx b/src/ui/Apps/Host Manager/HostManagerHostViewer.tsx index 476eb895..33574649 100644 --- a/src/ui/Apps/Host Manager/HostManagerHostViewer.tsx +++ b/src/ui/Apps/Host Manager/HostManagerHostViewer.tsx @@ -7,6 +7,8 @@ import {Input} from "@/components/ui/input"; import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion"; import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip"; import {getSSHHosts, deleteSSHHost, bulkImportSSHHosts} from "@/ui/main-axios.ts"; +import {toast} from "sonner"; +import {useTranslation} from "react-i18next"; import { Edit, Trash2, @@ -47,6 +49,7 @@ interface SSHManagerHostViewerProps { } export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { + const {t} = useTranslation(); const [hosts, setHosts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -64,20 +67,21 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { setHosts(data); setError(null); } catch (err) { - setError('Failed to load hosts'); + setError(t('hosts.failedToLoadHosts')); } finally { setLoading(false); } }; const handleDelete = async (hostId: number, hostName: string) => { - if (window.confirm(`Are you sure you want to delete "${hostName}"?`)) { + if (window.confirm(t('hosts.confirmDelete', { name: hostName }))) { try { await deleteSSHHost(hostId); + toast.success(t('hosts.hostDeletedSuccessfully', { name: hostName })); await fetchHosts(); window.dispatchEvent(new CustomEvent('ssh-hosts:changed')); } catch (err) { - alert('Failed to delete host'); + toast.error(t('hosts.failedToDeleteHost')); } } }; @@ -98,32 +102,35 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { const data = JSON.parse(text); if (!Array.isArray(data.hosts) && !Array.isArray(data)) { - throw new Error('JSON must contain a "hosts" array or be an array of hosts'); + throw new Error(t('hosts.jsonMustContainHosts')); } const hostsArray = Array.isArray(data.hosts) ? data.hosts : data; if (hostsArray.length === 0) { - throw new Error('No hosts found in JSON file'); + throw new Error(t('hosts.noHostsInJson')); } if (hostsArray.length > 100) { - throw new Error('Maximum 100 hosts allowed per import'); + throw new Error(t('hosts.maxHostsAllowed')); } const result = await bulkImportSSHHosts(hostsArray); if (result.success > 0) { - alert(`Import completed: ${result.success} successful, ${result.failed} failed${result.errors.length > 0 ? '\n\nErrors:\n' + result.errors.join('\n') : ''}`); + toast.success(t('hosts.importCompleted', { success: result.success, failed: result.failed })); + if (result.errors.length > 0) { + toast.error(`Import errors: ${result.errors.join(', ')}`); + } await fetchHosts(); window.dispatchEvent(new CustomEvent('ssh-hosts:changed')); } else { - alert(`Import failed: ${result.errors.join('\n')}`); + toast.error(t('hosts.importFailed') + `: ${result.errors.join(', ')}`); } } catch (err) { - const errorMessage = err instanceof Error ? err.message : 'Failed to import JSON file'; - alert(`Import error: ${errorMessage}`); + const errorMessage = err instanceof Error ? err.message : t('hosts.failedToImportJson'); + toast.error(t('hosts.importError') + `: ${errorMessage}`); } finally { setImporting(false); event.target.value = ''; @@ -163,7 +170,7 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { const grouped: { [key: string]: SSHHost[] } = {}; filteredAndSortedHosts.forEach(host => { - const folder = host.folder || 'Uncategorized'; + const folder = host.folder || t('hosts.uncategorized'); if (!grouped[folder]) { grouped[folder] = []; } @@ -171,8 +178,8 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { }); const sortedFolders = Object.keys(grouped).sort((a, b) => { - if (a === 'Uncategorized') return -1; - if (b === 'Uncategorized') return 1; + if (a === t('hosts.uncategorized')) return -1; + if (b === t('hosts.uncategorized')) return 1; return a.localeCompare(b); }); @@ -189,7 +196,7 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { - Loading hosts... + {t('hosts.loadingHosts')} ); @@ -201,7 +208,7 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { {error} - Retry + {t('hosts.retry')} @@ -213,9 +220,9 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { - No SSH Hosts + {t('hosts.noHosts')} - You haven't added any SSH hosts yet. Click "Add Host" to get started. + {t('hosts.noHostsMessage')} @@ -226,9 +233,9 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { - SSH Hosts + {t('hosts.sshHosts')} - {filteredAndSortedHosts.length} hosts + {t('hosts.hostsCount', { count: filteredAndSortedHosts.length })} @@ -242,15 +249,15 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { onClick={() => document.getElementById('json-import-input')?.click()} disabled={importing} > - {importing ? 'Importing...' : 'Import JSON'} + {importing ? t('hosts.importing') : t('hosts.importJson')} - Import SSH Hosts from JSON + {t('hosts.importJsonTitle')} - Upload a JSON file to bulk import multiple SSH hosts (max 100). + {t('hosts.importJsonDesc')} @@ -318,7 +325,7 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { URL.revokeObjectURL(url); }} > - Download Sample + {t('hosts.downloadSample')} - Format Guide + {t('hosts.formatGuide')} - Refresh + {t('hosts.refresh')} @@ -350,7 +357,7 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { setSearchQuery(e.target.value)} className="pl-10" @@ -446,13 +453,13 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { {host.enableTerminal && ( - Terminal + {t('hosts.terminalBadge')} )} {host.enableTunnel && ( - Tunnel + {t('hosts.tunnelBadge')} {host.tunnelConnections && host.tunnelConnections.length > 0 && ( ({host.tunnelConnections.length}) @@ -462,7 +469,7 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) { {host.enableFileManager && ( - File Manager + {t('hosts.fileManagerBadge')} )} diff --git a/src/ui/Apps/Server/Server.tsx b/src/ui/Apps/Server/Server.tsx index c97b0346..413c0a78 100644 --- a/src/ui/Apps/Server/Server.tsx +++ b/src/ui/Apps/Server/Server.tsx @@ -8,6 +8,7 @@ import {Cpu, HardDrive, MemoryStick} from "lucide-react"; import {Tunnel} from "@/ui/Apps/Tunnel/Tunnel.tsx"; import {getServerStatusById, getServerMetricsById, type ServerMetrics} from "@/ui/main-axios.ts"; import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx"; +import {useTranslation} from 'react-i18next'; interface ServerProps { hostConfig?: any; @@ -24,6 +25,7 @@ export function Server({ isTopbarOpen = true, embedded = false }: ServerProps): React.ReactElement { + const {t} = useTranslation(); const {state: sidebarState} = useSidebar(); const {addTab, tabs} = useTabs() as any; const [serverStatus, setServerStatus] = React.useState<'online' | 'offline'>('offline'); @@ -168,16 +170,16 @@ export function Server({ } } }} - title="Refresh status and metrics" + title={t('serverStats.refreshStatusAndMetrics')} > - Refresh Status + {t('serverStats.refreshStatus')} {currentHostConfig?.enableFileManager && ( { if (!currentHostConfig || isFileManagerAlreadyOpen) return; const titleBase = currentHostConfig?.name && currentHostConfig.name.trim() !== '' @@ -190,7 +192,7 @@ export function Server({ }); }} > - File Manager + {t('nav.fileManager')} )} @@ -208,11 +210,11 @@ export function Server({ const cores = metrics?.cpu?.cores; const la = metrics?.cpu?.load; const pctText = (typeof pct === 'number') ? `${pct}%` : 'N/A'; - const coresText = (typeof cores === 'number') ? `${cores} CPU(s)` : 'N/A CPU(s)'; + const coresText = (typeof cores === 'number') ? t('serverStats.cpuCores', {count: cores}) : t('serverStats.naCpus'); const laText = (la && la.length === 3) - ? `Avg: ${la[0].toFixed(2)}, ${la[1].toFixed(2)}, ${la[2].toFixed(2)}` - : 'Avg: N/A'; - return `CPU Usage - ${pctText} of ${coresText} (${laText})`; + ? t('serverStats.loadAverage', {avg1: la[0].toFixed(2), avg5: la[1].toFixed(2), avg15: la[2].toFixed(2)}) + : t('serverStats.loadAverageNA'); + return `${t('serverStats.cpuUsage')} - ${pctText} ${t('serverStats.of')} ${coresText} (${laText})`; })()} @@ -232,7 +234,7 @@ export function Server({ const pctText = (typeof pct === 'number') ? `${pct}%` : 'N/A'; const usedText = (typeof used === 'number') ? `${used} GiB` : 'N/A'; const totalText = (typeof total === 'number') ? `${total} GiB` : 'N/A'; - return `Memory Usage - ${pctText} (${usedText} of ${totalText})`; + return `${t('serverStats.memoryUsage')} - ${pctText} (${usedText} ${t('serverStats.of')} ${totalText})`; })()} @@ -252,7 +254,7 @@ export function Server({ const pctText = (typeof pct === 'number') ? `${pct}%` : 'N/A'; const usedText = used ?? 'N/A'; const totalText = total ?? 'N/A'; - return `Root Storage Space - ${pctText} (${usedText} of ${totalText})`; + return `${t('serverStats.rootStorageSpace')} - ${pctText} (${usedText} ${t('serverStats.of')} ${totalText})`; })()} @@ -270,7 +272,7 @@ export function Server({ )} - Have ideas for what should come next for server management? Share them on{" "} + {t('serverStats.feedbackMessage')}{" "} (function SSHTerminal( {hostConfig, isVisible, splitScreen = false}, ref ) { + const {t} = useTranslation(); const {instance: terminal, ref: xtermRef} = useXTerm(); const fitAddonRef = useRef(null); const webSocketRef = useRef(null); @@ -139,11 +141,11 @@ export const Terminal = forwardRef(function SSHTerminal( try { const msg = JSON.parse(event.data); if (msg.type === 'data') terminal.write(msg.data); - else if (msg.type === 'error') terminal.writeln(`\r\n[ERROR] ${msg.message}`); + else if (msg.type === 'error') terminal.writeln(`\r\n[${t('terminal.error')}] ${msg.message}`); else if (msg.type === 'connected') { } else if (msg.type === 'disconnected') { wasDisconnectedBySSH.current = true; - terminal.writeln(`\r\n[${msg.message || 'Disconnected'}]`); + terminal.writeln(`\r\n[${msg.message || t('terminal.disconnected')}]`); } } catch (error) { } @@ -151,12 +153,12 @@ export const Terminal = forwardRef(function SSHTerminal( ws.addEventListener('close', () => { if (!wasDisconnectedBySSH.current) { - terminal.writeln('\r\n[Connection closed]'); + terminal.writeln(`\r\n[${t('terminal.connectionClosed')}]`); } }); ws.addEventListener('error', () => { - terminal.writeln('\r\n[Connection error]'); + terminal.writeln(`\r\n[${t('terminal.connectionError')}]`); }); } diff --git a/src/ui/Apps/Tunnel/TunnelObject.tsx b/src/ui/Apps/Tunnel/TunnelObject.tsx index 8daf97b9..52105a53 100644 --- a/src/ui/Apps/Tunnel/TunnelObject.tsx +++ b/src/ui/Apps/Tunnel/TunnelObject.tsx @@ -2,6 +2,7 @@ import React from "react"; import {Button} from "@/components/ui/button.tsx"; import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx"; import {Separator} from "@/components/ui/separator.tsx"; +import {useTranslation} from 'react-i18next'; import { Loader2, Pin, @@ -87,6 +88,7 @@ export function TunnelObject({ compact = false, bare = false }: SSHTunnelObjectProps): React.ReactElement { + const {t} = useTranslation(); const getTunnelStatus = (tunnelIndex: number): TunnelStatus | undefined => { const tunnel = host.tunnelConnections[tunnelIndex]; @@ -97,7 +99,7 @@ export function TunnelObject({ const getTunnelStatusDisplay = (status: TunnelStatus | undefined) => { if (!status) return { icon: , - text: 'Unknown', + text: t('tunnels.unknown'), color: 'text-muted-foreground', bgColor: 'bg-muted/50', borderColor: 'border-border' @@ -109,7 +111,7 @@ export function TunnelObject({ case 'CONNECTED': return { icon: , - text: 'Connected', + text: t('tunnels.connected'), color: 'text-green-600 dark:text-green-400', bgColor: 'bg-green-500/10 dark:bg-green-400/10', borderColor: 'border-green-500/20 dark:border-green-400/20' @@ -117,7 +119,7 @@ export function TunnelObject({ case 'CONNECTING': return { icon: , - text: 'Connecting...', + text: t('tunnels.connecting'), color: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-500/10 dark:bg-blue-400/10', borderColor: 'border-blue-500/20 dark:border-blue-400/20' @@ -125,7 +127,7 @@ export function TunnelObject({ case 'DISCONNECTING': return { icon: , - text: 'Disconnecting...', + text: t('tunnels.disconnecting'), color: 'text-orange-600 dark:text-orange-400', bgColor: 'bg-orange-500/10 dark:bg-orange-400/10', borderColor: 'border-orange-500/20 dark:border-orange-400/20' @@ -133,7 +135,7 @@ export function TunnelObject({ case 'DISCONNECTED': return { icon: , - text: 'Disconnected', + text: t('tunnels.disconnected'), color: 'text-muted-foreground', bgColor: 'bg-muted/30', borderColor: 'border-border' @@ -149,7 +151,7 @@ export function TunnelObject({ case 'FAILED': return { icon: , - text: status.reason || 'Error', + text: status.reason || t('tunnels.error'), color: 'text-red-600 dark:text-red-400', bgColor: 'bg-red-500/10 dark:bg-red-400/10', borderColor: 'border-red-500/20 dark:border-red-400/20' @@ -193,7 +195,7 @@ export function TunnelObject({ - Port {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} + {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} {statusDisplay.text} @@ -212,7 +214,7 @@ export function TunnelObject({ className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs" > - Disconnect + {t('tunnels.disconnect')} ) : isRetrying || isWaiting ? ( @@ -223,7 +225,7 @@ export function TunnelObject({ className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs" > - Cancel + {t('tunnels.cancel')} ) : ( - Connect + {t('tunnels.connect')} )} @@ -246,7 +248,7 @@ export function TunnelObject({ className="h-7 px-2 text-muted-foreground border-border text-xs" > - {isConnected ? 'Disconnecting...' : isRetrying || isWaiting ? 'Canceling...' : 'Connecting...'} + {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')} )} @@ -255,13 +257,13 @@ export function TunnelObject({ {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && ( - Error: + {t('tunnels.error')}: {status.reason} {status.reason && status.reason.includes('Max retries exhausted') && ( <> - Check your Docker logs for the error reason, join the Discord or @@ -280,12 +282,12 @@ export function TunnelObject({ - {statusValue === 'WAITING' ? 'Waiting for retry' : 'Retrying connection'} + {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')} - Attempt {status.retryCount} of {status.maxRetries} + {t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })} {status.nextRetryIn && ( - • Next retry in {status.nextRetryIn} seconds + • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })} )} @@ -297,7 +299,7 @@ export function TunnelObject({ ) : ( - No tunnel connections configured + {t('tunnels.noTunnelConnections')} )} @@ -346,7 +348,7 @@ export function TunnelObject({ {!compact && ( - Tunnel Connections ({host.tunnelConnections.length}) + {t('tunnels.tunnelConnections')} ({host.tunnelConnections.length}) )} {host.tunnelConnections && host.tunnelConnections.length > 0 ? ( @@ -373,7 +375,7 @@ export function TunnelObject({ - Port {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} + {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} {statusDisplay.text} @@ -392,7 +394,7 @@ export function TunnelObject({ className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs" > - Disconnect + {t('tunnels.disconnect')} ) : isRetrying || isWaiting ? ( @@ -403,7 +405,7 @@ export function TunnelObject({ className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs" > - Cancel + {t('tunnels.cancel')} ) : ( - Connect + {t('tunnels.connect')} )} @@ -427,7 +429,7 @@ export function TunnelObject({ className="h-7 px-2 text-muted-foreground border-border text-xs" > - {isConnected ? 'Disconnecting...' : isRetrying || isWaiting ? 'Canceling...' : 'Connecting...'} + {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')} )} @@ -436,13 +438,13 @@ export function TunnelObject({ {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && ( - Error: + {t('tunnels.error')}: {status.reason} {status.reason && status.reason.includes('Max retries exhausted') && ( <> - Check your Docker logs for the error reason, join the Discord or @@ -461,12 +463,12 @@ export function TunnelObject({ - {statusValue === 'WAITING' ? 'Waiting for retry' : 'Retrying connection'} + {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')} - Attempt {status.retryCount} of {status.maxRetries} + {t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })} {status.nextRetryIn && ( - • Next retry in {status.nextRetryIn} seconds + • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })} )} @@ -478,7 +480,7 @@ export function TunnelObject({ ) : ( - No tunnel connections configured + {t('tunnels.noTunnelConnections')} )} diff --git a/src/ui/Apps/Tunnel/TunnelViewer.tsx b/src/ui/Apps/Tunnel/TunnelViewer.tsx index 337f3b24..dcec9123 100644 --- a/src/ui/Apps/Tunnel/TunnelViewer.tsx +++ b/src/ui/Apps/Tunnel/TunnelViewer.tsx @@ -1,5 +1,6 @@ import React from "react"; import {TunnelObject} from "./TunnelObject.tsx"; +import {useTranslation} from 'react-i18next'; interface TunnelConnection { sourcePort: number; @@ -52,15 +53,15 @@ export function TunnelViewer({ tunnelActions = {}, onTunnelAction }: SSHTunnelViewerProps): React.ReactElement { + const {t} = useTranslation(); const activeHost: SSHHost | undefined = Array.isArray(hosts) && hosts.length > 0 ? hosts[0] : undefined; if (!activeHost || !activeHost.tunnelConnections || activeHost.tunnelConnections.length === 0) { return ( - No SSH Tunnels + {t('tunnels.noSshTunnels')} - Create your first SSH tunnel to get started. Use the SSH Manager to add hosts with tunnel - connections. + {t('tunnels.createFirstTunnelMessage')} ); @@ -69,7 +70,7 @@ export function TunnelViewer({ return ( - SSH Tunnels + {t('tunnels.title')} void; @@ -32,6 +33,7 @@ export function Homepage({ onAuthSuccess, isTopbarOpen = true }: HomepageProps): React.ReactElement { + const {t} = useTranslation(); const [loggedIn, setLoggedIn] = useState(isAuthenticated); const [isAdmin, setIsAdmin] = useState(false); const [username, setUsername] = useState(null); @@ -70,13 +72,20 @@ export function Homepage({ } }, [isAuthenticated]); + const topOffset = isTopbarOpen ? 66 : 0; + const topPadding = isTopbarOpen ? 66 : 0; + return ( + className="w-full min-h-svh relative transition-[padding-top] duration-300 ease-in-out" + style={{ paddingTop: `${topPadding}px` }}> {!loggedIn ? ( - + ) : ( - - + + - Logged in! + {t('homepage.loggedInTitle')} - You are logged in! Use the sidebar to access all available tools. To get started, - create an SSH Host in the SSH Manager tab. Once created, you can connect to that - host using the other apps in the sidebar. + {t('homepage.loggedInMessage')} diff --git a/src/ui/Homepage/HomepageAlertCard.tsx b/src/ui/Homepage/HomepageAlertCard.tsx index d2f34722..e2f774fa 100644 --- a/src/ui/Homepage/HomepageAlertCard.tsx +++ b/src/ui/Homepage/HomepageAlertCard.tsx @@ -3,6 +3,7 @@ import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components import {Button} from "@/components/ui/button.tsx"; import {Badge} from "@/components/ui/badge.tsx"; import {X, ExternalLink, AlertTriangle, Info, CheckCircle, AlertCircle} from "lucide-react"; +import {useTranslation} from "react-i18next"; interface TermixAlert { id: string; @@ -64,6 +65,8 @@ const getTypeBadgeVariant = (type?: string) => { }; export function HomepageAlertCard({alert, onDismiss, onClose}: AlertCardProps): React.ReactElement { + const {t} = useTranslation(); + if (!alert) { return null; } @@ -79,10 +82,10 @@ export function HomepageAlertCard({alert, onDismiss, onClose}: AlertCardProps): const diffTime = expiryDate.getTime() - now.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); - if (diffDays < 0) return 'Expired'; - if (diffDays === 0) return 'Expires today'; - if (diffDays === 1) return 'Expires tomorrow'; - return `Expires in ${diffDays} days`; + if (diffDays < 0) return t('common.expired'); + if (diffDays === 0) return t('common.expiresToday'); + if (diffDays === 1) return t('common.expiresTomorrow'); + return t('common.expiresInDays', {days: diffDays}); }; return ( diff --git a/src/ui/Homepage/HomepageAlertManager.tsx b/src/ui/Homepage/HomepageAlertManager.tsx index 4aa8dd70..6e68b941 100644 --- a/src/ui/Homepage/HomepageAlertManager.tsx +++ b/src/ui/Homepage/HomepageAlertManager.tsx @@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react"; import {HomepageAlertCard} from "./HomepageAlertCard.tsx"; import {Button} from "@/components/ui/button.tsx"; import { getUserAlerts, dismissAlert } from "@/ui/main-axios.ts"; +import {useTranslation} from "react-i18next"; interface TermixAlert { id: string; @@ -20,6 +21,7 @@ interface AlertManagerProps { } export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): React.ReactElement { + const {t} = useTranslation(); const [alerts, setAlerts] = useState([]); const [currentAlertIndex, setCurrentAlertIndex] = useState(0); const [loading, setLoading] = useState(false); @@ -57,7 +59,7 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea setAlerts(sortedAlerts); setCurrentAlertIndex(0); } catch (err) { - setError('Failed to load alerts'); + setError(t('homepage.failedToLoadAlerts')); } finally { setLoading(false); } @@ -81,7 +83,7 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea return prevIndex; }); } catch (err) { - setError('Failed to dismiss alert'); + setError(t('homepage.failedToDismissAlert')); } }; diff --git a/src/ui/Homepage/HomepageAuth.tsx b/src/ui/Homepage/HomepageAuth.tsx index 51212b33..5b1ca837 100644 --- a/src/ui/Homepage/HomepageAuth.tsx +++ b/src/ui/Homepage/HomepageAuth.tsx @@ -4,6 +4,8 @@ import {Button} from "../../components/ui/button.tsx"; import {Input} from "../../components/ui/input.tsx"; import {Label} from "../../components/ui/label.tsx"; import {Alert, AlertTitle, AlertDescription} from "../../components/ui/alert.tsx"; +import {useTranslation} from "react-i18next"; +import {LanguageSwitcher} from "../../components/LanguageSwitcher"; import { registerUser, loginUser, @@ -55,6 +57,7 @@ export function HomepageAuth({ onAuthSuccess, ...props }: HomepageAuthProps) { + const {t} = useTranslation(); const [tab, setTab] = useState<"login" | "signup" | "external" | "reset">("login"); const [localUsername, setLocalUsername] = useState(""); const [password, setPassword] = useState(""); @@ -116,7 +119,7 @@ export function HomepageAuth({ } setDbError(null); }).catch(() => { - setDbError("Could not connect to the database. Please try again later."); + setDbError(t('errors.databaseConnection')); }); }, [setDbError]); @@ -126,7 +129,7 @@ export function HomepageAuth({ setLoading(true); if (!localUsername.trim()) { - setError("Username is required"); + setError(t('errors.requiredField')); setLoading(false); return; } @@ -137,12 +140,12 @@ export function HomepageAuth({ res = await loginUser(localUsername, password); } else { if (password !== signupConfirmPassword) { - setError("Passwords do not match"); + setError(t('errors.passwordMismatch')); setLoading(false); return; } if (password.length < 6) { - setError("Password must be at least 6 characters long"); + setError(t('errors.minLength', {min: 6})); setLoading(false); return; } @@ -159,7 +162,7 @@ export function HomepageAuth({ } if (!res || !res.token) { - throw new Error('No token received from login'); + throw new Error(t('errors.noTokenReceived')); } setCookie("jwt", res.token); @@ -186,7 +189,7 @@ export function HomepageAuth({ setTotpCode(""); setTotpTempToken(""); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Unknown error"); + setError(err?.response?.data?.error || err?.message || t('errors.unknownError')); setInternalLoggedIn(false); setLoggedIn(false); setIsAdmin(false); @@ -194,7 +197,7 @@ export function HomepageAuth({ setUserId(null); setCookie("jwt", "", -1); if (err?.response?.data?.error?.includes("Database")) { - setDbError("Could not connect to the database. Please try again later."); + setDbError(t('errors.databaseConnection')); } else { setDbError(null); } @@ -211,7 +214,7 @@ export function HomepageAuth({ setResetStep("verify"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Failed to initiate password reset"); + setError(err?.response?.data?.error || err?.message || t('errors.failedPasswordReset')); } finally { setResetLoading(false); } @@ -226,7 +229,7 @@ export function HomepageAuth({ setResetStep("newPassword"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to verify reset code"); + setError(err?.response?.data?.error || t('errors.failedVerifyCode')); } finally { setResetLoading(false); } @@ -237,13 +240,13 @@ export function HomepageAuth({ setResetLoading(true); if (newPassword !== confirmPassword) { - setError("Passwords do not match"); + setError(t('errors.passwordMismatch')); setResetLoading(false); return; } if (newPassword.length < 6) { - setError("Password must be at least 6 characters long"); + setError(t('errors.minLength', {min: 6})); setResetLoading(false); return; } @@ -260,7 +263,7 @@ export function HomepageAuth({ setResetSuccess(true); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to complete password reset"); + setError(err?.response?.data?.error || t('errors.failedCompleteReset')); } finally { setResetLoading(false); } @@ -285,7 +288,7 @@ export function HomepageAuth({ async function handleTOTPVerification() { if (totpCode.length !== 6) { - setError("Please enter a 6-digit code"); + setError(t('auth.enterCode')); return; } @@ -296,7 +299,7 @@ export function HomepageAuth({ const res = await verifyTOTPLogin(totpTempToken, totpCode); if (!res || !res.token) { - throw new Error('No token received from TOTP verification'); + throw new Error(t('errors.noTokenReceived')); } setCookie("jwt", res.token); @@ -318,7 +321,7 @@ export function HomepageAuth({ setTotpCode(""); setTotpTempToken(""); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Invalid TOTP code"); + setError(err?.response?.data?.error || err?.message || t('errors.invalidTotpCode')); } finally { setTotpLoading(false); } @@ -332,12 +335,12 @@ export function HomepageAuth({ const {auth_url: authUrl} = authResponse; if (!authUrl || authUrl === 'undefined') { - throw new Error('Invalid authorization URL received from backend'); + throw new Error(t('errors.invalidAuthUrl')); } window.location.replace(authUrl); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Failed to start OIDC login"); + setError(err?.response?.data?.error || err?.message || t('errors.failedOidcLogin')); setOidcLoading(false); } } @@ -349,7 +352,7 @@ export function HomepageAuth({ const error = urlParams.get('error'); if (error) { - setError(`OIDC authentication failed: ${error}`); + setError(`${t('errors.oidcAuthFailed')}: ${error}`); setOidcLoading(false); window.history.replaceState({}, document.title, window.location.pathname); return; @@ -377,7 +380,7 @@ export function HomepageAuth({ window.history.replaceState({}, document.title, window.location.pathname); }) .catch(err => { - setError("Failed to get user info after OIDC login"); + setError(t('errors.failedUserInfo')); setInternalLoggedIn(false); setLoggedIn(false); setIsAdmin(false); @@ -412,39 +415,37 @@ export function HomepageAuth({ )} {firstUser && !dbError && !internalLoggedIn && ( - First User + {t('auth.firstUser')} - You are the first user and will be made an admin. You can view admin settings in the sidebar - user dropdown. If you think this is a mistake, check the docker logs, or create a{" "} + {t('auth.firstUserMessage')}{" "} - GitHub issue + GitHub Issue . )} {!registrationAllowed && !internalLoggedIn && ( - Registration Disabled + {t('auth.registerTitle')} - New account registration is currently disabled by an admin. Please log in or contact an - administrator. + {t('messages.registrationDisabled')} )} {totpRequired && ( - Two-Factor Authentication - Enter the 6-digit code from your authenticator app + {t('auth.twoFactorAuth')} + {t('auth.enterCode')} - Authentication Code + {t('auth.verifyCode')} - Or enter a backup code if you don't have access to your authenticator + {t('auth.backupCode')} @@ -467,7 +468,7 @@ export function HomepageAuth({ disabled={totpLoading || totpCode.length < 6} onClick={handleTOTPVerification} > - {totpLoading ? Spinner : "Verify"} + {totpLoading ? Spinner : t('auth.verifyCode')} - Cancel + {t('common.cancel')} )} @@ -506,7 +507,7 @@ export function HomepageAuth({ aria-selected={tab === "login"} disabled={loading || firstUser} > - Login + {t('common.login')} - Sign Up + {t('common.register')} {oidcConfigured && ( - External + {t('auth.external')} )} - {tab === "login" ? "Login to your account" : - tab === "signup" ? "Create a new account" : - tab === "external" ? "Login with external provider" : - "Reset your password"} + {tab === "login" ? t('auth.loginTitle') : + tab === "signup" ? t('auth.registerTitle') : + tab === "external" ? t('auth.loginWithExternal') : + t('auth.forgotPassword')} @@ -561,7 +562,7 @@ export function HomepageAuth({ {tab === "external" && ( <> - Login using your configured external identity provider + {t('auth.loginWithExternalDesc')} - {oidcLoading ? Spinner : "Login with External Provider"} + {oidcLoading ? Spinner : t('auth.loginWithExternal')} )} @@ -578,12 +579,11 @@ export function HomepageAuth({ {resetStep === "initiate" && ( <> - Enter your username to receive a password reset code. The code - will be logged in the docker container logs. + {t('auth.resetCodeDesc')} - Username + {t('common.username')} - {resetLoading ? Spinner : "Send Reset Code"} + {resetLoading ? Spinner : t('auth.sendResetCode')} @@ -609,12 +609,11 @@ export function HomepageAuth({ {resetStep === "verify" && ( <>o - Enter the 6-digit code from the docker container logs for - user: {localUsername} + {t('auth.enterResetCode')} {localUsername} - Reset Code + {t('auth.resetCode')} - {resetLoading ? Spinner : "Verify Code"} + {resetLoading ? Spinner : t('auth.verifyCodeButton')} - Back + {t('common.back')} @@ -654,10 +653,9 @@ export function HomepageAuth({ {resetSuccess && ( <> - Success! + {t('auth.passwordResetSuccess')} - Your password has been successfully reset! You can now log in - with your new password. + {t('auth.passwordResetSuccessDesc')} - Go to Login + {t('auth.goToLogin')} )} @@ -676,12 +674,11 @@ export function HomepageAuth({ {resetStep === "newPassword" && !resetSuccess && ( <> - Enter your new password for - user: {localUsername} + {t('auth.enterNewPassword')} {localUsername} - New Password + {t('auth.newPassword')} - Confirm Password + {t('auth.confirmNewPassword')} - {resetLoading ? Spinner : "Reset Password"} + {resetLoading ? Spinner : t('auth.resetPasswordButton')} - Back + {t('common.back')} @@ -736,7 +733,7 @@ export function HomepageAuth({ ) : ( - Username + {t('common.username')} - Password + {t('common.password')} setPassword(e.target.value)} disabled={loading || internalLoggedIn}/> {tab === "signup" && ( - Confirm Password + {t('common.confirmPassword')} - {loading ? Spinner : (tab === "login" ? "Login" : "Sign Up")} + {loading ? Spinner : (tab === "login" ? t('common.login') : t('auth.signUp'))} {tab === "login" && ( - Reset Password + {t('auth.resetPasswordButton')} )} )} + + + + + {t('common.language')} + + + + )} {error && ( diff --git a/src/ui/Homepage/HompageUpdateLog.tsx b/src/ui/Homepage/HompageUpdateLog.tsx index c95f5bb0..667eed78 100644 --- a/src/ui/Homepage/HompageUpdateLog.tsx +++ b/src/ui/Homepage/HompageUpdateLog.tsx @@ -3,6 +3,7 @@ import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx"; import {Button} from "@/components/ui/button.tsx"; import {Separator} from "@/components/ui/separator.tsx"; import { getReleasesRSS, getVersionInfo } from "@/ui/main-axios.ts"; +import {useTranslation} from "react-i18next"; interface HomepageUpdateLogProps extends React.ComponentProps<"div"> { loggedIn: boolean; @@ -51,6 +52,7 @@ interface VersionResponse { } export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { + const {t} = useTranslation(); const [releases, setReleases] = useState(null); const [versionInfo, setVersionInfo] = useState(null); const [loading, setLoading] = useState(false); @@ -69,7 +71,7 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { setError(null); }) .catch(err => { - setError('Failed to fetch update information'); + setError(t('common.failedToFetchUpdateInfo')); }) .finally(() => setLoading(false)); } @@ -90,15 +92,15 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { return ( - Updates & Releases + {t('common.updatesAndReleases')} {versionInfo && versionInfo.status === 'requires_update' && ( - Update Available + {t('common.updateAvailable')} - A new version ({versionInfo.version}) is available. + {t('common.newVersionAvailable', { version: versionInfo.version })} )} @@ -117,7 +119,7 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { {error && ( - Error + {t('common.error')} {error} )} @@ -135,7 +137,7 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { {release.isPrerelease && ( - Pre-release + {t('common.preRelease')} )} @@ -158,9 +160,9 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { {releases && releases.items.length === 0 && !loading && ( - No Releases + {t('common.noReleases')} - No releases found. + {t('common.noReleasesFound')} )} diff --git a/src/ui/Navigation/LeftSidebar.tsx b/src/ui/Navigation/LeftSidebar.tsx index 9ddcec72..cdc25b26 100644 --- a/src/ui/Navigation/LeftSidebar.tsx +++ b/src/ui/Navigation/LeftSidebar.tsx @@ -5,6 +5,7 @@ import { File, Hammer, ChevronUp, User2, HardDrive, Trash2, Users, Shield, Settings, Menu, ChevronRight } from "lucide-react"; +import { useTranslation } from 'react-i18next'; import { Sidebar, @@ -49,14 +50,7 @@ import {Card} from "@/components/ui/card.tsx"; import {FolderCard} from "@/ui/Navigation/Hosts/FolderCard.tsx"; import {getSSHHosts} from "@/ui/main-axios.ts"; import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx"; -import { - getOIDCConfig, - getUserList, - makeUserAdmin, - removeAdminStatus, - deleteUser, - deleteAccount -} from "@/ui/main-axios.ts"; +import { deleteAccount } from "@/ui/main-axios.ts"; interface SSHHost { id: number; @@ -112,26 +106,12 @@ export function LeftSidebar({ username, children, }: SidebarProps): React.ReactElement { - const [adminSheetOpen, setAdminSheetOpen] = React.useState(false); - + const { t } = useTranslation(); + const [deleteAccountOpen, setDeleteAccountOpen] = React.useState(false); const [deletePassword, setDeletePassword] = React.useState(""); const [deleteLoading, setDeleteLoading] = React.useState(false); const [deleteError, setDeleteError] = React.useState(null); - const [adminCount, setAdminCount] = React.useState(0); - - const [users, setUsers] = React.useState>([]); - const [newAdminUsername, setNewAdminUsername] = React.useState(""); - const [usersLoading, setUsersLoading] = React.useState(false); - const [makeAdminLoading, setMakeAdminLoading] = React.useState(false); - const [makeAdminError, setMakeAdminError] = React.useState(null); - const [makeAdminSuccess, setMakeAdminSuccess] = React.useState(null); - const [oidcConfig, setOidcConfig] = React.useState(null); const [isSidebarOpen, setIsSidebarOpen] = useState(true); @@ -140,7 +120,7 @@ export function LeftSidebar({ const sshManagerTab = tabList.find((t) => t.type === 'ssh_manager'); const openSshManagerTab = () => { if (sshManagerTab || isSplitScreenActive) return; - const id = addTab({type: 'ssh_manager', title: 'SSH Manager'} as any); + const id = addTab({type: 'ssh_manager'} as any); setCurrentTab(id); }; const adminTab = tabList.find((t) => t.type === 'admin'); @@ -150,7 +130,7 @@ export function LeftSidebar({ setCurrentTab(adminTab.id); return; } - const id = addTab({type: 'admin', title: 'Admin'} as any); + const id = addTab({type: 'admin'} as any); setCurrentTab(id); }; @@ -161,33 +141,7 @@ export function LeftSidebar({ const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); - React.useEffect(() => { - if (adminSheetOpen) { - const jwt = getCookie("jwt"); - if (jwt && isAdmin) { - getOIDCConfig().then(res => { - if (res) { - setOidcConfig(res); - } - }).catch((error) => { - }); - fetchUsers(); - } - } else { - const jwt = getCookie("jwt"); - if (jwt && isAdmin) { - fetchAdminCount(); - } - } - }, [adminSheetOpen, isAdmin]); - React.useEffect(() => { - if (!isAdmin) { - setAdminSheetOpen(false); - setUsers([]); - setAdminCount(0); - } - }, [isAdmin]); const fetchHosts = React.useCallback(async () => { try { @@ -232,7 +186,7 @@ export function LeftSidebar({ }, 50); } } catch (err: any) { - setHostsError('Failed to load hosts'); + setHostsError(t('leftSidebar.failedToLoadHosts')); } }, []); @@ -275,7 +229,7 @@ export function LeftSidebar({ const hostsByFolder = React.useMemo(() => { const map: Record = {}; filteredHosts.forEach(h => { - const folder = h.folder && h.folder.trim() ? h.folder : 'No Folder'; + const folder = h.folder && h.folder.trim() ? h.folder : t('leftSidebar.noFolder'); if (!map[folder]) map[folder] = []; map[folder].push(h); }); @@ -285,8 +239,8 @@ export function LeftSidebar({ const sortedFolders = React.useMemo(() => { const folders = Object.keys(hostsByFolder); folders.sort((a, b) => { - if (a === 'No Folder') return -1; - if (b === 'No Folder') return 1; + if (a === t('leftSidebar.noFolder')) return -1; + if (b === t('leftSidebar.noFolder')) return 1; return a.localeCompare(b); }); return folders; @@ -304,7 +258,7 @@ export function LeftSidebar({ setDeleteError(null); if (!deletePassword.trim()) { - setDeleteError("Password is required"); + setDeleteError(t('leftSidebar.passwordRequired')); setDeleteLoading(false); return; } @@ -315,101 +269,11 @@ export function LeftSidebar({ handleLogout(); } catch (err: any) { - setDeleteError(err?.response?.data?.error || "Failed to delete account"); + setDeleteError(err?.response?.data?.error || t('leftSidebar.failedToDeleteAccount')); setDeleteLoading(false); } }; - const fetchUsers = async () => { - const jwt = getCookie("jwt"); - - if (!jwt || !isAdmin) { - return; - } - - setUsersLoading(true); - try { - const response = await getUserList(); - setUsers(response.users); - - const adminUsers = response.users.filter((user: any) => user.is_admin); - setAdminCount(adminUsers.length); - } catch (err: any) { - } finally { - setUsersLoading(false); - } - }; - - const fetchAdminCount = async () => { - const jwt = getCookie("jwt"); - - if (!jwt || !isAdmin) { - return; - } - - try { - const response = await getUserList(); - const adminUsers = response.users.filter((user: any) => user.is_admin); - setAdminCount(adminUsers.length); - } catch (err: any) { - } - }; - - const makeUserAdmin = async (e: React.FormEvent) => { - e.preventDefault(); - if (!newAdminUsername.trim()) return; - - if (!isAdmin) { - return; - } - - setMakeAdminLoading(true); - setMakeAdminError(null); - setMakeAdminSuccess(null); - - const jwt = getCookie("jwt"); - try { - await makeUserAdmin(newAdminUsername.trim()); - setMakeAdminSuccess(`User ${newAdminUsername} is now an admin`); - setNewAdminUsername(""); - fetchUsers(); - } catch (err: any) { - setMakeAdminError(err?.response?.data?.error || "Failed to make user admin"); - } finally { - setMakeAdminLoading(false); - } - }; - - const removeAdminStatus = async (username: string) => { - if (!confirm(`Are you sure you want to remove admin status from ${username}?`)) return; - - if (!isAdmin) { - return; - } - - const jwt = getCookie("jwt"); - try { - await removeAdminStatus(username); - fetchUsers(); - } catch (err: any) { - } - }; - - const deleteUser = async (username: string) => { - if (!confirm(`Are you sure you want to delete user ${username}? This action cannot be undone.`)) return; - - if (!isAdmin) { - return; - } - - const jwt = getCookie("jwt"); - try { - await deleteUser(username); - fetchUsers(); - } catch (err: any) { - } - }; - return ( @@ -421,6 +285,7 @@ export function LeftSidebar({ variant="outline" onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="w-[28px] h-[28px] absolute right-5" + title={t('common.toggleSidebar')} > @@ -431,9 +296,9 @@ export function LeftSidebar({ + title={sshManagerTab ? t('interface.sshManagerAlreadyOpen') : isSplitScreenActive ? t('interface.disabledDuringSplitScreen') : undefined}> - Host Manager + {t('nav.hostManager')} @@ -442,7 +307,7 @@ export function LeftSidebar({ setSearch(e.target.value)} - placeholder="Search hosts by any info..." + placeholder={t('placeholders.searchHostsAny')} className="w-full h-8 text-sm border-2 !bg-[#222225] border-[#303032] rounded-md" autoComplete="off" /> @@ -452,7 +317,7 @@ export function LeftSidebar({ - {hostsError} + {t('leftSidebar.failedToLoadHosts')} )} @@ -460,7 +325,7 @@ export function LeftSidebar({ {hostsLoading && ( - Loading hosts... + {t('hosts.loadingHosts')} )} @@ -487,7 +352,7 @@ export function LeftSidebar({ style={{width: '100%'}} disabled={disabled} > - {username ? username : 'Signed out'} + {username ? username : t('common.logout')} @@ -506,10 +371,10 @@ export function LeftSidebar({ setCurrentTab(profileTab.id); return; } - const id = addTab({type: 'profile', title: 'Profile'} as any); + const id = addTab({type: 'profile', title: t('profile.title')} as any); setCurrentTab(id); }}> - Profile & Security + {t('profile.title')} {isAdmin && ( { if (isAdmin) openAdminTab(); }}> - Admin Settings + {t('admin.title')} )} - Sign out + {t('common.logout')} setDeleteAccountOpen(true)} - disabled={isAdmin && adminCount <= 1} > - - Delete Account - {isAdmin && adminCount <= 1 && " (Last Admin)"} + + {t('leftSidebar.deleteAccount')} @@ -586,7 +448,7 @@ export function LeftSidebar({ onClick={(e) => e.stopPropagation()} > - Delete Account + {t('leftSidebar.deleteAccount')} × @@ -605,48 +467,33 @@ export function LeftSidebar({ - This action cannot be undone. This will permanently delete your account and all - associated data. + {t('leftSidebar.deleteAccountWarning')} - Warning + {t('common.warning')} - Deleting your account will remove all your data including SSH hosts, - configurations, and settings. - This action is irreversible. + {t('leftSidebar.deleteAccountWarningDetails')} {deleteError && ( - Error + {t('common.error')} {deleteError} )} - {isAdmin && adminCount <= 1 && ( - - Cannot Delete Account - - You are the last admin user. You cannot delete your account as this - would leave the system without any administrators. - Please make another user an admin first, or contact system support. - - - )} - - Confirm Password + {t('leftSidebar.confirmPassword')} setDeletePassword(e.target.value)} - placeholder="Enter your password to confirm" + placeholder={t('placeholders.confirmPassword')} required - disabled={isAdmin && adminCount <= 1} /> @@ -655,9 +502,9 @@ export function LeftSidebar({ type="submit" variant="destructive" className="flex-1" - disabled={deleteLoading || !deletePassword.trim() || (isAdmin && adminCount <= 1)} + disabled={deleteLoading || !deletePassword.trim()} > - {deleteLoading ? "Deleting..." : "Delete Account"} + {deleteLoading ? t('leftSidebar.deleting') : t('leftSidebar.deleteAccount')} - Cancel + {t('leftSidebar.cancel')} diff --git a/src/ui/Navigation/Tabs/Tab.tsx b/src/ui/Navigation/Tabs/Tab.tsx index 217aeb33..5b6a9d9d 100644 --- a/src/ui/Navigation/Tabs/Tab.tsx +++ b/src/ui/Navigation/Tabs/Tab.tsx @@ -1,6 +1,7 @@ import React from "react"; import {ButtonGroup} from "@/components/ui/button-group.tsx"; import {Button} from "@/components/ui/button.tsx"; +import {useTranslation} from 'react-i18next'; import { Home, SeparatorVertical, @@ -37,6 +38,7 @@ export function Tab({ disableSplit = false, disableClose = false }: TabProps): React.ReactElement { + const {t} = useTranslation(); if (tabType === "home") { return ( {isServer ? : isFileManager ? : } - {title || (isServer ? 'Server' : isFileManager ? 'file_manager' : 'Terminal')} + {title || (isServer ? t('nav.serverStats') : isFileManager ? t('nav.fileManager') : t('nav.terminal'))} {canSplit && ( @@ -99,7 +101,7 @@ export function Tab({ onClick={onActivate} disabled={disableActivate} > - {title || "SSH Manager"} + {title || t('nav.sshManager')} - {title || "Admin"} + {title || t('nav.admin')} ([ - {id: 1, type: 'home', title: 'Home'} + {id: 1, type: 'home', title: t('nav.home')} ]); const [currentTab, setCurrentTab] = useState(1); const [allSplitScreenTab, setAllSplitScreenTab] = useState([]); const nextTabId = useRef(2); function computeUniqueTitle(tabType: Tab['type'], desiredTitle: string | undefined): string { - const defaultTitle = tabType === 'server' ? 'Server' : (tabType === 'file_manager' ? 'File Manager' : 'Terminal'); + const defaultTitle = tabType === 'server' ? t('nav.serverStats') : (tabType === 'file_manager' ? t('nav.fileManager') : t('nav.terminal')); const baseTitle = (desiredTitle || defaultTitle).trim(); const match = baseTitle.match(/^(.*) \((\d+)\)$/); const root = match ? match[1] : baseTitle; diff --git a/src/ui/Navigation/TopNavbar.tsx b/src/ui/Navigation/TopNavbar.tsx index d89f6cc2..50904763 100644 --- a/src/ui/Navigation/TopNavbar.tsx +++ b/src/ui/Navigation/TopNavbar.tsx @@ -13,6 +13,7 @@ import { import {Input} from "@/components/ui/input.tsx"; import {Checkbox} from "@/components/ui/checkbox.tsx"; import {Separator} from "@/components/ui/separator.tsx"; +import {useTranslation} from "react-i18next"; interface TopNavbarProps { isTopbarOpen: boolean; @@ -23,6 +24,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac const {state} = useSidebar(); const {tabs, currentTab, setCurrentTab, setSplitScreenTab, removeTab, allSplitScreenTab} = useTabs() as any; const leftPosition = state === "collapsed" ? "26px" : "264px"; + const {t} = useTranslation(); const [toolsSheetOpen, setToolsSheetOpen] = useState(false); const [isRecording, setIsRecording] = useState(false); @@ -267,7 +269,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac setToolsSheetOpen(true)} > @@ -325,13 +327,13 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac onClick={(e) => e.stopPropagation()} > - SSH Tools + {t('sshTools.title')} setToolsSheetOpen(false)} className="h-8 w-8 p-0 hover:bg-red-500 hover:text-white transition-colors flex items-center justify-center" - title="Close SSH Tools" + title={t('sshTools.closeTools')} > × @@ -340,7 +342,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac - Key Recording + {t('sshTools.keyRecording')} @@ -352,7 +354,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac className="flex-1" variant="outline" > - Start Key Recording + {t('sshTools.startKeyRecording')} ) : ( - Stop Key Recording + {t('sshTools.stopKeyRecording')} )} @@ -368,8 +370,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac {isRecording && ( <> - Select - terminals: + {t('sshTools.selectTerminals')} {terminalTabs.map(tab => ( - Type commands (all - keys supported): + {t('sshTools.typeCommands')} - Commands will be sent to {selectedTabIds.length} selected - terminal(s). + {t('sshTools.commandsWillBeSent', { count: selectedTabIds.length })} @@ -415,7 +414,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac - Settings + {t('sshTools.settings')} @@ -428,14 +427,14 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac htmlFor="enable-copy-paste" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white" > - Enable right‑click copy/paste + {t('sshTools.enableRightClickCopyPaste')} - Have ideas for what should come next for ssh tools? Share them on{" "} + {t('sshTools.shareIdeas')}{" "} (null); const [resetStep, setResetStep] = useState<"initiate" | "verify" | "newPassword">("initiate"); @@ -25,7 +28,6 @@ export function PasswordReset({userInfo}: PasswordResetProps) { const [confirmPassword, setConfirmPassword] = useState(""); const [tempToken, setTempToken] = useState(""); const [resetLoading, setResetLoading] = useState(false); - const [resetSuccess, setResetSuccess] = useState(false); async function handleInitiatePasswordReset() { setError(null); @@ -35,7 +37,7 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetStep("verify"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Failed to initiate password reset"); + setError(err?.response?.data?.error || err?.message || t('common.failedToInitiatePasswordReset')); } finally { setResetLoading(false); } @@ -48,7 +50,6 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setConfirmPassword(""); setTempToken(""); setError(null); - setResetSuccess(false); } async function handleVerifyResetCode() { @@ -60,7 +61,7 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetStep("newPassword"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to verify reset code"); + setError(err?.response?.data?.error || t('common.failedToVerifyResetCode')); } finally { setResetLoading(false); } @@ -71,13 +72,13 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetLoading(true); if (newPassword !== confirmPassword) { - setError("Passwords do not match"); + setError(t('common.passwordsDoNotMatch')); setResetLoading(false); return; } if (newPassword.length < 6) { - setError("Password must be at least 6 characters long"); + setError(t('common.passwordMinLength')); setResetLoading(false); return; } @@ -85,16 +86,10 @@ export function PasswordReset({userInfo}: PasswordResetProps) { try { await completePasswordReset(userInfo.username, tempToken, newPassword); - setResetStep("initiate"); - setResetCode(""); - setNewPassword(""); - setConfirmPassword(""); - setTempToken(""); - setError(null); - - setResetSuccess(true); + toast.success(t('common.passwordResetSuccess')); + resetPasswordState(); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to complete password reset"); + setError(err?.response?.data?.error || t('common.failedToCompletePasswordReset')); } finally { setResetLoading(false); } @@ -112,15 +107,15 @@ export function PasswordReset({userInfo}: PasswordResetProps) { - Password + {t('common.password')} - Change your account password + {t('common.changeAccountPassword')} <> - {resetStep === "initiate" && !resetSuccess && ( + {resetStep === "initiate" && ( <> - {resetLoading ? Spinner : "Send Reset Code"} + {resetLoading ? Spinner : t('common.sendResetCode')} @@ -138,12 +133,11 @@ export function PasswordReset({userInfo}: PasswordResetProps) { {resetStep === "verify" && ( <> - Enter the 6-digit code from the docker container logs for - user: {userInfo.username} + {t('common.enterSixDigitCode')} {userInfo.username} - Reset Code + {t('common.resetCode')} setResetCode(e.target.value.replace(/\D/g, ''))} disabled={resetLoading} - placeholder="000000" + placeholder={t('placeholders.enterCode')} /> - {resetLoading ? Spinner : "Verify Code"} + {resetLoading ? Spinner : t('common.verifyCode')} - Back + {t('common.back')} )} - {resetSuccess && ( - <> - - Success! - - Your password has been successfully reset! You can now log in - with your new password. - - - - )} - - {resetStep === "newPassword" && !resetSuccess && ( + {resetStep === "newPassword" && ( <> - Enter your new password for - user: {userInfo.username} + {t('common.enterNewPassword')} {userInfo.username} - New Password + {t('common.newPassword')} - Confirm Password + {t('common.confirmPassword')} - {resetLoading ? Spinner : "Reset Password"} + {resetLoading ? Spinner : t('common.resetPassword')} - Back + {t('common.back')} )} {error && ( - Error + {t('common.error')} {error} )} diff --git a/src/ui/User/TOTPSetup.tsx b/src/ui/User/TOTPSetup.tsx index 4bbd00d8..9239cdab 100644 --- a/src/ui/User/TOTPSetup.tsx +++ b/src/ui/User/TOTPSetup.tsx @@ -8,6 +8,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.t import { Shield, Copy, Download, AlertCircle, CheckCircle2 } from "lucide-react"; import { setupTOTP, enableTOTP, disableTOTP, generateBackupCodes } from "@/ui/main-axios.ts"; import { toast } from "sonner"; +import { useTranslation } from 'react-i18next'; interface TOTPSetupProps { isEnabled: boolean; @@ -15,6 +16,7 @@ interface TOTPSetupProps { } export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSetupProps) { + const {t} = useTranslation(); const [isEnabled, setIsEnabled] = useState(initialEnabled); const [isSettingUp, setIsSettingUp] = useState(false); const [setupStep, setSetupStep] = useState<"init" | "qr" | "verify" | "backup">("init"); @@ -55,7 +57,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet const response = await enableTOTP(verificationCode); setBackupCodes(response.backup_codes); setSetupStep("backup"); - toast.success("Two-factor authentication enabled successfully!"); + toast.success(t('auth.twoFactorEnabledSuccess')); } catch (err: any) { setError(err?.response?.data?.error || "Invalid verification code"); } finally { @@ -74,7 +76,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet setPassword(""); setDisableCode(""); onStatusChange?.(false); - toast.success("Two-factor authentication disabled"); + toast.success(t('auth.twoFactorDisabled')); } catch (err: any) { setError(err?.response?.data?.error || "Failed to disable TOTP"); } finally { @@ -88,7 +90,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet try { const response = await generateBackupCodes(password || undefined, disableCode || undefined); setBackupCodes(response.backup_codes); - toast.success("New backup codes generated"); + toast.success(t('auth.newBackupCodesGenerated')); } catch (err: any) { setError(err?.response?.data?.error || "Failed to generate backup codes"); } finally { @@ -98,7 +100,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet const copyToClipboard = (text: string, label: string) => { navigator.clipboard.writeText(text); - toast.success(`${label} copied to clipboard`); + toast.success(t('messages.copiedToClipboard', {item: label})); }; const downloadBackupCodes = () => { @@ -114,7 +116,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet a.download = 'termix-backup-codes.txt'; a.click(); URL.revokeObjectURL(url); - toast.success("Backup codes downloaded"); + toast.success(t('auth.backupCodesDownloaded')); }; const handleComplete = () => { @@ -131,50 +133,50 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Two-Factor Authentication + {t('auth.twoFactorTitle')} - Your account is protected with two-factor authentication + {t('auth.twoFactorProtected')} - Enabled + {t('common.enabled')} - Two-factor authentication is currently active on your account + {t('auth.twoFactorActive')} - Disable 2FA - Backup Codes + {t('auth.disable2FA')} + {t('auth.backupCodes')} - Warning + {t('common.warning')} - Disabling two-factor authentication will make your account less secure + {t('auth.disableTwoFactorWarning')} - Password or TOTP Code + {t('auth.passwordOrTotpCode')} setPassword(e.target.value)} /> - Or + {t('auth.or')} setDisableCode(e.target.value.replace(/\D/g, ''))} @@ -186,29 +188,29 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={handleDisable} disabled={loading || (!password && !disableCode)} > - Disable Two-Factor Authentication + {t('auth.disableTwoFactor')} - Generate new backup codes if you've lost your existing ones + {t('auth.generateNewBackupCodesText')} - Password or TOTP Code + {t('auth.passwordOrTotpCode')} setPassword(e.target.value)} /> - Or + {t('auth.or')} setDisableCode(e.target.value.replace(/\D/g, ''))} @@ -219,20 +221,20 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={handleGenerateNewBackupCodes} disabled={loading || (!password && !disableCode)} > - Generate New Backup Codes + {t('auth.generateNewBackupCodes')} {backupCodes.length > 0 && ( - Your Backup Codes + {t('auth.yourBackupCodes')} - Download + {t('auth.download')} @@ -248,7 +250,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet {error && ( - Error + {t('common.error')} {error} )} @@ -261,9 +263,9 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Set Up Two-Factor Authentication + {t('auth.setupTwoFactorTitle')} - Step 1: Scan the QR code with your authenticator app + {t('auth.step1ScanQR')} @@ -272,7 +274,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Manual Entry Code + {t('auth.manualEntryCode')} - If you can't scan the QR code, enter this code manually in your authenticator app + {t('auth.cannotScanQRText')} setSetupStep("verify")} className="w-full"> - Next: Verify Code + {t('auth.nextVerifyCode')} @@ -304,14 +306,14 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Verify Your Authenticator + {t('auth.verifyAuthenticator')} - Step 2: Enter the 6-digit code from your authenticator app + {t('auth.step2EnterCode')} - Verification Code + {t('auth.verificationCode')} - Error + {t('common.error')} {error} )} @@ -337,14 +339,14 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={() => setSetupStep("qr")} disabled={loading} > - Back + {t('auth.back')} - {loading ? "Verifying..." : "Verify and Enable"} + {loading ? t('interface.verifying') : t('auth.verifyAndEnable')} @@ -356,17 +358,17 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Save Your Backup Codes + {t('auth.saveBackupCodesTitle')} - Step 3: Store these codes in a safe place + {t('auth.step3StoreCodesSecurely')} - Important + {t('common.important')} - Save these backup codes in a secure location. You can use them to access your account if you lose your authenticator device. + {t('auth.importantBackupCodesText')} @@ -393,7 +395,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Complete Setup + {t('auth.completeSetup')} @@ -405,23 +407,23 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Two-Factor Authentication + {t('auth.twoFactorTitle')} - Add an extra layer of security to your account + {t('auth.addExtraSecurityLayer')} - Not Enabled + {t('common.notEnabled')} - Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app when signing in. + {t('auth.notEnabledText')} - {loading ? "Setting up..." : "Enable Two-Factor Authentication"} + {loading ? t('common.settingUp') : t('auth.enableTwoFactorButton')} {error && ( diff --git a/src/ui/User/UserProfile.tsx b/src/ui/User/UserProfile.tsx index 9a4bccc0..2f165472 100644 --- a/src/ui/User/UserProfile.tsx +++ b/src/ui/User/UserProfile.tsx @@ -10,12 +10,15 @@ import {TOTPSetup} from "@/ui/User/TOTPSetup.tsx"; import {getUserInfo} from "@/ui/main-axios.ts"; import {toast} from "sonner"; import {PasswordReset} from "@/ui/User/PasswordReset.tsx"; +import {useTranslation} from "react-i18next"; +import {LanguageSwitcher} from "@/components/LanguageSwitcher"; interface UserProfileProps { isTopbarOpen?: boolean; } export function UserProfile({isTopbarOpen = true}: UserProfileProps) { + const {t} = useTranslation(); const [userInfo, setUserInfo] = useState<{ username: string; is_admin: boolean; @@ -41,7 +44,7 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { totp_enabled: info.totp_enabled || false }); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to load user information"); + setError(err?.response?.data?.error || t('errors.loadFailed')); } finally { setLoading(false); } @@ -58,7 +61,7 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Loading user profile... + {t('common.loading')} @@ -70,8 +73,8 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Error - {error || "Failed to load user profile"} + {t('common.error')} + {error || t('errors.loadFailed')} ); @@ -84,20 +87,20 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { maxHeight: 'calc(100vh - 60px)' }}> - User Profile - Manage your account settings and security + {t('common.profile')} + {t('profile.description')} - Profile + {t('common.profile')} {!userInfo.is_oidc && ( - Security + {t('profile.security')} )} @@ -105,45 +108,55 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Account Information - Your account details and settings + {t('profile.accountInfo')} + {t('profile.description')} - Username + {t('common.username')} {userInfo.username} - Account Type + {t('profile.role')} - {userInfo.is_admin ? "Administrator" : "User"} + {userInfo.is_admin ? t('interface.administrator') : t('interface.user')} - Authentication Method + {t('profile.authMethod')} - {userInfo.is_oidc ? "External (OIDC)" : "Local"} + {userInfo.is_oidc ? t('profile.external') : t('profile.local')} - Two-Factor Authentication + {t('profile.twoFactorAuth')} {userInfo.is_oidc ? ( - Locked (OIDC Auth) + {t('auth.lockedOidcAuth')} ) : ( userInfo.totp_enabled ? ( - Enabled + {t('common.enabled')} ) : ( - Disabled + {t('common.disabled')} ) )} + + + + + {t('common.language')} + {t('profile.selectPreferredLanguage')} + + + + diff --git a/src/ui/main-axios.ts b/src/ui/main-axios.ts index 99627071..6fa29322 100644 --- a/src/ui/main-axios.ts +++ b/src/ui/main-axios.ts @@ -143,6 +143,7 @@ interface UserInfo { id: string; username: string; is_admin: boolean; + is_oidc: boolean; } interface UserCount { @@ -897,7 +898,7 @@ export async function setupTOTP(): Promise<{ secret: string; qr_code: string }> const response = await authApi.post('/users/totp/setup'); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'setup TOTP'); throw error; } } @@ -907,7 +908,7 @@ export async function enableTOTP(totp_code: string): Promise<{ message: string; const response = await authApi.post('/users/totp/enable', { totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'enable TOTP'); throw error; } } @@ -917,7 +918,7 @@ export async function disableTOTP(password?: string, totp_code?: string): Promis const response = await authApi.post('/users/totp/disable', { password, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'disable TOTP'); throw error; } } @@ -927,7 +928,7 @@ export async function verifyTOTPLogin(temp_token: string, totp_code: string): Pr const response = await authApi.post('/users/totp/verify-login', { temp_token, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'verify TOTP login'); throw error; } } @@ -937,7 +938,7 @@ export async function generateBackupCodes(password?: string, totp_code?: string) const response = await authApi.post('/users/totp/backup-codes', { password, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'generate backup codes'); throw error; } }
sudo yum install sshpass
sudo dnf install sshpass
brew + • {t('hosts.macos')} brew install hudochenkov/sshpass/sshpass - • Windows: Use WSL or consider SSH key authentication + • {t('hosts.windows')}
brew install hudochenkov/sshpass/sshpass
GatewayPorts - yes
AllowTcpForwarding - yes
PermitRootLogin - yes
/etc/ssh/sshd_config
sudo - systemctl restart sshd
- This tunnel will forward traffic from - port {form.watch(`tunnelConnections.${index}.sourcePort`) || '22'} on - the source machine (current connection details - in general tab) to - port {form.watch(`tunnelConnections.${index}.endpointPort`) || '224'} on - the endpoint machine. + {t('hosts.tunnelForwardDescription', { + sourcePort: form.watch(`tunnelConnections.${index}.sourcePort`) || '22', + endpointPort: form.watch(`tunnelConnections.${index}.endpointPort`) || '224' + })}
Loading hosts...
{t('hosts.loadingHosts')}
{error}
- You haven't added any SSH hosts yet. Click "Add Host" to get started. + {t('hosts.noHostsMessage')}
- {filteredAndSortedHosts.length} hosts + {t('hosts.hostsCount', { count: filteredAndSortedHosts.length })}
Import SSH Hosts from JSON
{t('hosts.importJsonTitle')}
- Upload a JSON file to bulk import multiple SSH hosts (max 100). + {t('hosts.importJsonDesc')}
- Have ideas for what should come next for server management? Share them on{" "} + {t('serverStats.feedbackMessage')}{" "} (function SSHTerminal( {hostConfig, isVisible, splitScreen = false}, ref ) { + const {t} = useTranslation(); const {instance: terminal, ref: xtermRef} = useXTerm(); const fitAddonRef = useRef(null); const webSocketRef = useRef(null); @@ -139,11 +141,11 @@ export const Terminal = forwardRef(function SSHTerminal( try { const msg = JSON.parse(event.data); if (msg.type === 'data') terminal.write(msg.data); - else if (msg.type === 'error') terminal.writeln(`\r\n[ERROR] ${msg.message}`); + else if (msg.type === 'error') terminal.writeln(`\r\n[${t('terminal.error')}] ${msg.message}`); else if (msg.type === 'connected') { } else if (msg.type === 'disconnected') { wasDisconnectedBySSH.current = true; - terminal.writeln(`\r\n[${msg.message || 'Disconnected'}]`); + terminal.writeln(`\r\n[${msg.message || t('terminal.disconnected')}]`); } } catch (error) { } @@ -151,12 +153,12 @@ export const Terminal = forwardRef(function SSHTerminal( ws.addEventListener('close', () => { if (!wasDisconnectedBySSH.current) { - terminal.writeln('\r\n[Connection closed]'); + terminal.writeln(`\r\n[${t('terminal.connectionClosed')}]`); } }); ws.addEventListener('error', () => { - terminal.writeln('\r\n[Connection error]'); + terminal.writeln(`\r\n[${t('terminal.connectionError')}]`); }); } diff --git a/src/ui/Apps/Tunnel/TunnelObject.tsx b/src/ui/Apps/Tunnel/TunnelObject.tsx index 8daf97b9..52105a53 100644 --- a/src/ui/Apps/Tunnel/TunnelObject.tsx +++ b/src/ui/Apps/Tunnel/TunnelObject.tsx @@ -2,6 +2,7 @@ import React from "react"; import {Button} from "@/components/ui/button.tsx"; import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx"; import {Separator} from "@/components/ui/separator.tsx"; +import {useTranslation} from 'react-i18next'; import { Loader2, Pin, @@ -87,6 +88,7 @@ export function TunnelObject({ compact = false, bare = false }: SSHTunnelObjectProps): React.ReactElement { + const {t} = useTranslation(); const getTunnelStatus = (tunnelIndex: number): TunnelStatus | undefined => { const tunnel = host.tunnelConnections[tunnelIndex]; @@ -97,7 +99,7 @@ export function TunnelObject({ const getTunnelStatusDisplay = (status: TunnelStatus | undefined) => { if (!status) return { icon: , - text: 'Unknown', + text: t('tunnels.unknown'), color: 'text-muted-foreground', bgColor: 'bg-muted/50', borderColor: 'border-border' @@ -109,7 +111,7 @@ export function TunnelObject({ case 'CONNECTED': return { icon: , - text: 'Connected', + text: t('tunnels.connected'), color: 'text-green-600 dark:text-green-400', bgColor: 'bg-green-500/10 dark:bg-green-400/10', borderColor: 'border-green-500/20 dark:border-green-400/20' @@ -117,7 +119,7 @@ export function TunnelObject({ case 'CONNECTING': return { icon: , - text: 'Connecting...', + text: t('tunnels.connecting'), color: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-500/10 dark:bg-blue-400/10', borderColor: 'border-blue-500/20 dark:border-blue-400/20' @@ -125,7 +127,7 @@ export function TunnelObject({ case 'DISCONNECTING': return { icon: , - text: 'Disconnecting...', + text: t('tunnels.disconnecting'), color: 'text-orange-600 dark:text-orange-400', bgColor: 'bg-orange-500/10 dark:bg-orange-400/10', borderColor: 'border-orange-500/20 dark:border-orange-400/20' @@ -133,7 +135,7 @@ export function TunnelObject({ case 'DISCONNECTED': return { icon: , - text: 'Disconnected', + text: t('tunnels.disconnected'), color: 'text-muted-foreground', bgColor: 'bg-muted/30', borderColor: 'border-border' @@ -149,7 +151,7 @@ export function TunnelObject({ case 'FAILED': return { icon: , - text: status.reason || 'Error', + text: status.reason || t('tunnels.error'), color: 'text-red-600 dark:text-red-400', bgColor: 'bg-red-500/10 dark:bg-red-400/10', borderColor: 'border-red-500/20 dark:border-red-400/20' @@ -193,7 +195,7 @@ export function TunnelObject({ - Port {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} + {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} {statusDisplay.text} @@ -212,7 +214,7 @@ export function TunnelObject({ className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs" > - Disconnect + {t('tunnels.disconnect')} ) : isRetrying || isWaiting ? ( @@ -223,7 +225,7 @@ export function TunnelObject({ className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs" > - Cancel + {t('tunnels.cancel')} ) : ( - Connect + {t('tunnels.connect')} )} @@ -246,7 +248,7 @@ export function TunnelObject({ className="h-7 px-2 text-muted-foreground border-border text-xs" > - {isConnected ? 'Disconnecting...' : isRetrying || isWaiting ? 'Canceling...' : 'Connecting...'} + {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')} )} @@ -255,13 +257,13 @@ export function TunnelObject({ {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && ( - Error: + {t('tunnels.error')}: {status.reason} {status.reason && status.reason.includes('Max retries exhausted') && ( <> - Check your Docker logs for the error reason, join the Discord or @@ -280,12 +282,12 @@ export function TunnelObject({ - {statusValue === 'WAITING' ? 'Waiting for retry' : 'Retrying connection'} + {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')} - Attempt {status.retryCount} of {status.maxRetries} + {t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })} {status.nextRetryIn && ( - • Next retry in {status.nextRetryIn} seconds + • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })} )} @@ -297,7 +299,7 @@ export function TunnelObject({ ) : ( - No tunnel connections configured + {t('tunnels.noTunnelConnections')} )} @@ -346,7 +348,7 @@ export function TunnelObject({ {!compact && ( - Tunnel Connections ({host.tunnelConnections.length}) + {t('tunnels.tunnelConnections')} ({host.tunnelConnections.length}) )} {host.tunnelConnections && host.tunnelConnections.length > 0 ? ( @@ -373,7 +375,7 @@ export function TunnelObject({ - Port {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} + {t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort} {statusDisplay.text} @@ -392,7 +394,7 @@ export function TunnelObject({ className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs" > - Disconnect + {t('tunnels.disconnect')} ) : isRetrying || isWaiting ? ( @@ -403,7 +405,7 @@ export function TunnelObject({ className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs" > - Cancel + {t('tunnels.cancel')} ) : ( - Connect + {t('tunnels.connect')} )} @@ -427,7 +429,7 @@ export function TunnelObject({ className="h-7 px-2 text-muted-foreground border-border text-xs" > - {isConnected ? 'Disconnecting...' : isRetrying || isWaiting ? 'Canceling...' : 'Connecting...'} + {isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')} )} @@ -436,13 +438,13 @@ export function TunnelObject({ {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && ( - Error: + {t('tunnels.error')}: {status.reason} {status.reason && status.reason.includes('Max retries exhausted') && ( <> - Check your Docker logs for the error reason, join the Discord or @@ -461,12 +463,12 @@ export function TunnelObject({ - {statusValue === 'WAITING' ? 'Waiting for retry' : 'Retrying connection'} + {statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')} - Attempt {status.retryCount} of {status.maxRetries} + {t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })} {status.nextRetryIn && ( - • Next retry in {status.nextRetryIn} seconds + • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })} )} @@ -478,7 +480,7 @@ export function TunnelObject({ ) : ( - No tunnel connections configured + {t('tunnels.noTunnelConnections')} )} diff --git a/src/ui/Apps/Tunnel/TunnelViewer.tsx b/src/ui/Apps/Tunnel/TunnelViewer.tsx index 337f3b24..dcec9123 100644 --- a/src/ui/Apps/Tunnel/TunnelViewer.tsx +++ b/src/ui/Apps/Tunnel/TunnelViewer.tsx @@ -1,5 +1,6 @@ import React from "react"; import {TunnelObject} from "./TunnelObject.tsx"; +import {useTranslation} from 'react-i18next'; interface TunnelConnection { sourcePort: number; @@ -52,15 +53,15 @@ export function TunnelViewer({ tunnelActions = {}, onTunnelAction }: SSHTunnelViewerProps): React.ReactElement { + const {t} = useTranslation(); const activeHost: SSHHost | undefined = Array.isArray(hosts) && hosts.length > 0 ? hosts[0] : undefined; if (!activeHost || !activeHost.tunnelConnections || activeHost.tunnelConnections.length === 0) { return ( - No SSH Tunnels + {t('tunnels.noSshTunnels')} - Create your first SSH tunnel to get started. Use the SSH Manager to add hosts with tunnel - connections. + {t('tunnels.createFirstTunnelMessage')} ); @@ -69,7 +70,7 @@ export function TunnelViewer({ return ( - SSH Tunnels + {t('tunnels.title')} void; @@ -32,6 +33,7 @@ export function Homepage({ onAuthSuccess, isTopbarOpen = true }: HomepageProps): React.ReactElement { + const {t} = useTranslation(); const [loggedIn, setLoggedIn] = useState(isAuthenticated); const [isAdmin, setIsAdmin] = useState(false); const [username, setUsername] = useState(null); @@ -70,13 +72,20 @@ export function Homepage({ } }, [isAuthenticated]); + const topOffset = isTopbarOpen ? 66 : 0; + const topPadding = isTopbarOpen ? 66 : 0; + return ( + className="w-full min-h-svh relative transition-[padding-top] duration-300 ease-in-out" + style={{ paddingTop: `${topPadding}px` }}> {!loggedIn ? ( - + ) : ( - - + + - Logged in! + {t('homepage.loggedInTitle')} - You are logged in! Use the sidebar to access all available tools. To get started, - create an SSH Host in the SSH Manager tab. Once created, you can connect to that - host using the other apps in the sidebar. + {t('homepage.loggedInMessage')} diff --git a/src/ui/Homepage/HomepageAlertCard.tsx b/src/ui/Homepage/HomepageAlertCard.tsx index d2f34722..e2f774fa 100644 --- a/src/ui/Homepage/HomepageAlertCard.tsx +++ b/src/ui/Homepage/HomepageAlertCard.tsx @@ -3,6 +3,7 @@ import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components import {Button} from "@/components/ui/button.tsx"; import {Badge} from "@/components/ui/badge.tsx"; import {X, ExternalLink, AlertTriangle, Info, CheckCircle, AlertCircle} from "lucide-react"; +import {useTranslation} from "react-i18next"; interface TermixAlert { id: string; @@ -64,6 +65,8 @@ const getTypeBadgeVariant = (type?: string) => { }; export function HomepageAlertCard({alert, onDismiss, onClose}: AlertCardProps): React.ReactElement { + const {t} = useTranslation(); + if (!alert) { return null; } @@ -79,10 +82,10 @@ export function HomepageAlertCard({alert, onDismiss, onClose}: AlertCardProps): const diffTime = expiryDate.getTime() - now.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); - if (diffDays < 0) return 'Expired'; - if (diffDays === 0) return 'Expires today'; - if (diffDays === 1) return 'Expires tomorrow'; - return `Expires in ${diffDays} days`; + if (diffDays < 0) return t('common.expired'); + if (diffDays === 0) return t('common.expiresToday'); + if (diffDays === 1) return t('common.expiresTomorrow'); + return t('common.expiresInDays', {days: diffDays}); }; return ( diff --git a/src/ui/Homepage/HomepageAlertManager.tsx b/src/ui/Homepage/HomepageAlertManager.tsx index 4aa8dd70..6e68b941 100644 --- a/src/ui/Homepage/HomepageAlertManager.tsx +++ b/src/ui/Homepage/HomepageAlertManager.tsx @@ -2,6 +2,7 @@ import React, {useEffect, useState} from "react"; import {HomepageAlertCard} from "./HomepageAlertCard.tsx"; import {Button} from "@/components/ui/button.tsx"; import { getUserAlerts, dismissAlert } from "@/ui/main-axios.ts"; +import {useTranslation} from "react-i18next"; interface TermixAlert { id: string; @@ -20,6 +21,7 @@ interface AlertManagerProps { } export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): React.ReactElement { + const {t} = useTranslation(); const [alerts, setAlerts] = useState([]); const [currentAlertIndex, setCurrentAlertIndex] = useState(0); const [loading, setLoading] = useState(false); @@ -57,7 +59,7 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea setAlerts(sortedAlerts); setCurrentAlertIndex(0); } catch (err) { - setError('Failed to load alerts'); + setError(t('homepage.failedToLoadAlerts')); } finally { setLoading(false); } @@ -81,7 +83,7 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea return prevIndex; }); } catch (err) { - setError('Failed to dismiss alert'); + setError(t('homepage.failedToDismissAlert')); } }; diff --git a/src/ui/Homepage/HomepageAuth.tsx b/src/ui/Homepage/HomepageAuth.tsx index 51212b33..5b1ca837 100644 --- a/src/ui/Homepage/HomepageAuth.tsx +++ b/src/ui/Homepage/HomepageAuth.tsx @@ -4,6 +4,8 @@ import {Button} from "../../components/ui/button.tsx"; import {Input} from "../../components/ui/input.tsx"; import {Label} from "../../components/ui/label.tsx"; import {Alert, AlertTitle, AlertDescription} from "../../components/ui/alert.tsx"; +import {useTranslation} from "react-i18next"; +import {LanguageSwitcher} from "../../components/LanguageSwitcher"; import { registerUser, loginUser, @@ -55,6 +57,7 @@ export function HomepageAuth({ onAuthSuccess, ...props }: HomepageAuthProps) { + const {t} = useTranslation(); const [tab, setTab] = useState<"login" | "signup" | "external" | "reset">("login"); const [localUsername, setLocalUsername] = useState(""); const [password, setPassword] = useState(""); @@ -116,7 +119,7 @@ export function HomepageAuth({ } setDbError(null); }).catch(() => { - setDbError("Could not connect to the database. Please try again later."); + setDbError(t('errors.databaseConnection')); }); }, [setDbError]); @@ -126,7 +129,7 @@ export function HomepageAuth({ setLoading(true); if (!localUsername.trim()) { - setError("Username is required"); + setError(t('errors.requiredField')); setLoading(false); return; } @@ -137,12 +140,12 @@ export function HomepageAuth({ res = await loginUser(localUsername, password); } else { if (password !== signupConfirmPassword) { - setError("Passwords do not match"); + setError(t('errors.passwordMismatch')); setLoading(false); return; } if (password.length < 6) { - setError("Password must be at least 6 characters long"); + setError(t('errors.minLength', {min: 6})); setLoading(false); return; } @@ -159,7 +162,7 @@ export function HomepageAuth({ } if (!res || !res.token) { - throw new Error('No token received from login'); + throw new Error(t('errors.noTokenReceived')); } setCookie("jwt", res.token); @@ -186,7 +189,7 @@ export function HomepageAuth({ setTotpCode(""); setTotpTempToken(""); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Unknown error"); + setError(err?.response?.data?.error || err?.message || t('errors.unknownError')); setInternalLoggedIn(false); setLoggedIn(false); setIsAdmin(false); @@ -194,7 +197,7 @@ export function HomepageAuth({ setUserId(null); setCookie("jwt", "", -1); if (err?.response?.data?.error?.includes("Database")) { - setDbError("Could not connect to the database. Please try again later."); + setDbError(t('errors.databaseConnection')); } else { setDbError(null); } @@ -211,7 +214,7 @@ export function HomepageAuth({ setResetStep("verify"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Failed to initiate password reset"); + setError(err?.response?.data?.error || err?.message || t('errors.failedPasswordReset')); } finally { setResetLoading(false); } @@ -226,7 +229,7 @@ export function HomepageAuth({ setResetStep("newPassword"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to verify reset code"); + setError(err?.response?.data?.error || t('errors.failedVerifyCode')); } finally { setResetLoading(false); } @@ -237,13 +240,13 @@ export function HomepageAuth({ setResetLoading(true); if (newPassword !== confirmPassword) { - setError("Passwords do not match"); + setError(t('errors.passwordMismatch')); setResetLoading(false); return; } if (newPassword.length < 6) { - setError("Password must be at least 6 characters long"); + setError(t('errors.minLength', {min: 6})); setResetLoading(false); return; } @@ -260,7 +263,7 @@ export function HomepageAuth({ setResetSuccess(true); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to complete password reset"); + setError(err?.response?.data?.error || t('errors.failedCompleteReset')); } finally { setResetLoading(false); } @@ -285,7 +288,7 @@ export function HomepageAuth({ async function handleTOTPVerification() { if (totpCode.length !== 6) { - setError("Please enter a 6-digit code"); + setError(t('auth.enterCode')); return; } @@ -296,7 +299,7 @@ export function HomepageAuth({ const res = await verifyTOTPLogin(totpTempToken, totpCode); if (!res || !res.token) { - throw new Error('No token received from TOTP verification'); + throw new Error(t('errors.noTokenReceived')); } setCookie("jwt", res.token); @@ -318,7 +321,7 @@ export function HomepageAuth({ setTotpCode(""); setTotpTempToken(""); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Invalid TOTP code"); + setError(err?.response?.data?.error || err?.message || t('errors.invalidTotpCode')); } finally { setTotpLoading(false); } @@ -332,12 +335,12 @@ export function HomepageAuth({ const {auth_url: authUrl} = authResponse; if (!authUrl || authUrl === 'undefined') { - throw new Error('Invalid authorization URL received from backend'); + throw new Error(t('errors.invalidAuthUrl')); } window.location.replace(authUrl); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Failed to start OIDC login"); + setError(err?.response?.data?.error || err?.message || t('errors.failedOidcLogin')); setOidcLoading(false); } } @@ -349,7 +352,7 @@ export function HomepageAuth({ const error = urlParams.get('error'); if (error) { - setError(`OIDC authentication failed: ${error}`); + setError(`${t('errors.oidcAuthFailed')}: ${error}`); setOidcLoading(false); window.history.replaceState({}, document.title, window.location.pathname); return; @@ -377,7 +380,7 @@ export function HomepageAuth({ window.history.replaceState({}, document.title, window.location.pathname); }) .catch(err => { - setError("Failed to get user info after OIDC login"); + setError(t('errors.failedUserInfo')); setInternalLoggedIn(false); setLoggedIn(false); setIsAdmin(false); @@ -412,39 +415,37 @@ export function HomepageAuth({ )} {firstUser && !dbError && !internalLoggedIn && ( - First User + {t('auth.firstUser')} - You are the first user and will be made an admin. You can view admin settings in the sidebar - user dropdown. If you think this is a mistake, check the docker logs, or create a{" "} + {t('auth.firstUserMessage')}{" "} - GitHub issue + GitHub Issue . )} {!registrationAllowed && !internalLoggedIn && ( - Registration Disabled + {t('auth.registerTitle')} - New account registration is currently disabled by an admin. Please log in or contact an - administrator. + {t('messages.registrationDisabled')} )} {totpRequired && ( - Two-Factor Authentication - Enter the 6-digit code from your authenticator app + {t('auth.twoFactorAuth')} + {t('auth.enterCode')} - Authentication Code + {t('auth.verifyCode')} - Or enter a backup code if you don't have access to your authenticator + {t('auth.backupCode')} @@ -467,7 +468,7 @@ export function HomepageAuth({ disabled={totpLoading || totpCode.length < 6} onClick={handleTOTPVerification} > - {totpLoading ? Spinner : "Verify"} + {totpLoading ? Spinner : t('auth.verifyCode')} - Cancel + {t('common.cancel')} )} @@ -506,7 +507,7 @@ export function HomepageAuth({ aria-selected={tab === "login"} disabled={loading || firstUser} > - Login + {t('common.login')} - Sign Up + {t('common.register')} {oidcConfigured && ( - External + {t('auth.external')} )} - {tab === "login" ? "Login to your account" : - tab === "signup" ? "Create a new account" : - tab === "external" ? "Login with external provider" : - "Reset your password"} + {tab === "login" ? t('auth.loginTitle') : + tab === "signup" ? t('auth.registerTitle') : + tab === "external" ? t('auth.loginWithExternal') : + t('auth.forgotPassword')} @@ -561,7 +562,7 @@ export function HomepageAuth({ {tab === "external" && ( <> - Login using your configured external identity provider + {t('auth.loginWithExternalDesc')} - {oidcLoading ? Spinner : "Login with External Provider"} + {oidcLoading ? Spinner : t('auth.loginWithExternal')} )} @@ -578,12 +579,11 @@ export function HomepageAuth({ {resetStep === "initiate" && ( <> - Enter your username to receive a password reset code. The code - will be logged in the docker container logs. + {t('auth.resetCodeDesc')} - Username + {t('common.username')} - {resetLoading ? Spinner : "Send Reset Code"} + {resetLoading ? Spinner : t('auth.sendResetCode')} @@ -609,12 +609,11 @@ export function HomepageAuth({ {resetStep === "verify" && ( <>o - Enter the 6-digit code from the docker container logs for - user: {localUsername} + {t('auth.enterResetCode')} {localUsername} - Reset Code + {t('auth.resetCode')} - {resetLoading ? Spinner : "Verify Code"} + {resetLoading ? Spinner : t('auth.verifyCodeButton')} - Back + {t('common.back')} @@ -654,10 +653,9 @@ export function HomepageAuth({ {resetSuccess && ( <> - Success! + {t('auth.passwordResetSuccess')} - Your password has been successfully reset! You can now log in - with your new password. + {t('auth.passwordResetSuccessDesc')} - Go to Login + {t('auth.goToLogin')} )} @@ -676,12 +674,11 @@ export function HomepageAuth({ {resetStep === "newPassword" && !resetSuccess && ( <> - Enter your new password for - user: {localUsername} + {t('auth.enterNewPassword')} {localUsername} - New Password + {t('auth.newPassword')} - Confirm Password + {t('auth.confirmNewPassword')} - {resetLoading ? Spinner : "Reset Password"} + {resetLoading ? Spinner : t('auth.resetPasswordButton')} - Back + {t('common.back')} @@ -736,7 +733,7 @@ export function HomepageAuth({ ) : ( - Username + {t('common.username')} - Password + {t('common.password')} setPassword(e.target.value)} disabled={loading || internalLoggedIn}/> {tab === "signup" && ( - Confirm Password + {t('common.confirmPassword')} - {loading ? Spinner : (tab === "login" ? "Login" : "Sign Up")} + {loading ? Spinner : (tab === "login" ? t('common.login') : t('auth.signUp'))} {tab === "login" && ( - Reset Password + {t('auth.resetPasswordButton')} )} )} + + + + + {t('common.language')} + + + + )} {error && ( diff --git a/src/ui/Homepage/HompageUpdateLog.tsx b/src/ui/Homepage/HompageUpdateLog.tsx index c95f5bb0..667eed78 100644 --- a/src/ui/Homepage/HompageUpdateLog.tsx +++ b/src/ui/Homepage/HompageUpdateLog.tsx @@ -3,6 +3,7 @@ import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx"; import {Button} from "@/components/ui/button.tsx"; import {Separator} from "@/components/ui/separator.tsx"; import { getReleasesRSS, getVersionInfo } from "@/ui/main-axios.ts"; +import {useTranslation} from "react-i18next"; interface HomepageUpdateLogProps extends React.ComponentProps<"div"> { loggedIn: boolean; @@ -51,6 +52,7 @@ interface VersionResponse { } export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { + const {t} = useTranslation(); const [releases, setReleases] = useState(null); const [versionInfo, setVersionInfo] = useState(null); const [loading, setLoading] = useState(false); @@ -69,7 +71,7 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { setError(null); }) .catch(err => { - setError('Failed to fetch update information'); + setError(t('common.failedToFetchUpdateInfo')); }) .finally(() => setLoading(false)); } @@ -90,15 +92,15 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { return ( - Updates & Releases + {t('common.updatesAndReleases')} {versionInfo && versionInfo.status === 'requires_update' && ( - Update Available + {t('common.updateAvailable')} - A new version ({versionInfo.version}) is available. + {t('common.newVersionAvailable', { version: versionInfo.version })} )} @@ -117,7 +119,7 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { {error && ( - Error + {t('common.error')} {error} )} @@ -135,7 +137,7 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { {release.isPrerelease && ( - Pre-release + {t('common.preRelease')} )} @@ -158,9 +160,9 @@ export function HomepageUpdateLog({loggedIn}: HomepageUpdateLogProps) { {releases && releases.items.length === 0 && !loading && ( - No Releases + {t('common.noReleases')} - No releases found. + {t('common.noReleasesFound')} )} diff --git a/src/ui/Navigation/LeftSidebar.tsx b/src/ui/Navigation/LeftSidebar.tsx index 9ddcec72..cdc25b26 100644 --- a/src/ui/Navigation/LeftSidebar.tsx +++ b/src/ui/Navigation/LeftSidebar.tsx @@ -5,6 +5,7 @@ import { File, Hammer, ChevronUp, User2, HardDrive, Trash2, Users, Shield, Settings, Menu, ChevronRight } from "lucide-react"; +import { useTranslation } from 'react-i18next'; import { Sidebar, @@ -49,14 +50,7 @@ import {Card} from "@/components/ui/card.tsx"; import {FolderCard} from "@/ui/Navigation/Hosts/FolderCard.tsx"; import {getSSHHosts} from "@/ui/main-axios.ts"; import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx"; -import { - getOIDCConfig, - getUserList, - makeUserAdmin, - removeAdminStatus, - deleteUser, - deleteAccount -} from "@/ui/main-axios.ts"; +import { deleteAccount } from "@/ui/main-axios.ts"; interface SSHHost { id: number; @@ -112,26 +106,12 @@ export function LeftSidebar({ username, children, }: SidebarProps): React.ReactElement { - const [adminSheetOpen, setAdminSheetOpen] = React.useState(false); - + const { t } = useTranslation(); + const [deleteAccountOpen, setDeleteAccountOpen] = React.useState(false); const [deletePassword, setDeletePassword] = React.useState(""); const [deleteLoading, setDeleteLoading] = React.useState(false); const [deleteError, setDeleteError] = React.useState(null); - const [adminCount, setAdminCount] = React.useState(0); - - const [users, setUsers] = React.useState>([]); - const [newAdminUsername, setNewAdminUsername] = React.useState(""); - const [usersLoading, setUsersLoading] = React.useState(false); - const [makeAdminLoading, setMakeAdminLoading] = React.useState(false); - const [makeAdminError, setMakeAdminError] = React.useState(null); - const [makeAdminSuccess, setMakeAdminSuccess] = React.useState(null); - const [oidcConfig, setOidcConfig] = React.useState(null); const [isSidebarOpen, setIsSidebarOpen] = useState(true); @@ -140,7 +120,7 @@ export function LeftSidebar({ const sshManagerTab = tabList.find((t) => t.type === 'ssh_manager'); const openSshManagerTab = () => { if (sshManagerTab || isSplitScreenActive) return; - const id = addTab({type: 'ssh_manager', title: 'SSH Manager'} as any); + const id = addTab({type: 'ssh_manager'} as any); setCurrentTab(id); }; const adminTab = tabList.find((t) => t.type === 'admin'); @@ -150,7 +130,7 @@ export function LeftSidebar({ setCurrentTab(adminTab.id); return; } - const id = addTab({type: 'admin', title: 'Admin'} as any); + const id = addTab({type: 'admin'} as any); setCurrentTab(id); }; @@ -161,33 +141,7 @@ export function LeftSidebar({ const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); - React.useEffect(() => { - if (adminSheetOpen) { - const jwt = getCookie("jwt"); - if (jwt && isAdmin) { - getOIDCConfig().then(res => { - if (res) { - setOidcConfig(res); - } - }).catch((error) => { - }); - fetchUsers(); - } - } else { - const jwt = getCookie("jwt"); - if (jwt && isAdmin) { - fetchAdminCount(); - } - } - }, [adminSheetOpen, isAdmin]); - React.useEffect(() => { - if (!isAdmin) { - setAdminSheetOpen(false); - setUsers([]); - setAdminCount(0); - } - }, [isAdmin]); const fetchHosts = React.useCallback(async () => { try { @@ -232,7 +186,7 @@ export function LeftSidebar({ }, 50); } } catch (err: any) { - setHostsError('Failed to load hosts'); + setHostsError(t('leftSidebar.failedToLoadHosts')); } }, []); @@ -275,7 +229,7 @@ export function LeftSidebar({ const hostsByFolder = React.useMemo(() => { const map: Record = {}; filteredHosts.forEach(h => { - const folder = h.folder && h.folder.trim() ? h.folder : 'No Folder'; + const folder = h.folder && h.folder.trim() ? h.folder : t('leftSidebar.noFolder'); if (!map[folder]) map[folder] = []; map[folder].push(h); }); @@ -285,8 +239,8 @@ export function LeftSidebar({ const sortedFolders = React.useMemo(() => { const folders = Object.keys(hostsByFolder); folders.sort((a, b) => { - if (a === 'No Folder') return -1; - if (b === 'No Folder') return 1; + if (a === t('leftSidebar.noFolder')) return -1; + if (b === t('leftSidebar.noFolder')) return 1; return a.localeCompare(b); }); return folders; @@ -304,7 +258,7 @@ export function LeftSidebar({ setDeleteError(null); if (!deletePassword.trim()) { - setDeleteError("Password is required"); + setDeleteError(t('leftSidebar.passwordRequired')); setDeleteLoading(false); return; } @@ -315,101 +269,11 @@ export function LeftSidebar({ handleLogout(); } catch (err: any) { - setDeleteError(err?.response?.data?.error || "Failed to delete account"); + setDeleteError(err?.response?.data?.error || t('leftSidebar.failedToDeleteAccount')); setDeleteLoading(false); } }; - const fetchUsers = async () => { - const jwt = getCookie("jwt"); - - if (!jwt || !isAdmin) { - return; - } - - setUsersLoading(true); - try { - const response = await getUserList(); - setUsers(response.users); - - const adminUsers = response.users.filter((user: any) => user.is_admin); - setAdminCount(adminUsers.length); - } catch (err: any) { - } finally { - setUsersLoading(false); - } - }; - - const fetchAdminCount = async () => { - const jwt = getCookie("jwt"); - - if (!jwt || !isAdmin) { - return; - } - - try { - const response = await getUserList(); - const adminUsers = response.users.filter((user: any) => user.is_admin); - setAdminCount(adminUsers.length); - } catch (err: any) { - } - }; - - const makeUserAdmin = async (e: React.FormEvent) => { - e.preventDefault(); - if (!newAdminUsername.trim()) return; - - if (!isAdmin) { - return; - } - - setMakeAdminLoading(true); - setMakeAdminError(null); - setMakeAdminSuccess(null); - - const jwt = getCookie("jwt"); - try { - await makeUserAdmin(newAdminUsername.trim()); - setMakeAdminSuccess(`User ${newAdminUsername} is now an admin`); - setNewAdminUsername(""); - fetchUsers(); - } catch (err: any) { - setMakeAdminError(err?.response?.data?.error || "Failed to make user admin"); - } finally { - setMakeAdminLoading(false); - } - }; - - const removeAdminStatus = async (username: string) => { - if (!confirm(`Are you sure you want to remove admin status from ${username}?`)) return; - - if (!isAdmin) { - return; - } - - const jwt = getCookie("jwt"); - try { - await removeAdminStatus(username); - fetchUsers(); - } catch (err: any) { - } - }; - - const deleteUser = async (username: string) => { - if (!confirm(`Are you sure you want to delete user ${username}? This action cannot be undone.`)) return; - - if (!isAdmin) { - return; - } - - const jwt = getCookie("jwt"); - try { - await deleteUser(username); - fetchUsers(); - } catch (err: any) { - } - }; - return ( @@ -421,6 +285,7 @@ export function LeftSidebar({ variant="outline" onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="w-[28px] h-[28px] absolute right-5" + title={t('common.toggleSidebar')} > @@ -431,9 +296,9 @@ export function LeftSidebar({ + title={sshManagerTab ? t('interface.sshManagerAlreadyOpen') : isSplitScreenActive ? t('interface.disabledDuringSplitScreen') : undefined}> - Host Manager + {t('nav.hostManager')} @@ -442,7 +307,7 @@ export function LeftSidebar({ setSearch(e.target.value)} - placeholder="Search hosts by any info..." + placeholder={t('placeholders.searchHostsAny')} className="w-full h-8 text-sm border-2 !bg-[#222225] border-[#303032] rounded-md" autoComplete="off" /> @@ -452,7 +317,7 @@ export function LeftSidebar({ - {hostsError} + {t('leftSidebar.failedToLoadHosts')} )} @@ -460,7 +325,7 @@ export function LeftSidebar({ {hostsLoading && ( - Loading hosts... + {t('hosts.loadingHosts')} )} @@ -487,7 +352,7 @@ export function LeftSidebar({ style={{width: '100%'}} disabled={disabled} > - {username ? username : 'Signed out'} + {username ? username : t('common.logout')} @@ -506,10 +371,10 @@ export function LeftSidebar({ setCurrentTab(profileTab.id); return; } - const id = addTab({type: 'profile', title: 'Profile'} as any); + const id = addTab({type: 'profile', title: t('profile.title')} as any); setCurrentTab(id); }}> - Profile & Security + {t('profile.title')} {isAdmin && ( { if (isAdmin) openAdminTab(); }}> - Admin Settings + {t('admin.title')} )} - Sign out + {t('common.logout')} setDeleteAccountOpen(true)} - disabled={isAdmin && adminCount <= 1} > - - Delete Account - {isAdmin && adminCount <= 1 && " (Last Admin)"} + + {t('leftSidebar.deleteAccount')} @@ -586,7 +448,7 @@ export function LeftSidebar({ onClick={(e) => e.stopPropagation()} > - Delete Account + {t('leftSidebar.deleteAccount')} × @@ -605,48 +467,33 @@ export function LeftSidebar({ - This action cannot be undone. This will permanently delete your account and all - associated data. + {t('leftSidebar.deleteAccountWarning')} - Warning + {t('common.warning')} - Deleting your account will remove all your data including SSH hosts, - configurations, and settings. - This action is irreversible. + {t('leftSidebar.deleteAccountWarningDetails')} {deleteError && ( - Error + {t('common.error')} {deleteError} )} - {isAdmin && adminCount <= 1 && ( - - Cannot Delete Account - - You are the last admin user. You cannot delete your account as this - would leave the system without any administrators. - Please make another user an admin first, or contact system support. - - - )} - - Confirm Password + {t('leftSidebar.confirmPassword')} setDeletePassword(e.target.value)} - placeholder="Enter your password to confirm" + placeholder={t('placeholders.confirmPassword')} required - disabled={isAdmin && adminCount <= 1} /> @@ -655,9 +502,9 @@ export function LeftSidebar({ type="submit" variant="destructive" className="flex-1" - disabled={deleteLoading || !deletePassword.trim() || (isAdmin && adminCount <= 1)} + disabled={deleteLoading || !deletePassword.trim()} > - {deleteLoading ? "Deleting..." : "Delete Account"} + {deleteLoading ? t('leftSidebar.deleting') : t('leftSidebar.deleteAccount')} - Cancel + {t('leftSidebar.cancel')} diff --git a/src/ui/Navigation/Tabs/Tab.tsx b/src/ui/Navigation/Tabs/Tab.tsx index 217aeb33..5b6a9d9d 100644 --- a/src/ui/Navigation/Tabs/Tab.tsx +++ b/src/ui/Navigation/Tabs/Tab.tsx @@ -1,6 +1,7 @@ import React from "react"; import {ButtonGroup} from "@/components/ui/button-group.tsx"; import {Button} from "@/components/ui/button.tsx"; +import {useTranslation} from 'react-i18next'; import { Home, SeparatorVertical, @@ -37,6 +38,7 @@ export function Tab({ disableSplit = false, disableClose = false }: TabProps): React.ReactElement { + const {t} = useTranslation(); if (tabType === "home") { return ( {isServer ? : isFileManager ? : } - {title || (isServer ? 'Server' : isFileManager ? 'file_manager' : 'Terminal')} + {title || (isServer ? t('nav.serverStats') : isFileManager ? t('nav.fileManager') : t('nav.terminal'))} {canSplit && ( @@ -99,7 +101,7 @@ export function Tab({ onClick={onActivate} disabled={disableActivate} > - {title || "SSH Manager"} + {title || t('nav.sshManager')} - {title || "Admin"} + {title || t('nav.admin')} ([ - {id: 1, type: 'home', title: 'Home'} + {id: 1, type: 'home', title: t('nav.home')} ]); const [currentTab, setCurrentTab] = useState(1); const [allSplitScreenTab, setAllSplitScreenTab] = useState([]); const nextTabId = useRef(2); function computeUniqueTitle(tabType: Tab['type'], desiredTitle: string | undefined): string { - const defaultTitle = tabType === 'server' ? 'Server' : (tabType === 'file_manager' ? 'File Manager' : 'Terminal'); + const defaultTitle = tabType === 'server' ? t('nav.serverStats') : (tabType === 'file_manager' ? t('nav.fileManager') : t('nav.terminal')); const baseTitle = (desiredTitle || defaultTitle).trim(); const match = baseTitle.match(/^(.*) \((\d+)\)$/); const root = match ? match[1] : baseTitle; diff --git a/src/ui/Navigation/TopNavbar.tsx b/src/ui/Navigation/TopNavbar.tsx index d89f6cc2..50904763 100644 --- a/src/ui/Navigation/TopNavbar.tsx +++ b/src/ui/Navigation/TopNavbar.tsx @@ -13,6 +13,7 @@ import { import {Input} from "@/components/ui/input.tsx"; import {Checkbox} from "@/components/ui/checkbox.tsx"; import {Separator} from "@/components/ui/separator.tsx"; +import {useTranslation} from "react-i18next"; interface TopNavbarProps { isTopbarOpen: boolean; @@ -23,6 +24,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac const {state} = useSidebar(); const {tabs, currentTab, setCurrentTab, setSplitScreenTab, removeTab, allSplitScreenTab} = useTabs() as any; const leftPosition = state === "collapsed" ? "26px" : "264px"; + const {t} = useTranslation(); const [toolsSheetOpen, setToolsSheetOpen] = useState(false); const [isRecording, setIsRecording] = useState(false); @@ -267,7 +269,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac setToolsSheetOpen(true)} > @@ -325,13 +327,13 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac onClick={(e) => e.stopPropagation()} > - SSH Tools + {t('sshTools.title')} setToolsSheetOpen(false)} className="h-8 w-8 p-0 hover:bg-red-500 hover:text-white transition-colors flex items-center justify-center" - title="Close SSH Tools" + title={t('sshTools.closeTools')} > × @@ -340,7 +342,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac - Key Recording + {t('sshTools.keyRecording')} @@ -352,7 +354,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac className="flex-1" variant="outline" > - Start Key Recording + {t('sshTools.startKeyRecording')} ) : ( - Stop Key Recording + {t('sshTools.stopKeyRecording')} )} @@ -368,8 +370,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac {isRecording && ( <> - Select - terminals: + {t('sshTools.selectTerminals')} {terminalTabs.map(tab => ( - Type commands (all - keys supported): + {t('sshTools.typeCommands')} - Commands will be sent to {selectedTabIds.length} selected - terminal(s). + {t('sshTools.commandsWillBeSent', { count: selectedTabIds.length })} @@ -415,7 +414,7 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac - Settings + {t('sshTools.settings')} @@ -428,14 +427,14 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac htmlFor="enable-copy-paste" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-white" > - Enable right‑click copy/paste + {t('sshTools.enableRightClickCopyPaste')} - Have ideas for what should come next for ssh tools? Share them on{" "} + {t('sshTools.shareIdeas')}{" "} (null); const [resetStep, setResetStep] = useState<"initiate" | "verify" | "newPassword">("initiate"); @@ -25,7 +28,6 @@ export function PasswordReset({userInfo}: PasswordResetProps) { const [confirmPassword, setConfirmPassword] = useState(""); const [tempToken, setTempToken] = useState(""); const [resetLoading, setResetLoading] = useState(false); - const [resetSuccess, setResetSuccess] = useState(false); async function handleInitiatePasswordReset() { setError(null); @@ -35,7 +37,7 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetStep("verify"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Failed to initiate password reset"); + setError(err?.response?.data?.error || err?.message || t('common.failedToInitiatePasswordReset')); } finally { setResetLoading(false); } @@ -48,7 +50,6 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setConfirmPassword(""); setTempToken(""); setError(null); - setResetSuccess(false); } async function handleVerifyResetCode() { @@ -60,7 +61,7 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetStep("newPassword"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to verify reset code"); + setError(err?.response?.data?.error || t('common.failedToVerifyResetCode')); } finally { setResetLoading(false); } @@ -71,13 +72,13 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetLoading(true); if (newPassword !== confirmPassword) { - setError("Passwords do not match"); + setError(t('common.passwordsDoNotMatch')); setResetLoading(false); return; } if (newPassword.length < 6) { - setError("Password must be at least 6 characters long"); + setError(t('common.passwordMinLength')); setResetLoading(false); return; } @@ -85,16 +86,10 @@ export function PasswordReset({userInfo}: PasswordResetProps) { try { await completePasswordReset(userInfo.username, tempToken, newPassword); - setResetStep("initiate"); - setResetCode(""); - setNewPassword(""); - setConfirmPassword(""); - setTempToken(""); - setError(null); - - setResetSuccess(true); + toast.success(t('common.passwordResetSuccess')); + resetPasswordState(); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to complete password reset"); + setError(err?.response?.data?.error || t('common.failedToCompletePasswordReset')); } finally { setResetLoading(false); } @@ -112,15 +107,15 @@ export function PasswordReset({userInfo}: PasswordResetProps) { - Password + {t('common.password')} - Change your account password + {t('common.changeAccountPassword')} <> - {resetStep === "initiate" && !resetSuccess && ( + {resetStep === "initiate" && ( <> - {resetLoading ? Spinner : "Send Reset Code"} + {resetLoading ? Spinner : t('common.sendResetCode')} @@ -138,12 +133,11 @@ export function PasswordReset({userInfo}: PasswordResetProps) { {resetStep === "verify" && ( <> - Enter the 6-digit code from the docker container logs for - user: {userInfo.username} + {t('common.enterSixDigitCode')} {userInfo.username} - Reset Code + {t('common.resetCode')} setResetCode(e.target.value.replace(/\D/g, ''))} disabled={resetLoading} - placeholder="000000" + placeholder={t('placeholders.enterCode')} /> - {resetLoading ? Spinner : "Verify Code"} + {resetLoading ? Spinner : t('common.verifyCode')} - Back + {t('common.back')} )} - {resetSuccess && ( - <> - - Success! - - Your password has been successfully reset! You can now log in - with your new password. - - - - )} - - {resetStep === "newPassword" && !resetSuccess && ( + {resetStep === "newPassword" && ( <> - Enter your new password for - user: {userInfo.username} + {t('common.enterNewPassword')} {userInfo.username} - New Password + {t('common.newPassword')} - Confirm Password + {t('common.confirmPassword')} - {resetLoading ? Spinner : "Reset Password"} + {resetLoading ? Spinner : t('common.resetPassword')} - Back + {t('common.back')} )} {error && ( - Error + {t('common.error')} {error} )} diff --git a/src/ui/User/TOTPSetup.tsx b/src/ui/User/TOTPSetup.tsx index 4bbd00d8..9239cdab 100644 --- a/src/ui/User/TOTPSetup.tsx +++ b/src/ui/User/TOTPSetup.tsx @@ -8,6 +8,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.t import { Shield, Copy, Download, AlertCircle, CheckCircle2 } from "lucide-react"; import { setupTOTP, enableTOTP, disableTOTP, generateBackupCodes } from "@/ui/main-axios.ts"; import { toast } from "sonner"; +import { useTranslation } from 'react-i18next'; interface TOTPSetupProps { isEnabled: boolean; @@ -15,6 +16,7 @@ interface TOTPSetupProps { } export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSetupProps) { + const {t} = useTranslation(); const [isEnabled, setIsEnabled] = useState(initialEnabled); const [isSettingUp, setIsSettingUp] = useState(false); const [setupStep, setSetupStep] = useState<"init" | "qr" | "verify" | "backup">("init"); @@ -55,7 +57,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet const response = await enableTOTP(verificationCode); setBackupCodes(response.backup_codes); setSetupStep("backup"); - toast.success("Two-factor authentication enabled successfully!"); + toast.success(t('auth.twoFactorEnabledSuccess')); } catch (err: any) { setError(err?.response?.data?.error || "Invalid verification code"); } finally { @@ -74,7 +76,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet setPassword(""); setDisableCode(""); onStatusChange?.(false); - toast.success("Two-factor authentication disabled"); + toast.success(t('auth.twoFactorDisabled')); } catch (err: any) { setError(err?.response?.data?.error || "Failed to disable TOTP"); } finally { @@ -88,7 +90,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet try { const response = await generateBackupCodes(password || undefined, disableCode || undefined); setBackupCodes(response.backup_codes); - toast.success("New backup codes generated"); + toast.success(t('auth.newBackupCodesGenerated')); } catch (err: any) { setError(err?.response?.data?.error || "Failed to generate backup codes"); } finally { @@ -98,7 +100,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet const copyToClipboard = (text: string, label: string) => { navigator.clipboard.writeText(text); - toast.success(`${label} copied to clipboard`); + toast.success(t('messages.copiedToClipboard', {item: label})); }; const downloadBackupCodes = () => { @@ -114,7 +116,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet a.download = 'termix-backup-codes.txt'; a.click(); URL.revokeObjectURL(url); - toast.success("Backup codes downloaded"); + toast.success(t('auth.backupCodesDownloaded')); }; const handleComplete = () => { @@ -131,50 +133,50 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Two-Factor Authentication + {t('auth.twoFactorTitle')} - Your account is protected with two-factor authentication + {t('auth.twoFactorProtected')} - Enabled + {t('common.enabled')} - Two-factor authentication is currently active on your account + {t('auth.twoFactorActive')} - Disable 2FA - Backup Codes + {t('auth.disable2FA')} + {t('auth.backupCodes')} - Warning + {t('common.warning')} - Disabling two-factor authentication will make your account less secure + {t('auth.disableTwoFactorWarning')} - Password or TOTP Code + {t('auth.passwordOrTotpCode')} setPassword(e.target.value)} /> - Or + {t('auth.or')} setDisableCode(e.target.value.replace(/\D/g, ''))} @@ -186,29 +188,29 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={handleDisable} disabled={loading || (!password && !disableCode)} > - Disable Two-Factor Authentication + {t('auth.disableTwoFactor')} - Generate new backup codes if you've lost your existing ones + {t('auth.generateNewBackupCodesText')} - Password or TOTP Code + {t('auth.passwordOrTotpCode')} setPassword(e.target.value)} /> - Or + {t('auth.or')} setDisableCode(e.target.value.replace(/\D/g, ''))} @@ -219,20 +221,20 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={handleGenerateNewBackupCodes} disabled={loading || (!password && !disableCode)} > - Generate New Backup Codes + {t('auth.generateNewBackupCodes')} {backupCodes.length > 0 && ( - Your Backup Codes + {t('auth.yourBackupCodes')} - Download + {t('auth.download')} @@ -248,7 +250,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet {error && ( - Error + {t('common.error')} {error} )} @@ -261,9 +263,9 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Set Up Two-Factor Authentication + {t('auth.setupTwoFactorTitle')} - Step 1: Scan the QR code with your authenticator app + {t('auth.step1ScanQR')} @@ -272,7 +274,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Manual Entry Code + {t('auth.manualEntryCode')} - If you can't scan the QR code, enter this code manually in your authenticator app + {t('auth.cannotScanQRText')} setSetupStep("verify")} className="w-full"> - Next: Verify Code + {t('auth.nextVerifyCode')} @@ -304,14 +306,14 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Verify Your Authenticator + {t('auth.verifyAuthenticator')} - Step 2: Enter the 6-digit code from your authenticator app + {t('auth.step2EnterCode')} - Verification Code + {t('auth.verificationCode')} - Error + {t('common.error')} {error} )} @@ -337,14 +339,14 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={() => setSetupStep("qr")} disabled={loading} > - Back + {t('auth.back')} - {loading ? "Verifying..." : "Verify and Enable"} + {loading ? t('interface.verifying') : t('auth.verifyAndEnable')} @@ -356,17 +358,17 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Save Your Backup Codes + {t('auth.saveBackupCodesTitle')} - Step 3: Store these codes in a safe place + {t('auth.step3StoreCodesSecurely')} - Important + {t('common.important')} - Save these backup codes in a secure location. You can use them to access your account if you lose your authenticator device. + {t('auth.importantBackupCodesText')} @@ -393,7 +395,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Complete Setup + {t('auth.completeSetup')} @@ -405,23 +407,23 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Two-Factor Authentication + {t('auth.twoFactorTitle')} - Add an extra layer of security to your account + {t('auth.addExtraSecurityLayer')} - Not Enabled + {t('common.notEnabled')} - Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app when signing in. + {t('auth.notEnabledText')} - {loading ? "Setting up..." : "Enable Two-Factor Authentication"} + {loading ? t('common.settingUp') : t('auth.enableTwoFactorButton')} {error && ( diff --git a/src/ui/User/UserProfile.tsx b/src/ui/User/UserProfile.tsx index 9a4bccc0..2f165472 100644 --- a/src/ui/User/UserProfile.tsx +++ b/src/ui/User/UserProfile.tsx @@ -10,12 +10,15 @@ import {TOTPSetup} from "@/ui/User/TOTPSetup.tsx"; import {getUserInfo} from "@/ui/main-axios.ts"; import {toast} from "sonner"; import {PasswordReset} from "@/ui/User/PasswordReset.tsx"; +import {useTranslation} from "react-i18next"; +import {LanguageSwitcher} from "@/components/LanguageSwitcher"; interface UserProfileProps { isTopbarOpen?: boolean; } export function UserProfile({isTopbarOpen = true}: UserProfileProps) { + const {t} = useTranslation(); const [userInfo, setUserInfo] = useState<{ username: string; is_admin: boolean; @@ -41,7 +44,7 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { totp_enabled: info.totp_enabled || false }); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to load user information"); + setError(err?.response?.data?.error || t('errors.loadFailed')); } finally { setLoading(false); } @@ -58,7 +61,7 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Loading user profile... + {t('common.loading')} @@ -70,8 +73,8 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Error - {error || "Failed to load user profile"} + {t('common.error')} + {error || t('errors.loadFailed')} ); @@ -84,20 +87,20 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { maxHeight: 'calc(100vh - 60px)' }}> - User Profile - Manage your account settings and security + {t('common.profile')} + {t('profile.description')} - Profile + {t('common.profile')} {!userInfo.is_oidc && ( - Security + {t('profile.security')} )} @@ -105,45 +108,55 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Account Information - Your account details and settings + {t('profile.accountInfo')} + {t('profile.description')} - Username + {t('common.username')} {userInfo.username} - Account Type + {t('profile.role')} - {userInfo.is_admin ? "Administrator" : "User"} + {userInfo.is_admin ? t('interface.administrator') : t('interface.user')} - Authentication Method + {t('profile.authMethod')} - {userInfo.is_oidc ? "External (OIDC)" : "Local"} + {userInfo.is_oidc ? t('profile.external') : t('profile.local')} - Two-Factor Authentication + {t('profile.twoFactorAuth')} {userInfo.is_oidc ? ( - Locked (OIDC Auth) + {t('auth.lockedOidcAuth')} ) : ( userInfo.totp_enabled ? ( - Enabled + {t('common.enabled')} ) : ( - Disabled + {t('common.disabled')} ) )} + + + + + {t('common.language')} + {t('profile.selectPreferredLanguage')} + + + + diff --git a/src/ui/main-axios.ts b/src/ui/main-axios.ts index 99627071..6fa29322 100644 --- a/src/ui/main-axios.ts +++ b/src/ui/main-axios.ts @@ -143,6 +143,7 @@ interface UserInfo { id: string; username: string; is_admin: boolean; + is_oidc: boolean; } interface UserCount { @@ -897,7 +898,7 @@ export async function setupTOTP(): Promise<{ secret: string; qr_code: string }> const response = await authApi.post('/users/totp/setup'); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'setup TOTP'); throw error; } } @@ -907,7 +908,7 @@ export async function enableTOTP(totp_code: string): Promise<{ message: string; const response = await authApi.post('/users/totp/enable', { totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'enable TOTP'); throw error; } } @@ -917,7 +918,7 @@ export async function disableTOTP(password?: string, totp_code?: string): Promis const response = await authApi.post('/users/totp/disable', { password, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'disable TOTP'); throw error; } } @@ -927,7 +928,7 @@ export async function verifyTOTPLogin(temp_token: string, totp_code: string): Pr const response = await authApi.post('/users/totp/verify-login', { temp_token, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'verify TOTP login'); throw error; } } @@ -937,7 +938,7 @@ export async function generateBackupCodes(password?: string, totp_code?: string) const response = await authApi.post('/users/totp/backup-codes', { password, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'generate backup codes'); throw error; } }
No tunnel connections configured
{t('tunnels.noTunnelConnections')}
- Create your first SSH tunnel to get started. Use the SSH Manager to add hosts with tunnel - connections. + {t('tunnels.createFirstTunnelMessage')}
- You are logged in! Use the sidebar to access all available tools. To get started, - create an SSH Host in the SSH Manager tab. Once created, you can connect to that - host using the other apps in the sidebar. + {t('homepage.loggedInMessage')}
Enter the 6-digit code from your authenticator app
{t('auth.enterCode')}
- Or enter a backup code if you don't have access to your authenticator + {t('auth.backupCode')}
Login using your configured external identity provider
{t('auth.loginWithExternalDesc')}
Enter your username to receive a password reset code. The code - will be logged in the docker container logs.
{t('auth.resetCodeDesc')}
Enter the 6-digit code from the docker container logs for - user: {localUsername}
{t('auth.enterResetCode')} {localUsername}
Enter your new password for - user: {localUsername}
{t('auth.enterNewPassword')} {localUsername}
- Commands will be sent to {selectedTabIds.length} selected - terminal(s). + {t('sshTools.commandsWillBeSent', { count: selectedTabIds.length })}
- Have ideas for what should come next for ssh tools? Share them on{" "} + {t('sshTools.shareIdeas')}{" "} (null); const [resetStep, setResetStep] = useState<"initiate" | "verify" | "newPassword">("initiate"); @@ -25,7 +28,6 @@ export function PasswordReset({userInfo}: PasswordResetProps) { const [confirmPassword, setConfirmPassword] = useState(""); const [tempToken, setTempToken] = useState(""); const [resetLoading, setResetLoading] = useState(false); - const [resetSuccess, setResetSuccess] = useState(false); async function handleInitiatePasswordReset() { setError(null); @@ -35,7 +37,7 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetStep("verify"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || err?.message || "Failed to initiate password reset"); + setError(err?.response?.data?.error || err?.message || t('common.failedToInitiatePasswordReset')); } finally { setResetLoading(false); } @@ -48,7 +50,6 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setConfirmPassword(""); setTempToken(""); setError(null); - setResetSuccess(false); } async function handleVerifyResetCode() { @@ -60,7 +61,7 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetStep("newPassword"); setError(null); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to verify reset code"); + setError(err?.response?.data?.error || t('common.failedToVerifyResetCode')); } finally { setResetLoading(false); } @@ -71,13 +72,13 @@ export function PasswordReset({userInfo}: PasswordResetProps) { setResetLoading(true); if (newPassword !== confirmPassword) { - setError("Passwords do not match"); + setError(t('common.passwordsDoNotMatch')); setResetLoading(false); return; } if (newPassword.length < 6) { - setError("Password must be at least 6 characters long"); + setError(t('common.passwordMinLength')); setResetLoading(false); return; } @@ -85,16 +86,10 @@ export function PasswordReset({userInfo}: PasswordResetProps) { try { await completePasswordReset(userInfo.username, tempToken, newPassword); - setResetStep("initiate"); - setResetCode(""); - setNewPassword(""); - setConfirmPassword(""); - setTempToken(""); - setError(null); - - setResetSuccess(true); + toast.success(t('common.passwordResetSuccess')); + resetPasswordState(); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to complete password reset"); + setError(err?.response?.data?.error || t('common.failedToCompletePasswordReset')); } finally { setResetLoading(false); } @@ -112,15 +107,15 @@ export function PasswordReset({userInfo}: PasswordResetProps) { - Password + {t('common.password')} - Change your account password + {t('common.changeAccountPassword')} <> - {resetStep === "initiate" && !resetSuccess && ( + {resetStep === "initiate" && ( <> - {resetLoading ? Spinner : "Send Reset Code"} + {resetLoading ? Spinner : t('common.sendResetCode')} @@ -138,12 +133,11 @@ export function PasswordReset({userInfo}: PasswordResetProps) { {resetStep === "verify" && ( <> - Enter the 6-digit code from the docker container logs for - user: {userInfo.username} + {t('common.enterSixDigitCode')} {userInfo.username} - Reset Code + {t('common.resetCode')} setResetCode(e.target.value.replace(/\D/g, ''))} disabled={resetLoading} - placeholder="000000" + placeholder={t('placeholders.enterCode')} /> - {resetLoading ? Spinner : "Verify Code"} + {resetLoading ? Spinner : t('common.verifyCode')} - Back + {t('common.back')} )} - {resetSuccess && ( - <> - - Success! - - Your password has been successfully reset! You can now log in - with your new password. - - - - )} - - {resetStep === "newPassword" && !resetSuccess && ( + {resetStep === "newPassword" && ( <> - Enter your new password for - user: {userInfo.username} + {t('common.enterNewPassword')} {userInfo.username} - New Password + {t('common.newPassword')} - Confirm Password + {t('common.confirmPassword')} - {resetLoading ? Spinner : "Reset Password"} + {resetLoading ? Spinner : t('common.resetPassword')} - Back + {t('common.back')} )} {error && ( - Error + {t('common.error')} {error} )} diff --git a/src/ui/User/TOTPSetup.tsx b/src/ui/User/TOTPSetup.tsx index 4bbd00d8..9239cdab 100644 --- a/src/ui/User/TOTPSetup.tsx +++ b/src/ui/User/TOTPSetup.tsx @@ -8,6 +8,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.t import { Shield, Copy, Download, AlertCircle, CheckCircle2 } from "lucide-react"; import { setupTOTP, enableTOTP, disableTOTP, generateBackupCodes } from "@/ui/main-axios.ts"; import { toast } from "sonner"; +import { useTranslation } from 'react-i18next'; interface TOTPSetupProps { isEnabled: boolean; @@ -15,6 +16,7 @@ interface TOTPSetupProps { } export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSetupProps) { + const {t} = useTranslation(); const [isEnabled, setIsEnabled] = useState(initialEnabled); const [isSettingUp, setIsSettingUp] = useState(false); const [setupStep, setSetupStep] = useState<"init" | "qr" | "verify" | "backup">("init"); @@ -55,7 +57,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet const response = await enableTOTP(verificationCode); setBackupCodes(response.backup_codes); setSetupStep("backup"); - toast.success("Two-factor authentication enabled successfully!"); + toast.success(t('auth.twoFactorEnabledSuccess')); } catch (err: any) { setError(err?.response?.data?.error || "Invalid verification code"); } finally { @@ -74,7 +76,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet setPassword(""); setDisableCode(""); onStatusChange?.(false); - toast.success("Two-factor authentication disabled"); + toast.success(t('auth.twoFactorDisabled')); } catch (err: any) { setError(err?.response?.data?.error || "Failed to disable TOTP"); } finally { @@ -88,7 +90,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet try { const response = await generateBackupCodes(password || undefined, disableCode || undefined); setBackupCodes(response.backup_codes); - toast.success("New backup codes generated"); + toast.success(t('auth.newBackupCodesGenerated')); } catch (err: any) { setError(err?.response?.data?.error || "Failed to generate backup codes"); } finally { @@ -98,7 +100,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet const copyToClipboard = (text: string, label: string) => { navigator.clipboard.writeText(text); - toast.success(`${label} copied to clipboard`); + toast.success(t('messages.copiedToClipboard', {item: label})); }; const downloadBackupCodes = () => { @@ -114,7 +116,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet a.download = 'termix-backup-codes.txt'; a.click(); URL.revokeObjectURL(url); - toast.success("Backup codes downloaded"); + toast.success(t('auth.backupCodesDownloaded')); }; const handleComplete = () => { @@ -131,50 +133,50 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Two-Factor Authentication + {t('auth.twoFactorTitle')} - Your account is protected with two-factor authentication + {t('auth.twoFactorProtected')} - Enabled + {t('common.enabled')} - Two-factor authentication is currently active on your account + {t('auth.twoFactorActive')} - Disable 2FA - Backup Codes + {t('auth.disable2FA')} + {t('auth.backupCodes')} - Warning + {t('common.warning')} - Disabling two-factor authentication will make your account less secure + {t('auth.disableTwoFactorWarning')} - Password or TOTP Code + {t('auth.passwordOrTotpCode')} setPassword(e.target.value)} /> - Or + {t('auth.or')} setDisableCode(e.target.value.replace(/\D/g, ''))} @@ -186,29 +188,29 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={handleDisable} disabled={loading || (!password && !disableCode)} > - Disable Two-Factor Authentication + {t('auth.disableTwoFactor')} - Generate new backup codes if you've lost your existing ones + {t('auth.generateNewBackupCodesText')} - Password or TOTP Code + {t('auth.passwordOrTotpCode')} setPassword(e.target.value)} /> - Or + {t('auth.or')} setDisableCode(e.target.value.replace(/\D/g, ''))} @@ -219,20 +221,20 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={handleGenerateNewBackupCodes} disabled={loading || (!password && !disableCode)} > - Generate New Backup Codes + {t('auth.generateNewBackupCodes')} {backupCodes.length > 0 && ( - Your Backup Codes + {t('auth.yourBackupCodes')} - Download + {t('auth.download')} @@ -248,7 +250,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet {error && ( - Error + {t('common.error')} {error} )} @@ -261,9 +263,9 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Set Up Two-Factor Authentication + {t('auth.setupTwoFactorTitle')} - Step 1: Scan the QR code with your authenticator app + {t('auth.step1ScanQR')} @@ -272,7 +274,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Manual Entry Code + {t('auth.manualEntryCode')} - If you can't scan the QR code, enter this code manually in your authenticator app + {t('auth.cannotScanQRText')} setSetupStep("verify")} className="w-full"> - Next: Verify Code + {t('auth.nextVerifyCode')} @@ -304,14 +306,14 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Verify Your Authenticator + {t('auth.verifyAuthenticator')} - Step 2: Enter the 6-digit code from your authenticator app + {t('auth.step2EnterCode')} - Verification Code + {t('auth.verificationCode')} - Error + {t('common.error')} {error} )} @@ -337,14 +339,14 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet onClick={() => setSetupStep("qr")} disabled={loading} > - Back + {t('auth.back')} - {loading ? "Verifying..." : "Verify and Enable"} + {loading ? t('interface.verifying') : t('auth.verifyAndEnable')} @@ -356,17 +358,17 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet return ( - Save Your Backup Codes + {t('auth.saveBackupCodesTitle')} - Step 3: Store these codes in a safe place + {t('auth.step3StoreCodesSecurely')} - Important + {t('common.important')} - Save these backup codes in a secure location. You can use them to access your account if you lose your authenticator device. + {t('auth.importantBackupCodesText')} @@ -393,7 +395,7 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Complete Setup + {t('auth.completeSetup')} @@ -405,23 +407,23 @@ export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSet - Two-Factor Authentication + {t('auth.twoFactorTitle')} - Add an extra layer of security to your account + {t('auth.addExtraSecurityLayer')} - Not Enabled + {t('common.notEnabled')} - Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app when signing in. + {t('auth.notEnabledText')} - {loading ? "Setting up..." : "Enable Two-Factor Authentication"} + {loading ? t('common.settingUp') : t('auth.enableTwoFactorButton')} {error && ( diff --git a/src/ui/User/UserProfile.tsx b/src/ui/User/UserProfile.tsx index 9a4bccc0..2f165472 100644 --- a/src/ui/User/UserProfile.tsx +++ b/src/ui/User/UserProfile.tsx @@ -10,12 +10,15 @@ import {TOTPSetup} from "@/ui/User/TOTPSetup.tsx"; import {getUserInfo} from "@/ui/main-axios.ts"; import {toast} from "sonner"; import {PasswordReset} from "@/ui/User/PasswordReset.tsx"; +import {useTranslation} from "react-i18next"; +import {LanguageSwitcher} from "@/components/LanguageSwitcher"; interface UserProfileProps { isTopbarOpen?: boolean; } export function UserProfile({isTopbarOpen = true}: UserProfileProps) { + const {t} = useTranslation(); const [userInfo, setUserInfo] = useState<{ username: string; is_admin: boolean; @@ -41,7 +44,7 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { totp_enabled: info.totp_enabled || false }); } catch (err: any) { - setError(err?.response?.data?.error || "Failed to load user information"); + setError(err?.response?.data?.error || t('errors.loadFailed')); } finally { setLoading(false); } @@ -58,7 +61,7 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Loading user profile... + {t('common.loading')} @@ -70,8 +73,8 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Error - {error || "Failed to load user profile"} + {t('common.error')} + {error || t('errors.loadFailed')} ); @@ -84,20 +87,20 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { maxHeight: 'calc(100vh - 60px)' }}> - User Profile - Manage your account settings and security + {t('common.profile')} + {t('profile.description')} - Profile + {t('common.profile')} {!userInfo.is_oidc && ( - Security + {t('profile.security')} )} @@ -105,45 +108,55 @@ export function UserProfile({isTopbarOpen = true}: UserProfileProps) { - Account Information - Your account details and settings + {t('profile.accountInfo')} + {t('profile.description')} - Username + {t('common.username')} {userInfo.username} - Account Type + {t('profile.role')} - {userInfo.is_admin ? "Administrator" : "User"} + {userInfo.is_admin ? t('interface.administrator') : t('interface.user')} - Authentication Method + {t('profile.authMethod')} - {userInfo.is_oidc ? "External (OIDC)" : "Local"} + {userInfo.is_oidc ? t('profile.external') : t('profile.local')} - Two-Factor Authentication + {t('profile.twoFactorAuth')} {userInfo.is_oidc ? ( - Locked (OIDC Auth) + {t('auth.lockedOidcAuth')} ) : ( userInfo.totp_enabled ? ( - Enabled + {t('common.enabled')} ) : ( - Disabled + {t('common.disabled')} ) )} + + + + + {t('common.language')} + {t('profile.selectPreferredLanguage')} + + + + diff --git a/src/ui/main-axios.ts b/src/ui/main-axios.ts index 99627071..6fa29322 100644 --- a/src/ui/main-axios.ts +++ b/src/ui/main-axios.ts @@ -143,6 +143,7 @@ interface UserInfo { id: string; username: string; is_admin: boolean; + is_oidc: boolean; } interface UserCount { @@ -897,7 +898,7 @@ export async function setupTOTP(): Promise<{ secret: string; qr_code: string }> const response = await authApi.post('/users/totp/setup'); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'setup TOTP'); throw error; } } @@ -907,7 +908,7 @@ export async function enableTOTP(totp_code: string): Promise<{ message: string; const response = await authApi.post('/users/totp/enable', { totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'enable TOTP'); throw error; } } @@ -917,7 +918,7 @@ export async function disableTOTP(password?: string, totp_code?: string): Promis const response = await authApi.post('/users/totp/disable', { password, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'disable TOTP'); throw error; } } @@ -927,7 +928,7 @@ export async function verifyTOTPLogin(temp_token: string, totp_code: string): Pr const response = await authApi.post('/users/totp/verify-login', { temp_token, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'verify TOTP login'); throw error; } } @@ -937,7 +938,7 @@ export async function generateBackupCodes(password?: string, totp_code?: string) const response = await authApi.post('/users/totp/backup-codes', { password, totp_code }); return response.data; } catch (error) { - handleApiError(error as AxiosError); + handleApiError(error as AxiosError, 'generate backup codes'); throw error; } }
Enter the 6-digit code from the docker container logs for - user: {userInfo.username}
{t('common.enterSixDigitCode')} {userInfo.username}
Enter your new password for - user: {userInfo.username}
{t('common.enterNewPassword')} {userInfo.username}
Or
{t('auth.or')}
- Generate new backup codes if you've lost your existing ones + {t('auth.generateNewBackupCodesText')}
- If you can't scan the QR code, enter this code manually in your authenticator app + {t('auth.cannotScanQRText')}
Manage your account settings and security
{t('profile.description')}
{userInfo.username}
- {userInfo.is_admin ? "Administrator" : "User"} + {userInfo.is_admin ? t('interface.administrator') : t('interface.user')}
- {userInfo.is_oidc ? "External (OIDC)" : "Local"} + {userInfo.is_oidc ? t('profile.external') : t('profile.local')}
{userInfo.is_oidc ? ( - Locked (OIDC Auth) + {t('auth.lockedOidcAuth')} ) : ( userInfo.totp_enabled ? ( - Enabled + {t('common.enabled')} ) : ( - Disabled + {t('common.disabled')} ) )}
{t('profile.selectPreferredLanguage')}