feature: localization's first implmentation

2026-06-20 12:37:38 +03:30
parent b314a5fa11
commit 284fbd08aa
46 changed files with 1860 additions and 643 deletions
--- a/frontend/src/app/[locale]/(public)/login/page.tsx
+++ b/frontend/src/app/[locale]/(public)/login/page.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import { useRouter } from '@/i18n/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
+import { Mail, Lock } from 'lucide-react';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { Button } from '@/components/ui/shared/Button';
+import { Input } from '@/components/ui/shared/Input';
+import { TopBarControls } from '@/components/ui/shared/TopBarControls';
+
+type LoginForm = {
+  email: string;
+  password: string;
+};
+
+export default function LoginPage() {
+  const t = useTranslations('auth');
+  const tCommon = useTranslations('common');
+  const tValidation = useTranslations('validation');
+  const { login, isLoading, user, isAuthReady } = useAuth();
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+
+  const loginSchema = useMemo(
+    () =>
+      z.object({
+        email: z.string().email(tValidation('emailInvalid')),
+        password: z.string().min(1, tValidation('passwordRequired')),
+      }),
+    [tValidation],
+  );
+
+  useEffect(() => {
+    if (isAuthReady && user) {
+      router.push('/today');
+    }
+  }, [user, isAuthReady, router]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginForm>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginForm) => {
+    try {
+      setError(null);
+      await login(data.email, data.password);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : t('invalidCredentials');
+      setError(message || t('invalidCredentials'));
+    }
+  };
+
+  if (!isAuthReady) {
+    return (
+      <div className="min-h-screen app-web-bg flex items-center justify-center">
+        <p className="text-text-secondary">{tCommon('loading')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="absolute top-4 right-4">
+        <TopBarControls />
+      </div>
+
+      <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">{tCommon('appName')}</span>
+        </Link>
+        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
+          {t('signInTitle')}
+        </h2>
+        <p className="mt-2 text-center text-sm text-text-secondary">
+          Or{' '}
+          <Link href="/register" className="font-medium text-primary hover:opacity-90">
+            {t('startTrialLink')}
+          </Link>
+        </p>
+      </div>
+
+      <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">
+          <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
+            <Input
+              label={t('email')}
+              {...register('email')}
+              type="email"
+              placeholder="you@example.com"
+              error={errors.email?.message}
+              icon={<Mail className="h-5 w-5 icon-flat" />}
+            />
+            <Input
+              label={t('password')}
+              {...register('password')}
+              type="password"
+              placeholder="••••••••"
+              error={errors.password?.message}
+              icon={<Lock className="h-5 w-5 icon-flat" />}
+            />
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40"
+                />
+                <label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
+                  {t('rememberMe')}
+                </label>
+              </div>
+              <div className="text-sm">
+                <Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
+                  {t('forgotPassword')}
+                </Link>
+              </div>
+            </div>
+
+            {error && (
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+                <p className="text-sm text-red-600">{error}</p>
+              </div>
+            )}
+
+            <Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
+              {t('signIn')}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}