fix

2026-01-17 13:10:03 +03:00
parent 35e79de378
commit 514ced6e19
4 changed files with 224 additions and 3 deletions
--- a/frontend/src/pages/InvitePage.tsx
+++ b/frontend/src/pages/InvitePage.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { inviteLinkApi, authApi } from '../api/client';
+import { useStore } from '../store/useStore';
+import { Loader2, Users, UserPlus, AlertCircle } from 'lucide-react';
+
+export default function InvitePage() {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const { isAuthenticated, setUser } = useStore();
+
+  const [loading, setLoading] = useState(true);
+  const [joining, setJoining] = useState(false);
+  const [error, setError] = useState('');
+  const [familyName, setFamilyName] = useState<string | null>(null);
+  const [isValid, setIsValid] = useState(false);
+
+  useEffect(() => {
+    if (token) {
+      validateInvite();
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (isAuthenticated && isValid && token) {
+      joinFamily();
+    }
+  }, [isAuthenticated, isValid]);
+
+  const validateInvite = async () => {
+    if (!token) return;
+
+    try {
+      setLoading(true);
+      const response = await inviteLinkApi.validate(token);
+      if (response.data.valid) {
+        setIsValid(true);
+        setFamilyName(response.data.family_name);
+      } else {
+        setError('Ссылка недействительна или срок её действия истёк');
+      }
+    } catch (err) {
+      setError('Ссылка не найдена');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const joinFamily = async () => {
+    if (!token) return;
+
+    try {
+      setJoining(true);
+      const response = await inviteLinkApi.join(token);
+      if (response.data.success) {
+        const meResponse = await authApi.me();
+        setUser(meResponse.data);
+        navigate(`/family/${response.data.family_id}`);
+      } else {
+        setError(response.data.message);
+      }
+    } catch (err: any) {
+      if (err.response?.status === 400) {
+        setError('Вы уже состоите в семье');
+      } else {
+        setError('Ошибка при присоединении к семье');
+      }
+    } finally {
+      setJoining(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    if (token) {
+      localStorage.setItem('pendingInviteToken', token);
+    }
+    try {
+      const response = await authApi.getGoogleAuthUrl(window.location.href);
+      window.location.href = response.data.url;
+    } catch (err) {
+      setError('Ошибка при получении ссылки для авторизации');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">Проверка приглашения...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (joining) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg">
+        <div className="flex items-center gap-3 text-white">
+          <Loader2 className="w-8 h-8 animate-spin" />
+          <span className="text-xl font-medium">Присоединение к семье...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center gradient-bg px-4">
+        <div className="bg-white rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
+          <div className="p-4 bg-red-100 rounded-2xl inline-block mb-6">
+            <AlertCircle className="w-12 h-12 text-red-500" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-800 mb-4">Ошибка</h1>
+          <p className="text-gray-600 mb-6">{error}</p>
+          <button
+            onClick={() => navigate('/')}
+            className="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-2xl font-semibold hover:shadow-xl transition-all"
+          >
+            На главную
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center gradient-bg px-4">
+      <div className="bg-white rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
+        <div className="p-4 bg-gradient-to-br from-purple-500 to-blue-500 rounded-2xl inline-block mb-6">
+          <Users className="w-12 h-12 text-white" />
+        </div>
+        <h1 className="text-2xl font-bold text-gray-800 mb-2">
+          Приглашение в семью
+        </h1>
+        <p className="text-3xl font-bold text-purple-600 mb-6">
+          {familyName}
+        </p>
+        <p className="text-gray-600 mb-8">
+          Вас пригласили присоединиться к семейному бюджету.
+          Войдите через Google, чтобы принять приглашение.
+        </p>
+        <button
+          onClick={handleGoogleLogin}
+          className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-2xl font-semibold hover:shadow-xl transition-all"
+        >
+          <UserPlus className="w-5 h-5" />
+          Войти и присоединиться
+        </button>
+      </div>
+    </div>
+  );
+}