feat(web): add i18n locale routes and language switcher component

Add locale-prefixed routes for admin, auth, dashboard, and public pages. Add error, loading, and not-found pages for locale context. Add language switcher UI component for Vietnamese/English toggle. Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-09 09:44:18 +07:00
parent 2250e17a09
commit 7195064f12
43 changed files with 7418 additions and 1 deletions
--- a/apps/web/app/[locale]/(auth)/login/page.tsx
+++ b/apps/web/app/[locale]/(auth)/login/page.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Link } from '@/i18n/navigation';
+import { useAuthStore } from '@/lib/auth-store';
+import { loginSchema, type LoginFormData } from '@/lib/validations/auth';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { login, isLoading, error, clearError } = useAuthStore();
+  const [showPassword, setShowPassword] = useState(false);
+  const t = useTranslations('auth');
+
+  const oauthError = searchParams.get('error');
+  const oauthErrorMessage = oauthError
+    ? t(`oauthErrors.${oauthError}` as Parameters<typeof t>[0]) ?? t('oauthErrors.default')
+    : null;
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      await login(data);
+      router.push('/');
+    } catch {
+      // Error is handled by the store
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-2xl font-bold">{t('loginTitle')}</CardTitle>
+        <CardDescription>{t('loginDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
+          {oauthErrorMessage && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive" role="alert">
+              {oauthErrorMessage}
+            </div>
+          )}
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive" role="alert">
+              {error}
+              <button type="button" onClick={clearError} className="ml-2 font-medium underline">
+                {t('dismiss')}
+              </button>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="phone">{t('phone')}</Label>
+            <Input
+              id="phone"
+              type="tel"
+              placeholder={t('phonePlaceholder')}
+              autoComplete="tel"
+              aria-describedby={errors.phone ? 'phone-error' : undefined}
+              aria-invalid={!!errors.phone}
+              {...register('phone')}
+            />
+            {errors.phone && (
+              <p id="phone-error" className="text-sm text-destructive" role="alert">{errors.phone.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="password">{t('password')}</Label>
+              <button
+                type="button"
+                className="text-xs text-muted-foreground hover:text-primary"
+                onClick={() => setShowPassword(!showPassword)}
+                aria-label={showPassword ? t('hidePassword') : t('showPassword')}
+              >
+                {showPassword ? t('hidePassword') : t('showPassword')}
+              </button>
+            </div>
+            <Input
+              id="password"
+              type={showPassword ? 'text' : 'password'}
+              placeholder={t('passwordPlaceholder')}
+              autoComplete="current-password"
+              aria-describedby={errors.password ? 'password-error' : undefined}
+              aria-invalid={!!errors.password}
+              {...register('password')}
+            />
+            {errors.password && (
+              <p id="password-error" className="text-sm text-destructive" role="alert">{errors.password.message}</p>
+            )}
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />}
+            {t('loginButton')}
+          </Button>
+        </form>
+
+        <div className="relative my-4">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">{t('orLoginWith')}</span>
+          </div>
+        </div>
+
+        <OAuthButtons />
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          {t('noAccount')}{' '}
+          <Link href="/register" className="font-medium text-primary hover:underline">
+            {t('registerLink')}
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}