Implemented project-wide localization plumbing and converted the visible UI/app messages to translation-ready strings.
This commit is contained in:
@@ -1,14 +1,17 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import AppearanceTabs from '@/components/appearance-tabs';
|
||||
import Heading from '@/components/heading';
|
||||
import { useTranslation } from '@/lib/translations';
|
||||
import { edit as editAppearance } from '@/routes/appearance';
|
||||
|
||||
export default function Appearance() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Appearance settings" />
|
||||
<Head title={t('Appearance settings')} />
|
||||
|
||||
<h1 className="sr-only">Appearance settings</h1>
|
||||
<h1 className="sr-only">{t('Appearance settings')}</h1>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Heading
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useInitials } from '@/hooks/use-initials';
|
||||
import { useTranslation } from '@/lib/translations';
|
||||
import { edit } from '@/routes/profile';
|
||||
import { send } from '@/routes/verification';
|
||||
|
||||
@@ -21,6 +22,7 @@ export default function Profile({
|
||||
status?: string;
|
||||
}) {
|
||||
const { auth } = usePage().props;
|
||||
const { t } = useTranslation();
|
||||
const user = auth.user;
|
||||
const getInitials = useInitials();
|
||||
const avatarInputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -52,9 +54,9 @@ export default function Profile({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Profile settings" />
|
||||
<Head title={t('Profile settings')} />
|
||||
|
||||
<h1 className="sr-only">Profile settings</h1>
|
||||
<h1 className="sr-only">{t('Profile settings')}</h1>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Heading
|
||||
@@ -114,7 +116,7 @@ export default function Profile({
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<ImagePlus className="size-3.5" />
|
||||
<span>
|
||||
JPG, PNG, or WebP up to 2 MB.
|
||||
{t('JPG, PNG, or WebP up to 2 MB.')}
|
||||
</span>
|
||||
</div>
|
||||
{progress && (
|
||||
@@ -138,7 +140,7 @@ export default function Profile({
|
||||
name="name"
|
||||
required
|
||||
autoComplete="name"
|
||||
placeholder="Full name"
|
||||
placeholder={t('Full name')}
|
||||
/>
|
||||
|
||||
<InputError
|
||||
@@ -158,7 +160,7 @@ export default function Profile({
|
||||
name="email"
|
||||
required
|
||||
autoComplete="username"
|
||||
placeholder="Email address"
|
||||
placeholder={t('Email address')}
|
||||
/>
|
||||
|
||||
<InputError
|
||||
@@ -171,22 +173,26 @@ export default function Profile({
|
||||
user.email_verified_at === null && (
|
||||
<div>
|
||||
<p className="-mt-4 text-sm text-muted-foreground">
|
||||
Your email address is unverified.{' '}
|
||||
{t(
|
||||
'Your email address is unverified.',
|
||||
)}{' '}
|
||||
<Link
|
||||
href={send()}
|
||||
as="button"
|
||||
className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
|
||||
>
|
||||
Click here to resend the
|
||||
verification email.
|
||||
{t(
|
||||
'Click here to resend the verification email.',
|
||||
)}
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
{status ===
|
||||
'verification-link-sent' && (
|
||||
<div className="mt-2 text-sm font-medium text-green-600">
|
||||
A new verification link has been
|
||||
sent to your email address.
|
||||
{t(
|
||||
'A new verification link has been sent to your email address.',
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,7 @@ import TwoFactorSetupModal from '@/components/two-factor-setup-modal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth';
|
||||
import { useTranslation } from '@/lib/translations';
|
||||
import { edit } from '@/routes/security';
|
||||
import { disable, enable } from '@/routes/two-factor';
|
||||
|
||||
@@ -26,6 +27,7 @@ export default function Security({
|
||||
twoFactorEnabled = false,
|
||||
passwordRules,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const passwordInput = useRef<HTMLInputElement>(null);
|
||||
const currentPasswordInput = useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -53,9 +55,9 @@ export default function Security({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Security settings" />
|
||||
<Head title={t('Security settings')} />
|
||||
|
||||
<h1 className="sr-only">Security settings</h1>
|
||||
<h1 className="sr-only">{t('Security settings')}</h1>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Heading
|
||||
@@ -99,7 +101,7 @@ export default function Security({
|
||||
name="current_password"
|
||||
className="mt-1 block w-full"
|
||||
autoComplete="current-password"
|
||||
placeholder="Current password"
|
||||
placeholder={t('Current password')}
|
||||
/>
|
||||
|
||||
<InputError message={errors.current_password} />
|
||||
@@ -114,7 +116,7 @@ export default function Security({
|
||||
name="password"
|
||||
className="mt-1 block w-full"
|
||||
autoComplete="new-password"
|
||||
placeholder="New password"
|
||||
placeholder={t('New password')}
|
||||
passwordrules={passwordRules}
|
||||
/>
|
||||
|
||||
@@ -131,7 +133,7 @@ export default function Security({
|
||||
name="password_confirmation"
|
||||
className="mt-1 block w-full"
|
||||
autoComplete="new-password"
|
||||
placeholder="Confirm password"
|
||||
placeholder={t('Confirm password')}
|
||||
passwordrules={passwordRules}
|
||||
/>
|
||||
|
||||
@@ -163,9 +165,9 @@ export default function Security({
|
||||
{twoFactorEnabled ? (
|
||||
<div className="flex flex-col items-start justify-start space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You will be prompted for a secure, random pin
|
||||
during login, which you can retrieve from the
|
||||
TOTP-supported application on your phone.
|
||||
{t(
|
||||
'You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.',
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="relative inline">
|
||||
@@ -191,10 +193,9 @@ export default function Security({
|
||||
) : (
|
||||
<div className="flex flex-col items-start justify-start space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
When you enable two-factor authentication, you
|
||||
will be prompted for a secure pin during login.
|
||||
This pin can be retrieved from a TOTP-supported
|
||||
application on your phone.
|
||||
{t(
|
||||
'When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.',
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user