feature: localization's first implmentation done. all frontend hardcoded text is now localized.

2026-06-20 14:51:43 +03:30
parent 284fbd08aa
commit b2f4dfa4ca
52 changed files with 3306 additions and 1041 deletions
--- a/frontend/src/app/[locale]/(public)/accept-invite/page.tsx
+++ b/frontend/src/app/[locale]/(public)/accept-invite/page.tsx
@@ -2,6 +2,7 @@

 import { useEffect, useMemo, useState } from 'react';
 import { Suspense } from 'react';
+import { useTranslations } from 'next-intl';
 import { Link, useRouter } from '@/i18n/navigation';
 import { useSearchParams } from 'next/navigation';
 import { Button } from '@/components/ui/shared/Button';
@@ -9,6 +10,7 @@ import { Input } from '@/components/ui/shared/Input';
 import { staffApi } from '@/lib/api/staff';

 function AcceptInviteContent() {
+  const t = useTranslations('auth');
  const params = useSearchParams();
  const router = useRouter();
  const token = useMemo(() => params.get('token') || '', [params]);
@@ -32,7 +34,7 @@ function AcceptInviteContent() {
  useEffect(() => {
    if (!token) {
      setLoading(false);
-      setError('Invalid invitation link');
+      setError(t('invalidInvitationLink'));
      return;
    }

@@ -44,30 +46,31 @@ function AcceptInviteContent() {
        setInviteInfo(res.data);
        setName(res.data.name || '');
        if (res.data.status === 'ACCEPTED') {
-          setSuccess('This invitation is already accepted. You can log in now.');
+          setSuccess(t('invitationAlreadyAccepted'));
        }
-      } catch (e: any) {
-        setError(e?.message || 'Could not load invitation');
+      } catch (e: unknown) {
+        const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
+        setError(message || t('errorLoadInvitation'));
      } finally {
        setLoading(false);
      }
    })();
-  }, [token]);
+  }, [token, t]);

  async function onAccept() {
    if (!token) return;
    setError('');
    setSuccess('');
    if (!name.trim()) {
-      setError('Name is required');
+      setError(t('nameRequired'));
      return;
    }
    if (password.length < 8) {
-      setError('Password must be at least 8 characters');
+      setError(t('passwordMinLength8'));
      return;
    }
    if (password !== confirmPassword) {
-      setError('Passwords do not match');
+      setError(t('passwordsDoNotMatch'));
      return;
    }

@@ -78,12 +81,13 @@ function AcceptInviteContent() {
        name: name.trim(),
        password,
      });
-      setSuccess('Invitation Accepted. Redirecting to login...');
+      setSuccess(t('invitationAcceptedRedirect'));
      setTimeout(() => {
        router.replace('/login');
      }, 1000);
-    } catch (e: any) {
-      setError(e?.message || 'Could not accept invitation');
+    } catch (e: unknown) {
+      const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
+      setError(message || t('errorAcceptInvitation'));
    } finally {
      setSubmitting(false);
    }
