diff --git a/src/app/_components/AuthModal.tsx b/src/app/_components/AuthModal.tsx index 271509f..8ac0aa9 100644 --- a/src/app/_components/AuthModal.tsx +++ b/src/app/_components/AuthModal.tsx @@ -6,12 +6,14 @@ import { Input } from './ui/input'; import { useAuth } from './AuthProvider'; import { Lock, User, AlertCircle } from 'lucide-react'; import { useRegisterModal } from './modal/ModalStackProvider'; +import { useTranslation } from '@/lib/i18n/useTranslation'; interface AuthModalProps { isOpen: boolean; } export function AuthModal({ isOpen }: AuthModalProps) { + const { t } = useTranslation('authModal'); useRegisterModal(isOpen, { id: 'auth-modal', allowEscape: false, onClose: () => null }); const { login } = useAuth(); const [username, setUsername] = useState(''); @@ -27,7 +29,7 @@ export function AuthModal({ isOpen }: AuthModalProps) { const success = await login(username, password); if (!success) { - setError('Invalid username or password'); + setError(t('error')); } setIsLoading(false); @@ -42,27 +44,27 @@ export function AuthModal({ isOpen }: AuthModalProps) {
-

Authentication Required

+

{t('title')}

{/* Content */}

- Please enter your credentials to access the application. + {t('description')}

setUsername(e.target.value)} disabled={isLoading} @@ -74,14 +76,14 @@ export function AuthModal({ isOpen }: AuthModalProps) {
setPassword(e.target.value)} disabled={isLoading} @@ -103,7 +105,7 @@ export function AuthModal({ isOpen }: AuthModalProps) { disabled={isLoading || !username.trim() || !password.trim()} className="w-full" > - {isLoading ? 'Signing In...' : 'Sign In'} + {isLoading ? t('actions.signingIn') : t('actions.signIn')}
diff --git a/src/app/_components/LoadingModal.tsx b/src/app/_components/LoadingModal.tsx index 00d57ac..8b7ffbe 100644 --- a/src/app/_components/LoadingModal.tsx +++ b/src/app/_components/LoadingModal.tsx @@ -2,6 +2,7 @@ import { Loader2 } from 'lucide-react'; import { useRegisterModal } from './modal/ModalStackProvider'; +import { useTranslation } from '@/lib/i18n/useTranslation'; interface LoadingModalProps { isOpen: boolean; @@ -9,6 +10,7 @@ interface LoadingModalProps { } export function LoadingModal({ isOpen, action }: LoadingModalProps) { + const { t } = useTranslation('loadingModal'); useRegisterModal(isOpen, { id: 'loading-modal', allowEscape: false, onClose: () => null }); if (!isOpen) return null; @@ -22,13 +24,13 @@ export function LoadingModal({ isOpen, action }: LoadingModalProps) {

- Processing + {t('processing')}

{action}

- Please wait... + {t('pleaseWait')}

diff --git a/src/app/_components/SetupModal.tsx b/src/app/_components/SetupModal.tsx index 77fd59e..4b5f150 100644 --- a/src/app/_components/SetupModal.tsx +++ b/src/app/_components/SetupModal.tsx @@ -6,6 +6,7 @@ import { Input } from './ui/input'; import { Toggle } from './ui/toggle'; import { Lock, User, Shield, AlertCircle } from 'lucide-react'; import { useRegisterModal } from './modal/ModalStackProvider'; +import { useTranslation } from '@/lib/i18n/useTranslation'; interface SetupModalProps { isOpen: boolean; @@ -13,6 +14,7 @@ interface SetupModalProps { } export function SetupModal({ isOpen, onComplete }: SetupModalProps) { + const { t } = useTranslation('setupModal'); useRegisterModal(isOpen, { id: 'setup-modal', allowEscape: true, onClose: () => null }); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); @@ -28,7 +30,7 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) { // Only validate passwords if authentication is enabled if (enableAuth && password !== confirmPassword) { - setError('Passwords do not match'); + setError(t('errors.passwordMismatch')); setIsLoading(false); return; } @@ -71,11 +73,11 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) { } } else { const errorData = await response.json() as { error: string }; - setError(errorData.error ?? 'Failed to setup authentication'); + setError(errorData.error ?? t('errors.setupFailed')); } } catch (error) { console.error('Setup error:', error); - setError('Failed to setup authentication'); + setError(t('errors.setupFailed')); } setIsLoading(false); @@ -90,27 +92,27 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
-

Setup Authentication

+

{t('title')}

{/* Content */}

- Set up authentication to secure your application. This will be required for future access. + {t('description')}

setUsername(e.target.value)} disabled={isLoading} @@ -123,14 +125,14 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
setPassword(e.target.value)} disabled={isLoading} @@ -143,14 +145,14 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
setConfirmPassword(e.target.value)} disabled={isLoading} @@ -164,11 +166,11 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) {
-

Enable Authentication

+

{t('enableAuth.title')}

{enableAuth - ? 'Authentication will be required on every page load' - : 'Authentication will be optional (can be enabled later in settings)' + ? t('enableAuth.descriptionEnabled') + : t('enableAuth.descriptionDisabled') }

@@ -176,7 +178,7 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) { checked={enableAuth} onCheckedChange={setEnableAuth} disabled={isLoading} - label="Enable authentication" + label={t('enableAuth.label')} />
@@ -196,7 +198,7 @@ export function SetupModal({ isOpen, onComplete }: SetupModalProps) { } className="w-full" > - {isLoading ? 'Setting Up...' : 'Complete Setup'} + {isLoading ? t('actions.settingUp') : t('actions.completeSetup')}
diff --git a/src/lib/i18n/messages/de.ts b/src/lib/i18n/messages/de.ts index f8c89ff..a6d5945 100644 --- a/src/lib/i18n/messages/de.ts +++ b/src/lib/i18n/messages/de.ts @@ -64,6 +64,57 @@ export const deMessages: NestedMessages = { serverBackOnline: 'Server ist wieder online! Seite wird neu geladen...', }, }, + loadingModal: { + processing: 'Verarbeite', + pleaseWait: 'Bitte warten...', + }, + authModal: { + title: 'Authentifizierung erforderlich', + description: 'Bitte geben Sie Ihre Anmeldedaten ein, um auf die Anwendung zuzugreifen.', + username: { + label: 'Benutzername', + placeholder: 'Benutzername eingeben', + }, + password: { + label: 'Passwort', + placeholder: 'Passwort eingeben', + }, + error: 'Ungültiger Benutzername oder Passwort', + actions: { + signIn: 'Anmelden', + signingIn: 'Anmeldung läuft...', + }, + }, + setupModal: { + title: 'Authentifizierung einrichten', + description: 'Richten Sie die Authentifizierung ein, um Ihre Anwendung zu sichern. Diese wird für zukünftige Zugriffe erforderlich sein.', + username: { + label: 'Benutzername', + placeholder: 'Wählen Sie einen Benutzernamen', + }, + password: { + label: 'Passwort', + placeholder: 'Wählen Sie ein Passwort', + }, + confirmPassword: { + label: 'Passwort bestätigen', + placeholder: 'Bestätigen Sie Ihr Passwort', + }, + enableAuth: { + title: 'Authentifizierung aktivieren', + descriptionEnabled: 'Authentifizierung wird bei jedem Seitenladevorgang erforderlich sein', + descriptionDisabled: 'Authentifizierung wird optional sein (kann später in den Einstellungen aktiviert werden)', + label: 'Authentifizierung aktivieren', + }, + errors: { + passwordMismatch: 'Passwörter stimmen nicht überein', + setupFailed: 'Fehler beim Einrichten der Authentifizierung', + }, + actions: { + completeSetup: 'Einrichtung abschließen', + settingUp: 'Wird eingerichtet...', + }, + }, layout: { title: 'PVE Skriptverwaltung', tagline: 'Verwalte und starte lokale Proxmox-Hilfsskripte mit Live-Ausgabe', diff --git a/src/lib/i18n/messages/en.ts b/src/lib/i18n/messages/en.ts index 0415632..ca2edf3 100644 --- a/src/lib/i18n/messages/en.ts +++ b/src/lib/i18n/messages/en.ts @@ -298,4 +298,55 @@ export const enMessages: NestedMessages = { passwordMismatch: 'Passwords do not match', }, }, + loadingModal: { + processing: 'Processing', + pleaseWait: 'Please wait...', + }, + authModal: { + title: 'Authentication Required', + description: 'Please enter your credentials to access the application.', + username: { + label: 'Username', + placeholder: 'Enter your username', + }, + password: { + label: 'Password', + placeholder: 'Enter your password', + }, + error: 'Invalid username or password', + actions: { + signIn: 'Sign In', + signingIn: 'Signing In...', + }, + }, + setupModal: { + title: 'Setup Authentication', + description: 'Set up authentication to secure your application. This will be required for future access.', + username: { + label: 'Username', + placeholder: 'Choose a username', + }, + password: { + label: 'Password', + placeholder: 'Choose a password', + }, + confirmPassword: { + label: 'Confirm Password', + placeholder: 'Confirm your password', + }, + enableAuth: { + title: 'Enable Authentication', + descriptionEnabled: 'Authentication will be required on every page load', + descriptionDisabled: 'Authentication will be optional (can be enabled later in settings)', + label: 'Enable authentication', + }, + errors: { + passwordMismatch: 'Passwords do not match', + setupFailed: 'Failed to setup authentication', + }, + actions: { + completeSetup: 'Complete Setup', + settingUp: 'Setting Up...', + }, + }, };