oauth2

frontend/src/App.tsx

@@ -1,16 +1,73 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
+import { useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './pages/Login';
 import FamilyView from './pages/FamilyView';
 import AdminPanel from './pages/AdminPanel';
+import NoFamily from './pages/NoFamily';
+import { useStore } from './store/useStore';
+import { authApi } from './api/client';
+import { Loader2 } from 'lucide-react';
+
+function AppContent() {
+  const { user, isAuthenticated, isLoading, setUser, setIsLoading } = useStore();
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  const checkAuth = async () => {
+    try {
+      const response = await authApi.me();
+      setUser(response.data);
+    } catch {
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    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 (!isAuthenticated) {
+    return (
+      <Routes>
+        <Route path="*" element={<Login />} />
+      </Routes>
+    );
+  }
+
+  if (!user?.family_id) {
+    return (
+      <Routes>
+        <Route path="/adminpanel" element={<AdminPanel />} />
+        <Route path="*" element={<NoFamily />} />
+      </Routes>
+    );
+  }
+
+  return (
+    <Routes>
+      <Route path="/" element={<Navigate to={`/family/${user.family_id}`} replace />} />
+      <Route path="/family/:familyId" element={<FamilyView />} />
+      <Route path="/adminpanel" element={<AdminPanel />} />
+      <Route path="*" element={<Navigate to={`/family/${user.family_id}`} replace />} />
+    </Routes>
+  );
+}
 
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/family/:familyId" element={<FamilyView />} />
-        <Route path="/adminpanel" element={<AdminPanel />} />
-      </Routes>
+      <AppContent />
     </BrowserRouter>
   );
 }

frontend/src/api/client.ts

@@ -7,6 +7,8 @@ import type {
   LoginRequest,
   LoginResponse,
   CreateFamilyRequest,
+  CreateMyFamilyRequest,
+  CreateMyFamilyResponse,
   CreateCategoryRequest,
   CreateExpenseRequest,
   VerifyFamilyPasswordRequest,
@@ -16,6 +18,8 @@ import type {
   UpdateShoppingItemRequest,
   MarkAsPurchasedRequest,
   BulkOperationResponse,
+  User,
+  OAuthUrlResponse,
 } from '../types';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
@@ -31,6 +35,14 @@ export const authApi = {
 
   logout: () =>
     apiClient.post('/logout'),
+
+  me: () =>
+    apiClient.get<User>('/me'),
+
+  getGoogleAuthUrl: (redirectUrl?: string) =>
+    apiClient.get<OAuthUrlResponse>('/auth/google', {
+      params: redirectUrl ? { redirect_url: redirectUrl } : undefined,
+    }),
 };
 
 export const familyApi = {
@@ -43,6 +55,9 @@ export const familyApi = {
   create: (data: CreateFamilyRequest) =>
     apiClient.post<Family>('/families', data),
 
+  createMyFamily: (data: CreateMyFamilyRequest) =>
+    apiClient.post<CreateMyFamilyResponse>('/my-family', data),
+
   update: (id: number, data: { name: string }) =>
     apiClient.put<Family>(`/families/${id}`, data),
 

frontend/src/pages/AdminPanel.tsx

@@ -10,57 +10,25 @@ import {
   Plus,
   Trash2,
   Lock,
-  User,
   ArrowLeft,
-  X,
 } from 'lucide-react';
 
 export default function AdminPanel() {
   const navigate = useNavigate();
-  const { isAdmin, setIsAdmin, logout: storeLogout } = useStore();
-
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [loginError, setLoginError] = useState('');
+  const { user, logout: storeLogout } = useStore();
 
   const [newFamilyName, setNewFamilyName] = useState('');
   const [newFamilyPassword, setNewFamilyPassword] = useState('');
   const [families, setFamilies] = useState<Array<{ id: number; name: string }>>([]);
 
   useEffect(() => {
-    if (isAdmin) {
-      setIsAuthenticated(true);
-      loadFamilies();
-    }
-  }, [isAdmin]);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoginError('');
-
-    try {
-      const response = await authApi.login({ username, password });
-      if (response.data.success && response.data.is_admin) {
-        setIsAdmin(true);
-        setIsAuthenticated(true);
-        loadFamilies();
-      } else {
-        setLoginError('Доступ запрещен. Требуются права администратора.');
-      }
-    } catch (err) {
-      setLoginError('Неверные учетные данные');
-      console.error(err);
-    }
-  };
+    loadFamilies();
+  }, []);
 
   const handleLogout = async () => {
     try {
       await authApi.logout();
       storeLogout();
-      setIsAuthenticated(false);
-      setUsername('');
-      setPassword('');
       navigate('/');
     } catch (err) {
       console.error('Logout error:', err);
@@ -105,78 +73,28 @@ export default function AdminPanel() {
     }
   };
 
-  if (!isAuthenticated) {
+  if (!user?.is_admin) {
     return (
       <div className="min-h-screen gradient-bg flex items-center justify-center py-8 sm:py-12 px-4">
         <div className="max-w-md w-full">
-          <div className="glass-effect rounded-2xl shadow-2xl p-6 sm:p-8">
+          <div className="glass-effect rounded-2xl shadow-2xl p-6 sm:p-8 text-center">
             <div className="flex items-center justify-center mb-6">
-              <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl">
+              <div className="p-4 bg-linear-to-br from-red-500 to-orange-500 text-white rounded-2xl">
                 <Shield className="w-10 h-10 sm:w-12 sm:h-12" />
               </div>
             </div>
-            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2 text-center">
-              Админ панель
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+              Доступ запрещен
             </h1>
-            <p className="text-gray-600 text-center mb-6 text-sm sm:text-base">
-              Войдите для управления системой
+            <p className="text-gray-600 mb-6 text-sm sm:text-base">
+              Требуются права администратора
             </p>
-
-            {loginError && (
-              <div className="mb-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 rounded">
-                <div className="flex items-center gap-2">
-                  <X className="w-4 h-4 flex-shrink-0" />
-                  <span className="text-sm">{loginError}</span>
-                </div>
-              </div>
-            )}
-
-            <form onSubmit={handleLogin} className="space-y-4">
-              <div>
-                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
-                  <User className="w-4 h-4" />
-                  Логин
-                </label>
-                <input
-                  type="text"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  className="w-full px-4 py-2.5 sm:py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all text-sm sm:text-base"
-                  placeholder="Введите логин"
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
-                  <Lock className="w-4 h-4" />
-                  Пароль
-                </label>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="w-full px-4 py-2.5 sm:py-3 border-2 border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all text-sm sm:text-base"
-                  placeholder="Введите пароль"
-                  required
-                />
-              </div>
-
-              <button
-                type="submit"
-                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-linear-to-r from-purple-600 to-blue-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-medium text-sm sm:text-base"
-              >
-                <Shield className="w-4 h-4 sm:w-5 sm:h-5" />
-                Войти
-              </button>
-            </form>
-
             <button
               onClick={() => navigate('/')}
-              className="w-full mt-4 flex items-center justify-center gap-2 px-4 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-xl transition-all duration-300 font-medium text-sm sm:text-base"
+              className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-xl transition-all duration-300 font-medium"
             >
-              <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
-              На главную
+              <ArrowLeft className="w-5 h-5" />
+              Назад
             </button>
           </div>
         </div>

frontend/src/pages/Home.tsx

@@ -1,230 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { familyApi, categoryApi } from '../api/client';
-import { useStore } from '../store/useStore';
-import type { Family } from '../types';
-import { Users, Settings, Lock, Loader2, X } from 'lucide-react';
-
-export default function Home() {
-  const navigate = useNavigate();
-  const { families, setFamilies, setSelectedFamily } = useStore();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-
-  const [showPasswordDialog, setShowPasswordDialog] = useState(false);
-  const [selectedFamilyForAuth, setSelectedFamilyForAuth] = useState<Family | null>(null);
-  const [familyPassword, setFamilyPassword] = useState('');
-  const [passwordError, setPasswordError] = useState('');
-
-  useEffect(() => {
-    loadFamilies();
-  }, []);
-
-  const loadFamilies = async () => {
-    try {
-      setLoading(true);
-      const response = await familyApi.getAll();
-      setFamilies(response.data);
-    } catch (err) {
-      setError('Ошибка загрузки списка семей');
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSelectFamily = async (family: Family) => {
-    try {
-      await categoryApi.getAllByFamily(family.id);
-      setSelectedFamily(family);
-      navigate(`/family/${family.id}`);
-    } catch (err: any) {
-      if (err.response?.status === 403) {
-        setSelectedFamilyForAuth(family);
-        setShowPasswordDialog(true);
-        setPasswordError('');
-        setFamilyPassword('');
-      } else {
-        setError('Ошибка доступа к семье');
-      }
-    }
-  };
-
-  const handleVerifyPassword = async () => {
-    if (!selectedFamilyForAuth || !familyPassword.trim()) {
-      setPasswordError('Введите пароль');
-      return;
-    }
-
-    try {
-      const response = await familyApi.verifyPassword(selectedFamilyForAuth.id, {
-        password: familyPassword,
-      });
-
-      if (response.data.valid) {
-        setSelectedFamily(selectedFamilyForAuth);
-        setShowPasswordDialog(false);
-        navigate(`/family/${selectedFamilyForAuth.id}`);
-      }
-    } catch (err: any) {
-      if (err.response?.status === 401) {
-        setPasswordError('Неверный пароль');
-      } else {
-        setPasswordError('Ошибка проверки пароля');
-      }
-      console.error(err);
-    }
-  };
-
-  const handleCancelPasswordDialog = () => {
-    setShowPasswordDialog(false);
-    setSelectedFamilyForAuth(null);
-    setFamilyPassword('');
-    setPasswordError('');
-  };
-
-  const handleGoToAdmin = () => {
-    navigate('/adminpanel');
-  };
-
-  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>
-    );
-  }
-
-  return (
-    <div className="min-h-screen gradient-bg py-8 sm:py-12 px-4 flex items-center justify-center">
-      <div className="w-full max-w-2xl">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-3">
-            Семейный бюджет
-          </h1>
-          <button
-            onClick={handleGoToAdmin}
-            className="inline-flex items-center gap-2 px-6 py-3 bg-linear-to-r from-orange-400 via-pink-500 to-purple-500 hover:from-orange-500 hover:via-pink-600 hover:to-purple-600 text-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 font-semibold"
-          >
-            <Settings className="w-5 h-5" />
-            <span className="font-medium">Админка</span>
-          </button>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-4 bg-red-500/90 backdrop-blur-md border border-red-300/50 text-white rounded-2xl shadow-lg">
-            <div className="flex items-center gap-2">
-              <X className="w-5 h-5 flex-shrink-0" />
-              <span>{error}</span>
-            </div>
-          </div>
-        )}
-
-        <div className="text-center mb-6">
-          <div className="inline-flex items-center gap-3 mb-6">
-            <div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl">
-              <Users className="w-8 h-8 text-white" />
-            </div>
-            <h2 className="text-2xl sm:text-3xl font-bold text-white">
-              Выберите семью
-            </h2>
-          </div>
-        </div>
-
-        {families.length === 0 ? (
-          <div className="glass-effect rounded-3xl shadow-2xl p-10 text-center">
-            <div className="inline-flex p-6 bg-linear-to-br from-purple-100 to-blue-100 rounded-3xl mb-6">
-              <Users className="w-20 h-20 text-purple-400" />
-            </div>
-            <p className="text-gray-600 text-lg sm:text-xl mb-2 font-semibold">
-              Семьи не найдены
-            </p>
-            <p className="text-gray-500 text-sm sm:text-base">
-              Создайте семью в админ панели
-            </p>
-          </div>
-        ) : (
-          <div className="flex flex-row flex-wrap gap-4 justify-center">
-            {families.map((family) => (
-              <button
-                key={family.id}
-                onClick={() => handleSelectFamily(family)}
-                className="group w-80 p-8 bg-linear-to-br from-pink-200 via-purple-200 to-indigo-200 border-2 border-pink-400 rounded-3xl hover:border-pink-500 hover:shadow-2xl transition-all duration-300 text-center card-hover hover:from-pink-300 hover:via-purple-300 hover:to-indigo-300"
-              >
-                <div className="flex flex-col items-center gap-4">
-                  <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl group-hover:scale-110 transition-transform duration-300 shadow-lg">
-                    <Users className="w-10 h-10" />
-                  </div>
-                  <div>
-                    <h3 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
-                      {family.name}
-                    </h3>
-                    <p className="text-sm text-gray-500">
-                      Нажмите для просмотра
-                    </p>
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        )}
-
-        {showPasswordDialog && selectedFamilyForAuth && (
-          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-fadeIn">
-            <div className="glass-effect rounded-3xl shadow-2xl p-8 sm:p-10 max-w-md w-full animate-scaleIn">
-              <div className="flex flex-col items-center text-center mb-6">
-                <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl mb-4 shadow-lg">
-                  <Lock className="w-10 h-10" />
-                </div>
-                <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
-                  Защищённая семья
-                </h2>
-                <p className="text-gray-600 text-sm sm:text-base">
-                  <span className="font-semibold text-purple-600">{selectedFamilyForAuth.name}</span>
-                </p>
-              </div>
-
-              {passwordError && (
-                <div className="mb-6 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl">
-                  <div className="flex items-center gap-2">
-                    <X className="w-5 h-5 flex-shrink-0" />
-                    <span className="text-sm font-medium">{passwordError}</span>
-                  </div>
-                </div>
-              )}
-
-              <input
-                type="password"
-                placeholder="Введите пароль"
-                value={familyPassword}
-                onChange={(e) => setFamilyPassword(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleVerifyPassword()}
-                className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all mb-6 text-base text-center font-medium"
-                autoFocus
-              />
-
-              <div className="flex flex-col gap-3">
-                <button
-                  onClick={handleVerifyPassword}
-                  className="flex items-center justify-center gap-2 px-6 py-4 bg-linear-to-r from-purple-600 to-blue-600 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold text-base"
-                >
-                  <Lock className="w-5 h-5" />
-                  Войти
-                </button>
-                <button
-                  onClick={handleCancelPasswordDialog}
-                  className="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-2xl transition-all duration-300 font-medium"
-                >
-                  Отмена
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/pages/Login.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { authApi } from '../api/client';
+import { Loader2, Wallet } from 'lucide-react';
+
+export default function Login() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleGoogleLogin = async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const currentUrl = window.location.origin;
+      const response = await authApi.getGoogleAuthUrl(currentUrl);
+      window.location.href = response.data.url;
+    } catch (err) {
+      setError('Ошибка при получении ссылки для авторизации');
+      console.error(err);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen gradient-bg flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        <div className="glass-effect rounded-3xl shadow-2xl p-8 sm:p-10">
+          <div className="flex flex-col items-center text-center mb-8">
+            <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl mb-4 shadow-lg">
+              <Wallet className="w-12 h-12" />
+            </div>
+            <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-2">
+              Семейный бюджет
+            </h1>
+            <p className="text-gray-600">
+              Войдите, чтобы продолжить
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-6 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl">
+              <span className="text-sm font-medium">{error}</span>
+            </div>
+          )}
+
+          <button
+            onClick={handleGoogleLogin}
+            disabled={loading}
+            className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-white border-2 border-gray-300 rounded-2xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-300 font-semibold text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <Loader2 className="w-6 h-6 animate-spin" />
+            ) : (
+              <>
+                <svg className="w-6 h-6" viewBox="0 0 24 24">
+                  <path
+                    fill="#4285F4"
+                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  />
+                  <path
+                    fill="#34A853"
+                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  />
+                  <path
+                    fill="#FBBC05"
+                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  />
+                  <path
+                    fill="#EA4335"
+                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  />
+                </svg>
+                Войти через Google
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/NoFamily.tsx

@@ -0,0 +1,182 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useStore } from '../store/useStore';
+import { authApi, familyApi } from '../api/client';
+import { Users, LogOut, Settings, Plus, Loader2, Eye, EyeOff } from 'lucide-react';
+
+export default function NoFamily() {
+  const navigate = useNavigate();
+  const { user, logout, setUser } = useStore();
+
+  const [familyName, setFamilyName] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleLogout = async () => {
+    try {
+      await authApi.logout();
+      logout();
+    } catch (err) {
+      console.error(err);
+      logout();
+    }
+  };
+
+  const handleGoToAdmin = () => {
+    navigate('/adminpanel');
+  };
+
+  const handleCreateFamily = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!familyName.trim()) {
+      setError('Введите название семьи');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+
+      const response = await familyApi.createMyFamily({
+        name: familyName.trim(),
+        password: password || undefined,
+      });
+
+      setUser({
+        ...user!,
+        family_id: response.data.family_id,
+      });
+
+      navigate(`/family/${response.data.family_id}`);
+    } catch (err: unknown) {
+      if (err && typeof err === 'object' && 'response' in err) {
+        const axiosError = err as { response?: { status?: number } };
+        if (axiosError.response?.status === 409) {
+          setError('Вы уже состоите в семье');
+        } else {
+          setError('Ошибка при создании семьи');
+        }
+      } else {
+        setError('Ошибка при создании семьи');
+      }
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen gradient-bg flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        <div className="glass-effect rounded-3xl shadow-2xl p-8 sm:p-10">
+          <div className="flex flex-col items-center text-center mb-6">
+            <div className="p-4 bg-linear-to-br from-purple-500 to-blue-500 text-white rounded-2xl mb-4 shadow-lg">
+              <Users className="w-12 h-12" />
+            </div>
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+              Добро пожаловать!
+            </h1>
+            <p className="text-gray-600">
+              <span className="font-semibold text-purple-600">{user?.email || user?.username}</span>
+            </p>
+          </div>
+
+          <form onSubmit={handleCreateFamily} className="mb-6">
+            <h2 className="text-lg font-semibold text-gray-800 mb-4 text-center">
+              Создайте свою семью
+            </h2>
+
+            {error && (
+              <div className="mb-4 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-lg">
+                <span className="text-sm font-medium">{error}</span>
+              </div>
+            )}
+
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="familyName" className="block text-sm font-medium text-gray-700 mb-1">
+                  Название семьи *
+                </label>
+                <input
+                  type="text"
+                  id="familyName"
+                  value={familyName}
+                  onChange={(e) => setFamilyName(e.target.value)}
+                  placeholder="Например: Семья Ивановых"
+                  className="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none transition-colors"
+                  disabled={loading}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                  Пароль <span className="text-gray-400">(необязательно)</span>
+                </label>
+                <div className="relative">
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Для защиты доступа"
+                    className="w-full px-4 py-3 pr-12 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none transition-colors"
+                    disabled={loading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                  >
+                    {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                  </button>
+                </div>
+                <p className="mt-1 text-xs text-gray-500">
+                  Пароль понадобится для доступа к бюджету семьи
+                </p>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading || !familyName.trim()}
+                className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-linear-to-r from-purple-600 to-blue-600 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? (
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                ) : (
+                  <>
+                    <Plus className="w-5 h-5" />
+                    Создать семью
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+
+          <div className="border-t border-gray-200 pt-6">
+            <div className="flex flex-col gap-3">
+              {user?.is_admin && (
+                <button
+                  onClick={handleGoToAdmin}
+                  className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-2xl transition-all duration-300 font-medium"
+                >
+                  <Settings className="w-5 h-5" />
+                  Админ панель
+                </button>
+              )}
+              <button
+                onClick={handleLogout}
+                className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-2xl transition-all duration-300 font-medium"
+              >
+                <LogOut className="w-5 h-5" />
+                Выйти
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/store/useStore.ts

@@ -1,13 +1,16 @@
 import { create } from 'zustand';
-import type { Family, Category } from '../types';
+import type { Family, Category, User } from '../types';
 
 interface AppState {
-  isAdmin: boolean;
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
   selectedFamily: Family | null;
   families: Family[];
   categories: Category[];
 
-  setIsAdmin: (isAdmin: boolean) => void;
+  setUser: (user: User | null) => void;
+  setIsLoading: (loading: boolean) => void;
   setSelectedFamily: (family: Family | null) => void;
   setFamilies: (families: Family[]) => void;
   setCategories: (categories: Category[]) => void;
@@ -15,12 +18,16 @@ interface AppState {
 }
 
 export const useStore = create<AppState>((set) => ({
-  isAdmin: false,
+  user: null,
+  isAuthenticated: false,
+  isLoading: true,
   selectedFamily: null,
   families: [],
   categories: [],
 
-  setIsAdmin: (isAdmin) => set({ isAdmin }),
+  setUser: (user) => set({ user, isAuthenticated: !!user }),
+
+  setIsLoading: (isLoading) => set({ isLoading }),
 
   setSelectedFamily: (family) => set({ selectedFamily: family }),
 
@@ -29,7 +36,8 @@ export const useStore = create<AppState>((set) => ({
   setCategories: (categories) => set({ categories }),
 
   logout: () => set({
-    isAdmin: false,
+    user: null,
+    isAuthenticated: false,
     selectedFamily: null,
     families: [],
     categories: []

frontend/src/types/index.ts

@@ -3,6 +3,18 @@ export interface Family {
   name: string;
 }
 
+export interface User {
+  id: number;
+  username: string | null;
+  email: string | null;
+  is_admin: boolean;
+  family_id: number | null;
+}
+
+export interface OAuthUrlResponse {
+  url: string;
+}
+
 export interface Category {
   id: number;
   family_id: number;
@@ -39,6 +51,17 @@ export interface CreateFamilyRequest {
   password: string;
 }
 
+export interface CreateMyFamilyRequest {
+  name: string;
+  password?: string;
+}
+
+export interface CreateMyFamilyResponse {
+  family: Family;
+  user_id: number;
+  family_id: number;
+}
+
 export interface VerifyFamilyPasswordRequest {
   password: string;
 }