Add invite links

backend/app/api/v1/marathons.py

@@ -18,6 +18,7 @@ from app.schemas import (
     MarathonUpdate,
     MarathonResponse,
     MarathonListItem,
+    MarathonPublicInfo,
     JoinMarathon,
     ParticipantInfo,
     ParticipantWithUser,
@@ -30,6 +31,35 @@ from app.schemas import (
 router = APIRouter(prefix="/marathons", tags=["marathons"])
 
 
+# Public endpoint (no auth required)
+@router.get("/by-code/{invite_code}", response_model=MarathonPublicInfo)
+async def get_marathon_by_code(invite_code: str, db: DbSession):
+    """Get public marathon info by invite code. No authentication required."""
+    result = await db.execute(
+        select(Marathon, func.count(Participant.id).label("participants_count"))
+        .outerjoin(Participant)
+        .options(selectinload(Marathon.creator))
+        .where(Marathon.invite_code == invite_code)
+        .group_by(Marathon.id)
+    )
+    row = result.first()
+
+    if not row:
+        raise HTTPException(status_code=404, detail="Marathon not found")
+
+    marathon = row[0]
+    participants_count = row[1]
+
+    return MarathonPublicInfo(
+        id=marathon.id,
+        title=marathon.title,
+        description=marathon.description,
+        status=marathon.status,
+        participants_count=participants_count,
+        creator_nickname=marathon.creator.nickname,
+    )
+
+
 def generate_invite_code() -> str:
     return secrets.token_urlsafe(8)
 

backend/app/schemas/__init__.py

@@ -12,6 +12,7 @@ from app.schemas.marathon import (
     MarathonUpdate,
     MarathonResponse,
     MarathonListItem,
+    MarathonPublicInfo,
     ParticipantInfo,
     ParticipantWithUser,
     JoinMarathon,
@@ -65,6 +66,7 @@ __all__ = [
     "MarathonUpdate",
     "MarathonResponse",
     "MarathonListItem",
+    "MarathonPublicInfo",
     "ParticipantInfo",
     "ParticipantWithUser",
     "JoinMarathon",

backend/app/schemas/marathon.py

@@ -79,6 +79,19 @@ class JoinMarathon(BaseModel):
     invite_code: str
 
 
+class MarathonPublicInfo(BaseModel):
+    """Public info about marathon for invite page (no auth required)"""
+    id: int
+    title: str
+    description: str | None
+    status: str
+    participants_count: int
+    creator_nickname: str
+
+    class Config:
+        from_attributes = True
+
+
 class LeaderboardEntry(BaseModel):
     rank: int
     user: UserPublic

frontend/src/App.tsx

@@ -14,6 +14,7 @@ import { MarathonPage } from '@/pages/MarathonPage'
 import { LobbyPage } from '@/pages/LobbyPage'
 import { PlayPage } from '@/pages/PlayPage'
 import { LeaderboardPage } from '@/pages/LeaderboardPage'
+import { InvitePage } from '@/pages/InvitePage'
 
 // Protected route wrapper
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -43,6 +44,9 @@ function App() {
       <Route path="/" element={<Layout />}>
         <Route index element={<HomePage />} />
 
+        {/* Public invite page */}
+        <Route path="invite/:code" element={<InvitePage />} />
+
         <Route
           path="login"
           element={

frontend/src/api/marathons.ts

@@ -1,5 +1,5 @@
 import client from './client'
-import type { Marathon, MarathonListItem, LeaderboardEntry, ParticipantWithUser, ParticipantRole, GameProposalMode } from '@/types'
+import type { Marathon, MarathonListItem, MarathonPublicInfo, LeaderboardEntry, ParticipantWithUser, ParticipantRole, GameProposalMode } from '@/types'
 
 export interface CreateMarathonData {
   title: string
@@ -21,6 +21,12 @@ export const marathonsApi = {
     return response.data
   },
 
+  getByCode: async (inviteCode: string): Promise<MarathonPublicInfo> => {
+    // Public endpoint - no auth required
+    const response = await client.get<MarathonPublicInfo>(`/marathons/by-code/${inviteCode}`)
+    return response.data
+  },
+
   create: async (data: CreateMarathonData): Promise<Marathon> => {
     const response = await client.post<Marathon>('/marathons', data)
     return response.data

frontend/src/pages/InvitePage.tsx

@@ -0,0 +1,168 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { marathonsApi } from '@/api'
+import type { MarathonPublicInfo } from '@/types'
+import { useAuthStore } from '@/store/auth'
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
+import { Users, Loader2, Trophy, UserPlus, LogIn } from 'lucide-react'
+
+export function InvitePage() {
+  const { code } = useParams<{ code: string }>()
+  const navigate = useNavigate()
+  const { isAuthenticated, setPendingInviteCode } = useAuthStore()
+
+  const [marathon, setMarathon] = useState<MarathonPublicInfo | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isJoining, setIsJoining] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    loadMarathon()
+  }, [code])
+
+  const loadMarathon = async () => {
+    if (!code) return
+
+    try {
+      const data = await marathonsApi.getByCode(code)
+      setMarathon(data)
+    } catch {
+      setError('Марафон не найден или ссылка недействительна')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleJoin = async () => {
+    if (!code) return
+
+    setIsJoining(true)
+    try {
+      const joined = await marathonsApi.join(code)
+      navigate(`/marathons/${joined.id}`)
+    } catch (err: unknown) {
+      const apiError = err as { response?: { data?: { detail?: string } } }
+      const detail = apiError.response?.data?.detail
+      if (detail === 'Already joined this marathon') {
+        // Already a member, just redirect
+        navigate(`/marathons/${marathon?.id}`)
+      } else {
+        setError(detail || 'Не удалось присоединиться')
+      }
+    } finally {
+      setIsJoining(false)
+    }
+  }
+
+  const handleAuthRedirect = (path: string) => {
+    if (code) {
+      setPendingInviteCode(code)
+    }
+    navigate(path)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-12">
+        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+      </div>
+    )
+  }
+
+  if (error || !marathon) {
+    return (
+      <div className="max-w-md mx-auto">
+        <Card>
+          <CardContent className="text-center py-8">
+            <div className="text-red-400 mb-4">{error || 'Марафон не найден'}</div>
+            <Link to="/marathons">
+              <Button variant="secondary">К списку марафонов</Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const statusText = {
+    preparing: 'Подготовка',
+    active: 'Активен',
+    finished: 'Завершён',
+  }[marathon.status]
+
+  return (
+    <div className="max-w-md mx-auto">
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="flex items-center justify-center gap-2">
+            <Trophy className="w-6 h-6 text-primary-500" />
+            Приглашение в марафон
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Marathon info */}
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-white mb-2">{marathon.title}</h2>
+            {marathon.description && (
+              <p className="text-gray-400 text-sm mb-4">{marathon.description}</p>
+            )}
+            <div className="flex items-center justify-center gap-4 text-sm text-gray-400">
+              <span className="flex items-center gap-1">
+                <Users className="w-4 h-4" />
+                {marathon.participants_count} участников
+              </span>
+              <span className={`px-2 py-0.5 rounded text-xs ${
+                marathon.status === 'active' ? 'bg-green-900/50 text-green-400' :
+                marathon.status === 'preparing' ? 'bg-yellow-900/50 text-yellow-400' :
+                'bg-gray-700 text-gray-400'
+              }`}>
+                {statusText}
+              </span>
+            </div>
+            <p className="text-gray-500 text-xs mt-2">
+              Организатор: {marathon.creator_nickname}
+            </p>
+          </div>
+
+          {marathon.status === 'finished' ? (
+            <div className="text-center text-gray-400">
+              Этот марафон уже завершён
+            </div>
+          ) : isAuthenticated ? (
+            /* Authenticated - show join button */
+            <Button
+              className="w-full"
+              onClick={handleJoin}
+              isLoading={isJoining}
+            >
+              <UserPlus className="w-4 h-4 mr-2" />
+              Присоединиться к марафону
+            </Button>
+          ) : (
+            /* Not authenticated - show login/register options */
+            <div className="space-y-3">
+              <p className="text-center text-gray-400 text-sm">
+                Чтобы присоединиться, войдите или зарегистрируйтесь
+              </p>
+              <Button
+                className="w-full"
+                onClick={() => handleAuthRedirect('/login')}
+              >
+                <LogIn className="w-4 h-4 mr-2" />
+                Войти
+              </Button>
+              <Button
+                variant="secondary"
+                className="w-full"
+                onClick={() => handleAuthRedirect('/register')}
+              >
+                <UserPlus className="w-4 h-4 mr-2" />
+                Зарегистрироваться
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

frontend/src/pages/LoginPage.tsx

@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useAuthStore } from '@/store/auth'
+import { marathonsApi } from '@/api'
 import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
 
 const loginSchema = z.object({
@@ -15,7 +16,7 @@ type LoginForm = z.infer<typeof loginSchema>
 
 export function LoginPage() {
   const navigate = useNavigate()
-  const { login, isLoading, error, clearError } = useAuthStore()
+  const { login, isLoading, error, clearError, consumePendingInviteCode } = useAuthStore()
   const [submitError, setSubmitError] = useState<string | null>(null)
 
   const {
@@ -31,6 +32,19 @@ export function LoginPage() {
     clearError()
     try {
       await login(data)
+
+      // Check for pending invite code
+      const pendingCode = consumePendingInviteCode()
+      if (pendingCode) {
+        try {
+          const marathon = await marathonsApi.join(pendingCode)
+          navigate(`/marathons/${marathon.id}`)
+          return
+        } catch {
+          // If join fails (already member, etc), just go to marathons
+        }
+      }
+
       navigate('/marathons')
     } catch {
       setSubmitError(error || 'Ошибка входа')

frontend/src/pages/MarathonPage.tsx

@@ -34,9 +34,14 @@ export function MarathonPage() {
     }
   }
 
-  const copyInviteCode = () => {
+  const getInviteLink = () => {
+    if (!marathon) return ''
+    return `${window.location.origin}/invite/${marathon.invite_code}`
+  }
+
+  const copyInviteLink = () => {
     if (marathon) {
-      navigator.clipboard.writeText(marathon.invite_code)
+      navigator.clipboard.writeText(getInviteLink())
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     }
@@ -229,16 +234,16 @@ export function MarathonPage() {
         </Card>
       </div>
 
-      {/* Invite code */}
+      {/* Invite link */}
       {marathon.status !== 'finished' && (
         <Card className="mb-8">
           <CardContent>
-            <h3 className="font-medium text-white mb-3">Код приглашения</h3>
+            <h3 className="font-medium text-white mb-3">Ссылка для приглашения</h3>
             <div className="flex items-center gap-3">
-              <code className="flex-1 px-4 py-2 bg-gray-900 rounded-lg text-primary-400 font-mono">
+              <code className="flex-1 px-4 py-2 bg-gray-900 rounded-lg text-primary-400 font-mono text-sm overflow-hidden text-ellipsis">
-                {marathon.invite_code}
+                {getInviteLink()}
               </code>
-              <Button variant="secondary" onClick={copyInviteCode}>
+              <Button variant="secondary" onClick={copyInviteLink}>
                 {copied ? (
                   <>
                     <Check className="w-4 h-4 mr-2" />
@@ -253,7 +258,7 @@ export function MarathonPage() {
               </Button>
             </div>
             <p className="text-sm text-gray-500 mt-2">
-              Поделитесь этим кодом с друзьями, чтобы они могли присоединиться к марафону
+              Поделитесь этой ссылкой с друзьями, чтобы они могли присоединиться к марафону
             </p>
           </CardContent>
         </Card>

frontend/src/pages/RegisterPage.tsx

@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useAuthStore } from '@/store/auth'
+import { marathonsApi } from '@/api'
 import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
 
 const registerSchema = z.object({
@@ -27,7 +28,7 @@ type RegisterForm = z.infer<typeof registerSchema>
 
 export function RegisterPage() {
   const navigate = useNavigate()
-  const { register: registerUser, isLoading, error, clearError } = useAuthStore()
+  const { register: registerUser, isLoading, error, clearError, consumePendingInviteCode } = useAuthStore()
   const [submitError, setSubmitError] = useState<string | null>(null)
 
   const {
@@ -47,6 +48,19 @@ export function RegisterPage() {
         password: data.password,
         nickname: data.nickname,
       })
+
+      // Check for pending invite code
+      const pendingCode = consumePendingInviteCode()
+      if (pendingCode) {
+        try {
+          const marathon = await marathonsApi.join(pendingCode)
+          navigate(`/marathons/${marathon.id}`)
+          return
+        } catch {
+          // If join fails, just go to marathons
+        }
+      }
+
       navigate('/marathons')
     } catch {
       setSubmitError(error || 'Ошибка регистрации')

frontend/src/store/auth.ts

@@ -9,21 +9,25 @@ interface AuthState {
   isAuthenticated: boolean
   isLoading: boolean
   error: string | null
+  pendingInviteCode: string | null
 
   login: (data: LoginData) => Promise<void>
   register: (data: RegisterData) => Promise<void>
   logout: () => void
   clearError: () => void
+  setPendingInviteCode: (code: string | null) => void
+  consumePendingInviteCode: () => string | null
 }
 
 export const useAuthStore = create<AuthState>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       user: null,
       token: null,
       isAuthenticated: false,
       isLoading: false,
       error: null,
+      pendingInviteCode: null,
 
       login: async (data) => {
         set({ isLoading: true, error: null })
@@ -77,6 +81,14 @@ export const useAuthStore = create<AuthState>()(
       },
 
       clearError: () => set({ error: null }),
+
+      setPendingInviteCode: (code) => set({ pendingInviteCode: code }),
+
+      consumePendingInviteCode: () => {
+        const code = get().pendingInviteCode
+        set({ pendingInviteCode: null })
+        return code
+      },
     }),
     {
       name: 'auth-storage',
@@ -84,6 +96,7 @@ export const useAuthStore = create<AuthState>()(
         user: state.user,
         token: state.token,
         isAuthenticated: state.isAuthenticated,
+        pendingInviteCode: state.pendingInviteCode,
       }),
     }
   )

frontend/src/types/index.ts

@@ -70,6 +70,15 @@ export interface MarathonCreate {
   game_proposal_mode: GameProposalMode
 }
 
+export interface MarathonPublicInfo {
+  id: number
+  title: string
+  description: string | null
+  status: MarathonStatus
+  participants_count: number
+  creator_nickname: string
+}
+
 export interface LeaderboardEntry {
   rank: number
   user: User