@@ -92,19 +96,21 @@ function AcceptInviteContent() {
  return (
    <div className="min-h-screen app-web-bg flex items-center justify-center p-4">
      <div className="w-full max-w-md surface-card p-6 space-y-5">
-        <h1 className="text-xl font-semibold text-text-primary">Accept invitation</h1>
+        <h1 className="text-xl font-semibold text-text-primary">{t('acceptInviteTitle')}</h1>

        {loading ? (
-          <p className="text-sm text-text-secondary">Loading invitation...</p>
+          <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
        ) : (
          <>
            {inviteInfo && (
              <div className="rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
                <p>
-                  Organization: <span className="text-text-primary">{inviteInfo.organizationName}</span>
+                  {t('organizationLabel')}{' '}
+                  <span className="text-text-primary">{inviteInfo.organizationName}</span>
                </p>
                <p>
-                  Email: <span className="text-text-primary">{inviteInfo.email}</span>
+                  {t('emailLabel')}{' '}
+                  <span className="text-text-primary">{inviteInfo.email}</span>
                </p>
              </div>
            )}
@@ -122,27 +128,28 @@ function AcceptInviteContent() {

            {inviteInfo?.status !== 'ACCEPTED' && (
              <div className="space-y-3">
-                <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+                <Input label={t('labelName')} value={name} onChange={(e) => setName(e.target.value)} />
                <Input
-                  label="Create password"
+                  label={t('labelCreatePassword')}
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
                <Input
-                  label="Confirm password"
+                  label={t('labelConfirmPassword')}
                  type="password"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                />
                <Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
-                  Activate account
+                  {t('activateAccount')}
                </Button>
              </div>
            )}

            <p className="text-xs text-text-muted">
-              Already have access? <Link href="/login" className="text-primary">Go to login</Link>
+              {t('alreadyHaveAccess')}{' '}
+              <Link href="/login" className="text-primary">{t('goToLogin')}</Link>
            </p>
          </>
        )}
@@ -151,15 +158,18 @@ function AcceptInviteContent() {
  );
 }

+function AcceptInviteFallback() {
+  const t = useTranslations('auth');
+  return (
+    <div className="min-h-screen app-web-bg flex items-center justify-center">
+      <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
+    </div>
+  );
+}
+
 export default function AcceptInvitePage() {
  return (
-    <Suspense
-      fallback={
-        <div className="min-h-screen app-web-bg flex items-center justify-center">
-          <p className="text-sm text-text-secondary">Loading invitation...</p>
-        </div>
-      }
-    >
+    <Suspense fallback={<AcceptInviteFallback />}>
      <AcceptInviteContent />
    </Suspense>
  );
--- a/frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx
+++ b/frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx
@@ -1,6 +1,7 @@
 'use client';

 import { Suspense, useEffect, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { Link, useRouter } from '@/i18n/navigation';
 import { useSearchParams } from 'next/navigation';
 import { useForm, type FieldErrors, type UseFormRegister, type UseFormSetValue } from 'react-hook-form';
@@ -14,33 +15,47 @@ import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDeta
 import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
 import { organizationApi } from '@/lib/api/organization';

-const acceptOrganizationInviteSchema = z
-  .object({
-    ownerName: z.string().min(2, 'Name must be at least 2 characters'),
-    password: z
-      .string()
-      .min(8, 'Password must be at least 8 characters')
-      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
-      .regex(/[0-9]/, 'Password must contain at least one number'),
-    confirmPassword: z.string(),
-    organizationName: z.string().min(2, 'Organization name must be at least 2 characters'),
-    organizationEmail: z.string().email('Please enter a valid organization email'),
-    organizationType: z.enum(['CLINIC', 'LAB'], {
-      message: 'Please select organization type',
-    }),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: "Passwords don't match",
-    path: ['confirmPassword'],
-  });
-
-type AcceptOrganizationInviteForm = z.infer<typeof acceptOrganizationInviteSchema>;
+type AcceptOrganizationInviteForm = {
+  ownerName: string;
+  password: string;
+  confirmPassword: string;
+  organizationName: string;
+  organizationEmail: string;
+  organizationType: 'CLINIC' | 'LAB';
+};

 function AcceptOrganizationInviteContent() {
+  const t = useTranslations('auth');
+  const tCommon = useTranslations('common');
+  const tValidation = useTranslations('validation');
  const params = useSearchParams();
  const router = useRouter();
  const token = useMemo(() => params.get('token') || '', [params]);

+  const acceptOrganizationInviteSchema = useMemo(
+    () =>
+      z
+        .object({
+          ownerName: z.string().min(2, tValidation('nameMinLength')),
+          password: z
+            .string()
+            .min(8, tValidation('passwordMinLength'))
+            .regex(/[A-Z]/, tValidation('passwordUppercase'))
+            .regex(/[0-9]/, tValidation('passwordNumber')),
+          confirmPassword: z.string(),
+          organizationName: z.string().min(2, tValidation('organizationNameMinLength')),
+          organizationEmail: z.string().email(tValidation('organizationEmailInvalid')),
+          organizationType: z.enum(['CLINIC', 'LAB'], {
+            message: tValidation('organizationTypeRequired'),
+          }),
+        })
+        .refine((data) => data.password === data.confirmPassword, {
+          message: tValidation('passwordsDoNotMatch'),
+          path: ['confirmPassword'],
+        }),
+    [tValidation],
+  );
+
  const [step, setStep] = useState(1);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
@@ -77,7 +92,7 @@ function AcceptOrganizationInviteContent() {
  useEffect(() => {
    if (!token) {
      setLoading(false);
-      setError('Invalid invitation link');
+      setError(t('invalidInvitationLink'));
      return;
    }

@@ -96,16 +111,16 @@ function AcceptOrganizationInviteContent() {
          organizationType: res.data.organizationType,
        });
        if (res.data.status === 'ACCEPTED') {
-          setSuccess('This invitation is already accepted. You can log in now.');
+          setSuccess(t('invitationAlreadyAccepted'));
        }
      } catch (e: unknown) {
        const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
-        setError(message || 'Could not load invitation');
+        setError(message || t('errorLoadInvitation'));
      } finally {
        setLoading(false);
      }
    })();
-  }, [token, reset]);
+  }, [token, reset, t]);

  const handleNext = async () => {
    const isValid = await trigger(['ownerName', 'password', 'confirmPassword']);
@@ -129,11 +144,11 @@ function AcceptOrganizationInviteContent() {
        organizationEmail: data.organizationEmail.trim(),
        organizationType: data.organizationType,
      });
