feat(frontend): add react spa with wishlist flows and public profile

2026-04-23 16:05:27 +03:00
parent 5f6a551b6c
commit 00f01611ed
44 changed files with 2166 additions and 0 deletions
--- a/apps/frontend/src/pages/LoginPage.tsx
+++ b/apps/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,98 @@
+import { useEffect } from 'react';
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Gift, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { loginSchema, type LoginInput } from '@family-wishlist/shared';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Label } from '@/components/ui/Label';
+import { useAuthStore } from '@/features/auth/authStore';
+import { ApiError } from '@/lib/api';
+import { Footer } from '@/components/Layout/Footer';
+
+export function LoginPage() {
+  const { user, login } = useAuthStore();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/';
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginInput>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { username: '', password: '' },
+  });
+
+  useEffect(() => {
+    if (user) navigate(from, { replace: true });
+  }, [user, from, navigate]);
+
+  if (user) return <Navigate to={from} replace />;
+
+  const submit = handleSubmit(async (values) => {
+    try {
+      await login(values.username, values.password);
+      navigate(from, { replace: true });
+    } catch (err) {
+      if (err instanceof ApiError) toast.error(err.message);
+      else toast.error('Login failed');
+    }
+  });
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <div className="container-page flex flex-1 items-center justify-center py-12">
+        <div className="w-full max-w-md animate-fade-in-up">
+          <div className="mb-6 flex items-center justify-center gap-2">
+            <span className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card">
+              <Gift className="h-5 w-5" />
+            </span>
+            <h1 className="font-display text-3xl">Family Wishlist</h1>
+          </div>
+
+          <div className="rounded-xl border border-border bg-surface p-6 shadow-card sm:p-8">
+            <h2 className="mb-1 text-xl font-semibold">Welcome back</h2>
+            <p className="mb-6 text-sm text-muted">
+              Sign in to manage your wishlist. Credentials are set up via the server environment.
+            </p>
+            <form className="grid gap-4" onSubmit={submit}>
+              <div className="field">
+                <Label htmlFor="username">Username</Label>
+                <Input
+                  id="username"
+                  autoComplete="username"
+                  autoFocus
+                  {...register('username')}
+                />
+                {errors.username && (
+                  <span className="field__error">{errors.username.message}</span>
+                )}
+              </div>
+              <div className="field">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  autoComplete="current-password"
+                  {...register('password')}
+                />
+                {errors.password && (
+                  <span className="field__error">{errors.password.message}</span>
+                )}
+              </div>
+              <Button type="submit" size="lg" disabled={isSubmitting}>
+                {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+                Sign in
+              </Button>
+            </form>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}