Implemented project-wide localization plumbing and converted the visible UI/app messages to translation-ready strings.

This commit is contained in:
2026-05-18 00:16:37 +03:30
parent b49b59a056
commit c6606d9602
60 changed files with 1376 additions and 345 deletions

View File

@@ -10,9 +10,11 @@ import {
InputOTPSlot,
} from '@/components/ui/input-otp';
import { OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';
import { useTranslation } from '@/lib/translations';
import { store } from '@/routes/two-factor/login';
export default function TwoFactorChallenge() {
const { t } = useTranslation();
const [showRecoveryInput, setShowRecoveryInput] = useState<boolean>(false);
const [code, setCode] = useState<string>('');
@@ -23,20 +25,22 @@ export default function TwoFactorChallenge() {
}>(() => {
if (showRecoveryInput) {
return {
title: 'Recovery code',
description:
title: t('Recovery code'),
description: t(
'Please confirm access to your account by entering one of your emergency recovery codes.',
toggleText: 'login using an authentication code',
),
toggleText: t('login using an authentication code'),
};
}
return {
title: 'Authentication code',
description:
title: t('Authentication code'),
description: t(
'Enter the authentication code provided by your authenticator application.',
toggleText: 'login using a recovery code',
),
toggleText: t('login using a recovery code'),
};
}, [showRecoveryInput]);
}, [showRecoveryInput, t]);
setLayoutProps({
title: authConfigContent.title,
@@ -51,7 +55,7 @@ export default function TwoFactorChallenge() {
return (
<>
<Head title="Two-factor authentication" />
<Head title={t('Two-factor authentication')} />
<div className="space-y-6">
<Form
@@ -67,7 +71,7 @@ export default function TwoFactorChallenge() {
<Input
name="recovery_code"
type="text"
placeholder="Enter recovery code"
placeholder={t('Enter recovery code')}
autoFocus={showRecoveryInput}
required
/>
@@ -113,7 +117,7 @@ export default function TwoFactorChallenge() {
</Button>
<div className="text-center text-sm text-muted-foreground">
<span>or you can </span>
<span>{t('or you can')} </span>
<button
type="button"
className="cursor-pointer text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"