-      setSuccess('Invitation accepted. Redirecting to login...');
+      setSuccess(t('organizationAcceptedRedirect'));
      setTimeout(() => router.replace('/login'), 1000);
    } catch (e: unknown) {
      const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
-      setError(message || 'Could not accept invitation');
+      setError(message || t('errorAcceptInvitation'));
    } finally {
      setSubmitting(false);
    }
@@ -143,15 +158,15 @@ function AcceptOrganizationInviteContent() {
    <div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">DyoLink</span>
+          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
        </Link>
        <h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
-          Accept organization invitation
+          {t('acceptOrganizationTitle')}
        </h2>
        <p className="mt-2 text-center text-sm text-text-secondary">
-          Already have an account?{' '}
+          {t('alreadyHaveAccount')}{' '}
          <Link href="/login" className="font-medium text-primary hover:opacity-90">
-            Sign in
+            {t('signInLink')}
          </Link>
        </p>
      </div>
@@ -159,13 +174,13 @@ function AcceptOrganizationInviteContent() {
      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="surface-card py-8 px-4 sm:px-10">
          {loading ? (
-            <p className="text-sm text-text-secondary">Loading invitation...</p>
+            <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
          ) : (
            <>
              {inviteInfo && (
                <div className="mb-6 rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
                  <p>
-                    Invited by:{' '}
+                    {t('invitedBy')}{' '}
                    <span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
                  </p>
                </div>
@@ -191,37 +206,37 @@ function AcceptOrganizationInviteContent() {
                  {step === 1 && (
                    <>
                      <Input
-                        label="Owner email"
+                        label={t('ownerEmail')}
                        value={inviteInfo?.ownerEmail ?? ''}
                        readOnly
                        disabled
                        icon={<Mail className="h-5 w-5 icon-flat" />}
                      />
                      <Input
-                        label="Full name"
+                        label={t('fullName')}
                        {...register('ownerName')}
-                        placeholder="John Doe"
+                        placeholder={t('namePlaceholder')}
                        error={errors.ownerName?.message}
                        icon={<User className="h-5 w-5 icon-flat" />}
                      />
                      <Input
-                        label="Password"
+                        label={t('password')}
                        {...register('password')}
                        type="password"
-                        placeholder="••••••••"
+                        placeholder={t('passwordPlaceholder')}
                        error={errors.password?.message}
                        icon={<Lock className="h-5 w-5 icon-flat" />}
                      />
                      <Input
-                        label="Confirm password"
+                        label={t('confirmPassword')}
                        {...register('confirmPassword')}
                        type="password"
-                        placeholder="••••••••"
+                        placeholder={t('passwordPlaceholder')}
                        error={errors.confirmPassword?.message}
                        icon={<Lock className="h-5 w-5 icon-flat" />}
                      />
                      <Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
-                        Continue
+                        {tCommon('continue')}
                      </Button>
                    </>
                  )}
@@ -236,10 +251,10 @@ function AcceptOrganizationInviteContent() {
                      />
                      <div className="flex gap-3">
                        <Button type="button" variant="outline" onClick={() => setStep(1)}>
-                          Back
+                          {tCommon('back')}
                        </Button>
                        <Button type="submit" variant="primary" isLoading={submitting} fullWidth>
-                          Activate organization
+                          {t('activateOrganization')}
                        </Button>
                      </div>
                    </>
@@ -254,15 +269,18 @@ function AcceptOrganizationInviteContent() {
  );
 }

+function AcceptOrganizationInviteFallback() {
+  const t = useTranslations('auth');
+  return (
+    <div className="min-h-screen app-web-bg flex items-center justify-center">
+      <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
+    </div>
+  );
+}
+
 export default function AcceptOrganizationInvitePage() {
  return (
-    <Suspense
-      fallback={
-        <div className="min-h-screen app-web-bg flex items-center justify-center">
-          <p className="text-sm text-text-secondary">Loading invitation...</p>
-        </div>
-      }
-    >
+    <Suspense fallback={<AcceptOrganizationInviteFallback />}>
      <AcceptOrganizationInviteContent />
    </Suspense>
  );
--- a/frontend/src/app/[locale]/(public)/login/page.tsx
+++ b/frontend/src/app/[locale]/(public)/login/page.tsx
@@ -81,7 +81,7 @@ export default function LoginPage() {
          {t('signInTitle')}
        </h2>
        <p className="mt-2 text-center text-sm text-text-secondary">
-          Or{' '}
+          {tCommon('or')}{' '}
          <Link href="/register" className="font-medium text-primary hover:opacity-90">
            {t('startTrialLink')}
          </Link>
@@ -95,7 +95,7 @@ export default function LoginPage() {
              label={t('email')}
              {...register('email')}
              type="email"
-              placeholder="you@example.com"
+              placeholder={t('emailPlaceholder')}
              error={errors.email?.message}
              icon={<Mail className="h-5 w-5 icon-flat" />}
            />
@@ -103,7 +103,7 @@ export default function LoginPage() {
              label={t('password')}
              {...register('password')}
              type="password"
-              placeholder="••••••••"
+              placeholder={t('passwordPlaceholder')}
              error={errors.password?.message}
              icon={<Lock className="h-5 w-5 icon-flat" />}
            />
--- a/frontend/src/app/[locale]/(public)/register/page.tsx
+++ b/frontend/src/app/[locale]/(public)/register/page.tsx
@@ -145,7 +145,7 @@ export default function RegisterPage() {
                <Input
                  label={t('fullName')}
                  {...register('name')}
-                  placeholder="John Doe"
+                  placeholder={t('namePlaceholder')}
                  error={errors.name?.message}
                  icon={<User className="h-5 w-5 icon-flat" />}
                />
@@ -153,7 +153,7 @@ export default function RegisterPage() {
                  label={t('email')}
                  {...register('email')}
                  type="email"
-                  placeholder="you@example.com"
+                  placeholder={t('emailPlaceholder')}
                  error={errors.email?.message}
                  icon={<Mail className="h-5 w-5 icon-flat" />}
                />
@@ -161,7 +161,7 @@ export default function RegisterPage() {
                  label={t('password')}
                  {...register('password')}
                  type="password"
-                  placeholder="••••••••"
+                  placeholder={t('passwordPlaceholder')}
                  error={errors.password?.message}
                  icon={<Lock className="h-5 w-5 icon-flat" />}
                />
@@ -169,7 +169,7 @@ export default function RegisterPage() {
                  label={t('confirmPassword')}
                  {...register('confirmPassword')}
                  type="password"
-                  placeholder="••••••••"
+                  placeholder={t('passwordPlaceholder')}
                  error={errors.confirmPassword?.message}
                  icon={<Lock className="h-5 w-5 icon-flat" />}
                />
@@ -205,11 +205,11 @@ export default function RegisterPage() {
          </form>

          <p className="mt-6 text-xs text-center text-text-muted">
-            By signing up, you agree to our{' '}
+            {t('termsIntro')}{' '}
            <Link href="/terms" className="text-primary hover:opacity-90">
              {t('termsOfService')}
            </Link>{' '}
-            and{' '}
+            {tCommon('and')}{' '}
            <Link href="/privacy" className="text-primary hover:opacity-90">
              {t('privacyPolicy')}
            </Link>